Guided Multi-Step Wizards

Problem

Sometimes users need step-by-step guidance to achieve their goal.

Solution

Guide users through a process to the completion of their goal using a step-by-step wizard.

HTML code here
	

CSS code here
	

Why

Wizards can take something that seems very complex and make it approachable to an average user. On the other hand, for advanced users or those who want complete control over what is going on, the wizard is not a positive thing: they don't want anything done for them. It id therefore important to understand the user and that they would benefit from a wizard.

Wizards take something that is already a multi-step process, or something that requires advanced knowledge to work with, and breaks it down into digestible chunks that users can address one step at a time in a linear fashion. For tasks that involve complex conditions, they can replace pages of instructions by figuring out most of the conditions themselves and only presenting users with the content required to complete the process.

How

If the task or goal does not already have an established set of distinct sections, determine how to divide up the process. Look for dependencies within the underlying model to ensure that sections are established at logical points. Decision points are also good candidates for section determination, especially if they change what might be displayed in later steps. Another approach is to think in terms of a story, from the users' perspective; how would they think about accomplishing the goal or task, and break it up along those lines.

Give users an overview of the steps involved in a wizard up front. Obviously, if there are multiple or conditional steps, it would not be appropriate to detail them all at the start of the wizard.

If this is a wizard that might be used often, it may be helpful 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, a means should be provided for advanced users to bypass the wizard.

Simple "Next/Continue" and "Previous/Back" buttons may be the most efficient means for the user to navigate through the wizard; but if it makes more sense to trigger the "next" step in answer to a question that can be answered with a "Yes" or "No" button, these can be used instead of making the user answer and then click "Next."

It's good practice, especially if a set of steps were provided at the beginning, to show users where they are in the process of completing the wizard as they step through it.

Consider if the global navigation should persist throughout the process. If users need to focus on completing the task, then removing the standard/global navigational elements is appropriate - possibly by containing the wizard in a modal. If the user should to be able to exit the wizard at will, then leave global navigation in place, use non-modal panels, and provide a "Cancel" button on the steps where it makes sense.

At the end of the wizard, provide a review/confirmation that summarizes what took place and ask the user to confirm information entered.

Examples