Designing A Better Infinite Scroll

About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 176.000 folks.

Quick summary ↬ In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in “Smart Interface Design Patterns”, a 7h-video course with 100s of hand-picked examples, curated by Vitaly.

We’ve all been there. You might have a long-winded list of search results, products, orders or data entries. Of course, you have all kinds of filters and sorting and search already in place. However, you also need to help customers explore relevant entries, and to do so, you need to support and speed up browsing through entries.

Your natural design instinct might tell you to stay true to good old-fashioned pagination at first. Yet before you know it, you might start wondering if infinite scroll might be a good option to consider, given the very unique use case that you have. So is infinite scroll actually a good idea? Well, we all have strong opinions about infinite scroll, and usually not very good ones. This has a number of good reasons.

Problems With Infinite Scroll

The issues with infinite scroll are well-known. The most obvious one is the sheer amount of options on the page which is often too overwhelming and too difficult to manage. It really feels like drowning in an information abyss with no end in sight. No wonder that once the number of displayed options is beyond the comfortable range, a good number of users abandon the page altogether as a reaction to that.

Also, we don’t have any control over when and how many items appear on scroll. Just like there is no easy way to navigate between the “old” and “new” segments of the infinite scroll as they all fall into the same stream of items. Once you scroll up and down a few items, it’s hard to see immediately what we have seen already and what we haven’t seen yet — unless we meticulously scan through the last few items a couple of times.

Pagination vs. infinite scroll. An old discussion, without a clear winner
Pagination vs. infinite scroll. An old discussion, without a clear winner. Image credit: Yogev Ahuvia (Large preview)

Sometimes the URL in the address bar changes on scrolling, but more often it does not, leaving us out there starting all over again if we want to continue browsing later. And if we want to send the URL to ourselves or to our loved ones to explore a particular set of items at once, that’s usually painful as we can’t really bookmark a location in the list.

Should we want to reach the footer, every time we scroll, we need to scroll just a little bit faster to get a miraculous chance to reach the footer before the new stream of items comes in. Sometimes users find themselves taking on a scrolling challenge while hitting Esc at the same time — to cancel the infinite scroll just in time. (Usually unsuccessfully.)

On top of that, infinite scroll breaks the scroll bar as the user’s expectations of the page length have to be recalibrated with every scroll. The scrollbar is a promise of how lengthy the page actually is, but with newly loaded items, the promise is always faulty. Not to mention accessibility issues of announcing the newly loaded items properly to screen readers as well as performance issues on choppy connections.

All of the issues listed above are just poor usability. So it’s not surprising that we often disregard infinite scroll as a fashionable technique that produces more problems than solutions. And it’s not surprising that as designers, we tend to use other options instead: pagination and “load more” buttons.

Pagination and “Load More”

We can avoid all infinite scroll issues by falling back to the usual suspect: pagination. And it has plenty of benefits. With it, the user always has a clear beginning and a clear end. As users finish a page and move to the next one, there is a very clear “cut” of what has and what hasn’t been seen yet, along with a sense of completion during that navigation.

Pagination as displayed on the Thinkific website
Perhaps a bit old-fashioned, but very reliable: pagination on Thinkific.com. (Large preview)

Plus, there is a sense of control how much data is being displayed on a given page (usually with controls to change the number of items per page), the URL is different for every page, the footer is easy to reach and the options appearing on pages are easier to manage.

Unfortunately, in usability tests, sometimes pagination doesn’t perform well at all. It’s much more predictable and easier to manage, but also much slower compared to infinite scroll, so users often browse significantly less and often feel “slowed down”. There seems to be more time spent on the first few pages, and filters and sorting are used more often in that time, but compared to infinite scroll, they view fewer items in total and are often less engaged.

If we want to keep the benefits of pagination but avoid overwhelming users with infinite scroll, we can use a “Load more” pattern instead. With it in place, as users start scrolling, eventually they can choose to load more items on tap or on click. In some implementations, as users start scrolling down, more items appear automatically at first, but then the “Load more” button appears, once a certain threshold is reached.

A pair of on-ear headphones displayed on a product page
“Load more” pattern in use, on Crutchfield. On the first few scrolls, new items appear automatically. The “Load more” button starts appearing only when user reaches 58 items. (Large preview)

For example, we could display 10–30 products on the initial page load (10 on mobile, 30 on desktop). When the user reaches the end of the listing, we can use automatically fetch the next 10–30 products. When the user reaches 30–70 items, we then switch to “Load more”. We also provide an option to go back with the “Back” button, so users always have a sense of control about where they navigate.

A screenshot of a product page showing on-ear headphones to which you can send yourself or anyone else a link to an email address to continue at a different time or day
We could allow users to send a link to the current position in the list and continue browsing later. A mock-up, based on Crutchfield UI. (Large preview)

We could also provide an option to continue browsing later by allowing users to type in their email and get a link that later would bring them to the position in the list where they currently are. This solves the problem of not being able to continue browsing later, perhaps on another device, or at a different time.

“Load more” works very well in eCommerce — users have control of what they see as all items appear on a single page and the footer is always in reach. Plus, if the URL is changed every time a user hits the “Load more” button, we bring together the speed of infinite scroll with the comfort and security of pagination. Users do seem to be browsing more and are more engaged. This makes this pattern a good option to consider for lengthy lists.

Does it mean that we can abandon infinite scroll altogether? Not necessarily. An important benefit of infinite scroll is the speed of displaying results — displaying new items just when users want to see more. As it turns out, there are a few techniques and strategies to make infinite scroll better. But it requires solving all of the issues we’ve outlined earlier.

Bookmarking The Position In The List

The easiest way to improve infinite scroll is by marking the breaks between “new” and “old” items in the list. When a new batch comes in, we separate the items visually and allow users to mark the position in the list from which they want to continue browsing later. We could also allow them to see all products they’ve seen on a separate page, so they can separate viewed options from the infinite stream of all options. An example of this interaction is displayed below.

An example of a product page showing two different pairs of cover-ear headphones
Adding enough whitespace between “new” and “old” segments in the list, and a button allowing users to continue browsing later. A mock-up, based on Crutchfield UI. (Large preview)

Once a user clicks on the “Continue here later”, we could either show a checkmark and store the position in the browser, or display a modal asking users for their email address.

A product image of over-ear headphones
A pop-up showing up when a user wants to continue browsing later. A mock-up, based on Crutchfield UI. (Large preview)

Alternatively, we could display the newsletter box directly, allowing users to copy a link to the current position on the page as well. As a positive side effect, this also gives us an option to collect users’ emails to send them a reminder about new items later.

A product image of two pairs of over-ear headphones
Changing the wording to 'Copy a link to this position in the list'. A mock-up, based on Crutchfield UI. ()">
Footer reveal, with a button showing and hiding footer when needed. (Large preview)

Combine Pagination and Infinite Scroll

As users scroll down a page and items are loaded in, we can present it as dynamic pagination to users (see Pepper.pl). On scroll, the URL of the page changes, and the page number is updated in the sticky bottom bar. Users can also navigate to a specific page in a pagination drop-down. And of course, an accordion opens up a footer on tap or click as well. Check the video example.

A screenshot of three products displayed at the bottom of the site’s page
Combining pagination and infinite scroll in one — along with a sticky footer at the bottom of the screen. Pepper.pl (Large preview)

What do we do with the “Back” button though? For example, once a user has browsed through “pages” 1, 2 and 3 and now has landed on “page” 4, should a click on a “Back” button bring them from page 4 to page 3, or to the previous page that they visited before getting to the page 1 in the first place? In general, we probably don’t want to pollute users’ browsers’ history by adding every step of the infinite scroll in there. So selecting a specific page with a drop-down is indeed a good idea.

A screenshot of a product page with the page numbers displayed below
Users can jump to specific pages, while using infinite scroll during browsing. Perhaps a drop-down chevron next to current page number would make it a bit more obvious. Pepper.pl (Large preview)

A great example of combining pagination and infinite scroll in one place; the only refinement could be slightly better focus styles and better navigation jumps for accessibility. Additionally, it would be fantastic to add some sort of a drop-down chevron next to the current page to make it obvious that one can actually jump to a specific page. The “Back” button, then, would bring the user back to the page from which they came to the list they have in front of them at the moment.

Scrollbar Range Intervals

Another useful technique is suggested by Baymard Institute, a research company for testing eCommerce sites. The idea is to make scrollbars more helpful by adding dynamic labels that are spaced out vertically. These would indicate to users where they currently are and where they can jump to. As users keep scrolling down, the labels would be shifting as the scrollbar is growing. Could be used by any criteria a user has chosen to sort the items by.

An example of dynamic pricing labels shown on the product page
If users sort by price, we could display dynamic pricing labels next to the scrollbar. Image credit: Baymard Institute. (Large preview)

Pinning Sections on a Mini-Map

We could make it even more useful by allowing users to pin, or bookmark, areas of interest in the list, so they can return to favorites faster. An interesting prototype of such an experience is Minimap experiment (currently works only in Firefox), created by Rauno Freiberg, along with many other wonderful experiments.

A screenshot of text on screen where users can mark and pin particular parts of the text to jump to anytime
A .

Smart Interface Design Patterns
Meet Smart Interface Design Patterns, our new video course on interface design & UX.

100 design patterns & real-life examples.
7h-video course + live UX training. .

Useful Resources

If you find this article useful, here’s an overview of similar articles we’ve published over the years — and a few more are coming your way.

slots empire bonus codes
 Editorial (il)