Wizard

A wizard presents a sequence that lead the user through well-defined steps. Use the modal Take-over which gives the user full focus on the task in front of them.

Short description

Wizards are a powerful design pattern that can be used to simplify complex processes performed infrequently or by novice users. By showing less information at a time, they allow users to focus better on the content pertinent to each step and decrease the chance of errors. When they include branching based on user input, wizards ensure that people will see only the steps applicable to their situation.

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 like 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. 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.

Button placement 

Note that in the take-over wizard, the secondary button is placed all the way to the left, to enhance the feeling of being in a left-to-right-flow.

 

Do's and don'ts

Do
  • Allow users to exit the wizard midway and save status.
  • Allow them to resume the process at a later time.
Don’t
  • Don't overcrowd a step with more than one or two questions or statements.
  • Don't show steps or questions that are irrelevant to the user, due to what we already know.

 

Here you can find a wizard implemented in Angular:

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

Specification

Desktop

Tablet

Navigation bar for desktop and tablet

Navigation bar for mobile

Supporting content

 

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.

Desktop

Great as your wizard start page.

Desktop - with bells and whistles

Showing all the steps, headers and texts areas. 

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.

Tablet

Great as your wizard start page.

Tablet - with bells and whistles

Showing all the steps, headers and texts areas. 

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.

Mobile

Great as your wizard start page.

Collapsed

Expanded