Pagination

Overview

Pagination is used to divide large amounts of content into a series of pages. This allows users to navigate through the content more easily, with controls for moving to the next or previous page, and an option to jump to a specific page. Whether it's search results or product catalogues, pagination helps users browse through the content in a more organised and manageable way.

Pagination component features

• The component features a maximum of 7 slots for numbers and ellipses (overflow indicator)
• The first slot is always the first page of the set
• If there are fewer than 7 pages in the set, show only that number of slots
• The component always shows the first page and current page
• Next page, previous page, First page and Last page only appear if those pages exist

Default

Example fewer than 7 pages

If there are fewer than 7 pages in the set, you should show all numbers and not use overflow indicators.

Example First and last pages

Don't show the previous page link on the first page and don't show the next page link on the last page.

Overflow indicators small screens

Show only a maximum 1-3 pages at once, depending on the number of pages in your list these might include:

• the current page
• previous and next buttons
• first and last pages.

Overflow indicators large screens

On larger screens with more pages, show:

• the current page
• at least one page immediately before and after the current page
• first and last pages
• previous and next buttons.

Usage guidelines

When to use

Use pagination when displaying large sets of content that would be difficult to display on a single page, such as search results or a long list of products. Pagination can make it easier for users to find what they're looking for by breaking the content into manageable chunks.

Pagination is a useful feature for displaying listings on websites, such as ecommerce category pages, SERPs, article archives, and photo galleries. On these pages, users typically have a specific goal in mind and want to find a particular item or article. Instead of scrolling through a long list, pagination breaks the content into manageable chunks, making it easier for users to navigate and find what they're looking for. Once they find the specific item, they can simply click through to the destination page, rather than having to go through the full list (Nielsen, 2011).

Consider using pagination when:

• showing all the content on a single page makes the page take too long to load (UK.GOV n.d.).
• most users only need the content on the first page or first few pages (UK.GOV n.d.).

When not to use

• Don't use pagination when displaying a small set of content that can be easily displayed on a single page, as pagination can add unnecessary complexity and inconvenience for users. Avoid using the ‘infinite scroll’ technique to automatically load content when the user approaches the bottom of the page. This causes problems for keyboard users.
• Don't use this Pagination component for linear journeys — for example, where you’re asking the user to complete a form. Instead, use the Button component (usually a ‘Continue’ button) to let the user move to the next page — and a back link to let them move to the previous page (UK.GOV. n.d.).

Meaningful page groupings: If you have long content split meaningfully, or grouped by subject or theme, use conventional navigation like Side navigation. (US Design system n.d.).

How to use

Design

Show the page number in the page <title> so that screen reader users know they’ve navigated to a different page. For example, ‘Search results (page 1 of 4)’ (UK.GOV, n.d.).

Placement

Consider the placement of pagination controls carefully. Typically, pagination is placed at the bottom of the content list to give users visibility and flexibility to move throughout the pages. For longer pages it may be beneficial to provide pagination at the top and at bottom. It gives 2 major benefits, first is chances of missing out pagination are less and second users get flexibility to go to other pages easily.

How many items to display

When determining the optimal number of list items to display per page, consider the following factors:

User experience: Prioritise user experience when deciding how many list items to show. The number should be large enough to minimize the need for users to click through multiple pages, but not so large that it negatively affects the page load time or overwhelms users.

Content type: The optimal number of list items may vary depending on the type of content you're displaying. For instance, a list of search results might warrant a different number of items per page than a list of blog posts or e-commerce products.

Device and screen size: Keep in mind that users may be accessing your content on various devices with different screen sizes. A responsive design that adapts the number of list items displayed based on the user's device is often recommended. Mobile testing results reveal that users experience fatigue with long product lists much sooner on mobile than on desktop (Hugo, 2020).

Load time: Be mindful of the impact of the number of list items on page load time. If your list items are resource-intensive, displaying too many per page can slow down the load time and negatively affect the user experience.

Some general recommendations for the number of list items in pagination are:

• for search results: 10-20 items per page is a common recommendation
• for e-commerce products: 20-50 items per page can provide a good balance between user experience and performance
• for content-heavy websites (e.g., news articles, blog posts): 5-15 items per page is often suggested.

Remember that these are just general guidelines, and it's essential to test and gather user feedback to determine the best number of list items for your specific website or application.