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.
- What is pagination?
- What is infinite scroll?
- Pagination vs. infinite scroll
- Which approach is right for your design?
- Tools for creating paginated and infinite scroll interfaces
What is pagination?
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.
What is 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.
Learn more →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.
Pagination vs. infinite scroll
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.
Pros of pagination
It boosts conversion
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.
Superior navigation experience
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.
Improves page load times
Paginated pages usually contain less content, resulting in faster page loads.
Cons of pagination
Requires extra actions to arrive at new content
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.
It impedes user engagement
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.
Limited content per page
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.
Pros of infinite scroll
It’s a mobile-friendly approach
Conversely, infinite scroll is a favorable approach for mobile users. Scrolling down for new content is more convenient than opening results in new tabs.
Scrolling is more intuitive than clicking
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.
It improves user engagement
As previously explained, the continuous supply of content encourages users to spend more time on the site, thereby keeping them engaged.
Cons of Infinite scroll
Slower load times
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.
Usability issues
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.
Which approach is right for your design?
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.
Tools for creating paginated and infinite scroll interfaces
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:
- How to add infinite scroll to WordPress
- How to set up WordPress pagination
- Easy pagination in Webflow
- A guide to infinite scroll in Webflow
The JavaScript ecosystem also has popular packages for infinite scroll and pagination.
LogRocket: Analytics that give you UX insights without the need for interviews
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 — try LogRocket today.
