pattern playground

Wizard

Added · Last updated

… a form collects related inputs on a single page, using progressive disclosure to reveal secondary fields as needed. This works well for most tasks, but falls short when a complex, unfamiliar workflow has strict dependencies—where early decisions dictate which questions exist later, and the task must be completed from start to finish before anything can take effect. When users encounter a process so rarely that they have no existing mental model, presenting every field at once causes cognitive overload. A wizard shapes this kind of task into a guided, step-by-step sequence. It is the standard approach for initial onboarding setup and first-time settings configuration where users need to make choices before fully understanding what each control means. When this sequence also defines how users navigate through the interface, step by step provides the navigational backbone; this pattern defines the structure and pacing of the task itself.

❖

Some tasks involve complex, interdependent decisions: choices made early on determine which questions or steps exist later. When users encounter an unfamiliar or high-stakes process rarely, presenting all fields at once creates cognitive overload, forcing them to figure out which questions apply and in what order to answer them.

A wizard works best when two specific conditions are met:

  1. Conditional dependencies: Later steps depend directly on choices made in earlier steps. What the user selects first dictates which questions or configurations are relevant downstream.
  2. Task unfamiliarity: Users perform the task infrequently (such as account setup, compliance configuration, or complex provisioning) and lack an established mental model. Presenting one decision at a time provides clarity and reduces anxiety.

If neither condition applies, a standard single-page form is almost always superior. Simply paginating a long form across multiple screens without real dependencies frustrates users: it hides the total effort required, prevents users from scanning ahead or referencing previous inputs, and adds unnecessary clicks and page transitions.

Even when a wizard is justified, it introduces clear trade-offs:

  • Higher interaction cost: Every step introduces separate navigation clicks, validation delays, and page transitions.
  • Loss of context and visibility: Information entered on earlier steps is hidden from view, making comparison, cross-checking, and copy-pasting across steps difficult.
  • Interruption risk: If users abandon the flow mid-way, their progress is lost unless the system explicitly supports draft saving.
  • Rigid sequence: The interface dictates the order of execution. Experienced users who know their inputs cannot jump straight to relevant fields.
  • Poor fit for exploratory tasks: Open-ended, iterative activities (such as editing media or composing documents) cannot be forced into a wizard.

Therefore,

Structure the complex task as a linear, gated sequence of focused steps, where each step handles a single clear purpose and earlier answers prune irrelevant questions downstream. Show overall progress and remaining steps, validate inputs inline before allowing users to advance, preserve entered state through forward and backward navigation, and present a consolidated review before final submission. Never use a wizard when a single page would suffice, and always provide an accelerated path for experienced users.

Accommodating returning users

A flow that feels reassuring on first use becomes tedious friction by the fifth. Once users understand the task, paging through sequential screens slows them down. Support repeat and power users by:

  • Pre-filling reasonable defaults or remembering previous choices.
  • Offering a single-page form or “expert mode” for direct data entry.
  • Providing templates, clone actions, or bulk-import tools.
  • Supplying a command-line interface or API for programmatic execution in technical products (as seen in cloud provisioning consoles).

Variants

  • Linear (fixed): A strict, identical step sequence for all users. Use only when technical prerequisites strictly require an ordered progression (for example, uploading a file before mapping its data fields); otherwise, a single-page form is better.
  • Conditional (branching): Earlier answers dynamically add, remove, or modify subsequent steps, ensuring users only see relevant screens.
  • Progressive (dynamic): The total step count is not fixed up front. Steps appear or adapt dynamically based on user choices, pruning unneeded branches as the flow unfolds.
  • Sub-steps (hierarchical): Complex steps are grouped into logical sub-steps under a parent milestone, collapsing completed milestones to maintain focus.
  • Optional steps: Non-essential configuration grouped toward the end of the flow, with an option to skip directly to review once required steps are complete.

Components

  • Progress indicator (stepper): Shows the current position, completed steps, and remaining steps with descriptive labels. Gives users a clear sense of scope and remaining effort.
  • Step validation: Inline validation that checks inputs before allowing progression to the next step, preventing early errors from cascading into downstream steps.
  • Navigation controls: A clear primary action (“Next” or “Continue”), a secondary backward action (“Back”), and a clear exit action (“Cancel” or “Save & exit”). The “Back” action must navigate non-destructively without clearing entered data.
  • State persistence (draft saving): Automatically saves entered data across steps and browser sessions, providing a clear “Save & finish later” option for lengthy workflows.
  • Review step: A consolidated summary screen displaying all gathered inputs prior to final commitment, with direct “Edit” links back to each step. The final submission button should clearly state the action taken (“Create account”, “Deploy cluster”, “Place order”).
  • Completion step: Dedicated feedback showing the outcome (success or failure) once submitted. For long-running operations, display progress indicators and provide immediate links to the newly created asset or next task.
  • Contextual help: Inline explanatory text and field tooltips placed alongside inputs, allowing users to review guidance without leaving their current step or opening intrusive modals.

Constraints & best practices

  • One purpose per step: Keep each step concise and focused on a single topic. If a step requires tabs, accordions, or excessive vertical scrolling to fit its contents, the chunking is too broad.
  • Self-contained steps: Ensure users have all the necessary context on the current screen. Avoid forcing users to recall details from earlier steps or navigate away to find information. Pre-fill data already known to the system.
  • Shallow branching: Limit decision points to roughly one or two key branches, and avoid deep nesting. Excessive branching causes progress indicators to jump unpredictably and disorients users.
  • Clean exit & confirmation: Provide a clear way to cancel or pause. If canceling will discard unsaved data, prompt the user with an explicit confirmation dialog before losing progress.
  • Non-destructive backtracking: Going back must never erase previously entered inputs. Users should be able to inspect earlier choices and return forward without retyping.

Because a wizard isolates focus to one step at a time and hides the rest of the interface, users must be able to change earlier decisions without losing entered progress; non-destructive undo and safe backward navigation are fundamental requirements. Throughout the flow, continuous status feedback keeps users oriented with clear progress indicators, inline field validation, and confirmation states. When users have varying goals and do not benefit from a rigid sequence, next best action recommends optimal steps dynamically instead of locking users into a fixed path, while an interactive agent can handle complex dependencies through conversation, allowing users to ask clarifying questions about earlier decisions at any time. Similar sequential structures appear in other contexts: configuring a reusable template through guided prompts, or paginating through a structured prompt scaffold. Unlike an enterprise workflow, which coordinates asynchronous tasks and business processes across multiple people and systems, a wizard guides a single user through an isolated, synchronous task…

All connections

Research on this pattern

  • Single-page vs. multi-page performance: In a controlled clinical trial comparing single-page, multi-page, and conversational forms (Schnall et al., 2021), the single-page form significantly outperformed the multi-page version across all usability metrics: higher System Usability Scale scores (76 vs. 67), faster completion times, lower error rates (31% of users experienced medium-severity errors vs. 69% in the multi-page version), and higher user preference. Participants emphasized the value of seeing all information at once.
  • Cognitive workload of form chunking: Neuroimaging research (Pušnik et al., 2016) using functional near-infrared spectroscopy (fNIRS) found that dividing a form into sub-forms actually increased mental workload compared to a unified layout.
  • Implications for practitioners: These empirical findings highlight that arbitrarily chunking forms into wizards does not automatically reduce cognitive load. A wizard is only justified when real conditional dependencies or extreme unfamiliarity outweigh the usability benefits of full-page visibility.

Resources & references