Progress Indicators show customers their position in a multi-step checkout flow. These visual guides display completed steps, the current step, and remaining steps, reducing uncertainty and encouraging completion.
Why Progress Indicators Matter
Checkout abandonment often stems from uncertainty. When customers don't know how long checkout will take, they're more likely to leave. Progress indicators set expectations and provide a sense of accomplishment as each step completes.
Baymard Institute found that 18% of shoppers abandon due to long or complicated checkout processes. Clear progress indication helps the process feel manageable.
Types of Progress Indicators
Step counter: "Step 2 of 4" text format. Simple and clear.
: Clickable labels showing each step name. Allows navigation back.
Progress bar: Visual fill showing percentage complete.
Numbered circles: Connected dots or circles highlighting current position.
Accordion steps: Expandable sections that collapse when complete.
Best Practices
Keep steps minimal: 3-5 steps maximum. More steps increase perceived effort.
Use descriptive labels: "Shipping," "Payment," "Review" beats "Step 1," "Step 2," "Step 3."
Show completion states: Check marks or color changes for finished steps.
Enable back navigation: Let users return to previous steps without losing data.
Stay visible: Keep indicator visible throughout checkout, not just at the start.
Single-Page vs Multi-Step
Multi-step with progress: Traditional approach. Each step gets full attention. Works well for complex checkouts.
Single-page checkout: All fields on one page. No progress indicator needed. Better for simple checkouts.
Accordion style: Combines both. Single page with sections that expand and collapse.
Mobile Considerations
Screen space is limited on mobile. Use compact indicators that don't consume too much vertical space. Step numbers or a thin progress bar work better than elaborate .
