The Windows Interface
A Summary of GUI Guidelines

Dialog boxes may

A dialog box normally does not contain a menu bar, window scroll bar, split bars, resizing buttons, or status bars.

A movable dialog box has a title bar containing a Control menu box (with Move and Close commands only), and a title. A fixed dialog box has no title bar.

In general, applications should use movable dialog boxes only. A movable dialog box allows the user to reposition the box to view obscure data. It also maintains a sense of context because the name of the application or command that opened the dialog appears in its title bar.

Movable dialog boxes that present simple messages should have a title indicating the application name or the source of error if the message concerns a system or network error.

Movable dialog boxes that open to collect information required to process a command should have a title that includes the name of the command without the ellipsis. The menu name should not be included unless the same command exists on another menu or unless the command name requires the menu name to make sense.

The frame of dialog boxes cannot be sized. However, a dialog box may have an expanded form. The normal form contains the basic controls; the expanded form adds advanced options to the basic controls. A dialog box with an expanded form has an unfold button. An unfold button is a command button with chevrons (e.g., Options>>). When the unfold button is activated, the dialog box expands to the right, or downward, or in both directions. The expanded form contains both the basic options and advanced options.

After a dialog box has been expanded the unfold button may optionally be left active with the chevrons facing the opposite directions (e.g., Options <<) to allow the user to return to the basic form. If the application does not allow the user to return to the basic form, the unfold button should be made unavailable and its label dimmed.

An unfolding dialog box is always opened from its basic form with the unfold button.

A modal dialog box requires the user to respond before continuing work. A modeless dialog box permits the user to work outside the box without responding. There are four types of dialog boxes with respect to mode.

Message boxes are modal dialog boxes that display error messages and other important information. Message boxes for critical messages about system-related problems should be system modal dialog boxes. All other types of messages should be application modal dialog boxes. Only an active application should post messages. When an application is inactive, it should flash or beep for attention.

Every message dialog box should have a title bar. The title for application message dialogs should be the application name. The title for message dialogs associated with system or network processes should contain the name of the system or network product and the word "Message." Message dialog titles should never include the word "error."

Message dialog boxes should contain only command button controls. If the application requires information, then a regular dialog box should be used.

Every message dialog box should have a graphical symbol indicating the type of message.

There are three message types.

Dialog boxes are usually centered vertically and horizontally in the application window.

A dialog box may use command buttons to accomplish the following:

1) Every dialog box must have at least one button that closes the dialog.

2) A message dialog box requiring only an acknowledgment from the user, has a single button labeled "OK."

3) All other dialog boxes contain at least two buttons:

4) Multi-action dialogs include more than two buttons to allow the user to initiate additional actions. If the actions performed by these additional buttons irreversibly change the user’s data, the label of the Cancel button should change to Close as soon as the first such action is performed.

5) esc should activate the Cancel (Close) button.

6) The OK button does not have a mnemonic access character.

6) The Cancel button does not have a mnemonic access character. If the button label has been changed to Close, the button has the mnemonic access character "C".

One command button in a dialog box may be designated the default button and activated when the user presses enter. The default button should be the next most likely action. The default button should be distinguished from the other command buttons by a heavy border. In multi-action dialog boxes, different buttons may be the default button at different times depending on the current state of the data and the user’s interaction with the dialog.

When the user navigates to the command button that is not the default, the button with focus becomes the default (it gains a heavy border and enter activates it) while it has focus. The original default command button becomes the default again when focus moves to a control that is not a command button.

The labels of command buttons can change in the following two ways.

1) If the action represented by the button is not currently available, the label should be dimmed.

2) If the nature of the action represented by the button changes depending on the current state of the data or the user’s interaction with the dialog, the label can be modified to reflect the change.

When the dialog box closes, button labels should be reset to their original state.

For a consistent presentation of controls and simple dialogs, applications may use GoTo and GoSub buttons to let the user navigate to related dialog boxes.

The most appropriate placement of buttons in a dialog box is at the right or at the bottom of the dialog box where they will be seen after the user has scanned the relevant information (left to right, top to bottom). Whenever possible, command buttons should be either stacked along the right border of the dialog box or aligned in a row across the bottom of the dialog box. Stacking command buttons is a more common arrangement than horizontal alignment at the button except for command buttons in message boxes. Command buttons in message boxes should be aligned along the bottom of the box. Other arrangements may be used, if there is a compelling reason such as a natural mapping relationship (e.g., buttons labeled North, South, East, West can be placed in a compass-like arrangement). If there is not enough room to place buttons in one or the other of the above arrangements, then stack the most important command buttons and align the remaining command buttons in a row.

Guidelines for stacking command buttons along the right border of the dialog are as follows.

1) Start in the top right corner.

2) Buttons should generally be the same width (i.e., as wide as necessary to accommodate the longest label).

3) Group buttons according to whether or not they initiate an action. (Note: Unfold, GoTo, and GoSub buttons do not initiate actions.)

4) If there is an OK button, group it with the Cancel button separate from the other action buttons.

5) If there is no OK button, the Cancel button should be grouped with the other action buttons.

6) Leave at least 3 dialog units (DU) between the bottom of one button and the top of the next in the same group.

7) Leave at least 8 DU between groups of buttons.

8) Leave at least 6 DU between the edges of the dialog and adjacent edges of buttons.

9) Order commands as follows.

Guidelines for aligning buttons in a row across the bottom of the dialog are as follows.

1) Normally, buttons should be the same width. Individual buttons may be wider to accommodate exceptionally long labels.

2) It is not necessary to align buttons with other dialog controls. Buttons should form their own visual group.

3) Group buttons according to whether or not they initiate an action.

4) If there is no OK button, the Cancel button should be grouped with the other action buttons.

5) Space buttons evenly within each group. Leave at least 4 DU between the adjacent edges of buttons.

6) Leave at least 9 DU between groups of buttons.

7) Leave at least 6 DUs between the edges of the dialog and the adjacent edges of buttons.

8) Order commands as follows.

The recommended minimum size for OK and Cancel buttons is 40 X 14 DUs. The recommended minimum space between the left or right edge of a button and the nearest edge of the label text is approximately the width of a lowercase "n".

Command buttons are the only controls used in message dialogs. They represent the responses or choices offered to the user. The default button should be the safest or most typical response.

If a message requires no choice, the message dialog should have an OK button for the acknowledgment and optionally a Help button.

If the message requires a choice, there should be a button for each option. The clearest way to elicit a choice from the user is to ask a question and provide a button for each permissible response. When possible, phrase questions to elicit Yes or No responses. Yes and No command buttons are the preferred way of representing a choice of Yes or No. OK and Cancel buttons may be used, but may be ambiguous for some questions.

Some message dialogs offer the following three choices.

1) Perform a preliminary action before carrying out the requested action that led to the message (e.g., save a document before closing it). (Yes)

2) Perform the requested action without the preliminary action. (No)

3) Cancel the requesting action. (Cancel)

Help messages in message dialogs are "optional but highly recommended", especially for warning and critical messages.

Bold font is suggested for command button labels in dialogs. The font for control labels in a dialog box should be the same as the font used for other text unless there is a good reason to vary the text (e.g., a dialog may display sample text from another document in the original font that differs from the font used in the interface).

A dialog box that changes visual properties or attributes can display the effects of these changes before the user completes the intended action.