Design

Research and rationale

The design of our pagination component was inspired by research conducted by UK.GOV design system team and by the guidelines set out by the USA Design system.

Next and previous

When implementing pagination, UK Governs suggest that you should include clear and prominent controls for navigating between pages, such as a "next" and "previous" button, as well as an option to jump to a specific page. The first and last page number should always be shown and a user’s current page is always highlighted (UK.GOV n.d.).

We found this to be consistent with other pagination examples and best practice guidelines. Our component follows these practices. After testing however, we chose to remove the words next and previous on mobile devices to ensure that the pagination remained and on a single line.

Number of items

In our review of this component, we found that the US Government Design System had developed very comprehensive guidelines for behaviour of this component based on a 7 slot matrix. We combined these with the guidance outlined in UK.GOV to develop the rules for how our pagination would work across multiple screen sizes and differing pages numbers.

We found that using 7 slots for pagination strikes a balance between usability, user experience, and accessibility. It allows for the first and last page, two overflow ellipses, the current page and the previous and next page. Limiting pagination to 7 slots helps conserve screen space, allowing for a cleaner and less cluttered user interface and having 7 slots keeps the cognitive load manageable, making it easier for users to process the information.

The UK.GOV design system offered some good guidelines for mobile devices as well where it suggested limiting the number of slots to 5. This helps ensure pagination doesn't stack when there is less screen space.