Wizard

A wizard is a user interface pattern that guides a user through a series of sequential steps to complete a complex task.

template-wizard

When to Use a Wizard

  • Onboarding and Setup: Use a wizard to guide new users through initial account setup, profile creation, or product configuration.
  • Complex Forms: Use a wizard to simplify long or conditional forms (e.g., tax filing, loan applications) by asking for information one section at a time.
  • Complex Tasks: Use a wizard for any task with a clear start, middle, and end, where the user must complete steps in a specific order, like booking travel or setting up a software integration.

Key Components

A wizard is more than just a series of screens; it's a collection of components that work together to create a unified experience.

  • Progress Indicator: A visual element (like a progress bar or numbered steps) that shows the user where they are in the process and how much is left to complete.
  • Navigation: Clear "Back" and "Next" buttons to move between steps. The "Next" button should often be disabled until the current step is complete.
  • Step Content: Each step should contain a single form or a clear set of related tasks. It should have a concise heading that matches the step's title in the progress indicator.
  • Summary/Confirmation: The final step often provides a summary of all the information the user has entered, allowing them to review and confirm before completion.

Wizard Behavior

  • Sequential Flow: The user must complete each step in order. They cannot skip ahead.
  • Data Persistence: The information entered by the user in a previous step should be saved and accessible throughout the wizard.
  • Validation: Each step should validate user input before allowing them to proceed. This prevents errors from piling up until the final step.
  • Exit Strategy: The wizard should include an option to "Cancel" or "Save and Exit" so users can leave the flow and return later without losing their progress.