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.
States
Step navigation states:
Currently selected step |  | |
Last step selected | Coming soon… | |
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. In this case, both the content and the navigation bar are updated.
Clicking the Back button saves the data (without triggering a mandatory field validation), and goes to the previous step.
On the last step, clicking the primary button:
performs the wizard action,
either:
closes the dialog (or goes to the initial page), and shows a success (or failure) toast,
goes to a final step showing the results.
If the wizard appears in a dialog, clicking the X button on the header will close the dialog, without saving its content. In this case, a confirmation popup may appear.
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 wizard title short and informative,
include a brief explanation at the top, describing the purpose of the step,
set the focus to the first field,
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.
Where possible, save user input when leaving a step or in case of a wizard submission failure.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
   |