What is it?
When you need a way for users to move back and forwards through related pages of content. Can be used as well as other navigation (such as the stacked navigation component) to reinforce navigation options and give users a couple of ways to move between pages of content.
The links are placed at the bottom of the page to allows users to navigate to other pages after reaching the end of the page content. This has the benefit of keeping a navigation option visible when a side menu or primary horizontal menu might be off screen.
Usage
For clicking through related pages of content. For use when simple pagination isn't suitable ie on multiple pages of results or lists or data tables.
For example:
- On the guidance list page
Positioning
Links are placed at the bottom of content, where users would logically finish reading the content and need to progress to the next or previous page.
Interaction principles
Links should include the page title underneath the Previous or Next link. Give context about where the user will navigate to.
All elements are clickable - Previous/Next wording, page numbers.
Clicking the Page number, Next or Previous link will send users to that page.
Users will be sent to the top of the page they click to access.
Click target/area spans right across width of content area/container even if links don’t span that far. Increases click target size.
When not to use
Do not use when simple pagination will do. Test this with users.
Do not use on pages which aren't grouped together or related as this is likely to confuse users.
Do not use on search results pages. Users rarely view past the first page of results (91% of search pageviews are on the first page).
Accessibility
Links and link states meet WCAG guidelines for colour contrast.
The component uses existing link styles which have been well used on the site so we are not expecting any difficulties with the pattern.
Research results
Some data on the usage of pagination on the NICE website.
List pages
Pagination is used on these pages - around 20% of the clicks on the page.
Most pagination clicks are on pagination links that move users up to higher pages - ‘Next’ link or numbered button
Both Next text link and the numbers get clicked
Search
People don’t use pagination on search
Users rarely view past the first page of results (91% of search pageviews are on the first page).
98% of page views on search are of the first three pages of results.
We already know that 97% of clicks on search are in the first 15 results.