Progress Tracker
The progress tracker is meant to show the user where the user is in a process that requires multiple steps
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
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. |
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
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).
- Your details
- A summary for your purchase
- Payment details
Do not use too long step titles
- Your details
- Summary
- Payment details
Use short and concise step titles
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.
Indeterminate
Anatomy
- Helpful text related to the current step (optional)
- Title for the current step
- Progress tracker with estimated step progression
Specs
- The description text color is LB 1, LIGHT BROWN
- The title text color is BR 1, BROWN
- The completed progress color is BL 1, BLUE
- The incomplete progress color is BE 1, DARK BEIGE
Determinate
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
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:
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
Anatomy
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
- Title for the default step
- Helpful text related to the default step (optional)
- Title for the current step
- Helpful text related to the current step (optional)
The completed and current progress color is BL 1, BLUE. The default progress color is LB 1, LIGHT BROWN 30%
- The default title text color is LB 1, LIGHT BROWN
- The default description text color is LB 1, LIGHT BROWN
- The current title text color is BR 1, BROWN
- The current description text color is BR 1, BROWN
Specs
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
Small
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
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.
Anatomy
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text
We use the same color principles here as the determinate progress tracker.
Specs
- Step titleHelpful text
- Step titleHelpful text
- Step titleHelpful text
- A longer step titleHelpful text
- Step titleHelpful text