Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Wizards

A wizard guides the user through a series of steps that must be completed to achieve a goal.

Component meta

Component identifier
pattern-wizard: Tags
Global: Design principles
Frictionless

Guidelines

Wizard flows

The wizard flow instructs the user on how to complete the steps to reach their goal. Some examples could be a flow for setting up an account, apply for a loan or become a customer.

When to use which wizard

The design and interaction of a wizard differs depending on the purpose, complexity or length of the flow. There are three options:

Take-over wizard – To eliminate distractions when the flow is complex and there are more than four steps. The steps can vary depending on the user's input. The modal takes full width and height. Keep in mind to have help and support easily accessible. Take-over wizard.
Light – When there are less than four steps and not as complex. The Light wizard is placed in a Slide-out modal. This allows the user to reference information from the main view.
On page wizard – Works well when a user has to complete steps in a specific sequence.The steps can vary depending on the user's input.