Sometimes people need step-by-step guidance to achieve their goal.
Guide people to complete their goal using a step-by-step wizard.
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.
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).
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
You can use the NetAdvantage for Windows Forms WinTab control with a style of Wizard to implement this pattern.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Jennifer Tidwell, Wizard
Patterns in Interaction Design, Wizard
Jodi Bollaert, Crafting a Wizard
Jodi Bollaert, More Wizards Tips and Tricks