Refine By

Pagination

  • Contents:

Pagination is helpful because it:

  • Breaks long amounts of content into shorter, less overwhelming pages
  • Gives users more control over the content they see and when, providing navigation to other pages

Guidelines

  • Pagination is usually placed at the bottom of a list of content.
  • Only use if the page is significantly long to avoid unnecessary clicks for the users.
  • Keep the list of content length manageable, generally around 10-15 items, so user doesn’t need to scroll too much to reach to the bottom of the list.

Infinite scrolling vs Pagination

Some websites use infinite scrolling instead of pagination, but we generally disagree with this approach. Infinite scrolling can cause usability and accessibility interaction issues, because users cannot tell how much information exists.

Related read: Infinite scrolling is not for every website

Let us know if you are looking to use Infinite scrolling for a particular use case. More user research and special care is needed.

We have two options for web Pagination.

Choose the option that works best for your page style and user intent. 

  • The current page is not clickable in the pagination, but it will be highlighted.
  • Page dropdowns only appear when there are more than 3 pages.
  • “Previous” or “<” will be disabled when the user is on the first page.
  •  “Next” or “>” will be disabled when the user is on the last page.

Only display up to 3 numbers, a drop down, and navigation arrows. This helps maintain the 44px square clickable minimum.

Pagination and user behavior

There are two main types of browsing that affect the type of pagination a user needs to use.

For directed browsing, users have a specific goal in mind, and may need to remember the page numbers for later later reference.

Use the full pagination option for this use case.

For undirected browsing, users may have some idea of what they’re looking for, but they’re generally just browsing with little focus.

Choose the condensed pagination for this user mindset.

Mobile app usage

Pagination is only available for web. For mobile app, use system‘s page controls or infinite scroll:

Style

OHW Pagination options and rationale

Accessibility

  • Ensure each interactive element has a hit target area minimum of 44 by 44 pixels.
  • Interactive elements in focus have a visible focus indicator.
  • Pagination is marked up as a navigation landmark for screen reader navigation.
  • Current page is denoted visually and for screen readers.
  • After selecting a new page, visual and keyboard focus moves to the first new result shown in the list.
  • Select dropdown and text input field have a label of “Page”.

For A11y testing notes for OHW, see OSC Wiki.