Also known as: Infinite Scrolling, Infinite History, Endless Pageless, LiveGrid
What
Load more content when user scrolls down and is near the bottom of a list or page.
Example video
Embedded calendar in Google Sites.
Use when
- 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.
Why
- 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.
How it works
- 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.
Criticism
- 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.
- If the user doesn’t have a scroll wheel, scrolling gets difficult.
History
This pattern was created by Janne Lammi. It is inspired by Pete Forde’s article ‘Endless Pageless: No More Next Page’.
Pattern Gallery
Show Your Pattern Examples Here!
Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:
More photos in Flickr group "UIPatternFactory.com" tagged with endless-scrolling
VIdeo doesn't seem to work after 7 secs
It is now fixed. Thanks for letting me know about the problem with the video!