vSphere Design Standards

Wizards

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.

Usage

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.

Guidelines

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).

Alternate Workflows

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.

Content Area

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.

Disabling Actions

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.

Wizard Footer

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.

Scrolling

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.

Visual Specification

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.