Pagination separates large bodies of content into separate pages. You can access each page via a shared index of links.

Also known as:

AnchorNeed to know

  • Perform usability testing to decide where to split content into pages (that is, how much content to show per page).
  • This has been designed but not built.

To keep in mind

  • Position Pagination centered at the bottom of a long list of content that has been split up into pages.
  • Let people navigate to the Previous and Next set of items in the paged list.
  • Indicate to users when they are on the first or last page by disabling the Previous or Next link.
  • Where possible, load each set of items without reloading the whole page.
  • Highlight the Current page as well as available pages in Pagination, such as the total number of results.
  • To decide where to split content into pages, consider:
    • Page and data load time
    • Amount of content in each entry
    • Screen real estate available
    • How many items a person may need to compare at once
  • Any filtering, sorting or bulk actions on paginated lists or tables should be clear on whether they apply to the context of the current page of data, or the entire underlying set.
  • Compare Pagination and Infinite Scroll with a "View more" button.

When to use and when not to use

When to use
  • 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.
When not to use
  • Avoid pagination when seeing every item and comparing them at the same time is important to the task.
  • Manual pagination may be less efficient than Infinite Scroll because it may require additional cognitive load to choose a page number or pagination button.
  • When we want and expect people to read more than 1 page worth of content, pagination may be disruptive to the reading experience. You might consider a "View more" button instead.
  • On small and touch devices, consider using Infinite Scroll instead to avoid interrupting the flow with the need to tap a button as people scroll.

Research insights

In the Comments report, we saw a sharp drop off from page 1 to page 2 when we used pagination. When we introduced question grouping and a "View more" button, we saw more viewers viewing page 2.

See also

External links

Here are some examples of existing design systems: