Should you use infinite scroll instead of pagination to load more content? / by Mike Takahashi

Recently I've been noticing more high profile sites implementing a technique known as infinite scroll or a "load more" type button for pagination.  Instead of using the more traditional approach like "<< Prev   1  2  3   Next >>", this technique continuously loads more content as the user scrolls down a web page or selects an action button such as "more." Let's take a look at a few sites that implement this technique.

CSSline uses infinite scroll to display a list of websites and has a nice UI feature that alerts users when more sites are being loaded.

Screenshot of CSSline

Twitter uses an action button called "more" to load more tweets.

Screenshot of Twitter

Google Images, one of the most recent sites to implement this, uses both infinite scroll and an action button.  After scrolling for a certain number of results, it stops and you are given the option to "Show more results" to continue.

Screenshot of Google Images

Which technique should you use?

So should you use infinite scroll or pagination? More importantly, how does this impact usability? One could argue that infinite scroll gives users no context of the end or how much content exists, and that no context is bad. Conversely, you could argue that you shouldn't force the user to ask for more content.  Just give it to them. Some implementations also have issues with the back button when users try and get back to the results after clicking on a link (note this can be solved using JavaScript). I'd love to see a study done by Jakob Nielsen. [Update Feb 3, 2014 - Nielsen has finally commented on infinite scrolling.]

Context matters

It also depends on the context of your design and how that content is delivered. As Marissa Mayer of Google explains, the content that is being displayed is a determining factor. Google Images uses infinite scroll because users are able to scan and process images much more quickly than text. Reading a search result takes much longer. This is the reason why their main search results still use the more traditional pagination technique.

ESPN is another example of use within context. Under their "News Feeds" for football teams, the "more" button is used to load more content only within that section of the page. Think of it as an iframe with no scroll bar. However, the main search results for ESPN still implement a traditional pagination technique.

Screenshot of ESPN

Listen to your users

Infinite scroll should not be thought of as a replacement for the traditional pagination.  As always, the key is to listen to what your users are saying and doing as well as the context of what you are trying to deliver.  When Digg recently launched their redesigned website, it implemented the "more" button like Twitter.  Users quickly revolted and a more traditional pagination was quickly brought back.

[Update Jan 7, 2013 - Dan Nguyen has a nice write up on a recent talk by Dan McKinley, principal design engineer at Etsy, on why an implementation of infinite scroll within Etsy's search results failed.]

Additional resources

Infinite Scrolling Best Practices - UX Movement

Other posts you might like...

Online review ratings: 5 stars or like/dislike?Using Facebook’s ‘Like’ button to drive web traffic