Use a wizard when a product must guide users through a tightly controlled setup or creation assistant with sequential dependencies, local validation, review, cancel, and finish behavior.
Use a wizard when a product must guide users through a tightly controlled setup or creation assistant with sequential dependencies, local validation, review, cancel, and finish behavior.
Practice the judgment: Imagine this situation: Finish is available before the generated setup is tested or reviewed. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Wizard | Multi-step form | Step navigation / step indicator | Process list / step-by-step navigation |
|---|---|---|---|---|
| UI or UX | UI + UX - Guided sequential setup assistant | UI + UX - Multi-page transaction with saved step state | UI + UX - Linear multistep task progress indicator | UI + UX - End-to-end ordered journey guidance with linked tasks |
| UI guidance | Render a bounded assistant shell with a clear wizard title, current step heading, step list or progress context, step-specific body content, Back, Next or step-specific primary action, Finish, and Cancel or Close. | Render each step as a focused page with a clear heading, progress context when useful, Back and Continue controls, local validation, and a final review page before submission. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. | Present the process as a numbered ordered list of three to ten high-level steps, each with a short parallel action heading and enough supporting text or links to complete that stage. |
| UX guidance | Use a wizard when users must be guided through a dependent setup, creation, import, or configuration task where each step prepares the next one and final finish should be gated. | Use a multi-step form when a transaction is too long, conditional, high-stakes, or hard to recover from as one page, and users need manageable saved progress. | Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains. | Use process lists to help users understand an end-to-end journey that may span guidance pages, transactions, departments, offline actions, or separate sessions. |
| Good UI | A connector setup wizard shows Choose connector, Configure access, Test connection, Review, and Finish in a side step list, with Configure access current and future steps disabled until prerequisites pass. | A benefit application has Eligibility, Contact details, Documents, Review, and Submit pages, with the current step named in the heading and completed steps shown from saved data. | A five-step application shows Eligibility complete, Contact details current, Documents upcoming, Review upcoming, and Submit upcoming, with the current step emphasized and a matching page heading. | A 'Apply for a permit' guide shows numbered steps for Check eligibility, Prepare documents, Submit application, Pay fee, and Track decision, each expanding to relevant links and conditions. |
| Bad UI | All steps are visible as visited while hidden required setup is inserted later, so the step count and current heading are dishonest. | A five-screen flow shows all steps as complete after users only viewed them. | All future steps look clickable and complete even though required earlier fields are blank. | A live form page shows a process list where the Continue button should be, so users leave the transaction to read unrelated guidance. |
| Good UX | A user selects Zendesk, enters a token, runs a connection test, reviews generated sync settings, goes Back, and the token and test state are preserved or clearly invalidated when changed. | A user completes eligibility and contact details, goes Back from documents, sees contact details still filled, continues, and returns to the same documents step. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. | A user unsure where to start expands 'Prepare documents' and sees both online upload guidance and an offline identity check requirement before starting the application. |
| Bad UX | A user goes Back to change the connector and the wizard silently keeps review answers from the old connector. | A browser refresh on step 3 clears steps 1 and 2, forcing the user to start again. | The indicator says Step 4 of 5 while the page content and route still show Step 2. | The process list says 'Complete identity check' but opens another step-by-step page that loops back to the original guide. |
| Best fit | A setup, import, object creation, or configuration task has strict sequencing. | A transaction spans several ordered pages or sections. | A linear form, application, checkout, or setup flow has three or more meaningful steps. | An end-to-end journey spans several pieces of guidance, service links, departments, or channels. |
| Avoid when | The task is a short form that users should scan and submit on one page. | The fields are short, related, and easier to scan together on one page. | The journey has only one or two screens. | The user is inside a live transactional form or wizard. |
| Required state | Current guided step with a clear heading, local controls, and step-specific primary action. | Current step state with heading, saved context, local answer controls, Back, and Continue. | Default state with completed, current, and upcoming steps. | Standalone process overview with introduction and ordered high-level steps. |
| Accessibility burden | Use one clear wizard title and one current step heading; keep browser title, heading, and progress context synchronized. | Use a clear page heading on every step and keep it synchronized with route and progress context. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. | Use the correct heading level for each step heading rather than hard-coding heading ranks from examples. |
| Common misuse | Letting users finish before required tests, previews, or review pass. | Using a multi-step form to hide a short related form that users should review on one page. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. | Using a process list as a transactional progress indicator. |