Pagination and Infinite Scroll
Pagination separates large bodies of content into separate pages accessed via a shared index of links while Infinite Scroll separates large bodies of content into separate sections accessed via "View more" button.
- Perform usability testing to decide where to split content into pages (that is, how much content to show per page).
- We never use infinite scroll without a "View more" button.
Pagination can reduce results in large data sets down to easy-to-digest chunks. Each page has a link that can be bookmarked. The First, Current, and Last pages are always accessible, while other page links may be truncated when there’s too many to show at once. Pagination also has Previous and Next links.
Traditionally, Infinite Scroll loads and presents more results as you scroll without interruption, in a single stream. To minimize some drawbacks of this, however, we use a "View more" Button that a user must click to progressively disclose only as much content as they want.
- Use Pagination when people are unlikely to need to see all the content.
- Use Pagination when the first page is enough to make a decision.
- Use Pagination when loading all the content at once would not be possible technically or not be performant. If it takes more than 10 seconds to load all the content, paginate.
- Use Pagination when keeping your place is important or you want to bookmark a specific page.
- Use Pagination when there's lot of screen real estate.
- Consider using Pagination when a list contains more than 50 items of a single line of text each.
- Use Infinite Scroll with a "View more" button when someone may want to see every item and compare them at the same time.
- Use Infinite Scroll with a "View more" button when we want and expect people to read more than 1 page worth of content without disrupting the experience with a page load.
- Use Infinite Scroll with a "View more" button on small, touch devices if it feels more efficient to the user than pagination.
Here are some examples of other existing design systems: