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.

Wizard

The wizard presents a sequence that lead the user through well-defined steps.

Guidelines

Short description

Wizards are a powerful design pattern that can be used to simplify complex processes. By showing less information at a time, they allow users to focus better on the content. The steps can vary depending on the user's input.

We have two versions of wizards, the full take-over modal that is used in most cases, and the "light version" that lives in a slide-out.

When and how to use it

Use a wizard when a user has to complete steps in a specific sequence, or when a complicated task needs to become simplified. Be specific on what information a user is required to supply at each step. Use the supporting content area to give hints on what is required or provide a short FAQ relevant to that step. Try to group related questions (i.e. personal information) in one step.

Behaviour

The wizard relies on the behaviour of a takeover modal, where it acts as an added layer on top and uses the whole width and height of the viewport.

The light wizard is a simplified guide that uses the slide-out modal.

Wizard in a take-over modal

Wizard in a take-over modal

Wizard light in a slide-out modal

Wizard light in a slide-out modal

Grid

A grid is applied on the main and secondary content areas, whilst the step navigation is fixed at 320 px. The content is always left-aligned. Subtle animations are used to enhance actions in the step navigation.

The width of the main content area varies depending on screen size but it is never wider than 768 px. In some cases, for example when a wide table is needed, you have the possibility of using the whole content area. 

Grid for desktop

Grid for desktop

Grid for tablet

Grid for tablet

Grid for mobile

Grid for mobile

 

Step buttons

The Previous and Next buttons should be placed in their direction (previous - back, next - forward). The buttons contain an arrow icon placed centred aligned with the text in the direction.

  • Since we want to lead the user to the next step, the Next button is the Primary button.
  • The Previous button is a Secondary button.
  • In some cases we also need a Cancel button which is a Button link.

Desktop

Desktop step buttons can be sticky to the bottom of the browser (optional). The buttons are placed within the width of the main content area.

Mobile

Mobile step buttons are not sticky and placed at the bottom of the main content area.

Wizard light

Use the light version of wizard when you are designing a simple flow. A simple flow is typically two-three steps within a slide-out so that the user remains in the same context. If it needs to be more complex, use the full wizard.

The light wizard has a label with steps and buttons that navigates back and forward. 

Step 1

Step 1

Step 2

Step 2

Step 3

Step 3

Confirmation

Confirmation

 

Do's and don'ts

  • Allow users to exit the wizard midway and save status when needed
  • Allow them to resume the process at a later time
  • Group related questions into one step
  • Don't show steps, information or questions that are irrelevant to the user, due to what we already know

Specification

Measurements

Desktop measurements

Desktop measurements

Navigation desktop

Navigation desktop

Tablet measurements

Tablet measurements

Mobile measurements

Mobile measurements

 

Navigation

The step navigation has a fixed width on desktop and tablet landscape at 320 px. Mobile and tablet portrait navigation collapses and takes full width.

The icons that gives the user information when the step is fullfilled, or if an error occurs, is always placed to the very right. In mobile, icons are aligned with the close icon in the header.

 

Step navigation icons

  • FontAwesome Check, regular 16px, Grey 800
  • FontAwesome Exclamation square, solid, 12x, Dark Red 1
States in navigation

States in navigation

 

States

The step navigations background colour is #eeeeee. The default steps are transparent which gives the active and completed steps more focus. A completed step is enhanced by a check icon in #333333. If an error occures, the step is enhanced with an exclemation mark icon in red.

  • Background: #eeeeee
  • Text: #333333
  • Active & visited step: Font weight medium
  • Default step: Font weight regular
  • Shadow hover: 0 0 4 1, 10 % black
  • Shadow active step: 0 0 4 1, 10 % black
  • Focus state: 4 px gradient outline in Blue, box-shadow: 0 0 4px 1px in Blue

 

Colours

  • White
  • Transparent
  • Grey 100
  • Grey 600
  • Grey 800
  • Dark red 1

Examples

Wizard - desktop

Wizard - desktop

Step navigation - mobile

Step navigation - mobile

 

Related patterns & components

Page last updated

Feedback

Was this helpful?