Progress Tracker
The progress tracker is meant to show the user where the user is in a process that requires multiple steps
Table of Contents
Edit this section, Opens in new windowOverview
The progress tracker is meant to show the user where the user is in a process that requires multiple steps. Not to be confused with "Progress Indicator" or "Progress bar”.
Variations
Type | Purpose |
---|---|
Indeterminate progress tracker | This version of the progress tracker is for user flows that have no definite steps, or might have changing length of flow. Here we try to inform the user with the horizontal bar that they are making progress, even though we cannot show exactly what step they are in the flow. |
Determinate progress tracker | This version of the progress tracker is for user flows with definitive steps. In this variation there is also support helpful text under each step. |
Small progress tracker | This version of the progress tracker is for user flows with definitive steps. This particular variation is meant to be used when space is scarce or in mobile. |
Usage
Principles
Steps
Do not use the determinate progress tracker if there are more than 5 main steps. Steps needs to be easily scanned to get an overview of the steps. It is better to bundle steps into main steps if there are more than 5 steps.
E.g. Main step 3 contains 2 smaller steps with information that is asked to the customer.
All progress trackers can be used on all background colors (BE 1 to BE 5).
Content
When labeling each step, identify the general theme of each step so that if details in the process change, the label still makes sense to the user.
For example, you 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.
Determinate
Usage
Use a progress tracker to guide users through steps or actions across multiple screens, in order to complete a task. A determinate progress tracker tasks must have three or more steps. The tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.
- Use a progress tracker to guide users through steps or actions across multiple screens, in order to complete a task.
- A determinate progress tracker tasks must have three or more steps.
- The tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.
Modifiers
Vertical
A determinate progress tracker can be vertical:
Anatomy
Specs
Edit this section, Opens in new windowSmall
Usage
This version of the progress tracker is for user flows with definitive steps. This particular variation is meant to be used when space is scarce or in mobile.