Continuous Scrolling Design pattern

Problem summary

The user needs to view a subset of data that is not easily displayed on a single page

Example

ContinuousScrolling

Usage

  • Use when there are more data to show than what would fit on a normal page
  • Use when navigating to a second page of data takes away too much attention from the content

Solution

In contrast to the Pagination patterns, the Continuous Scrolling pattern has no natural break. When using pagination patterns, a decision to only show a subset of data at a time and then let the user request more data if wanted is chosen. With the Continuous Scrolling, new data is automatically retrieved as the user has scrolled to the bottom of the page. It thus appears as if the page has no end, as more data will be loaded and inserted into the page each time the user scrolls to the bottom of page.

Rationale

The problem with using pagination for browsing between subsets of data is that the user is pulled from the world of content to the world of navigation, as the user is required to click to the next page. The user is then no longer thinking about what they are reading, but about how to get more to read. This breaks the user’s train of thought and forces them to stop reading. Using pagination creates a natural pause that lets the user reevaluate if he or she wants to keep going on or leave the site, which they a lot of the time do.

It can be argued that Continuous Scrolling can be frustrating for the user, as there is no natural pause. The user will ask himself: When am I done reading?

More example images of the 'Continuous Scrolling' pattern

  • ContinuousScrolling

    When you scroll to the bottom of the page at DZone.com, a load indicator tells you how much time you'll wait until the next news items have finished loading.

  • facebook.com

    The updates feed in the account home at facebook.com features a soft version of the continuous scrolling - or pagination - where the next results aren't loaded automatically, but on clicking the "Older posts" link. Instead of linking to a new pagination page, the next items are pasted in the bottom of the page.

27 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 138 votes, 80.43% like this one.

Example images

  • ContinuousScrolling
  • facebook.com

Is also called...

See it in action