Progress tracker
Progress trackers guide users through a multi-steps process by letting them know what has already been done and how much is left to complete a task. Apart from showing the number of steps, progress trackers display the current location of the user within the process and allow navigation between the past steps.
Usage guidelines
When to use
- To guide users through the completion of a multi-step process, typically a form.
- To show users where they are in the process and to allow them to navigate between steps.
When not to use
- To give feedback about the duration of a process that has no determined steps or whose completion depends on the system rather than the users action; use Progress bar instead.
- To split up content into different pages; use Pagination instead.
- To split up content into different panels; use Tabs instead.
Writing guidelines
Labels
Communicate clearly what the user will accomplish within each step.
Length
Keep labels short by using one or two words. Avoid sentences or complex words.
Capitalization and case
Write headings in sentence case.
Specifications
Anatomy
- Step number (or icon)
- Step name (optional): short label describing each step.
- Line indicator: visually connects steps and displays status info.
- Past step.
- Current step.
- Inactive step.
Types
There are two types of progress tracker: Number and icon and Stepper.
| Type | Number of steps | Usage |
|---|---|---|
| Number and icon | Variants from 2 to 10 steps are available. | Keep in mind that a maximum of 3 steps can fit into a mobile viewport. If you need more than 3 steps, use stepper or the vertical progress tracker with dropdown items. Number and icon variant can be displayed either with numbers only or icons only. Do not mix the two types. Use icon variant when there is a limited number of steps only. |
| Stepper | Variants from 2 to 20 steps are available | Use stepper if you need more than 10 steps or if horizontal space is limited. |
Variants and sizes
Both Number and icon and Stepper come in a horizontal and a vertical variant.
Number and Icon
Both horizontal and vertical variants come in two sizes: Desktop and tablet and Mobile.
'/%3e%3c/svg%3e)
Stepper
Both horizontal and vertical variants come in two sizes: Desktop and tablet and Mobile.
Styling
Background
Progress tracker is only available to sit on light backgrounds. White or Zurich White are the recommended colors to use so there is enough contrast between the component and the background.
Steps labels
Step labels are not necessary but their use is recommended to ensure a more accessible user experience.
While for number and icon all labels are visible at the same time, for stepper only the current step name is displayed. If you display names, be consistent by making sure to display one for each items.
Number and icon - Steps
In general, steps that have been completed are indicated by a filled circle while the ones to be yet completed are indicated by an outlined circle. The color of each step defines its current state:
- Zurich Blue for past step
- Dark Blue for active step
- Mid Blue for hover on past step
- Peach for error
- Grey-8 for inactive step
Number and icon - Line Indicator
Line indicators follow the same color code as the step circle they precede:
- Zurich Blue for past step
- Dark Blue for active step
- Peach for error and Gray-8 for inactive
Stepper - Steps
The color of each step defines its current state:
- Zurich Blue for past step
- Dark Blue for active step
- Peach for error
- Gray-8 for inactive step
Behavior
Positioning
Give a fixed position to your tracker throughout the process so the user knows where to look for reference about progress. The position should be at the top (for horizontal trackers) or at the side (for vertical trackers) of the content.
Alignment
Be mindful of readability: keep a visual balance and appropriate distance between steps.
Progress tracker commonly stretches to fit the width of you container. Here there are some best practices:
Within the component itself, labels are aligned differently depending on the placement of the step they refers to. The first label is left-aligned relatively to the first step; the last label is right-aligned relatively to the last-step; all the in-between steps are centrally aligned relatively to the step.
Interaction
The first step of a flow is active by default. Any following step will be actionable once all the previous steps are completed. As soon as a step is completed, immediate feedback on the progress is given.
For number and icon tracker, completed steps are kept actionable to allow users to navigate to previous steps in the process.
This is not the case for stepper, where steps are non-interactive elements. Navigation to previous and next can happen only through additional navigation elements, such as button links or arrows.
Accessibility guidelines
Design Considerations
- Make sure there is enough contrast between progress tracker color and its background.
- For a more accessible experience, make use of labels whenever you can and keep them short while being descriptive.