Do your wizards include a 'Wizard Breadcrumb'?

Updated by Brady Stroud [SSW] 1 year ago. See history

123

Breadcrumbs guide users through your website interactions. They are important as they give the user a sense of confidence in using your application. The user will tend to feel lost and unsure of what to do next if a application does not guide them properly. Good navigation through directional headings removes this feeling and gives the user confidence. This rule is especially important when it comes to design an e-commerce check out process, or a software set up wizard. A great wizard should includes a 'Wizard Breadcrumb', that gives the user the confidence that they are progressing as expected in the process.

It should do the following:

  • Show the user where they are up to, previous steps, and the next steps in the process. This gives the user an idea of how long the process will take
  • Allow the user to go back to previous steps allows them to change or review a previous choice

It should have the following:

  • Clear and intuitive interface - An interface that is easy to understand and use, with clear instructions and user-friendly design
  • Step by step guidance - Guide users through the process of setting up a new company with clear, concise instructions that are easy to follow
Image

✅ Figure: Good example - SugarLearning's "Create your company" wizard

Image

✅ Figure: Good example - The heading from booking.com shows the user at what stage of the ordering process they are at, and what they can expect next. This covers the whole billing process

Image

✅ Figure: Good example - Virgin Australia uses a more subtle but also effective approach

acknowledgements
related rules