Short description

The light wizard is used for simpler flows, where the users should feel that it’s simple and still be connected to the context where the flow occurs.

Wizard light in a slide-out modal

When and how to use it

Some flows require less space and attention even if it’s so complicated that you want to split the form into multiple steps. Then the light wizard is the right choice. It keeps the user tightly connected to the context where the flow was started.

If the flow expands into many steps or needs advanced features, consider upgrading to the full take over wizard.

Behaviour

The light wizard is a simplified guide that uses the slide-out modal. It has a label with steps and buttons that navigates back and forward. 

Step 1

Step 2

Step 3

Confirmation

Features

• Uses the slide-in modal as a base. The header gives the name of the current flow.
• On top of the page the number of steps is displayed as well as the current step (i.e. Step 2/5)
• Buttons are placed in the bottom (sticky is optional) and the order is the same as a full take over wizard. Next-button to the right, back to the left, and others in the middle.
• Receipts may be included as a last step after but is not included in the count. If the receipt is not needed users may receive feedback on the underlying page in form of a toast that the wizard-flow was successful.