Pagination vs Infinite Scroll
We all know that infinite scroll is the hotness 🔥. We are so familiar with this pattern from our copious hours of training from our favorite social media apps. So if infinite scroll is the new new, can we safely kill off pagination? Is this pattern already dead? If not, why not?
Pagination
Pros 👍
- The most familiar way to navigate data
- Comprehend the total scope of content
- A mental sense of progress
- Jump to the beginning
- Jump to a specific page
- Jump to the end
- Refer to a result living in a specific page number
- Faster browser performance
- A fixed height can allow for multiple lists on one page and avoid accidental scrolling
“With pagination, there is a beginning and an end. People can anticipate the effort required to scan the page. There is a happy sense of completion when a page is reviewed. Pagination gives people control to decide whether or not to continue to the next page. The choices on smaller pages are easier to evaluate because fewer options feel less overwhelming.”
- Nielsen Norman Group
Cons 👎
- Requires clicking a button (sometimes hidden below scroll)
- Limits the number of records available on the screen at one time
- Counting results and pages can be a costly/slow server operation
- “Select All” becomes unclear. Selecting all on this page? Or all total records?
- There can be many more challenging UX use cases to solve for unless you use a pre-built plugin
Infinite scroll
Pros 👍
- One less UI chrome cluttering up your interface
- Less competition to comprehension of content
- Effortless one-handed interaction on mobile. Can scroll either vertically (Think Twitter) or horizontally (Think Tinder)
- F.O.M.O. for the next unseen result
- Preloading upcoming results can reduce friction to consume more content (Think social media feeds or Netflix auto-play)
Cons 👎
- Can quickly choke performance on browser to maintain all the loaded data
- Easier to do with gestures on mobile than mouse on a desktop
- If you have multiple lists on a single page, you won’t be able to scroll to load
- No way to jump down the list
- Accessibility concerns while navigating on a keyboard
- The scroll bar doesn’t accurately refelect your real progress and isn’t comfortable to use
“Endless scrolling is not recommended for goal-oriented finding tasks, such as those requiring people to locate specific content or compare options.”
- Nielsen Norman Group“locating a previously found item on an extremely long page is inefficient, especially if that item is placed many scrolling segments down.”
- Nielsen Norman Group
TLDR, Which one do I need? ⚖️
Q: Are you hunting down a specific result or comparing results?
A: Pagination
Q: Are you casually browsing content?
A: Infinite scroll
Q: Are you designing for a mobile device?
A: More likely infinite scroll
