Share via


Wizards: Design Guidelines 

All Pages

Orientation Pane

Opening Page

Interior Pages

Progress Pages

Closing Pages

All Pages

  • Make all wizard pages conform to the appropriate layout specifications.

  • Display a wizard window so that the user can recognize it as the primary point of input. For example, if you display a wizard from a control that the user chooses in a secondary window, you may need to position the wizard window so that it partially obscures that secondary window.

  • If irreversible changes will be applied when the user clicks Next, make clicking Next result in a confirmation message (presented in a modal message box). You should use a configurable cancellation dialog box for this purpose.

    • Make the Previous button inactive on the subsequent page.
    • Make all earlier pages in the orientation pane unavailable.
  • If, after applying irreversible changes, the user clicks the Cancel button, use a message (presented in a modal message box) to remind the user that changes have been applied and that they cannot be cancelled.

  • By default, the following buttons appear at the bottom of the wizard window (in the navigation button bar). Disable them under the circumstances shown.

    Command Button Action Disable

    < Previous

    Returns to the preceding page in the linear order of the wizard pages.

    Note: If the user selects the Do not show this page again check box on the opening page, the Previous button on the succeeding page remains enabled.

    • On the opening page
    • If the previous page applied settings that cannot be reversed
    • On progress pages

    Next >

    Moves to the next page in the task flow and maintains settings the user provided in previous pages.

    • When the user has not yet provided values in required fields
    • On the final page
    • <Action verb> command (replaces the Finish button)
    • Finish

    Applies user-selected or default settings from all pages and completes the task. The <Action verb> button is available on the first page on which the user can take the intelligent default.

    • On progress pages, until the action is complete
    • On opening and interior pages until the <Action verb> command can be selected

    Cancel

    Discards any user-selected, reversible settings, terminates the process, and closes the wizard window.

    • Never (If none of the non-irreversible settings the user chose can be applied, make the <Action verb> button inactive, and change the Cancel button to Close.)
  • Avoid opening secondary windows (such as property sheets and dialog boxes). Users are often confused by the additional complexity of secondary windows, so avoid making the use of secondary windows a requirement for completing the wizard.

  • Avoid a wizard design that requires a user to leave the wizard to complete a task. Less-experienced users rely heavily on wizards. Asking the user to leave a wizard to perform a task can lead to confusion, and it makes the function of the Cancel button more ambiguous.

  • Set default values for controls where possible. If you want to enable the use of the Finish button at the beginning of the wizard, all possible choices must have a default selected.
    Do not enable a default selection for an end-user license agreement (EULA). Neither the Yes option nor the No option should be selected.

  • Do not advance pages automatically. Wizards are designed for the user to decide when the selections are such that he or she can advance.

  • Put access keys on all controls.
    Exception: Do not put access keys on the buttons labeled Finish or Cancel/Close. By default, they map to the ENTER and ESC keys, respectively.

Orientation Pane

  • The orientation pane is a fixed-width, 160-pixel-wide navigation system.
    The orientation pane is implemented as a series of LinkLabel controls contained within a Flow Layout Panel. This should allow wrapping between lines in an easy and efficient manner.
    Art Image Figure 1 UI components of the wizard with the orientation pane enabled.
    Art Image Figure 2 Pixel-level layout for the orientation pane.

Opening Page (Getting Started/Before You Begin/Task-based)

There are three types of opening pages. Text-only welcome or prerequisite pages are not required; however, they can be used. Or, should you not need a separate page, the opening page can contain at least one question/response control in addition to any introductory text.

Art Image

Figure 3 Opening page.

  • Depending on the content, the opening page can be titled either Getting Started ** or Before You Begin, or have a task-based title.
  • If there is a particular item of note, you can use a warning or error icon to indicate critical information that user needs to be aware of before he or she proceeds.
  • You can use a Do not show this page again check box. The wizard will then begin on the second page the next time the user runs it. The opening page remains as part of the wizard, and it can be opened again if the user clicks the Previous button on the second page.
    Exception: Do not provide a Do not show this page again check box if the information is so critical that the user must be reminded of it every time the wizard runs.

Getting Started/Before You Begin Pages

Use a Getting Started/Before You Begin page only when the user needs information before he or she begins to work with the wizard. If the wizard has no prerequisites, warnings, or items of note, you can omit the Getting Started/Before You Begin page.

  • Do not put a control on Getting Started or Before You Begin pages other than the optional Do not show this page again check box.
  • Use the title Getting Started for pages that give general information about the wizard, how it works, and what the outcome will be.
  • Use the title Before You Begin for pages that give prerequisites for running the wizard.

