Pages

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.

A screenshot showing an example of the step by step navigation pattern

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.

  1. In the sidebar of content pages that are part of the step by step navigation.

    A screenshot showing an example of the step by step as a sidebar
  2. As a standalone page that doesn’t contain any other content.

    A screenshot showing an example of the step by step navigation pattern

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.

A screenshot showing an example of the link at the top of a page to the 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.

A screenshot showing an example of the step by step navigation summary

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.

A screenshot showing an example of the step by step navigation task

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.

A screenshot showing an example of the step by step navigation pattern with an 'and' step A screenshot showing an example of the step by step navigation pattern with an 'or' step

Costs

If there is a cost of doing a task, show it after the link text.

A screenshot showing an example of showing the cost of a step

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
A screenshot showing an example of a step with instructions

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:

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

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Step by step navigation’ on GitHub