Unfolding the Fold (Insights into Webpage Scroll)

below the fold 300x211 Unfolding the Fold (Insights into Webpage Scroll)Web designers and usability professionals have debated the topic of web page scrolling since 1994. At the early days of the web, most users were unfamiliar with the concept of scrolling and it was not a natural thing for them to do. As a result, web designers would design web pages so that all the important content would be Above the fold or even worse, squeeze the entire page into the initial screen area. This practice of squeezing continues even today.

Nowadays, scrolling has become a natural practice in surfing the web. Scrolling is also associated with web 2.0 design because big, clear text and spacious clean content implies longer web pages.

In this post, we will demonstrate with charts and real data several behavioral patterns related to scrolling. So let’s start!

The Data

As always, this research is based on data that we collect with our service (ClickTale). We used a subset of about 120,000 page-views dated November 2006 to December 2006. In this research we will be analyzing only vertical scrolling behavior. The service records the height of the web pages, the height of the window and the bottom-most location the user scrolled to.

Global Statistics

  • 91% of the page-views had a scroll-bar.
  • 76% of the page-views with a scroll-bar, were scrolled to some extent.
  • 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.

These statistics demonstrate that the vast majority of web designers are designing pages with scrolling, that the majority of users do scroll and that a significant portion of them scroll all the way to the page bottom. While 22% may seem low at first, it is actually quite high as many page-views are repeat views where the visitors have previously scrolled all the way to the page bottom and are already familiar with the page. In addition, visitors often find what they are looking for near the beginning of the page and may not bother scrolling further down.

Do Visitors Scroll to the Bottom of the Page?

If we take a look at the next chart, we may reach the faulty conclusion that users don’t like to scroll far down the page. The chart shows how far down visitors reach in pixels (ScrollReach) when they scroll in pages with a scroll-bar:

scrollreachabs1 e1399477411559 Unfolding the Fold (Insights into Webpage Scroll)

It seems that most users only scroll 500 to 900 pixels (about one or two screens) and probably don’t scroll all the way to the bottom; however that’s the wrong conclusion. The reason that’s wrong is because user scrolling is highly dependent on the height of the pages being scrolled. This dependence is clear when one looks at the distribution of the height of the pages in the next chart:

pageheight1 e1399478234811 Unfolding the Fold (Insights into Webpage Scroll)

By eliminating this dependency and calculating the relative ScrollReach, we observe a completely different pattern. The following chart shows the distribution of the percent of the page visitors see as a fraction of the page height for pages with a scroll-bar:

scrollreachrel1 e1399478436780 Unfolding the Fold (Insights into Webpage Scroll)

The 100% bar clearly dominates all others and shows that 22% of the visitors scrolled all the way to the bottom.

Still not convinced? Maybe this distribution is only true for short pages. Not so, see the distribution for longer pages that are 4000 to 4100 pixels high:

scrollreach40001 e1399478738583 Unfolding the Fold (Insights into Webpage Scroll)

Obviously, this doesn’t mean people read the entire page, it just means that many (in this case 23%) scan it all the way to the bottom. And how much of the bottom of the page do they actually read? Let’s leave that for another time.

Are Long Pages Bad?

As shown in the previous section, visitors do scroll to the bottom of the page. But are they less likely to scroll to the page bottom if the page is really long? The answer is no, as can be seen in the next set of charts:

scrolledtobottom1 e1399478923231 Unfolding the Fold (Insights into Webpage Scroll)

Visitors are equally likely to scan the entire page no matter the page size.

scrolledto901 e1399479081582 Unfolding the Fold (Insights into Webpage Scroll)

Visitors are equally likely to scan almost the entire page (more than 90%) no matter the page size.

Yet another Reason to Unfold the Fold

Still, you may claim that it is a good idea to place the most important information above the fold of the web page, and, to some degree, you are correct. But where exactly is this fold? Unlike newspapers, the fold of a web page has no fixed location. Each user sees a different height of the viewable area depending on his screen size, window size, browser and browser add-ons. Let us confuse you even more by showing the distribution of the fold location in our data set:

fold1 e1399479163754 Unfolding the Fold (Insights into Webpage Scroll)

As you can see, the fold location is concentrated around three peak areas. The peaks are located at about 430, 600 and 860 pixels. Do you recognize these sizes? No? These fold sizes correspond to the three most popular screen resolutions used today: 800×600, 1024×768 and 1280×1024. Except that they are missing about 170 pixels that correspond to the most common size of the non-client area of the browser. The dispersion around these peaks is accounted for by variations in screen size, window size, browsers and browser add-ons. Newer, wide screen formats add even more dispersion to the distribution of the fold. Note that the highest peak, located at 600 to 610 pixels, accounts for less that 10 percent of the folds. So, where is the fold? It’s all over the place!

Recommendations

  • Don’t try to squeeze your web page and make it more compact. There is little benefit in squeezing your pages since many visitors will scroll down below the fold to see your entire page.
  • Since visitors will scroll all the way to the bottom of your web page, make life easier for them and divide your layout into sections for easy scanning.
  • Minimize your written text and maximize images, visitors usually don’t read text – they scan web pages.
  • Encourage your visitors to scroll down by using a cut-off layout.
  • Signup for the ClickTale beta program to gain insights about your website’s usability including visitor scrolling behavior.

Conclusion

Browser: Do not try and find the fold. That’s impossible. Instead… only try to realize the truth.
Designer: What truth?
Browser: There is no fold.
Designer: There is no fold?
Browser: Then you’ll see, that it is not the fold that matters, it is only yourself.

Note: Since posting the data in this article, we have collected and analyzed much more detailed information regarding scrolling behavior of visitors. The research below reveals information about the location of the fold as well as some basic information about visitors’ scrolling behavior.

For more advanced research about statistical models for page scrolling behavior and visitor attention at each point in the page, please see the more recent research we have published in 2007 (ClickTale Scrolling Research Report V2.0Â – part 1 and part 2).

Comments

comments