The cognitive science of website scrolling behavior

When designing websites, many assumptions are made about user scrolling behavior. We often presume others will act as we would, relying on subjective reasoning to predict actions. However, leveraging real data provides more accurate insights and helps avoid common biases.

A good foundation is to start by discussing the concept of cognitive load. This refers to the amount of mental effort someone uses to process information. Most often used in psychology and instructional design (e.g. corporate training and education), cognitive load affects how well people learn, solve problems, and make decisions.

There are three types of cognitive load patterns, but for purposes of this writing—particularly in the context of web design—the focus will be on reducing extraneous load. This refers to the unnecessary mental effort caused by poor design or distractions. Extraneous load occurs when encountering complex and cluttered layouts, confusing navigation, or excessive information that makes learning difficult. An example of this would be a website that is muddled with a plethora of advertisements, pop-ups, and poor navigation. These distractions force users to expend additional mental efforts to locate information, leading to frustration and website abandonment. Research supports this claim; studies show that 60% of users abandon websites due to a poor user experience^[1].

We find that Cognitive load theory (CLT) is highly relevant to web design because it helps designers create interfaces that minimize mental effort, make content consumption easier, and is responsible for more accessible and user-friendly websites. This is accomplished by implementing familiar UI patterns, clear navigation, and common visuals that reduce a user’s learning curve.

One specific user behavior that is quite natural is scrolling. Given the proliferation of mobile devices around the World and especially when accessing the Internet—63% of the Internet market share is mobile^[2]—scrolling has become second nature. Mobile devices are operated by hand gestures (e.g. using your finger to scroll) to navigate apps and websites. These gestures have become automatic. Unlike pagination where users must locate and click on a button, scrolling is instinctual, which is to say it reduces cognitive load.

In fact, scrolling has become so ingrained that back in 2011 Apple removed the scrollbar^[3] from Mac OS X (Operating System) entirely because users no longer need a visual cue to scroll. Research shows, among other things, that website content typically extends vertically and users will swipe up/down to access content, thus the indication of how to navigate is rarely needed.

What used to be a point of friction is today common and routine behavior. The idea that so much content needs to be crammed into the top of a webpage for fear users will not scroll is misguided. While the top of your website does still have a fairly significant impact, data collected from over 2 billion websites by Chartbeat show that 66% of attention on a normal page is spent below the fold^[4]. In fact, content below the fold is viewed for nearly three times as long as the top of the page, further illustrating that people scroll. Additionally, research indicates that 50% of all mobile users start to scroll within 10 seconds of landing on a website, and 90% scroll within 14 seconds.

Despite the prevalence of scrolling, the debate over “above the fold” content and how this relates to scrolling remains relevant. Past studies have shown that viewership peaks at the top of a webpage. However, recent studies indicate the first screenful captures 57% of page-viewing time^[5]. Back in 2010, this number was much higher—80% of viewing time was spent above the fold. Consequently, over the last decade we’ve witnessed a 29% decline in viewership in the first screenful.

These insights reinforce that users habitually scroll as part of their normal interaction when visiting a website and that much of the content that is lower down on the page is as important, if not more important, than what appears at the top.

However, there is a caveat to our understanding of scroll behavior. While users do initiate a scroll intuitively, they will not continue to consume content if it does not capture and keep their attention. In other words, users will scroll to find more information if you give them a reason to do so.

In essence, the following are all true: mobile device usage has grown significantly which has enabled scrolling to become second nature, users expect to find content vertically (e.g. lower down the page), devices now contain various viewport sizes making it difficult to assign a pixel value to the fold, and information density^[6] is lessened with good design principles. These facts reduce the emphasis on designing exclusively for above the fold content.

This is not to say that the top of a website is unimportant. Quite the contrary—it remains the first point of engagement. However, the idea that users won’t scroll if they don’t see everything immediately is outdated. If we apply intrinsic load theory here, which would require us to break complex content into digestible chunks, use clear headings and short paragraphs, and observe the F pattern^[7], we can infer that users who visit a webpage will naturally begin to scroll to find relevant content. Thus, page layout, navigation, and visual design become far more significant than fixating on a single viewport breakpoint (e.g. the fold). Users naturally seek cognitive efficiency, meaning they will minimize effort while maximizing the value they extract from a webpage using scanning techniques and…scrolling.

In summary, scrolling is now an instinctual behavior that does not need to be trained. The prevalence of mobile devices has diminished the importance of designing solely for above the fold, which has become almost impossible to define due to the surge of new devices and viewports. Instead, focus on engaging design, clear navigation, and well-structured content to encourage users to scroll naturally for relevant information.

---

---

---