Recently, web usability consultant Jakob Nielsen conducted a study on how scrolling web pages affect attention spans of Internet users. He stressed the importance of keeping your most relevant and vital information within a page’s initially viewable area, otherwise known as “above the fold”.
Above the Fold
This term comes from the newspaper industry; important headlines and photographs are printed on the upper half of the front page (above the fold) in order to attract attention. The same concept applies to webpages. According to the 2010 study, Internet users spend about 80% of their time looking at information above the fold, the area of a web page that is visible without scrolling. The remaining 20% is thereby allocated to the content below the fold. Therefore, content that is most important to your business goals should be at the top of the page.
The Scrolling Movement
Usability studies conducted during the Web’s first years showed that users just didn’t scroll, mostly because it wasn’t necessary at the time. Dialog boxes and HyperCard stacks were standard, and they didn’t require scrolling. It wasn’t until 1997 that users had acclimated to scrolling on the Web.
Today, users will and do scroll; website designs that implement long pages and promote scrolling are trending in popularity. However, there is a reason you shouldn’t ignore the fold. Endless pages may work for a blog, but they are still a tricky business due to our limited attention spans. On the whole, we prefer websites that get to the point quickly, with less work on our part. As a visitor scrolls below the fold, the reluctance to read more words increases and their viewing time of the page decreases sharply.
Gaze Plots and Behaviors
Of course, there are exceptions and users occasionally do read an entire page. This is rare, however, and it is more common that we see one of the behaviors illustrated in the following gaze plots:
These gaze plots show where each user looked while visiting the page. Each blue dot represents one fixation, with bigger dots indicating longer viewing time.
#1: Amazon’s Customer Reviews Page – The gaze plot shows that the user hastily scrolled down this page until he came across an interesting comment. This viewing pattern is common for well-designed FAQs, where a user will scroll until he finds a question that he needs an answer to.
#2 & #3: JCPenney Shopping Results & Typical Web Page – These gaze plots display common scrolling behaviors, with intense viewing of the top of the page, moderate viewing of the middle, and a cursory viewing of the bottom.
Is Your Web Site Fuel Efficient?
Imagine that a web user arrives at a web page with a certain amount of fuel in their tanks. As they “drive” down the page, they use up gas; eventually they will run dry. Depending on each user’s level of motivation and interest in each page’s specific topic, the amount of gas in the tank will vary. However, the “gasoline” might evaporate if content down the page is less relevant than the user expected.
The Recency Effect
In Nielsen’s study, it was shown that viewing time increased significantly at the very bottom of the web page. This is attributed to the recency effect, which states that the last thing a person sees will stay on their minds longer. Although the first few items are unquestionably the most important, do not neglect the endings of your pages, because the last element often attracts additional attention.
Scroll Vs No Scroll
While you could limit yourself to bite-sized pages, having some information below the fold can be effective. In fact, if you are featuring an article, it is almost always better to present it as a longer page as opposed to splitting it across multiple pageviews. Consider whether it is easier for users to simply scroll down the page or clicking and waiting for the next page to load.
Do not force users to scroll horizontally. Horizontal scrolling does not come naturally to most web users. Make sure that your website is responsive and uses a liquid layout that automatically adjusts to the browser width.
Information Foraging Theory
This theory asserts that Internet users are constantly making decisions on whether they should continue along a path, perhaps a scrolling path down a page, based on the current content’s ‘information scent’. When the information scent grows weaker, the users will move to a different information source. In other words, users will scroll below the fold only if the information above it gives them sufficient reason to expect useful additional information on the rest of the page.
How to Keep Internet Users on Your Web Page
• Keep your most important, eye-catching information at the top. Think of how newspaper editors generate attention-grabbing headlines for the top news stories.
• Choose a layout that encourages scrolling. Consider adding click-to-scroll functionality or links to target locations within the same page.
• Keep paragraphs short and easy to read. Divide content into lists and subheadings.
• Make sure to put some time into carefully crafting nice morsels for the very bottom of your pages. By inserting a good call-to-action or relevant content, you can drive up conversions and keep users engaged.
Data and images taken from: http://www.nngroup.com/articles/scrolling-and-attention/