The Evolution of Scrolling

An ongoing debate regarding online scrolling behavior has continued for over a decade. Do users scroll? How far do users scroll? What types of content should go above the fold? Where is the fold? The answers vary. Users’ scrolling behavior has changed; meaning the best solution for displaying lengthy content has changed. Research shows that users have grown to be more comfortable with long scrolling pages and trying to squeeze all content above the fold could hinder usability1. Many popular sites have been redesigned to accommodate for long scrolling (e.g. Nordstrom, Google Images, Amazon, and Facebook).

Do users scroll?

For a long time it has been understood that users don’t scroll and that all essential content should appear above “the fold,” which is simply no longer true. (The fold is a concept adapted from the fold of a newspaper; many web designers and researchers use the term to describe the point on a web page where users would need to scroll to see the content below). Research shows that 76% of users scroll beyond the fold and about 22% scroll all the way to the bottom of the page1. Additionally, those who scroll to the bottom of a page do so regardless of page length.

Users will be more inclined to scroll down a webpage if the content is engaging and there are hints of additional content to be viewed by scrolling. An example of this is the placement of images or text that span the fold, forcing users to scroll in order to see the full content.

How far do users scroll?

The appropriate length of a page mostly depends on its content. Research suggests that it is best to show just 10 search results per page2; contrastingly, Google shows over 250 images per page upon an image search. For a typical ecommerce website with image-heavy pages, approximately 10-12 screens or fewer in length is common (e.g. Nordstrom and Zappos). When it comes to text-heavy sites, page length should be limited to just a couple screens and pagination should be used to view more content.

When designing a long scrolling page, certain conventions should be taken into account. As scrolling behavior and web conventions evolve, the back to top button has shown up less and less. However for pages exceeding a few screens in length, not having a back to top button could hinder usability. It is best practice to include a back to top button at the bottom of a long scrolling page3. Additionally, bold headings should be used to break up text-heavy pages; this helps the reader easily scan for relevant content and keep track of where they are in the text.

What goes above the fold?

When determining what goes above the fold, the key is to ensure the purpose of the site is clear and the primary navigation is visible prior to scrolling. There are some elements that, as best practice, should appear at the top of the screen (i.e. sign in and out links, a home button, company logo, a search bar, etc.).

Where is the fold?

The fold line becomes fuzzy as new web-enabled devices are released. Laptops, desktops, and tablets all have vastly differing screen resolutions. Furthermore, a web-enabled device on one platform could have different resolution from its competitors (e.g. an Acer laptop compared to an Apple MacBook). For laptops and desktops, the fold is most commonly at 430, 600, and 860 vertical pixels1.

There are a couple of methods for dealing with the “fold zone,” which could span a few hundred pixels4. One option is to show a single page element that is simply large enough to span the entire fold zone. Another option is to “incorporate various elements near the fold line that stagger up and down the page-this way there will always be something that spans the fold,” explains Nick Finck, UX Evangelist at Blink.

Summary

Users are scrolling more than they have in the past. It is still important to place critical page elements high on the page, but it is no longer necessary to show all page content as high on the page as possible. Instead, entice users to read further down the page by showing content spanning the fold zone. Lastly, when displaying content on a long scrolling page, it is important to include anchor points such as section headings, which allow users to keep track of their location. Users are evolving, thus page design must evolve with them.

Resources
  1. ClickTale (2007, October 5). ClickTale Scrolling Research Report V2.0 – Part 1: Visibility and Scroll Reach.
  2. Bernard, M., Baker, R., & Fernandez, M. (2002). Paging vs. Scrolling: Looking for the Best Way to Present Search Results. Usability News; Software Usability Research Laboratory, Wichita State University.
  3. Lennartz, S. (2008, November 27). A Short Story About “Back To Top” Links. Smashing Magazine.
  4. Tarquini, M. (2007). Blasting the Myth of the Fold. Boxes and Arrows

Similar Articles