Change log
Components
Progress Tracker
- Overview
- Usage
Overview
When to use
- Requiring a user to complete a linear flow (form, questionnaire, etc) that includes 3 to 5 steps.
- Providing a user a sense of the overall process complexity while focusing on tasks one at a time.
When not to use
- When the flow has fewer than three or more than five steps.
- When the flow may be completed in any order.
- When the number of steps may change based on conditional logic.
If the flow needs more than 5 steps, consider how you might simplify it or break it up into multiple tasks.
Principles​
Progress trackers help manage user’s expectations when completing a multistep process. They show which step the user is currently on, the total number of steps, and overall progress in completing a task.
Step labels should communicate what the user will accomplish in each step in preferably one or two words.
Help text​
Tooltips or popovers can be used to give more context abut the step, if needed.
Interactions​
Progress tracker can be configured as interactive or not interactive. Interactive variant allows a user to navigate back to previous completed steps.
Small screens​
On small screens, only the label for the currently active step is displayed. Interactive variant displays the link to the previous step on top of the tracker.
Placement​
The recommended placement of the progress tracker is between the main page title and content.