Progress tracker
A progress tracker shows the steps in a process and how far the user has got.
When to use
- A process with named steps, such as a checkout or a form over several pages.
- A process people may leave and come back to, where they need to see which steps are done.
- Three to six named steps. With more, the labels no longer fit and the tracker is hard to read.
When not to use
- Steps with no names. Use a progress indicator, which shows dots.
- Work that runs continuously instead of in steps. Use a progress bar.
- A single step.
Guidance
Do
- Details
- Payment
- Confirm
Mark exactly one stage as current. It is how people know where they are.
Don't
- Enter your billing details
- Choose a payment method
- Review and confirm your order
Do not write sentences as labels. They crowd each other. Put instructions on the page, not in the tracker.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| progress-tracker | brand-bold | 0.460Marked | 0.598Marked |
| progress-tracker | neutral | 0.042Ambient | 0.066Substrate |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- One or two words per stage. Payment, not Choose a payment method.
- Use nouns, not verbs. A stage names a step, not an instruction.
- Keep the labels consistent. If one is a noun, they should all be nouns.