View in Storybook

Why?

When you need a simple 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 on after reading 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 example:

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 title.
  • Clicking the Next or Previous link will send users to that page.
  • Users will be sent to the top of the page they click to access.
  • Links stack on top of each other - this helps users who are zoomed into the page see both links.
  • 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 previous and next links on pages which aren't grouped together or related as this is likely to confuse users.

Don’t use previous and next links on multiple pages of results or lists or data tables. Use pagination patterns for this instead. Pagination patterns contain extra information such as displaying the number of items/results and ability to change the number of results that help users with this type of content.

Accessibility

Links and link states meet WCAG guidelines for colour contrast.

Whole horizontal space is clickable to increase click/tap targets and ensure minimum click/tap target sizes are met.

Research

We have not tested the pattern with users.

The component uses existing link styles which have been well used on the site so we are not expecting any difficulties with the pattern.