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.
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 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.
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.
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.
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.
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.
Example from Prince (May 2018)