Wizard
Problem
Sometimes people need step-by-step guidance to achieve their goal.
Solution
Guide people to complete their goal using a step-by-step wizard.
Context
- You have a goal or task that can be separated into distinct coherent steps, and/or you have multiple possible branches that are conditional.
- Most of your users are occasional or new such that, e.g., Work With wouldn’t make more sense.
- You need to constrain people to a particular path to complete a goal or task.
Rationale
Wizards can take something that seems so complex that only a wizard could do it and make it approachable to an average person. On the other hand, for advanced users or those who need (or at least think/feel they need) complete control and knowledge over what is going on, the wizard part is not a positive thing—they don’t want anything done for them “automagically,” so you need to be sure you know your users and that they’d benefit and appreciate a wizard.
They work by taking either something that is already a multi-step process or something that requires advanced knowledge to work with and breaking it down into digestible chunks that people can take one step at a time in a more or less linear fashion. Also, for tasks that involve complex conditions (such as long application or tax forms or computer OS configuration), they can replace pages of instructions by figuring out most of the conditions themselves and only presenting people with the stuff they need to see.
Implementation
If your task or goal does not already have an established set of distinct chunks, think about how to break it up. Look for dependencies within the underlying model to ensure that you make breaks at natural places. Decision points are also good candidates, especially if they change what might be displayed in later steps. Another approach is to think in terms of a story, from your users’ perspectives; how would they think about accomplishing the goal or task, and break it up along those lines.
Once you have what you think are a good set of chunks, take a step back and look at it from a high level. Do you have too many steps—if you have too many, small steps, this can make completing it seem longer than it actually is. By the same token, if you only have two steps, you might need to reconsider if Wizard is appropriate.
It’s good to set expectations up front, so you should give people an overview of the steps involved in a wizard up front. Obviously, if there are multiple or conditional steps, you wouldn’t want to detail them all here, but if have a set of higher level steps in that case, use those. If you can estimate how long it will take, that may be a good to show, unless you have business reasons to not, for instance, dissuade people from starting.
If this is a wizard that might be used often, you may want to offer a way to hide the introductory screen in future uses (e.g., a checkbox saying “Show this screen when starting this wizard”). Similarly, if this is a wizard that hides a more direct but unguided approach to achieving the same goal, you should provide a way for advanced users to get right to all those more advanced knobs—it’s usually more efficient than wizards.
Then you start walking them through it. You can use the simple “Next/Continue” and “Previous/Back” button approach, but if it makes more sense to trigger the “next” step in answer to a question that can be answered with a couple buttons (e.g., Yes or No), you can use those instead of making people answer and then click Next.
It’s a good practice, especially if you supplied a set of steps up front, to show people where they are in the process of completing the wizard as they step through it.
Consider if you want to keep your global navigation or not throughout the process. If people need to focus on and complete the task or you want to encourage them to (as in to complete a purchase), then removing the standard/global navigational elements is probably a good idea (or a Modal Panel). If you want people to be able to exit the wizard on a whim, then leave those in place, use non-modal panels, and provide a Cancel type button on the steps where it makes sense.
Finally, at the end of the wizard, you should usually provide a review/confirmation that sums up what took place and ask people to confirm, if the changes in the wizard were not already applied (otherwise a review is handy just to solidify in people’s minds what happened).
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
Windows Forms
You can use the NetAdvantage for Windows Forms WinTab control with a style of Wizard to implement this pattern.
Examples
This is from the well-known king of wizards--Turbo Tax. Here they have a good example of showing the overall steps up front to give people an idea of what to expect.
http://quince.infragistics.com/111e
This is a good example of how you can offer people the guided (wizard) approach or the advanced (just let me get directly at all the knobs) approach. You might argue this is also an example of Clear Entry Points.
http://quince.infragistics.com/10vz
This is another example of the stereotypical Back and Continue buttons. Notice here how they have the left triangle on the Back button (reminiscent of the browser back button), but they don't do it on the Continue button. One suspects there's a reason for this--maybe just to not add extra visual noise--but I don't know it.
http://quince.infragistics.com/117y
This one shows how you can use alternate options for the "Next" button when the options are clear actions or simple answers to the sole question on the form. The most common will be these kind of Yes/No questions--no sense in making people select a yes/no option and then click Continue. Better to save them a click.
http://quince.infragistics.com/1149
If your wizard has the option to save and come back, it is good to ease people back into it, as shown here. In addition to making it obvious how to get back in, this one also shows a Progress Indicator to let people know where they are in the process.
http://quince.infragistics.com/11b5
The primary example is from Microsoft Outlook’s rules wizard. This is an interesting one because it combines the first two steps on the first screen and even offers a way to complete it on the first page. Of course, you can cancel and go next as well. Very compact and effective.
http://quince.infragistics.com/11dc
This is the second step in the add new account wizard in Outlook, notice how it immediately offers the option to manually configure the same settings—this is great for more advanced users who don’t want to be stepped through the wizard.
http://quince.infragistics.com/1120
The data source configuration wizard in Visual Studio prompts people to choose right up front a decision that will dramatically alter the following screens in the wizard.
http://quince.infragistics.com/119p
This example shows a very good experience for preparing people to step through a process. It reassures people that there are four simple steps. Each step is represented with quality visual design using icons, and it is interactive—as people move the mouse over each step, it highlights and dims the others while bringing a simple, short description into view.
http://quince.infragistics.com/1175
Again, zipcar uses high quality visual design, but the point of interest here is up top—it uses the little arrow and car image to indicate which step in the process people are in. And at the bottom, the word “proceed” is reinforced using the little triangle pointing to the right.
http://quince.infragistics.com/11de
This is another example of using a nicely-designed visual indicator (up top) to show where people are in a process from the Infragistics store.
http://quince.infragistics.com/11gk
LendingTree has a few things to recommend it. First, it uses a clear indicator up top of where people are in the four-step process. They reinforce that in the title, saying “Step 1.” They use Primary Action at the bottom—see how the primary action “Save and Continue” is a prominent button (that also uses a nice chevron pointing to the right) while the Back option is a much less prominent link. Finally, they make it clear that clicking the continue button will also save what people are putting into this step while simultaneously reassuring them with the lock and privacy/security protected message—thereby attempting to assuage concerns about moving on to the next step.
http://quince.infragistics.com/11ce
Sources
Jennifer Tidwell, Wizard
Patterns in Interaction Design, Wizard
Jodi Bollaert, Crafting a Wizard
Jodi Bollaert, More Wizards Tips and Tricks
Tags
