Stepper / Wizard Patterns

Steppers break complex processes into sequential steps with visual progress, making lengthy workflows manageable.

stellae.design

Design Principles

Steppers (wizards) break complex multi-step processes into sequential, manageable stages with clear progress tracking. They reduce cognitive load by presenting one decision at a time, show progress to motivate completion, and allow review/editing of previous steps. Best for: account setup, checkout flows, configuration, data entry requiring validation between steps.

Why It Matters

Stepper and wizard patterns break complex, multi-step processes into manageable sequential chunks, reducing cognitive load and making daunting tasks approachable. They provide a visual map of progress, set expectations about the effort remaining, and help users maintain context across related decisions. Poorly designed steppers, however, can trap users in rigid linear flows that feel controlling rather than helpful.

Real-World Examples

E-commerce checkout wizard

A checkout flow presents three clearly labeled steps — Shipping, Payment, and Review — with a horizontal progress bar showing the current position. Each step validates its own fields before allowing progression, and users can click any completed step to return and edit. The final Review step summarizes all choices before the user commits to purchase.

Multi-step onboarding with skip options

A SaaS product guides new users through profile setup, team creation, and integration connection in a three-step wizard. Each step offers a 'Skip for now' option and the progress bar shows which steps were completed versus skipped. Users can return to skipped steps from their dashboard at any time.

Counter-example

Rigid wizard with no back navigation

A loan application wizard forces users through 12 sequential steps without the ability to go back and review or edit previous answers. A user realizes they entered the wrong income on step 3 but cannot return to fix it from step 9. The only option is to start the entire application over, destroying 20 minutes of work and almost guaranteeing abandonment.

Role-Specific Guidance

Common Mistakes

• Forcing strictly linear navigation with no ability to revisit completed steps is the most damaging mistake — users need to review and correct earlier decisions without restarting. Another common error is showing step numbers without descriptive labels, leaving users unable to predict what comes next or judge how much effort remains. Validating only at the final submission instead of at each step transition leads to a frustrating experience where users discover errors in step 2 only after reaching step 8.