Wizard/Stepper Pattern: Guide Users Through Complex Tasks
A wizard or stepper pattern is like a recipe for a complex task, breaking a long process into numbered, manageable steps. It's ideal for multi-stage forms like onboarding or checkout flows.
Why it exists
Complex, multi-part tasks can overwhelm users if presented all at once. A long form with many fields creates high cognitive load and can lead to abandonment. The wizard or stepper pattern was created to chunk these tasks into a guided, sequential flow, making the process feel more manageable.
The mental model
Think of a stepper as a digital recipe. Instead of showing you the entire 20-ingredient, 10-step process on one page, it gives you one instruction at a time: "First, enter your shipping address," then "Next, provide payment details." It guides you through a complex process, showing where you are, what's next, and what you've already done.
How it works
A stepper visually represents a sequence of logical, numbered steps. Key variations determine its behavior. First, Linear vs. Non-linear: A linear stepper is strict; you must complete Step 1 before moving to Step 2. This is for processes where later steps depend on earlier ones. A non-linear stepper lets users jump between any available step. Second, Editable vs. Non-editable: Editable steps allow users to go back and change their input. Non-editable steps lock a step once it's complete. Third, Horizontal vs. Vertical: Horizontal steppers are for wider screens, while vertical steppers are better for mobile.
When to use it
Use a stepper when a task has several logically distinct steps, especially when the input from one step is required for the next. It's perfect for user registration flows, multi-part data entry, e-commerce checkouts, and software installation wizards. It reduces cognitive load and clarifies progress.
When not to use it
Avoid steppers for short forms that could easily fit on a single page; breaking them up adds unnecessary clicks and friction. Never embed a stepper inside another stepper or use multiple steppers on the same page, as this creates a confusing, nested experience for the user.
One canonical example
A classic example is an e-commerce checkout flow. Step 1: Shipping Address. Step 2: Billing Information. Step 3: Payment Method. Step 4: Review and Confirm. The user can't proceed to payment without first providing a shipping address, making it a linear stepper. The visual progress bar at the top of the page shows the user exactly where they are in the process.
Interview question
For which type of user interaction is a wizard/stepper pattern most appropriate?
- a.A short feedback form with only three input fields.
- b.A complex online application where later steps depend on information from earlier steps.Correct
- c.A data entry screen where users need to input many independent pieces of information on one page.
- d.A website navigation menu allowing users to jump to any section.
Why? this is the answer
The card specifies that steppers are best used when a task has several logically distinct steps, especially when input from one step is required for the next. Option C describes a long form, which steppers aim to break down, but specifies "on one page" and "independent," which doesn't fully align with the primary use case of sequential dependency.
Just read this? Test yourself on what you have been reading.
Read the original → m1.material.io
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles