Navigation
Stepper
A stepper is a signpost that shows, at a glance, where you currently are in a long process broken into several steps.
Definition
A stepper is a signpost that shows, at a glance, where you currently are in a long process that has been broken into several steps. The steps are usually laid out in a row: the ones you've already finished get a checkmark, the step you're working on now is highlighted with color or weight, and the steps still ahead are dimmed. When an ordered task like checkout or sign-up is too much to fit on one screen, the stepper splits it into a few short steps and spreads that flow across the top like a map. Unlike a plain progress bar, each step here has a name, so it even tells you what you'll be doing next.
Why does it matter?
People tire easily and give up in the middle when a task has no visible end. A stepper eases that anxiety by making it clear which step you're on and how many steps are left. Showing the full length up front lets users brace themselves and find the energy to see it through, and the checkmarks piling up on completed steps give a small sense of accomplishment that pulls them toward the next one. Splitting a long form into steps instead of cramming it all onto one screen also reduces how much a person has to focus on at once, so input errors and mental strain drop together. In the end, a stepper is a device that cuts drop-off and helps people reach the finish line.
Common mistakes
- Slicing the process into too many tiny steps just to raise the count. When there are too many steps, the road ahead looks even longer, so users get tired before they even start, and the labels on screen get so cramped that it's hard to tell what each step is. More divisions is not automatically better.
- Not deciding up front whether users can go back to an earlier step. When someone wants to fix a mistyped value from a previous step but has no way to return, they end up starting over from scratch or abandoning the flow entirely. You also need to make sure the values they already entered don't disappear when they go back.
- Making the completed, current, and waiting states look so similar that they can't be told apart. If color or icons don't clearly separate how far you've gotten from where you are now, the whole point of showing progress falls apart.
Practical tips
- Keep it to around three to five steps, and decide clearly from the start whether going back is allowed. Splitting a long, ordered process into reasonable chunks and showing how far along and how much is left cuts mid-way drop-off dramatically.
- Distinguish the completed, current, and waiting steps firmly with color and icons. A checkmark for finished steps, a highlight for the current one, and a dim look for what's left lets users read their own position at a glance.
- Give each step a short name that says what happens inside it. A label with real content like "Shipping" or "Payment" beats a bare number, because it lets users gauge what's coming and move to the next step already prepared for it.