Intro

The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog.

Recommendation in Conjunction with a Side Navigation

When a variant of the Side Navigation is used, we recommend to use the Wizard in a modal dialog.

A wizard that is built with a modal dialog allows users to focus on the task at hand without any distractions. It also makes sure that the user completes each step of the guided procedure before moving on to the next, which reduces the likelihood of errors and confusion. In addition, modal dialogs are visually presented very prominently, making it easier to engage with the wizard.

This approach becomes especially important when there is a Side Navigation used on the page. If the wizard is embedded on a page, the user might be tempted to navigate away from the wizard before having completed all of the steps. When using a modal dialog, the user can’t navigate away until the process is completed, or the wizard is consciously cancelled. This reduces the risk of users getting lost or frustrated while trying to complete the process.

Dimensions

• The width and height of the modal should be chosen to best fit its content.
• The dimensions of the modal should not change while browsing through the steps.
• On desktop it is best practice to have the modal occupy a maximum of 70% of the page-height and 80% of the page-width.
• On mobile the modal should be almost full screen, leaving 1rem / 16px margin on all sides.
• Responsive paddings are optional, but recommended.

Wizard Step Title and Wizard Page Title

The repetition of the title as part of the steps and as the title itself on top of the respective step page is intentional and part of the concept of the wizard. The title as part of the steps provides a preview when users are not on this step of a wizard. The title on top of the respective wizard-page acts as a confirmation.

If the names of the steps and the title of the respective wizard-page do not match, it can lead to confusion. Leaving out the title of the respective wizard-page is also not recommended as this acts as a confirmation of the user location.

Form Validation and Message Handling

On Focus Out

• Validation of individual form fields occurs when the value in the input field has changed and the focus leaves the field.
• Fields with errors get value states.
• Input message popover appears when field is focussed / active.

On “Next”

• When the user clicks the “Next” button, the form sections and fields of the current step are validated.

• In case of errors:

  • Global message strip appears at the top of the form.
  • Fields with errors get value states.
  • Input message popover appears when field is focussed / active.

Invalid Input / Error Messages

• After an Invalid Input Field Validation, the affected Input Field is highlighted with a corresponding Inline Message.
• After an Invalid Form Validation (e.g. not all necessary information is correctly inserted, but the user still triggers a Finalising Action), a Message Strip prompts the user to review all the highlighted Input Fields.
• If a Form has too many Input Fields, the Error Message Handling can be displayed using a Message Popover.

Data-Loss Messages

• If the user has modified any fields and triggered the ‘Cancel’ button, a data loss message should prompt the user.

When to Use

Related Links