Pagination vs. Long Scroll: A Complete Guide

I had a curiosity about pagination in the e-commerce site so I tweeted this question.

I found some quite interesting responses that gave me an understanding of the mental models of users, especially for a task-driven platform.

Thanks to Hardik Pandya, Shrey Bhagat, Keshav raj, and Puru

Many responses were focused on user behavior and mental models only. This sparked my interest in revisiting some old Etsy and Amazon design papers from 2010s, specifically around pagination and long scrolling. The insights I uncovered were quite interesting, so I decided to document and share them. Let’s dive in!

Whether you’re designing for a B2B platform, a B2C e-commerce site, or a content-rich media platform, selecting the right navigation method can significantly impact user experience and engagement.

This guide will help you understand when to use pagination and when long scrolling might be the better choice.

We’ll dive into user behaviors, mental models, and practical scenarios to give you a comprehensive understanding of each approach.

Understanding User Behavior & Mental Models

Before choosing between pagination & long scroll, it’s crucial to understand your users’ behaviors and mental models.

Consider this as season 1 of Game of Thrones, this will all connect later down the line while making decisions.

Now that we understand the mental models, let’s move ahead in further seasons where we will dive deep specifically into paginations and long scrolls.

Pagination 📖

From the definition of POV, it’s a process of dividing content into distinct, numbered pages so that users can consume it in packets.

The decision of usage mostly depends on the mental models, so for your tool, if the users are going to have following mental models then paginations will be a preferable option.

1. 🎯 Purposeful — Users come to your platform for specific tasks and with specific goals.
2. 🕹️ Control — Users want a sense of control over what they want to see where they want to navigate and how much they want to consume at a single time.
3. 💪 Perception of Progress — Users will want to monitor their progress, enhancing motivation.

These are some major decision factors, and some other factors also favor paginations over long scrolls.

1. Data-intensive rows/cards — When each row, block, or card contains a significant amount of data, one should prefer pagination as it reduces cognitive load and prevents users from feeling overwhelmed.
2. Easier comparison — Pagination allows users to compare items more easily. Users often remember the page number associated with a product, enabling them to return directly to that page when comparing it with items found on subsequent pages.
3. Users are performing crucial tasks— Pagination allows users to process data systematically from one end to another end, ensuring they don’t miss any crucial entries.

Some examples

1. Amazon uses pagination in search results to manage the vast number of products for easy comparison between the products users find interesting on different pages.
2. Tools like Google Analytics use pagination for reports, allowing users to view data in manageable chunks and navigate between pages of data with ease.
3. Project Management Tools like Jira and Click-up use pagination to give a sense of progress.

Things to consider

Designing effective pagination is more challenging than it may appear. There are a lot of things that can uplift or hamper the experience of users while using pagination on any website. Let’s explore these elements in detail.

1. Page Length — Don’t keep your pages too short or too long, as shifting pages do take a regular effort in short pages, and long pages users can easily get overwhelmed by the amount of data.

2. Click the area of the Next Button—Don’t keep your pages too short or too long. Shifting pages takes regular effort on short pages, and users can easily get overwhelmed by the amount of data on long pages.

3. Don’t Use First and Last Links — The first and last pagination links are often unnecessary, as users typically prefer browsing content chronologically.

However, providing a link to the first page is useful, as it usually contains the most relevant content. To enhance usability, display the first-page link as ‘1…’, allowing users to quickly return without visually interfering with the navigation with repeated ‘previous’ clicks.

4. When to Display Page Numbers—Displaying page numbers in pagination is only helpful with necessary low double-digit pages, showing numbers can encourage users to explore to the end. For high double-digit pages, showing total pages is unhelpful since users can’t navigate them all. Consider using simple ‘Next’ and ‘Previous’ buttons for large page counts.

An exception exists for eCommerce sites, where page numbers help users revisit specific product pages and track their browsing progress effectively.

4. Paginating shortcuts —If you have more than 5 pages consider adding a shortcut to ease navigation. A simple press of the right arrow key takes them to the next page while the left arrow takes them back a page. However, users won’t know this feature is available unless you make a note of it on your site

Long/Infinite Scrolling 📜

From the definition of POV, it’s a process of providing a continuous flow of content.

We will use Mental models as our north star. The long scroll is preferred for following the mental models.

1. 🔎 Exploratory Browsing — Users come to your platform without a specific task to do in mind.
2. 🌀 Immersion — Content is delightful without much high cognitive load and users want to get immersed in the page content without any disturbance.
3. 🧗🏻 Effort Minimising — Users want to explore the content without much effort in loading new content every time.

These are some major decision factors, and some other factors also favor long scrolls over pagination.

1. User engagement is a North Star metric— A long scroll enhances exploration and users spend more time on the platform while keeping users immersed in the content.
2. Real-time updates — It allows users to see the latest updates at the top, ideal for chat apps or news feeds, eliminating the need for constant refreshing.

Some examples

• Platforms like Pinterest or Instagram use long scrolls to present a continuous stream of images and posts, encouraging users to keep exploring.
• News apps like Flipboard or Apple News utilize long scrolls to let users browse through articles effortlessly.
• Slack employs long scroll in chat windows, allowing users to view message history while keeping the latest messages visible at the top.

Things to consider

1. Load more button— If your platform contains knowledge material or any other entertainment content, consider implementing ‘Load More’ buttons or progressive loading to reduce cognitive load while preserving an immersive experience.

2. Navigation Cues: Include visual cues, such as “Back to Top” buttons or sticky headers, to help users navigate and understand their position in the content flow.

3. Performance Optimization: Ensure that content loads quickly and smoothly, especially for media-rich sites to enhance user experience.

4. Content Indicators: Provide clear indicators for new content or messages to help users stay aware of updates without disrupting their current view

Conclusion

Choosing between pagination and long scroll is more than just a design preference; it’s about aligning your navigation pattern with the user’s needs and context. Consider the nature of your content, the behavior of your users, and the platform they’re using to ensure you provide the best experience possible. ALWAYS FALL BACK ON MENTAL MODELS!

Valar Dohaeris! 🥷🏻