Multiple Page Wizard

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

Tags: content, navigation

Present each major step in a task on a different page. Indicate clearly where the user is in the process, and how many steps there are left.
Finnair uses Multiple Page Wizard to guide the user through an infrequent but critical task – booking a flight. Presenting each step in a separate page is a good choice because there are quite a many steps, and they need to be completed in particular order.
In the example current step and steps remaining are shown in a sequence map at the top of the page to let the user know where he is in the process. User can’t move back and forward in the wizard by clicking the steps in the map, but there are “Continue”, “Back”, and “Start over” buttons for moving around. Also note that unnecessary interface elements that might distract the user are left out (for example the global navigation header shown in all the other pages is gone).

Finnair’s online flight ticket booking service.

Finnair’s online flight ticket booking service.

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.

Useful linksUseful links icon

Example images (7 examples)

Comments

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