Wizard

What

A wizard is a type of modal that includes multiple steps that each have they're own screen. Users navigated between pages with "back" and "next" buttons at the bottom of the modal.

Why

To guide a user through a process

Where

Either a popup or full screen modal, usually centered on the page

Best Practices

  • It helps to give the user some idea of how long the process is (how many steps) and where they currently are in that process.
  • Consider whether you want the user to be able to skip a step or abandon the process and how that will affect their experience.

Related Principles

Design Systems

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...