Progress tracker

Use a progress tracker to guide users through steps or actions across multiple screens, in order to complete a task. The progress tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.

Progress bar:

Displays how far along the user is in completing the task, including the number of steps required to complete the task.

Current step:

Indicates the current step that the user is working on.

Unvisited:

Shows steps that user has not visited or completed yet. The step and label are more subtle to indicate this.

Visited:

Steps that have already been visited include clickable links, so that users can navigate back to them.

Disabled:

Use a grayed-out label to indicate a step that users can't go back to.

Labeling

Use labels that clearly indicate the purpose of the step. When writing, keep options to a single line of text, be short and concise (1-2 words), and follow the ADG writing guidelines.

If a task needs more than 6 steps, consider simplifying the process or breaking it up into multiple tasks.

In most cases, you can identify the general theme of each step to help find a new label that works even when details in the process change.

Example: You might have a check-out process where, depending on whether the purchase is of a digital item or a physical item, users may or may not need to enter their shipping details, but must always enter payment details. Calling this step "Your details” allows it to either be connected to the payment and shipping details screen, or just the payment screen.

Behaviour

Labels break onto a second line if the character length does not fit the reserved spacing. If the screen is resized and the labels no longer fit the reserved spacing, only show the active label.

Additional responsive behavior completely removes step labels. This behavior is optimized for use cases like multi-step modal dialogs, and should be used with next/back buttons to allow users to move through the steps.