Scrolling For the Vertically Challenged

The recent hype surrounding the Apple iPad, Galaxy Tab, HP Slate and netbooks has sparked the need to test screen size usability. These small screen gadgets are raising the average fold line for many online businesses. To understand the impact this is having on webpage design and usability, baby reaching Scrolling For the Vertically Challengedwe at ClickTale decided to monitor the browsing behavior of our own vertically challenged visitors.

The Experiment

To run our usability experiment, we used the ClickTale Scroll Reach and Attention Heatmaps on a blog entry over 5000 pixels long. Our goal was threefold. We wanted to learn:

  • How far up did the average fold line climb amongst smaller screen users?
  • What content remained above the fold and, therefore, what did visitors see when opening up the page?
  • How far down were visitors willing to scroll down our webpage?


First, we determined the screen resolutions of standard netbooks out on the market today. A typical netbook has a 1024 x 600 pixel screen resolution, with newer versions reaching 1366 x 768 pixels. Since the scroll reach is dependent upon the vertical height of a screen, we included all small screens with height less than 800 pixels. We then selected all screen dimensions that matched this requirement on our screen size filter.

Screen Height < 800 pixels Vs. Screen Height > 1000 pixels

screen size filters Scrolling For the Vertically Challenged

We then compared the results for this group with those visitors using larger screens. The most popular screen resolution on the market today for large screens is 1920 x 1080, so we selected all screens with height greater than 1000 pixels.

The Results

Of those visitors with a vertical screen resolution of less than 800 pixels:

  • The initial fold was cut nearly in half!
  • 58.1% of visitors made it down to the central section of the blog post with an attention time averaging only 13 seconds.
  • 39.3% of visitors reached the “Recommendations” section of the post with an attention time averaging 19 seconds.

Screen Height < 800 pixels Vs. Screen Height > 1000 pixels

back to back fold2 Scrolling For the Vertically Challenged

Initial fold line of small screen users is cut in half when compared to larger screen users.

Screen Height < 800 pixels Vs. Screen Height > 1000 pixels

back to back upper2 Scrolling For the Vertically Challenged

20% more visitors continue to scroll when using larger screens!

We then compared these results to visitors viewing the same blog post with a larger screen, where:

  • 78.9% of visitors made it down to the central section. That’s 20% more visitors! And their attention time more than DOUBLED over that of small screen browsers, averaging 32 seconds.
  • 50.3% of visitors reached the “Recommendations” section (over 10% more than small screen browsers) with an attention time averaging 36 seconds, which also nearly DOUBLED that of small screen browsers.

Screen Height < 800 pixels Vs. Screen Height > 1000 pixels

back to back lower2 Scrolling For the Vertically Challenged

Large screen visitors’ attention time nearly DOUBLED over small screen users.

Bottom line: Small screen users don’t like to scroll. Despite the limited content the initial fold enables them to see, visitors using smaller screens are not inclined to scroll down on a webpage. This may be because, in addition to a smaller screen, netbooks also come with smaller mouse pads with which to scroll, making it quite a cumbersome task.

Recommendations

An expanding range of screen sizes does present difficult UI design choices. However, by implementing effective usability elements into your webpages, you can find a balanced solution that will ultimately benefit your bottom line.

As mentioned in previous blog posts of ClickTale when discussing the fold, some recommendations we propose include:

  • Dividing your layout into sections for easy scanning.
  • Adding one continuous vertical element to your webpages, such as a vertical line or shadowing that indicates continuing page content.
  • Reducing the amount of text and increasing the amount of images to pull eyes down towards lower content.

621370589 b845decfc8 Scrolling For the Vertically ChallengedThis is also suggested for blog entries as well. Strong images in blogs break up words and help generate curiosity for an otherwise uninterested visitor, such as this image we have conveniently placed above.

You may even want to consider creating an alternative URL dedicated to netbooks, as many online businesses have done to accommodate smartphone browsing.

Conclusion

It is essential to get a detailed understanding of visitor browsing behavior inside your webpages. Through the use of In-Page Analytics, website owners can get answers to specific online business questions, such as how to redesign a webpage for a small screen audience. Applying some best practices, as those mentioned above, can enhance your business performance and keep your website on top of growing tech trends.

Comments

comments