A wizard presents a multistep workflow that users perform in a recommended sequence.
Users navigate through the pages of a wizard by clicking the Next and Back buttons or by clicking an item in the table of contents (TOC). Users can choose to do the steps in sequence, return to a previous step, and jump forward to a step out of sequence.
An important feature of a wizard is that users can minimize it by clicking the Minimize button in the upper right corner. The wizard disappears and is visible only by its title in the Work in Progress portlet. When the user reopens the wizard, it is revalidated, using page number order.
Wizards are useful for complex workflows that can be broken into multiple steps. An advantage of a wizard lies in its ability to enforce dependencies between inputs. Validation of user input occurs not only at the field level, but also at the page level and when the user finishes the wizard. This strict control allows users to complete complex actions with minimal risk of error or data loss.
An alternative to a wizard is a multipage dialog, which is best suited for a set of related workflows. In a multipage dialog, users can visit pages in any order and do not need to visit every page.
Window Title Bar
- Use title-style capitalization.
- If the workflow in the wizard is to create an object, use <badged action icon> New <object type>.
- Provide the Minimize icon ( ) to allow users to minimize the wizard to the Work in Progress portlet. See Minimizing and Restoring for details.
- Provide a Help icon ( ) when users need more information about the data requested in the wizard. See contextual help for details.
- Don't include a Close icon ( ).
Layout and Paging
- When designing your wizard, consider how to move users efficiently through the workflow. The best design provides a good balance between the number of pages and the number of controls per page. While clutter can be a concern when too many controls are on a page, using too many sparsely-populated pages is also a problem because it requires more clicking on the part of the users.
- Fill at least 75% of the available space by grouping together controls that fit logically in the workflow and that can be validated or sent to the server together.
- Don't resize the window when moving from one page to another.
- Don't use tabs in a wizard. Tabs hide information and disrupt the workflow.
- Use a dialog inside a wizard when users need assistance to complete a page. For example, open a file chooser to assist users in choosing a file. A dialog is modal, and users must interact with it before they can return to the wizard. Don't allow a dialog inside a wizard to be minimized to the Work in Progress (WIP) portlet. This constraint is to avoid stacked windows going into and out of the WIP.
Wizard Inside a Wizard
- Avoid opening a wizard from within a wizard. If you can't avoid this situation, treat the second wizard like a dialog (open it on top of the first wizard and don't provide a minimize button).
- Use as few steps as possible, up to a maximum of nine steps. If your workflow has more than nine steps, try putting more information per page. Another option is to divide your workflow into two separate workflows, each with its own wizard.
- Keep the TOC to one level. Don't use substeps.
- Use "Name and location" or an equivalent for the first step.
- Use "Ready to complete" for the last step that summarizes the data that the user entered.
- For all other steps, use standard action names, if they exist, and favor verb phrases. For example:
- If the ask has alternate workflows, dynamically change the TOC based on a choice that the user makes in the wizard. A change in the TOC should occur early in the workflow so that the user knows the total number of steps in the process.
In this example, the wizard initially has five steps.
The number of steps changes when the user selects a different radio button in the second step.
- Include a page title, followed by optional instructional text. The wording in the page title should match the wording in the TOC or expand on it if the TOC entry was compressed to fit the width. Use bold font and sentence-style capitalization for the page title. Use regular font and sentence-style capitalization for the instructional text.
- Left-align labels and controls in the content area.
- When labeling a UI control, follow the guidelines for capitalization and punctuation specific to that type of control. See buttons, text input boxes, radio buttons, check boxes, and drop-down menus.
- If necessary, allow scrolling of the content area.
- Allow the user to resize the wizard but prevent users from making the wizard so small that its content is no longer visible.
Required and Optional Fields
- To avoid clutter, don't mark required fields. Most fields in a wizard are required and marking these fields with a red asterisk creates visual noise.
- Optionally, if a field is not required (can be empty and the user is still allowed to proceed), label the field "Optional."
- If a wizard is for an inventory object that has both required fields and optional fields, consider taking the optional fields out of the wizard and placing them in an Edit Settings dialog. This design is beneficial for an inventory object that has a large number of optional settings. Another benefit of this design is that it reduces the complexity of the workflow and enables users to change settings at a later date.
- If the user doesn't have permission to perform an action, disable the action. For example, if the user doesn't have permission to use storage profiles when creating a virtual machine, disable the Storage Profiles drop-down menu. Allow the user to continue the workflow, in this case, create the virtual machine.
- Include four buttons and label them Back, Next, Finish, and Cancel, in that order. Including both Next and Finish buttons enables users to finish in the middle of a wizard that has optional steps.
- Use the same absolute position for the footer buttons throughout the wizard.
- Enable the Next button on every page except on the "Ready to complete" page.
- Enable the Finish button only when it is possible to finish from that page, for example, if default values can be used for the remaining wizard pages. However, such action means users can finish the wizard without seeing the "Ready to complete" page.
- Never block backward navigation because of validation errors.
Backtracking to a Previous Page
Backtracking refers to when users return to an already-completed page and change the input.
- Within the TOC, make the chosen backtrack page the current step and remove the validation checkmark from all subsequent steps.
- Within subsequent pages, retain the existing information and indicate errors according to the Validation standard.
Minimizing and Restoring a Wizard
- Design wizards to be minimized to the Work in Progress portlet (WIP). In a minimized window, the changes users made are saved, but not applied. Users can resume the workflow upon reopening the wizard.
- When opening the wizard from the WIP, restore all pages to the state that they were in when the user minimized the wizard. Then revalidate the wizard per the Validation standard.
"Ready to complete" Page
- Use a "Ready to complete" page as the last step that summarizes the data that the user entered in the wizard.
This "Ready to complete" page uses a two-column list, separated into logical, related groups.
- In the content area, keep vertical scrolling to a minimum and avoid horizontal scrolling.
- In the TOC, avoid vertical scrolling and never allow horizontal scrolling.
- In the footer, never allow vertical or horizontal scrolling.
The maximum size of a wizard is 960 x 560 pixels. Within the wizard, the TOC is 220 pixels wide. The content area at the maximum size is 740 x 486 pixels, excluding scroll bars.
Recommended sizing and spacing of elements within a wizard
Visual specification for the TOC
Recommended spacing of multiple headings within a wizard page
"Ready to complete" page
Group boxes for organizing and simplifying tasks
Group box specification details