Category: Digital

Designing Above the Fold: Does it Matter?

Summary: Above the fold design can give you up to a 5% lift, but only if you don't bend other quality design principles. Below the fold, size doesn't matter -- users will scroll if they are engaged. A scrolling page with clear messaging is better than "squeezing" content above the fold. My personal opinion -- informational pages lend themselves to scrolling. Transactional pages are better chunked up into bite-sized pieces -- multiple pages with clear messaging on the steps in the process.

An interesting study from ClickTale gives detailed behavioral patterns related to scrolling. Some takeaways:

When did above-the-fold design become important?

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. Source

ClickTales's research was based on data that collected from a subset of about 120,000 page-views dated November 2006 to December 2006 to analyze vertical scrolling behavior. General findings were:

  • 91% of pages are long enough to require scrolling.
  • The average location for the fold is between 430 and 860 pixels down on the page.
  • 76% of people will scroll below the fold.
  • 15-22% of people will reach the bottom of the page.

Based on this and other studies, ClickTale gave the following 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. Source

Another article commenting on the ClickTale data had this to say:

As the ClickTale article suggests, people are scanning and skimming a page's content regardless of its size. Web developers should back away from trying to squeeze content toward the top of a page in order to supposedly make it easy to scan. Using proper amounts of white space, headers and sub-headers, along with bolded text and bullet points increases a page's scannability for all personality types.

When it comes to critical elements, like calls to action, you don't want 5% of visitors not seeing it. Pages have more power when they stick to one main idea per page. And remember, copy should be long enough to cover the essentials but short enough to be interesting. A site will generally get better search rankings by having highly relevant links from page-to-page. So, there are advantages to leaning toward shorter pages, but don't sacrifice clear page design and layout to squeeze a few pixels off of a page's length.

So was there any difference at all? Yes:

But keep in mind, shorter pages did perform slightly better. “Almost identical percentages of page views (15%-20%) reach the page bottom regardless of page height.” While the data was fairly similar regardless of the page length, shorter pages were closer to the 20% range. source

Based on this, one might conclude that an all-above-the-fold page would perform 5% higher than a similar, have-to-scroll page. More importantly though, the essential selling points and call-to-action should be above the fold. If you can engage the user and sell them on continuing the process (whether it is buying a product, or taking the next step in a survey, or any desired behaviou) they will continue down the page.