A stepped progression, sometimes referred to as a multi-step form or wizard, is an interface built to support a series of steps a user must complete in a process.
Designing Better Progress Steps UX. With practical techniques to help people navigate and complete complex forms with or without progress steps ↓
✅ Progress steps break a long form into small, manageable parts.
✅ They show where users are and how much they have left to go.
🤔 But: they are often overlooked and don’t scale well on mobile.
🤔 Difficult to design for dynamic flows with conditional sections.
✅ For simple forms, always start without a progress indicator.
✅ Tell users what they need and how much time it will take.
✅ Show progress as “Step [X] out of [Y]” with a text label.
✅ Add a drop-down to support quick jumps between steps.
🚫 For complex forms, don’t rely on visual progress bar alone.
✅ Always include text labels under each step for easy, precise jumps.
✅ Underline labels to make it clear that users can use them to navigate.
✅ Design 6 states: incomplete, active, complete, error, disabled, warning.
🤔 You can rarely display 5+ progress steps on mobile.
✅ Keep active label visible but hide future and past steps.
✅ Show a Back link on the top, Next button at the bottom.
✅ For long forms, repeat the Back link at the bottom, too.
✅ On desktop, vertical progress steps often work better.
✅ Set up an overview page with links to single steps (“task list”).
✅ Allow users to expand and collapse all steps and sub-steps.
✅ Don’t forget to highlight error status in the progress step.
Only few things are more frustrating than a progress bar that seems to be stuck. Complex forms often have conditional sections, so users end up going in circles, staying on the same step as they move between sections. It’s a common problem with horizontal layout, and a common reason why people leave.
With a vertical layout, we can always show all sections with all sub-steps, explaining to users where they are and what’s coming up next. We can expand and collapse some steps and support fast navigation and quick jumps. We can also highlight all errors or missing data and explain what’s actually missing.
A few smaller pages usually perform better than one long page. One column layout usually causes fewer errors as multi-column layout. Give users one column with vertical progress steps, and you might be surprised how much faster they get through the entire form, despite its complexity and length.
Useful resources:
Stepped Progression, by Goldman Sachs
https://lnkd.in/eHbB5EFu
Multi-Step Wizard, by GE HealthCare
https://lnkd.in/ezA__z_E
Task List Pattern, by Gov.uk
https://lnkd.in/eb3PzTEJ
Form Design: From Zero to Hero, by Adam Silver
https://lnkd.in/eTBQxBXg
Wizards Design Recommendations, by Raluca Budiu
https://lnkd.in/eYYxUUDM
Loading And Progress Indicators, by Taras Bakusevych
https://lnkd.in/e5KFPiiq
#ux #design
Designing Better Progress Steps UX