Wizard
Also known as: step-by-step, multi-step form, guided flow, stepper
In 1 line: Break one long task into a short series of screens, 1 question at a time, so the person can start without seeing the whole cost at once.
The problem
A task needs a lot of input, and the person does it rarely enough that they do not know the order. Shown as 1 long form it reads as work they have no time for, so many never start. Shown without an order, they answer questions that later turn out not to apply to them.
The solution
Split the task into steps, 1 screen each, with 1 question or 1 tightly related group per screen. Make that question the page heading. Put a Back link at the top that returns the previous screen exactly as it was left. Check the answer when the person leaves the step, not only at the end. Save as you go, so closing the tab is not the same as starting again. Show position only when you can state it honestly.
Try it
- 11 question per screen, asked as the heading.
- 2Go Back - what you typed is still there.
- 3"Question 2 of 3" is true for everybody, so it is shown.
Aim for, avoid
How it's built
Why it works
People decide whether to begin a task by guessing what it will cost them. One long form shows the whole cost at once, and a good number of people never start. Splitting it lowers the price of the first step and replaces 1 large decision with several small ones, each of which is easy to answer and visibly finished. Making the question the heading means the person reads 1 thing and answers 1 thing. And an honest position indicator removes the worst part of a long flow, which is not its length but not knowing its length.
When to use it
Use when
- The task is long, done rarely, and has a natural order.
- Later steps depend on what was answered earlier.
- Finishing matters more than speed - applying, filing, setting something up.
Avoid when
- The person does this often and knows it by heart. A single dense form is faster for them.
- The parts are independent. Use sections, tabs or a settings page instead.
- There are only 2 short steps. One screen is less work than two.
Risks and accessibility
Risks and pitfalls
- Cutting the task into so many screens that it feels longer than it is.
- A strip showing every step at once - easily missed, poor on a phone, and wrong as soon as the flow branches.
- Losing what was typed when the person goes back, or closes the tab.
- Checking the answers only at the end, so errors surface far from where they were made.
- Letting Back repeat a one-time action such as a payment.
Accessibility
- Make the question the page heading, so a screen reader announces it once rather than twice.
- Move focus to that heading when the step changes, or the change is silent.
- Give the Back link real text - "Back" - not only an arrow glyph.
- If you show a position, mark the current step with aria-current="step".
- Never show a step as finished using colour alone.
Seen in
Screenshots are cropped and credited to their owners for the purpose of teaching. Ask us to remove one.
"Wait for a yes before the next step"
Approval gate answers the question this pattern answers - for a conversation with an AI instead of a page. Learn them together and each makes the other easier.
See all 6 pairsCheck yourself
A bank wants to move its "change your address" form - 3 short fields - into a 3-step wizard, 1 field per screen. Good idea?
pick 1 - the answer and the why appear here
References
- van Welie, M. - Wizard, Patterns in Interaction Design (2001)
- Tidwell, J., Brewer, C., Valencia, A. - Designing Interfaces, 3rd ed. (2019)
- Government Digital Service - Question pages, GOV.UK Design System (checked Oct 2026)
- Nielsen Norman Group - Wizards: definition and design recommendations (2019)