Wizard

The wizard pattern combines a wizard stepper, form components, and navigation buttons to separate long forms into shorter, more manageable steps. For guidance on implementing forms, reference Forms.

Also known as stepper, step wizard, progress wizard, progress indicator.

Anatomy

A. Wizard stepper (required): Wizard sub-component indicating the user’s current position and remaining steps.
B. Step title (required): Brief statement describing the fields contained in a step.
C. Content area (required): Area containing input fields, selects, and other form components to gather input from users.
D. Calls to action (required): Button components enabling users to save, exit, or proceed to the next step.

Usage

Best practices

• Use a wizard stepper as the starting point for all wizard patterns.
• Follow Forms guidance for layout strategies when implementing forms within wizard steps.
• Reference specific component guidelines for Select, Input, and any other components used in steps.
• Follow Button guidance when implementing calls to action within wizard patterns.
• Use Tooltips or inline messages so users can access relevant information without leaving the wizard.
• Always let users edit completed steps. Reference branching wizard for tips on handling branching logic.
• Include an indeterminate progress bar during form processing. Reference Progress for more information.
• Reverse the direction of wizard elements including the stepper and buttons for right-to-left languages, as the layouts provided align with user expectations in left-to-right languages.

Horizontal wizard stepper

The horizontal stepper lists steps horizontally from left to right. It’s the most versatile stepper and fits most screens, but can’t accommodate extra long forms with more than six steps. It facilitates multi-page wizard patterns and is used to create the wizard with horizontal stepper layout.

• Visually differentiate the user’s current step from others by using active styling.
• Ensure step numbers are interactive so users can select them to navigate.

Scaling and reflow

Scaling and reflow refers to how content behaves as the container size changes, particularly when the container is small and can’t display all its content at once. If space is limited, step titles should wrap to the next line instead of truncating to ensure users can accurately identify each step title.

• Wrap step labels to ensure they remain visible to the user as the container size changes.
• Limit labels to two or three words so labels only wrap if it’s necessary.

Animations for horizontal steppers

Steps may animate when an additional step is added. Typically, the existing steps animate by sliding outwards from the new step to make space.

• Ensure animations are brief, subtle, and unobtrusive.
• Implement animations consistently across steps, either animating all or none.
• Only add steps after the user’s current step to avoid confusion and ensure they continue progressing forward.
• Reverse the animation if a step is removed.

Vertical wizard stepper

The vertical stepper lists steps vertically instead of horizontally and is the best choice for very long forms with more than six steps. This component facilitates multi-page wizard patterns and is used to create the wizard with vertical stepper layout.

• Visually differentiate the user’s current step from others by using active styling.
• Ensure step numbers are interactive so users can select them to navigate.

Animations for vertical steppers

Steps may animate when an additional step is added. Typically, the subsequent steps slide downward to make space for the new step.

• Ensure animations are brief, subtle, and unobtrusive.
• Implement animations consistently across steps, either animating all or none.
• Only add steps after the user’s current step to avoid confusion and ensure they continue progressing forward.
• Reverse the animation if a step is removed.

Single-page stepper

The wizard stepper is an interactive navigation element that helps users progress through wizards. The single-page stepper is used for single-page layouts, where each step is contained in an Accordion.

• Visually differentiate the user’s current step from others by using active styling.
• Ensure step numbers are interactive so users can select them to navigate.

Animations for single-page steppers

Steps may animate when opening or closing for single-page steppers. Typically, they use a smooth, vertical sliding effect. When a user selects a step header, the associated content panel expands downward, revealing the hidden content. When the user proceeds forward or back, the content panel animates upward, hiding the content.

If an additional step is added to a single-page stepper, use same animations as the vertical stepper.

Button placement

Buttons are a key element of wizards, as they enable users to save progress or navigate forward and back through steps.

• Place buttons in a consistent place across steps to avoid disorienting users.
• Reference Button for additional guidance on alignment and placement.

Form components

Wizards may include various components used in forms to collect data from users. Grouping related fields, such as address details, contact information, and payment information, reduces the cognitive load placed on users. This helps maintain user focus and prevent errors.

• Avoid including too many fields within a step. Limit steps to around five to seven simple fields or three to four complex fields.
• Try to distribute the number of fields evenly across steps to create a balanced experience.
• Start with easier steps and progress to more complex ones to reduce the chance users will abandon the task.

Progressive disclosure

