Description
A wizard is a step-by-step process, allowing users to perform a set of actions in a predefined order, in order to accomplish a goal. It may appear in a dialog or directly on the page.
Usage & Behavior
General guidelines
Wizard steps may:
be mandatory or non-mandatory,
depend on previous steps,
be skipped according to previous selections.
A Wizard has two possible modes:
Create mode - where the wizard is entirely new, i.e. no fields have previously been filled in. In this case, steps must be completed in the predefined order.
Edit mode - where fields have previously been filled in. In this case, the user may move freely between steps using the navigation bar.
Structure
Element | Details | Images |
|---|---|---|
Header |
| In case of a dialog:  |
Navigation bar |
|  |
Content area |
|  |
Actions Row |
|  |
Default State
By default, the wizard will show the first step, with the first field in focus.
Internal Logic
In some cases, a decision made in a specific step will add one or more steps to the process. In this case, the additional steps will be added to the navigation bar.
The user will still be able to go back to that step and change the decision. In this case, the additional steps will be removed from the navigation bar.
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
On the navigation panel, the user can only select steps that were already filled in. Selecting a step shows the content of that step and updates the navigation panel accordingly.
Clicking the Next button saved the data and goes to the next step (both the content and the navigation bar are updated).
Clicking the Back button goes to the previous step. In this case, all changes made to the current step will not be saved.
On the last step, clicking the primary button:
closes the dialog, what happens is case of a page?
performs the action,
shows a success (or failure) toast. Is the data still saved somewhere?
If the wizard appears in a dialog, clicking the X button on the header will close the dialog, without saving its content. Warning?
Validations and errors
Clicking the Next button or the primary button in the last step triggers a validation process. In case of an error (either an invalid field value or a missing mandatory field):
the button is disabled,
an error message appears next to the buttons.
After fixing the errors, the message disappears and the button is enabled.
For more information, see Field Validation.
Transitions
When moving between steps, a transition should be used on both the navigation bar and the content area to illustrate the flow.
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 (less than 3 steps).
advanced users might be frustrated by a wizard, which can be rigid and limiting.
General
The number of steps should be between 3 and 7.
On each step:
Keep the title short and informative.
Include a brief explanation at the top, describing the purpose of the step.
Provide the user with enough information to make decisions and act on them.
Use default values where possible.
On the last step show a summary of what is about to be created or updated.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
   |