Also known as: Process Funnel, Process Guide, Stepped Tasks, Process Flow.

Why

• Completing a task gets easier. The user can just follow a preplanned, step-by-step path to accomplish his goal.
• It increases the chances that the task gets completed successfully.

Below are listed pros and cons for different Wizard types:

One Page Wizard

+ Lets the user see what it takes to complete the task on one page.
+ Easy to move back and forth between steps and make changes.
+ Seeing other steps at the same time can help the user to complete other steps.
- Bad choice if tasks are highly branched.
- Seeing a long page can scare off the user.

Multiple Page Wizard

+ Hides the complexity of the task as the user can see and focus on only one or few steps at a time.
+ Detailed guidance can be provided on every page.
- Can’t see the big picture.
- Seeing previous steps could help the user to complete other steps.

How it works

General

• Break up a task into logical, titled steps.
  • See Content Groups pattern for guidance on how to group information.
• Keep the number of steps at the minimum.
  • Usually it is not good to have more than 6-7 steps in a wizard, especially not when each step is on a separate page, because moving between several steps can be slow and frustrating.
• Remove unnecessary interface elements.
  • Additional links and content etc. that user don’t need when completing a task can distract the user.
  • Removing them helps the user to focus on the task and improves the odds of completing it successfully.
  • However, don’t over-simplify it.
• Provide the option to save and continue later.
  • Especially when task is complex or will take a while to complete, it is important to allow the user to save his work, or do it automatically.
• Keep it flexible.
  • Guide the user, rather than force him to do things.
  • Make it easy to move between steps and cancel the task.
  • Allow user to skip optional steps.
  • If possible, allow some freedom for the experts.
  • It might be a good idea to provide also a non-wizard alternative for expert users.
• Provide good default values when possible (see Good Defaults pattern).

Guidelines specific to One Page Wizard

• Consider making it dynamic.
  • For example, instead of showing all the steps in the page in the beginning, reveal more steps one at a time as user completes steps (see Responsive Disclosure pattern in Designing Interfaces).
  • One option is to put each step onto separate panels and make only one visible at a time (see Accordion pattern in Welie’s collection).

Guidelines specific to Multiple Page Wizard

• Minimize the number of pages
  • If there are a many steps, or steps don’t require a lot of screen real estate, combine related steps together on one page.
• Consider making the first step an overview page that lets the user know what it takes to complete the task.
  • If the task is very complex or takes a lot of time to complete, it is a good idea to explain the process and purpose of the wizard on the start page.
• Show a sequence map of all the steps in the Wizard at the top of each page.
  • Highlight the current step in a clear way, and consider visually differentiating the completed steps from the steps remaining, to let the user know where he is in the process.
  • Name the steps clearly. Use step numbers in them when reasonable.
  • Let the user to navigate back (and forth) by clicking the steps on the map.
• Show a summary on the last page.
  • Let the user check the information he has given in the previous steps before he completes the task to prevent mistakes.

History

This pattern was created by Janne Lammi. It is inspired by several articles, design patterns, and books on the topic.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with wizard