Scrolling is an ancient method of reading and navigating through content. For instance, the oldest known printed book, The Diamond Sutra (dated to 868 A.D.), was presented in a scroll format. In our times, however, it is through the adoption of graphical user interfaces (GUIs), especially on smartphones, that scrolling has become a fundamental interaction method.
Many websites or apps entice users with vast amounts of content options (for example, e-commerce platforms like Amazon, big brands like Nike or Zara, or gamified knowledge apps like Duolingo). To keep a user engaged, these platforms offer multiple areas of scrolling information at any given time. This creates rectangular areas on the page. So, how a user interacts with other zones and columns of content can be thought of as a “pattern” (like in a Piet Mondrian painting).
Different scrolling patterns, depending on their characteristics, are well understood to have differing benefits, drawbacks, and ideal use cases. This makes matching the right scrolling pattern to its proper intended outcome essential. It is one of the most direct methods to influence the product experience of a user.
Familiarizing yourself with the types of scrolling patterns and using this knowledge judiciously can help you create design prototypes that engage but don’t overwhelm or fatigue users.
Depending on the direction of movement or specific design features, scrolling can be classified into the following types:
Vertical scrolling is scrolling along the Y-axis (up or down). This pattern meets user expectations as the most natural and standard navigation method. Due to this, it is also referred to as traditional scrolling. It is particularly well-suited to smartphones, where scrolling can be done simply by thumb flicks.
From the earliest times, the Xerox PARC lab (where the foundations of the GUIs system were laid), and right now, the scrollbar is used to show the part of the document that is in view. The rest of the document remains out of view and to the side. When scrolling is activated, the already viewed part disappears while new information is revealed.
Interestingly, the movement direction of the scrollbar can differ from the movement direction of the input device. A scroll moves down as we move towards the bottom of the document. The content, however, moves up.
So, vertical scrolling comes with several advantages but also a few potential drawbacks. Its ease of use can either bore or numb users to content in some cases. Important information can be missed when this happens.
Scrolling along the X-axis, or horizontal scrolling, is a more novel type of scrolling.
As it is slightly counter-intuitive, this pattern is reserved for situations where additional engagement from a user is required.
Horizontal scrolling has many use cases in interactive prototypes, such as scrolling through a carousel of images. Horizontal scrolling is particularly well suited for graphic-based information, such as clickable icons or images.
Thus, horizontal scrolling offers good potential for interactions, which require offering choices and inviting the user to make a choice.
Infinite scrolling, also known as endless scrolling, is a pattern where content continuously loads as the user scrolls across a page. This creates a seemingly endless stream of information. It eliminates the need for pagination and allows users to browse through large amounts of content without interruption.
Automatic scrolling and infinite scrolling are closely related concepts. Automatic scrolling refers to the specific mechanism by which new content is loaded in an infinite scroll setup. It’s the process of asynchronously loading fresh content as the user approaches the bottom of the page, typically triggered when the user scrolls beyond a certain point.
A negative outcome of this pattern, especially in the context of news feeds or social media, is content addiction or “doom-scrolling.”
Parallax scrolling is a highly dynamic method of displaying information. It works well with experiences that are intended to be immersive through the use of wide, panoramic images. The use of visual effects combined with 2D scrolling can create an illusion of depth and layers. This concept uses different background and foreground designs that move at different speeds to convey a seamless online story via the ever-present scroll bar.
The New York Times is known to create spectacular illustrated photo-journalistic long reads using this method. My favorite website that showcases the use of parallax displays is Google Arts and Culture.
Try to identify scrolling design patterns like the ones mentioned above. Do you see one that isn’t covered by the categories listed above? Maybe you can create your own!
Today, most interfaces integrate multiple types of scrolling patterns on one page. This allows flexible content presentation with both horizontal and vertical expansion.
It is important to keep in mind the nature of the content and the target audience. Consider user demographics when implementing the scrolling design. This understanding should be used to balance engagement across the scrolling patterns deployed.
Vertical scrolling, as mentioned, is the most natural way to present content. This pattern provides a seamless and intuitive way to consume content. Moreover, as a continuous flow from top to bottom, vertical scrolling is best used for infinite scrolling. This keeps users engaged for a longer period of time without getting tired. If the flow is not broken up, however, users can miss information that requires extra engagement.
Horizontal scrolling, on the other hand, cleaves vertical screen space by displaying content in compact, digestible chunks. Counterintuitive navigation that breaks user expectations increases attention in the short term. This allows the showcasing of secondary information without overwhelming the page.
Due to fatigue setting in, horizontal scrolling is not ideally suited for infinite scrolling as higher interaction demand costs extra mental and physical effort. It works great for the younger audiences of Nintendo’s Mario, though!
The choice of scrolling patterns should include considerations about device and platform constraints.
Vertical scrolling is the easiest to make responsiveness across different devices. It adapts perfectly to various screen sizes and resolutions and works exceptionally well on mobile and touchscreen devices. It simplifies navigation by eliminating complex menu structures. However, it is not ideal for all types of content, such as wide tables or panoramic images.
Horizontal scrolling, on the other hand, is thought to have a weak “information scent” – users can be uncertain about hidden content that they need to click to discover.
Finally, parallax scrolling uses a lot of system resources and bandwidth. It presents compatibility issues and may not work with older devices.
Scrolling presents potential accessibility issues, especially for users with motor impairments.
It may also be challenging for low-literacy users; elderly users and young children might struggle with scrolling interfaces to navigate precisely.
Moreover, mixed-scrolling directions and haphazard pattern creation can result in disorienting user experiences. It is ideal that scrolling patterns are aligned with user goals and based on convention.
Scrolling patterns are best applied utilizing the general principles of user experience design. For instance, careful content placement is necessary to ensure key information is visible early. Here, options can include putting the most important content near the top or leveraging the recency effect. Horizontal scrolling should be used sparingly to create contrast for secondary content. Long scrolling journeys should be broken up using animation or other similar features.
Of the cardinal errors is creating a design where the user is not aware that there is hidden content that requires action to be discovered. Scrolling options must be properly sign-posted through various techniques, such as arrow icons, half-displays, or sticky navigation.
Scrolling should be implemented thoughtfully, prioritizing user experience and content clarity. Manual control over the time needed to view the content should lie with the user, and scrolling should happen at a speed that avoids disorientation. Keyboard and accessibility compatibility should be ensured. Scrolling elements should work in contained and predictable ways.
Test for usability, responsiveness, and performance optimization (for example, using techniques like lazy loading). Scrolling is ideally used to enhance, not overshadow, the content. If the scrolling journey feels too long, pagination should be considered to make the content digestible for the user.
Scrolling influences engagement, navigation, content discovery, performance, and overall user satisfaction. An engaging scrolling pattern has a positive impact on user experience.
However, when users become tired or frustrated with the need to scroll excessively through content, scrolling fatigue occurs. This can negatively impact user experience and engagement.
Automatic scrolling loads content as a user scrolls. It is often used on websites and apps with a flat structure, such as social media feeds and news websites, where content is constantly updated. This type of scrolling can help users browse large amounts of information without clicking or waiting. Moreover, it can help expose a user to a large amount of information with minimal effort.
The distinction between “automatic” and “infinite” scrolling can be confusing. This is how I think about it. It is not possible to have infinite scrolling without some level of automation. However, just because a scroll pattern is automatic does not necessarily mean it will be infinite.
Pagination is good for limited data and getting users to their desired content quickly. It’s also more accessible and better for lists of finite results. However, it can be cumbersome on mobile devices. Minimal scrolling makes it easier for users to find what they are looking for and eliminates the need to scroll down– it is essentially just one page with no scrolling.
A tasteful scrolling design pattern is essential to create an interface that feels balanced and inviting. Scrolling patterns are one of the most direct methods to influence a user’s overall satisfaction and product experience. Matching the right scrolling pattern to its proper intended outcome is essential for smooth user journeys.
Scrolling can be classified into a few major types. Vertical scrolling has served users from the earliest days of GUIs. It remains the preferred method for most web and mobile interfaces due to its intuitive nature and flexibility. On the other hand, horizontal scrolling is great for engaging a user, particularly for making quick decisions based on visual clues. Infinite scrolling, seen commonly on newsfeeds and social media, is a type of bottomless vertical scroll, while parallax scrolling is great for dynamic content, such as illustrated long reads or splashy product launches. Automatic scrolling allows the incorporation of algorithms to generate or suggest content options.
Next time you are surfing the web or using an app, try to be mindful of the scrolling pattern design choices made by the development team. Does the placement of scrolling areas help the objective of the user? Is the direction matched to the function? Is there too much content causing fatigue? Were the scrolling options properly sign-posted?
It is important not to be very unconventional when creating scrolling patterns. Innovation must always be balanced with usability. Deviating substantially from user expectations and habits can result in confusion. User fatigue, responsive design, and accessibility are factors to be kept in mind while incorporating scrolling into a design.
Ultimately, scrolling is best to enhance, not overshadow, the content.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Getting users to complete their profiles can be tricky. This guide shows you how to design interactions that make the process smooth, engaging, and rewarding.
CX design is where branding meets user experience. In this blog, I talk about how it transforms every touchpoint into an opportunity to wow your customers.
Big products bring big challenges, but UX architects thrive on complexity. Learn how they craft user journeys, master IA, and guide teams toward cohesive UX.
No one likes making errors on important tasks. In this post, I share my personal best tips on how to design a double-check warning message UI that makes sure users skip those “oops” moments.
Learn more →
