Do your wizards include a 'Wizard Breadcrumb'?

Last updated by Ken Shi [SSW] about 1 year ago.See history

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

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

booking wizard
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

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

We open source. Powered by GitHub