Wizard Design Pattern

Wizard Design Pattern

Today I’d like to talk about the topic of wizards, and I don’t mean those guys with the hats and all the magical spells. I mean the step-by-step process that we use in apps or websites to guide someone through a process.

Should you use a wizard? Isn’t a wizard just a patch for a bad interface? In this article, you’ll find answers to these questions.

What is a Wizard?

A wizard presents a series of steps or conditions that the user needs to complete in order to accomplish a goal (e.g. use a product). This pattern was firstly introduced in the physical world (a famous paper quick start guide that you definitely have together with all your appliances) and not so long ago was introduced in digital forms (e.g. a software installation wizard).

Setup wizards have historically been used with traditional desktop software applications or new hardware installation. The pattern was popularized by Windows 95.
The pattern has following benefits: ##Simplifies task By splitting up a complex task into a sequence of chunks, you can effectively simplify the task. >Divide and conquer

As was previously mentioned, one common example of such task is a software installation. Before installation wizards were common, users had to copy files themselves, edit configuration files, set up control directories, and check to see if the software was functioning. A setup wizard transformed this complex set of conditions into understandable steps. The payoff of using wizard was clear — reduced support and training costs.

Takes the burden of decision making off of the user

The wizard is especially good when users lack the necessary domain knowledge. Completing a task gets easier: the user can just follow a preplanned, step-by-step path to accomplish his goal: “Don’t make me think, just tell me what to do next.”

When to Consider a Wizard

Wizards can help in following situations:

Users want to accomplish a goal that has many steps

You are designing an UI for a task that is long or complicated and it cannot be simplified. Using wizard it’s possible to reduce the seeming complexity of a task and provide a sense of progress at the same time.

Users must complete steps in a specific sequence

In this case, a wizard support users performing a task by lowering the learning curve. When users are forced to follow the order of tasks, users are less likely to miss important things and will hence make fewer errors.

Facebook effectively uses a wizard to set up an application. Wizard makes sure all required steps are performed in the appropriate order.

When a wizard may not help

Use this pattern very carefully. Breaking up a task into smaller steps does not always provide a better user experience:

When the task itself isn’t complex

The very need for a wizard indicates that a task may be too complicated. If you can simplify a task to the point where a short form or a few button clicks can do the trick instead, that’s a better solution.

When the audience is too advanced

Even when dealing with complexity, wizards are not the slam-dunk answer for creating an optimal UI design solution. Power users often find wizards frustratingly rigid and limiting (since wizards don’t show users what their actions really do, or what application state gets changed as choices are made). It’s quite common when wizards try to “help” with things users already know how to do. This is particularly true for software that supports creative processes such as art or coding.

Tip: Allows users to choose the way they want to complete the task.

Dropbox installation interface allows some freedom for the experts.

When you want to teach

Don’t use a wizard to present a concept. The users don’t read supplementary text when they are using a wizard. They are very focused on getting their work done.

Best Practices for Wizards

When designing your next wizard, there are also several good things you can do to ensure its effectiveness:

Keep the number of steps at the minimum

The hard part of designing this kind of UI is striking a balance between the sizes of the chunks and the number of them. It’s silly to have a 2-step wizard, and a 10-step wizard can seem overwhelming or tedious. Ideally, the process should have 3–5 steps. Putting your wizard through a usability test will help ensure the number of screens is acceptable.

Keep the wizard’s purpose clear

At each step, users need to understand clearly what the wizard is asking. A wizard should provide enough information for users to make decisions and act on them. If it isn’t clear, users get stuck. There are two things that are essential to being clear about your wizard’s purpose:

  • A clear, concise wizard label on every screen
  • A brief explanation of purpose on the first screen.
Don’t: Homesite Home Insurance doesn’t provide a purpose statement on the first screen. If users enter this page directly from a different site, they might have a difficult time understanding what this wizard will help them accomplish.
##Remove unnecessary interface elements Additional links and content that user doesn't need when completing a task can distract the user. By removing them you help the user to focus on the task and improve the odds of completing it successfully. Indicate clearly where the user is in the process You need to clearly mark the boundaries of the wizard, so users know when they have finished. To make wizard user-friendly you should embody several features:
  • Numbering the steps
  • Show the direction of movement (as a rule it is from left to right or from top to bottom)
  • Distinguish the current step, and how many steps there are left.
  • Incorporate an indicator that shows successful completion of a step
  • Greeting final message with results
Don’t: Each step is an isolated UI space that shows no context — the user can’t see what went before or what comes next.
Do: Clear number of steps is visible right next to the step title. Additionally, UI shows an overview of all the steps at the top of the pattern. Original image credit: Raj Shrestha
##Choose good defaults Good defaults are useful no matter how you arrange the steps. But if the user is willing to turn over control of the process to you, odds are good they are also willing to let you pick reasonable defaults for choices they may not care much about, such as the location of a software installation. ##Provide ‘Cancel’ button Sometimes a user enters a wizard and, for various reasons, decides not to complete it. To avoid frustrating users who are looking for a way out, include a “Cancel” button in the wizard interface. ##Allow Undo for each step Offer a way for the user to step backwards, or to otherwise change her mind about an earlier choice. Users benefit if they can re-run the step and modify their previously entered data. When they can’t get back into the previous step to revise what they’ve entered (even if it’s a minor change), users often re-run the entire wizard. ![](/content/images/2017/04/8.png) ##Provide summary of choices It is good practice to present a summary of choices made throughout the wizard to the user near the end of the wizard. This will allow the user to review and double-check inputted data before the final “Finish” button is clicked. #Conclusion While wizards should look easy to an outsider, designers and developers know the truth: it’s really hard to design a good wizard. There’s a lot of planning, trial and error design, and complicated development that goes into wizard creation. Hopefully, best practices listed above will help you begin to develop your wizard craft.

Thank you!

Subscribe to Nick Babich

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.