Progressive disclosure is a method used in forms to prevent cognitive overload. Forms that use progressive disclosure show a few fields at first and reveal more as the user progresses. For example, a second address line is only shown after the user completes the first. Progressive disclosure logic is generally fixed and doesn’t depend on the user’s responses. This differs from branching logic in wizards, where user input determines what steps are relevant moving forward.

While progressive disclosure can ease cognitive load in long forms, it’s not recommended for multi-step forms like wizards, as it can be redundant or confusing when combined with branching logic.

• Consider progressive disclosure when forms are moderately complex but may not require multiple steps.
• For more information on using progressive disclosure long forms reference Forms.

Saving progress

Users should be able to exit the wizard without losing progress. There are two methods for allowing users to save progress: autosave (recommended), and a “Save” button. These methods can be implemented together to give users extra control and confidence that their work won’t be lost.

Autosave

Autosave is a feature that automatically saves changes. This prevents progress loss due to network failure or other errors.

• Consider pairing autosave with an additional “Save” button to give users more control.
• Place an inline message near the navigation buttons to indicate that changes have been automatically saved.

”Save” button

“Save” buttons let users save progress manually. This helps users feel in control, but may result in accidental progress loss during network failures or other errors. “Save” buttons can be paired with autosave to enhance confidence and control.

• Implement a “Save” button if your project doesn’t use autosave.
• Use a Dialog component to warn users if they try to exit without saving.
• Place an inline message near the navigation buttons to indicate that changes were successfully saved.

Summary page

Summary pages appear as the final wizard step to allow users to review their responses before submission, reducing the likelihood of incorrect input.

• Implement summary pages as the final step before submission.
• Ensure summary pages provide a complete overview of the user’s responses from all steps.
• Provide clear controls that allow users to navigate back to edit their responses.

Layouts

The wizard pattern has multiple layouts to accommodate different visual designs and user needs. Each can be used as a starting point to enable different task flows. To learn about the wizard task flows and how they work with each pattern, visit the Task flows tab.

Multi-page layouts

Wizard with horizontal stepper

This layout is best for interfaces with single-column designs where the majority of content is centered. It uses a horizontal stepper at the top of the pattern, above the main content area of the page. This is the preferred layout for branching flows, as the horizontal stepper makes it easiest to tell when an additional step has been added to the process.

• Place the horizontal stepper at the top of the screen, above the main content area of the page.
• Place form contents within the main content area of the page.
• Place buttons below the form contents, aligned to the outer edges of the frame.
• Use shorter step labels to ensure they all fit in the horizontal layout.
• Avoid horizontal steppers with more than six steps, as they can become crowded and hard to navigate.

Wizard with vertical stepper

This layout is best for interfaces with substantial horizontal space, as the stepper and content are organized in two columns rather than centered vertically. It uses a vertical stepper on the left side of the pattern, next to the main content area.

• Place the vertical stepper component on the left of the main content of the page.
• Place form contents within the main content area of the page.
• Place buttons below the form contents, aligned to the outer edges of the frame.
• Avoid using the vertical stepper on screens with limited horizontal space, unless the form contains more than six steps.

Single-page layouts

Wizard with single-page stepper

This layout provides flexibility, as it can be placed within interfaces with surrounding content. However, it’s not recommended for long wizards with more than four steps. It uses a single-page stepper, which includes collapsible content areas for every step.

• Ensure steps are organized vertically.
• Ensure only one step is expanded at a time.
• Ensure the user’s current step automatically collapses when the user proceeds forward.
• Place buttons below the form contents of each individual step.

Chevron direction

Visually differentiate expanded and collapsed sections using the chevron direction. Only one step should be expanded at a time to streamline the experience and reduce confusion.

Platform considerations

The wizard component is available for both web and mobile platforms. Learn about screen size considerations below.

Mobile

The compact wizard component variant may be used on mobile platforms to accommodate small screens. The compact variant requires less space and is placed above the content area.

• Ensure users can exit the wizard by clicking the “X” UI icon button.
• Always include navigation buttons, as the compact stepper isn’t interactive and can’t be used to progress forward or back.

Content

• Use sentence case for all content except proper nouns or acronyms.
• Follow guidance in Forms when writing form titles, subtitles, field labels, and inline messages.
• Reference Button for guidance on creating effective button labels.
• Review Messaging for specific guidance on how to craft content in success, warning, and error messaging.

Step labels

• Don’t include any punctuation in step labels.
• Limit step labels to three words or fewer. Use subtitles within steps to provide additional context.
• Ensure labels clearly and accurately summarize the fields contained in the step.

Related guidelines