Description
A wizard is a step-by-step dialog which allows users to perform a set of actions in a predefined order, in order to accomplish a goal.
 |
Usage & Behavior
General guidelines
A wizard can appear on either a dialog or a page.
Sub-pages within the wizard (steps) may:
depend on previous steps,
may be mandatory or non-mandatory,
may be skipped according to previous selections.
A Wizard can be entered in one of these modes:
Create mode. The wizard is entirely new: no fields have previously been filled in. Steps must be completed in the predefined order.
Edit mode. Fields have previously been completed, and the user may move freely between the steps using the navigation panel.
Structure
Element | Details | Images |
|---|---|---|
Header |
| In case of a dialog box:  |
Steps navigation panel |
|  |
Step content area |
|  |
Actions Row |
|   |
Default State
By default, the wizard will show the first step, with the first field in focus.
States
Step navigation states:
Currently selected step |  | |
Last step selected | ||
Previous steps which have already been covered |  | |
Uncompleted steps |  | |
Hover | Coming soon… | |
Active | Coming soon… | |
Selected Hover | Coming soon… | |
Focus | Coming soon… | |
Focus Hover | Coming soon… | |
Focus Selected | Coming soon… |
Interaction
1. First step
In Edit mode, any step can be selected from the left-hand navigation panel.
|
2. Middle steps
It should be possible to return to any previous step using the navigation panel.
Navigating to an earlier step shows the choices and content the user has previously entered, which can all be changed or edited.
If the user navigates to an earlier step and doesn’t change anything, all of the content for the steps which have already been completed will remain the same.
If the user navigates to an earlier step and changes something, it may clear or invalidate other choices within this step or other steps, where there are dependencies. All other choices and content should remain the same.
In Edit mode, any step can be selected from the left-hand navigation panel.
 |
3. Last step
Where relevant, show a summary of what is about to be created or updated.
The Next button will change to show the final action which will occur. For example, Create statistic Set.
After the wizard has been completed, a success or failure message should be shown in a Toast.
In Edit mode, any step can be selected from the left-hand navigation panel.
 |
Validations and errors
Validations are shown inside each step, both for individual fields and the entire step as a whole. See Field Validation.
 |
Transitions
When moving between steps, a transition will be used in the navigation panel, if technically possible.
Best practices
Use where:
object creation or editing may be complex and needs to be divided into steps.
users needs guided help.
steps are dependant on each other in a complex way.
Don’t use where:
the overall task isn’t complex.
users are advanced and might be frustrated by a wizard, which can be rigid and limiting.
General
The number of steps should be between 3 and 7, for readability and easy of use.
Provide the user with enough information to make decisions and act on them.
The title of each step should be short and clear, and describe the step’s purpose.
Each step should present a brief explanation of its purpose at the beginning.
Use defaults or predefined values where possible.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
   |