A back link help users go back to a previous page when they are using a digital service with multiple pages. This is an example of a back link button (left) with a primary button.
Why we have a design pattern for Back links
We have a design pattern for back links to provide users with:
- a consistent, predictable way to move back through the steps of a digital service; and
- a way to navigate through a digital service in case they want to update information before they submit it.
When to use a Back link
Always include a back links in transactional services and online forms for services with multiple pages.
When not to use a Back link
Never use a back link together with breadcrumbs. If necessary, do user research to learn which option people find more helpful in your service.
How Back links work
The back link should take users to the page they were previously on. The page should be in the state it was when they last saw it.
Where possible, make sure back links work even when JavaScript is not available. If this is not possible, hide the back link when JavaScript is not available.
Placement
Add a back link to the bottom, left of a page.
Typically the back links start on the step after the service Start page and end on the Check answers page.
Style
A back link should be styled as a secondary button, but there are some instances where this is not possible. Look at the examples from different government platforms below and style the back link accordingly.
Language
The button text should be "Go back a step" or "Go back to home page" if it's the first step in the service.
Depending on the platform you use, you may also use "Back" or a left-facing chevron.
Examples of Back link implementation on government platforms
Drupal
In Drupal the Back link is styled as a secondary button and labelled "Go back a step"
Survey 1, 2, 3
If you are using Survey 1, 2, 3 the Back link style is the same as the primary button.
Adobe Experience Manager online forms
For digital services and online forms built with Adobe Experience Manager, the Back link is styled as a secondary button, but the chevron is grey.
