Endless Scrolling

Also known as: Infinite Scrolling, Infinite History, Endless Pageless, LiveGrid

Tags: navigation, showing data

The most common way to handle large data sets on websites is to use Search Pagination pattern. Endless scrolling provides an alternative way to get to additional content. When the user scrolls down the page or list and reaches the end of a page/list, more content is being loaded dynamically without a page refresh.

Embedded calendar in Google Sites.

What problem does the pattern solve?

  • There is a lot of data to be shown, and the user can’t predict where in the list the data he needs is.
  • The user doesn’t know exactly what he is looking for. This pattern is best for browsing information.
  • The data is dynamic, and bookmarking a set of results brings different results from day to day.
  • The user needs to select multiple items from the list. If the results would be paged, user can’t be sure would his selections remain selected after moving to the next page of results.

Note: Endless scrolling can be frustrating to the user, because he can’t know how far he needs to scroll until he reaches the end of the list or page. An alternative implementation of the pattern, which would help in this issue, is to calculate the height of the page/list when the page loads, but load the content as user scrolls down.

When to use it?

  • There is a lot of data to be shown, and the user can’t predict where in the list the data he needs is.
  • The user doesn’t know exactly what he is looking for. This pattern is best for browsing information.
  • The data is dynamic, and bookmarking a set of results brings different results from day to day.
  • The user needs to select multiple items from the list. If the results would be paged, user can’t be sure would his selections remain selected after moving to the next page of results.

Note: Endless scrolling can be frustrating to the user, because he can’t know how far he needs to scroll until he reaches the end of the list or page. An alternative implementation of the pattern, which would help in this issue, is to calculate the height of the page/list when the page loads, but load the content as user scrolls down.

How to use it?

  • Load more content while scrolling.
  • Start loading just before the user scrolls at the end of the page.
  • Show a progress indicator when more data is being loaded, but don’t lock up the UI.

Why to use it?

  • Scrolling is familiar and intuitive – just scroll down for more data.
  • It is better than paging for lists that the user can’t jump predictably forward.
  • It doesn’t ask the user whether he wants to see more content – it shows more data automatically and doesn’t interrupt user flow.
  • Scroll bar is always visible for the user, not hidden at the bottom as navigation controls would be.
+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (1 example)

Comments

  • Olivier July 23, 2010 11:31

    Some other examples :

    Google Reader
    http://www.google.com/reader/view/

    Aurgasm.us (music)
    http://aurgasm.us/

  • janne July 26, 2010 16:44

    Thanks for nice examples, we will be adding more samples shortly.

  • chapolito (www) Sept. 14, 2010 20:26

    http://lookbook.nu is a great example of this as well.

  • janne Sept. 15, 2010 00:18

    @chapolito Thanks! Btw, I just realized that URLs in comments don't get converted into HTML links yet, we'll fix that ASAP.

  • Matthijs (www) Nov. 19, 2011 15:01

    I always like http://www.bing.com/?scope=images