Step by step navigation
Step by step navigation is a way of presenting end-to-end journeys on GOV.UK. It groups existing guidance and transactions into a series of steps.
The Government Digital Service (GDS) works with departments to build step by step navigation journeys. Use this pattern in your prototype only.
You will not be able to publish step by step navigation you’ve created yourself on GOV.UK.
Email modelling-services@digital.cabinet-office.gov.uk as soon as possible if you think your service would fit into a step by step journey.
When to use this pattern
GOV.UK uses step by step navigation to represent services that:
- cover end-to-end journeys
- span one or more department’s content and services
- have specific start and end points
- contain many pieces of guidance, transactions or both guidance and transactions that a user must complete in a specific order
When not to use this pattern
GOV.UK does not use step by step navigation:
- when a user only needs to read guidance and not take a particular action
- for content inside a transactional service – use the task list pattern instead
- to track a user’s progress through a service
How it works
A step by step navigation journey can:
- include content and transactions owned by different departments, agencies, services and topics, like ‘Employ someone’
- be completed in one go, or require users to return at different times
- include online and offline actions
- represent one-off or regularly repeated tasks
- link to content and services outside of government
You can customise content like the links in the steps and the names, but you cannot customise the design of step by step navigation.
It’s displayed in 2 ways.
In the sidebar of content pages that are part of the step by step navigation.
As a standalone page that does not contain any other content.
To prototype how step by step navigation could join your service up with GOV.UK, you can use the following examples in the GOV.UK Prototype Kit:
Content pages that are part of the step by step navigation always have a link at the top that goes to the standalone step by step page.
Elements of step by step navigation
Introduction
This is a short summary that describes the service the step by step navigation represents.
It can be used to tell users when this step by step navigation is not relevant to them. For example, if the process is different in another region.
Steps
A step is a task or group of tasks that a user can do as part of the service. They appear in the pattern as expandable, numbered sections.
Tasks
A task is an action you need to do or piece of content you need to read to help you complete a step. They appear as a single link or a list of links. They can be bullet points if you need to show a range of options within a task. For example, if there are different versions of a form to download.
Order steps according to user needs
Steps and tasks should be listed in the order users need to complete them.
If there is not a set order, they should be listed in an order that helps the user.
For example, ‘Agree a contract and salary’ is listed as step 4 in ‘Employ someone: step by step’ although it can be completed earlier.
Use both ‘and’ and ‘or’
Use ‘and’ to show when you can or must complete more than one step at the same time.
Use ‘or’ to show when there’s a choice between 2 steps.
Costs
If there is a cost of doing a task, show it after the link text.
Instructions
If needed, include instruction text to provide:
- essential context that is not included in the content we link to
- conditions, for example if there is a task that only some users need to complete
Research on this pattern
The step by step navigation pattern was created by the Government Digital Service (GDS).
While developing the pattern, they ran 8 rounds of research with users, including those with disabilities and people with low digital literacy.
The pattern was also reviewed by the Digital Accessibility Centre.
Read more about researching and iterating step by step navigation in the following blog posts:
- Building end to end services into GOV.UK
- How we approached service mapping
- Building a better step by step
Known issues and gaps
Users rarely use the step by step navigation header, which might suggest the purpose of it is not clear to them.
Users get frustrated when looping back and forth between step by steps. It’s OK to link from one step by step to another, but not to link from the second step by step back to the first.
It’s not currently possible to include step by step navigation on confirmation pages.
Services using this pattern
This pattern is commonly used across GOV.UK. You can see examples of it being used in the following services.
Driver and Vehicle Standards Agency
Learn to drive a car
Department for Work and Pensions
Employ someone
What to do when someone dies
UK Visas and Immigration
Visit the UK on a Standard Visitor visa
Department for Transport
Get a Blue Badge
See a full list of live services using step by step navigation.
Next steps
More user research is needed to find out:
- if it’s useful to add step by step navigation to pages that are related but not linked to from that step by step
- how turning off in-page navigation on guides that have step by steps affects the experience of mobile users, as this has only been tested on desktop
- how users navigate from one step by step to another
- how users navigate from mainstream browse to step by steps
Help improve this page
To help make sure the Step by step navigation page is useful, relevant and up to date, you can:
- share research or feedback about the Step by step navigation pattern on GitHub
- propose a change to this page - read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System you can contact the team: