Wizard

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

Guidelines

The purpose of a wizard is to present a series of steps or conditions that a user needs to complete in order to reach a goal. It accomplices that by splitting up a complex task into a sequence of smaller parts that are easier to focus on.

Usage

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 that supporting content area to give hints on what is required or provide a short FAQ relevant to that step. Try to group related questions like personal information in one step. Do not overcrowd a step with more than one or two questions or statements.

Behaviour

The wizard relies on the behaviour of a takeover modal, where it acts as a added layer on top and uses the whole width and height of the viewport. A grid is applied on the main content area, whilst supporting content and the steps indicator are fixed at 256px. The wizard is also affected by the density scaling behaviour inherited from the SEB UI framework. Subtle animations are used to enhance certain actions such as when moving to the next step.

Related to

 

Here you can find a wizard implemented in Angular:

https://github.com/sebgroup/ng-wizard

Template for desktop

At 1280px width and above, the main and supporting content become centre aligned in the available space while the steps indicator is sticky on the left side of the viewport.

Wizard - desktop - default

Wizard - desktop - form

Wizard - desktop - receipt

 

Template for tablet landscape

Due to relevancy and space needed at a width of 1024px, the supporting content area is collapsed allowing the main content to used the available width.

Wizard - tablet - default

Wizard - tablet - form

Wizard - tablet - receipt

 

Template for tablet portrait and mobile

The steps area is merged and collapsed with the headline, thus making more emphasis on the actual content. A progress bar is added on the top to give a graphic representation of the remaining steps.

Wizard - mobile - default

Wizard - mobile - section expanded

Wizard - mobile - form

Wizard - mobile - receipt

Example from Prince (May 2018)

First step

First step - example from Prince

Middle step

Middle step - example from Prince

 Last step

Signature step - example from Prince