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.
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.
- 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, 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 links
- Wizard - Designing Interfaces
- Wizard - Welie.com
- Wizards and Guides Principles of Task Flow for Web Applications Part 2 - Boxes and Arrows
- Process Funnel - The Design of Sites
- Crafting a Wizard - IBM developerWorks
- jWizard: jQuery Form Wizard Plugin - W3Avenue
Code snippets
- No code snippets yet.
Wizard for setting up IntenseDebate
Source: http://intensedebate.com/install...Sequence Map
- Sequence map is “tab-like”.
- Completed steps are not clearly differentiated from steps left.
- Current step is highlighted.
- There are no buttons for moving back and forth in this step. However it is quite clearly guided how to continue.
- Elements that user doesn’t need during this task are not removed (main navigation, footer), but the page is still quite simple.
Dropbox Tour
Source: http://www.getdropbox.com/Dropbox presents each step on a separate page. However, user can switch between pages without a page refresh.
Setting up an account
Source: http://wink.com/invite/join- Clicking “Select” shows the “login panel”. (Progressive Disclosure).
- User can skip any step.
Sign up wizard
Source: https://www.google.com/analytics...Google Analytics uses multiple page wizard for signing up. The process has only few simple steps, so showing everything on a one page might have been a better idea instead of presenting each step in a separate page.
Wizard for ordering business cards
Source: http://www.moo.com/Sequence map
- All the steps in the Wizard are shown in a sequence map at the top of the page.
- Current step is highlighted.
- Completed steps look different from the steps remaining.
- User can move back by clicking the steps in the map.
- “Next step” button is not highlighted and there is no “back” button.
- There are only few elements on the page that user doesn’t need in this task. They have decided to show the main navigation also in the Wizard, which allows user to navigate away form the Wizard if he wants.
Creating a new campaign
Source: http://www.campaignmonitor.com/Creating a new email campaign contains quite a many steps, and steps vary depending to the choices the user makes. Therefore presenting each step in a separate page is a good choice. Things to notice in this example:
- Some main steps are divided into sub-steps. This is not always a good solution because now the user doesn’t know how many steps there actually are left. However, having just few sub steps is usually ok.
- Each step has a good title.
- All the main steps in the Wizard are shown at the top of each page in the sequence map, and current step is clearly highlighted.
Sign up wizard
Source: https://secure.delicious.com/reg...Sequence Map
- Sequence map at the top of the page lets the user know where he is in the process
- Current step is highlighted.
- Completed steps look different from the steps remaining.
- Sequence map is not navigatable.
- The process is flexible: The only thing the user needs to do is to complete the first step – other steps can be skipped.
- Instead of waiting for the last step until the actions take place, tasks get completed after each step. Downside is that user can’t go back in the process.
- “Next step” button is not highlighted and there is no “back” button.
- There are only few elements on the page that user doesn’t need in this task, all the other have been removed to allow the user to focus on this task.
Creative Commons
Comments
Leave a comment