Multiple Page Wizard

What problem does the pattern solve?

User needs to complete a task that has some or all the following characteristics:

  • Performed rarely.
  • Complex
  • Contains several steps.
  • Can’t be undone or edited easily after completed (e.g. booking a flight).
  • Steps need to be completed in a prescribed order.
  • All the steps can’t fit on a single page (if they do, use Single Page Wizard instead).
  • The process is branched / has dependencies
    Note: Be careful when using this pattern. Wizard is a bad choice when users are experts and/or the task is done often, because Wizard has negative effect on efficiency and user control.

When to use it?

User needs to complete a task that has some or all the following characteristics:

  • Performed rarely.
  • Complex
  • Contains several steps.
  • Can’t be undone or edited easily after completed (e.g. booking a flight).
  • Steps need to be completed in a prescribed order.
  • All the steps can’t fit on a single page (if they do, use Single Page Wizard instead).
  • The process is branched / has dependencies
    Note: Be careful when using this pattern. Wizard is a bad choice when users are experts and/or the task is done often, because Wizard has negative effect on efficiency and user control.

How to use it?

  • Break up a task into logical, titled steps.
  • Keep the number of steps at the minimum.
    • Usually it is not good to have more than 6-7 steps in a wizard, 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).
  • 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.

Why to use it?

  • 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 Multiple Page Wizard:
    Pros
  • 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.
    Cons
  • Can’t see the big picture.
  • Seeing previous steps could help the user to complete other steps.

Accessibility

Sources

Finnair’s online flight ticket booking service.

Useful links

Example images (7 examples)

Comments

  • There are no comments posted yet. Be the first one!