Infinite Scrolling, Pagination Or ‘Load More’ Buttons?
Pagination is still the most popular way to load new items on a website. However, usability testing found “Load more” buttons combined with lazy-loading to be a superior implementation, resulting in a more seamless user experience.
Infinite scrolling, sometimes referred to endless scrolling, can be downright harmful to usability — in particular, for search results and on mobile. With infinite scrolling, , the user largely experiences the page as if all products are loaded at once (regardless of whether they actually see all of the products).
When infinite scrolling is implemented well, it can make for an incredibly smooth and seamless experience. The user can just scroll the list of products without any interruption. No interaction is needed — products simply appear as the user scrolls down the page.
It should come as no surprise, then, that subjects browsed vastly more products on websites with infinite scrolling than on websites with either pagination or “Load more” buttons. Infinite scrolling is ideal for quickly showing the breadth of an entire category; but because users aren’t naturally halted when scrolling, they tend to scan more and focus less on individual products on the list.
One of the benefits of the “Load more” and infinite scrolling implementations is that the product list grows, instead of results being replaced. “Load more” allows the user to compare more easily products across an entire list. Having one consolidated list of goods made it significantly easier for users to evaluate which products would be the best to navigate to and, consequently, increased the overall product discoverability rate.
So, which loading method should we use? Ideally, we should use multiple variations of “Load more,” as it turns out. Testing showed that no single method was perfect in all instances; different contexts warranted one of three different implementations of the “Load more” approach.
- Categories: Use a combination of “Load more” and lazy-loading
- Search: Use a “Load more” button with a dynamic number of results returned based on relevancy scores
- Mobile: Use the “Load more” button, but loading a lower number of products by default