Content is in excess across the internet, and finding a proper way to present this content (with user experience in mind) is a good foundation for creating products that hook your audience.
Pagination and infinite scroll are two common approaches used in web design to display large collections of similar content to a user. Both methods have use cases where they thrive and, conversely, other scenarios where they’re not as effective.
In this post, we’ll analyze the two approaches and learn how to make the right decision for the best user experience in our apps.
Pagination is the process of dividing content to be displayed across a site (or application) into discrete pages. By separating content this way, users can easily sift through your material while having the option to go back and forth between pages, searching for their desired result.
LogRocket’s blog landing page is an example of a well-paginated interface:
The pagination system at the bottom allows users to traverse content easily, from the front page of the blog up to the last page. I think we can agree that this approach can make the browsing experience somewhat akin to reading a book; hence the term “pagination” like turning physical pages.
Generally, pagination is known to be a fitting approach when designing interfaces for goal-oriented tasks — like displaying the search results of a query.
Pagination also has other benefits including improved page load times, but we’ll cover all its ups and downs in a subsequent section.
Let’s now take a look at the competitor, infinite scroll.
Infinite scroll is a design pattern that continuously loads new content when a user scrolls down to the bottom of the page. The standout benefit of this approach is that it reduces interaction costs, allowing your user to arrive at new content without clicking Next or Previous buttons, like you would on a paginated interface.
The Pinterest app is a fine example of infinite scroll in action:
By continuously serving fresh content, Pinterest encourages its users to continue scrolling to see if the unfolding content satiates their search — or is better than a previous result already seen on the page.
Subsequently, this scrolling action increases the user’s engagement. The psychology behind this model’s success is better explained by the third step in Nir Eyal’s Hooked Model: variable reward.
Just like pagination, infinite scroll comes with its drawbacks, and in the following section, we’ll dive deep into the highlights and challenges of both approaches.
Now that we’re familiar with these two approaches to rendering content, we can delve into the pros and cons of both from the perspective of delivering a satisfying user experience.
Paginated interfaces offer a better layout for browsing through a website’s content. This makes it easier for users to achieve their desired task when they land on your product. Providing value to users in this way can convert them to customers of your product.
Paginated interfaces are great at providing a bird’s eye view of a website’s content. The paginated system alongside the footer provides a better navigation experience compared to infinite scroll. Also, pagination helps readers bookmark individual pages for later.
Paginated pages usually contain less content, resulting in faster page loads.
The manual (and repetitive) task of clicking Next, Previous, or numbered page buttons to arrive at new content can hurt user engagement.
Most users today have less time and many distractions calling their attention; having them take extra steps to find what they are looking for can easily drive them away.
When aiming to increase user engagement, a paginated interface isn’t the best bet. Because new content isn’t presented seamlessly to the user, it’s harder to hold their attention.
Generally, paginated pages hold less content. This can be frustrating for a user trying to quickly sift through content as they have to repeatedly open new pages to find it.
Increasing the number of results per page is a good fix for this problem — LogRocket’s blog page serves 24 posts before revealing the pagination system.
Conversely, infinite scroll is a favorable approach for mobile users. Scrolling down for new content is more convenient than opening results in new tabs.
Since scrolling is more intuitive to web visitors, it‘s easier for a user to browse through the site without making extra interactions to arrive at new content.
As previously explained, the continuous supply of content encourages users to spend more time on the site, thereby keeping them engaged.
Infinite scroll interfaces display a lot of assets to the user and make additional requests to a database to fetch more data. The load times are therefore dependent on the strength of your user’s internet connection (among many other things), and a poor connection can cause slow load times. Be sure to provide visual feedback with skeleton screens.
Creating a usable infinite scroll layout takes conscious effort. Many websites deliver underwhelming experiences that come in the form of an absent scroll-to-top button; keeping the footer out of view; and even worse, not saving the user’s scroll position when they click an item as they scroll.
We’ve all been there: you’re scrolling through search results on an ecommerce store and see an item you like on your screen. You click to examine it further but later realize you’re dissatisfied with the item. So you hit the back button to continue your search only to end up at the start of your search results.
Infinite scroll interfaces should always be designed with usability in mind. This shopping site is an example of a usable infinite scroll design with a Load More to keep the footer in view.
They also provide feedback on the user’s search progress by displaying the current amount of products viewed.
Both content layout approaches are promising, but it ultimately depends on the user experience design of your product. Are you aiming to increase user engagement? Does your product rely on user-generated content? Infinite scroll is known to be a better approach for these scenarios.
Or are you looking to help users complete goal-oriented tasks whilst delivering a satisfying navigation experience? Then pagination will solve this for you.
Personally, I have a proclivity for infinite scroll due to it being mobile-friendly and intuitive. But neither approach is overtly bad, and both methods can also be tweaked to perform better.
There are a variety of tools for implementing pagination and infinite scroll in your interfaces. No code tools like Webflow and WordPress have plugins you can use in their website builders. Here are some resources to get you started:
The JavaScript ecosystem also has popular packages for infinite scroll and pagination.
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.
Learn the concept of onboarding, the types there are, and its architecture as well as how to create an onboarding experience in B2B contexts.
This library of UX writing examples showcases how well-crafted writing can contribute to an intriguing and user friendly interface.
Drag and drop requires intentional design for each of its states. Otherwise, users will feel confused and frustrated.
Icons can play a critical role in communicating with your users. These best practices and principles will help you design effective icons.
Learn more →
