Wizard Page Template
The Wizard Page Template layout contains an isolated step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.
Overview
The Atlas Wizard is a powerful template, that can be used to simplify setup or configuration processes, by splitting them up into multiple steps. This helps to avoid overwhelming novice users by showing less information at a time, and drawing focus on a single item that requires users’ attention.
Wizards usually contain multiple steps that often rely on each other – for example, it’s not possible to jump to the last step, without filling out forms on the previous steps. In some situations, Wizards may include branching based on user input, which means following steps will adapt to the user input on a previous step.
Page Anatomy
Page Header
Page headers within wizards help users to orient themselves, or leave the wizard. As they need to be available at all times, page headers stay fixed at the top of the window, even when the user attempts to scroll down the page.
The page header contains a mandatory step title 1 that matches the current step, and can feature a small Badge 2 to highlight that the current step is optional (if applicable).
The header also contains a Close button 3 that is available on all steps, and can never be disabled. Clicking the button initiates the cancellation process. On the left side there is a button to go back to the previous step 4, if there is any.
Content Area
The main content area contains all elements required to complete the current step. The content area must contain at least one Tile, which should never contain an inner scrollable area (instead, the Tile extends to the full height it needs to hold its content, and the content area becomes scrollable).
Page Footer
The page footer provides the primary way to navigate forward in the flow – it always contains a primary Button 1 that is used to either navigate to the next step (if there is any, and if the current step has been completed), or to complete and leave the workflow. In the last step, the primary button label changes and highlights what is being created or set up (eg. “Create Tracker”). The primary action button only becomes clickable once all mandatory forms have been filled out in the current step.
An optional Button 2 can be added to the footer for secondary actions. These secondary actions could be skip-actions that require user acknowledgement, and allow users to continue to the next step without filling out any information. The secondary button can also act as an alternative non-destructive close button that allows users to save progress and then close the wizard (this requires a way to get back into the wizard at a later time and load any previously entered data).
A short message 3 can be displayed in the footer for additional information on the status (eg. a feedback label if data has been saved), or to provide helpful information about the current, or upcoming step.
Sequence Map
The Sequence Map component shows all steps in the wizard flow, as well as their current status (current, incomplete, done). The current step is highlighted, and optional steps show a small badge that communicates the non-mandatoriness.
When a step contains an especially long form, consider splitting it up into smaller sections that contain logically grouped forms. When subsections are available in the currently active step, the corresponding item in the sequence map shows these subsections as well and allows the user to quickly scroll to these sections by clicking on the anchor link.
In general, users can click on previously completed steps to quickly navigate back, but can not click on incomplete steps without completing the current step first.
Behaviour
Steps
All information needed to complete a step needs to be available in the content area of the given step, without having to navigate back to a previous step. Long steps that can not be split into separate steps should be broken down into logically grouped sections. Steps that contain only optional inputs can be skipped.
Validation
Validation of a step’s input fields is always done on the current step, and validation errors must be fixed by the user before advancing to the next step in the workflow. Forms should utilize instant validation and not require the user to click a button to validate all fields. When there is an API error, a banner message should be added to the page with further information.
Summary
After completing all necessary steps in a wizard, a confirmation screen should summarize and review all completed steps. While the main action on the summary is to save and complete the wizard process, it must also allow the user to navigate back to previous steps and fix potential mistakes.
Cancellation and Leaving
When a user attempts to leave the wizard flow, a confirmation modal needs to be shown. The confirmation modal communicates the danger of losing all data previously entered by the user and provides a way to continue the wizard workflow instead. When possible, the option to save progress and leave can be provided, which saves the current state of the wizard as a draft object.