Skip to main content

Wizard Page Template

A wizard is a complex form broken into a step-by-step process that allows users to input information in a prescribed order and simplify a setup. This helps to guide novice users by showing less information at a time and creating focus. Wizards can be fixed or flexible by having optional steps or steps that change based on user input. Fields in each step are directly related and there is a linear progression between steps.

When to use​

The Atlas Wizard is used to simplify and digest long setup processes and very long forms.

Use a wizard when:​

  • Doing a setup in a single page form would result in a very long form with multiple sections and subsections
  • The users' task has multiple steps that are dependent on each other and on what the user chooses in each part of the process
  • The users' task can have different paths based on their input
  • The users' task is not very frequent and they will benefit from the extra focus
  • There is benefit in combining multiple tasks in a single linear process

Do not use when:​

  • The process is not linear and the user needs to jump forward and back between different sections

Page Anatomy​

Page Header​

Page headers within wizards help users to orient themselves, or leave the wizard. They stay fixed at the top of the window, even when the user attempts to scroll down the page.

  1. Previous button - Goes back to the previous step in the setup. It is not used in the first step of a wizard.
  2. Step title - The current step in the process
  3. Optional badge - Highlights if the current step is optional so it can be skipped
  4. Close button - Action to cancel the current setup process. It is present in all steps and is never disabled. Can be followed by a confirmation modal.

Content Area​

The main content area is where the form elements of the current step are presented. It 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 and to complete the process. The footer is also available at all times and fixed at the bottom of the window.

  1. Primary button - Mandatory. Navigates to the next step or completes the flow.
  2. Secondary button - Optional. A secondary action for the wizard. Use it to save progress or skip directly to completing the process if all following steps are optional.
  3. Short message - Optional. Display additional information on the status or helpful information about the current step.

Sequence Map​

The Sequence Map component shows all steps in the wizard flow, as well as their current status (current, incomplete, done, error). The current step is highlighted, and optional steps show an optional badge.

Users can click on previously completed steps to quickly navigate back, but cannot click on upcoming steps without completing the current step first.

A step can have logically grouped subsections. When subsections are available in the currently active step, the corresponding item in the sequence map shows these subsections as well.

Behaviour​

Steps​

All information needed to complete a step needs to be available in the content area of the given step, without the need to navigate to a previous step. Long steps that can not be split into separate steps should be broken down into logically grouped sections.

When navigating between steps:​

  • Keep navigation and submit actions always enabled
  • Allow users to skip fully optional steps
  • Update the sequence map to show the current status of the setup process
  • Only allow jumping to upcoming steps if the previous steps were already completed

Summary and review step​

We recommend showing a summary of all decisions as the last step of a wizard. Allow the user to review their information and navigate directly to previous steps to fix any mistakes.

Validation​

Wizards are considered complex forms, and as such, navigation and submission actions should always be enabled. Client-side validation of 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.

Do:​

  • Validate inputs as soon as they lose focus
  • If there are errors in the current step, when navigating or submitting, display a toast informing the user, highlight the corresponding fields and change the step status to error
  • Display a banner after submit if there is a server-side error clients need to act upon

Don't:​

  • Allow users to move to a different step while there are errors in the current step
  • Disable the footer and header navigation buttons, as an error might not be visible due to scroll.

Quitting the wizard​

Users can leave the wizard by clicking the Close button. To prevent mistakes, trigger a confirmation modal when the user tries to leave after inputting relevant data. When possible, offer the user a way to save their progress and continue later.