Wizard flows

Use the UI pattern wizard when you want to break down a lengthy or complex form into manageable steps. It helps users focus on one set of information at a time, reducing the cognitive load and making the overall experience more user-friendly.

Choose your wizard

The design and interaction of a wizard differs depending on the purpose, complexity or length of the flow. There are three options:

• Take-over wizard – To eliminate distractions when the flow is complex and there are more than four steps. The steps can vary depending on the user's input. The modal takes full width and height. Keep in mind to have help and support easily accessible.
  This is the most complex form of wizard and also have all the advanced features. It’s mainly used in logged in channels.
  
  
• Light wizard – When there are less than four steps and not as complex. The Light wizard is placed in a Slide-out modal. This allows the user to reference information from the main view.
  It’s mainly used in logged in channels.
  
  
• On page wizard – The wizard is placed as the main content of the page and users may still access the navigation etc on the site. The steps can vary depending on the user's input.
  Used both in public web sites and logged in channels.

Deprecated versions

We have a few other versions of wizards live on our sites. These should not be used.