Task-based Opening Pages

Use a task-based title for opening pages that contain a control other than a Do not show this page again check box. The title should reflect the task represented by that control.

  • The task-based title should be no more than one line. Use title caps, and do not use ending punctuation.
  • Use verb phrases or noun phrases as titles.
  • Include two or three lines of text at the top of the content pane that serve as an introduction to the wizard.
    • Begin the text with the phrase: “This wizard helps you…”
    • If there’s a short list, it can be bulleted.

Interior Pages

Art Image

Figure 4 Wizard interior page.

  • Do not use purely informational interior pages. Make the completion of each wizard page a discrete step in the overall task.
    Exception: Milestone pages are permitted. They’re synonymous with confirmation before settings are applied.
  • Put no more than one user decision on a single wizard page. You can put multiple controls on a page, but they should interoperate (such as a Path text box and a Browse command button) or be related input in the same discrete step (such as User name and Password text boxes).
  • Do not use an interior wizard page as a substitute for a dialog box. For example, if the user needs to browse for something, add a Browse button to the wizard page, and open the secondary Browse for <item> dialog box.
  • Place status bars in a progress wizard page, not in a secondary dialog box. This alleviates confusion over the result of clicking Cancel.
  • Do not set a default state for option buttons on an end-user license agreement (EULA) page. The user must choose whether or not to accept the agreement.
  • When user selections will be applied mid-wizard, use a milestone page to summarize the changes and confirm that the changes should be applied. Milestone pages are also useful as transitional pages when you are leveraging interior pages from different wizards.
    At the bottom of a milestone page, use the following text: “To change these settings, click Previous. To apply the settings, click Next.”

Progress Pages

There are two types of progress indicators. The first type, a determinate progress indicator or a progress bar, shows definite progress toward a completion state. You should use a determinate progress indicator when you can accurately measure the time remaining in the current task.

The second type of progress indicator is used for indeterminate-length processes. For this type of process, replace the progress bar with a looping animation, such as an hourglass.

  • Layout of progress pages follows the standard control layout guidelines for wizards.
  • Place a descriptive label at the top-left of the content pane that summarizes the current step of the task being performed. Position the progress bar or a looping animation below the descriptive label.

Closing Pages (Optional)

There are two major types of closing pages: summary pages and What's Next pages; however, a closing page is not required for wizards of two or three pages. Closing pages replace the Wizard '97 “Completing the <Wizard Name>” pages.

Summary pages

There are two types of summary pages: successful completion pages and unsuccessful completion pages.

Successful completion page

When the user has successfully completed the wizard, title the page Completing the <Wizard Name> Wizard.

Art Image

Figure 5 Successful completion page.

  • Avoid using controls on wizard closing pages.
    Exception: You may use a check box that initiates an optional additional action (such as opening another surface or running the wizard again) when the user closes the wizard. The check box should be immediately above the sentence, “To close this wizard, click Finish.”
    If an action begins after the wizard closes, end the page with, “To close this wizard and <perform action>, click Finish.”

Unsuccessful completion page

  • When only some (or none) of the settings the user chose can be applied, title the page “Wizard Not Completed.”
  • Avoid using controls on Wizard Not Completed pages.
    Exception: You may use a check box that initiates an optional additional action (such as opening another surface, re-running the wizard, and so on) when the user closes the wizard. The check box should be immediately above the sentence, "To close this wizard, click Finish."
  • If none of the non-irreversible settings the user chose can be applied, make the Finish button inactive, and change the Cancel button to Close.
    Developer Note:
     Changing Cancel to Close: To change the Cancel button to Close, use the PSM_CANCELTOCLOSE message. Use the PSM_SETWIZBUTTONS message with the PSWIZB_DISABLEDFINISH flag to make the Finish button inactive.

What's Next Pages

The What's Next type of closing page tells users what will happen when they click the Finish button.

  • If another piece of UI will open when the user clicks Finish, indicate such in a paragraph of text below the completion title. If several events will result, use a bulleted list to indicate the steps.
  • If the user has an option as to what happens next, use a check box to describe the additional action. The check box should be positioned immediately above the sentence, “To close this wizard, click Finish.”