The Windows Interface
A Summary of GUI Guidelines

Buttons are graphical controls that initiate actions and change data object properties or interface properties. Users can choose buttons with the mouse. Users can also choose most buttons with the keyboard either through mnemonic access characters or keyboard shortcuts.

Three dimensional buttons that set properties should be shown in the depressed position whenever the specified property is in effect. When a button is inactive (i.e., it cannot be chosen because the associated action or setting is unavailable in the current application state), the button label should be dimmed.

The standard interface uses two types of button: command buttons and option buttons.

A command button or push button invokes an action or response. The button label should specify the action or response. Button labels are usually textual, but in control bars (e.g., ribbons, palettes, toolboxes), graphical labels may also be used. A graphical label is useful when a picture is more expressive than text. Graphical labels are useful in reducing clutter in a small space (e.g., a toolbox).

If the function of a command button changes depending on the state of the application, the button’s label should change accordingly. For example, in transactional dialogs (also called multi-action dialogs) where the user is allowed to perform several actions before closing the dialog, the Cancel button label should change to Close as soon as the user performs an action that cannot be canceled.

Command buttons in dialog boxes may do the following:

One command button in a dialog may be designated as the default. This button is activated automatically when the user presses enter.

An option button (also called a radio button) represents a single choice in a limited set of mutually exclusive choices. In any group of option buttons, the user can select only one at a time. Option buttons are represented by circles. If the number of option buttons in a group exceeds four, the buttons can be replaced by a standard list or drop-down list to save space. If space is not at a premium, option buttons provide easier access than lists.

A group of option buttons can be used to choose among a fixed set of attributes for a selection. Double-clicking is an optional shortcut for selecting the button and choosing the default command button in the dialog and closing the dialog.

Check boxes control individual choices that are either off or on in any combination. Check boxes are independent of each other. Check boxes may be grouped. Grouping does not affect their independence.

There are two permissible exceptions to the independence of grouped check boxes.

1) A check box may be used to give the user a quick way to turn off all check boxes in a group.

2) In crowded or complex dialog box, it is permissible to use check boxes for two dependent options that are in grouped with other related but independent options.

List boxes (see the guidelines in Section 3 of this document and Chapter 3 of the Microsoft Design Guide).

If a choice is not valid in the current application state, the item representing it should be omitted from the list unless it is important for the user to know of the existence of the choice and its current unavailability. If an unavailable item remains in a list box for this reason, it should appear dimmed.

The label of an inactive list box should be dimmed. Optionally (but recommended by the Microsoft Design Guide), the items in an inactive list box should also appear dimmed.

There are two types of list boxes:

A single-selection list is functionally similar to a group of option buttons.

Use a single-selection list instead of a group of option buttons under the following conditions.

1 The size or composition of the set of choices is variable.

2) The set of choices is large (i.e., more than four or five).

3) Space or layout constraints make option buttons impractical.

The currently selected item in a single-selection list should be highlighted. If the user keys a character when a single-selection list box has focus and the list box has text items, the list scrolls to the first item beginning with the keyed character and the item is selected. If no matching item is found, the list does not scroll; the highlight does not move.

There are two types of single-selection list boxes:

A standard-selection list box has fixed dimensions. It should be tall enough to display from three to eight choices, depending on the available space in the dialog box. The width should be is several spaces wider than the average width of the items in the list. If the list contains an item too wide for the list, a horizontal scroll bar is an optional solution.

In a dialog box, double-clicking on an item in a single-selection list is an optional shortcut for selecting the item and choosing the dialog box’s default command button. This behavior is equivalent to the shortcut for the option button.

If the items in a list represent possible attribute values of a current selection, the item for the current value should be highlighted when the list is first displayed. If the current selection is heterogeneous with respect to the possible attributes represented in a list, then no item should be selected.

A drop-down list box has a fixed width, but variable height. The width should be is several spaces wider than the average width of the items in the list. A horizontal scroll bar may be used if there is an item too wide for the list. The height is variable depending on the state of the list. When the list is closed, the height shows one item. When the list is open, the height should show three to eight items, depending on the space available in the dialog box. If the list contains more than eight items or a variable number of items, it should have a vertical scroll bar. A drop-down list may drop outside the dialog box. If there is not enough space on the screen to permit the list to drop down, it should open upward.

A drop-down list can be toggled between closed and open by:

An open list can be closed by pressing:

When a closed list has focus, pressing Down Arrow opens it. Scrolling is permitted only when a list is open. When a new item in an open list is selected, it appears in the list field.

If the items in a list represent possible attribute values of a current selection and the selection is heterogeneous with respect to the possible attributes, then no item should be displayed when the list is closed and no value should be selected when the list is opened.

To permit the user to select more than one item from a list, use either an extended-selection list or multiple-selection list. Extended-selection lists provide easy selection of a range of contiguous items. Multiple-selection lists are optimized for disjoint selection (i.e., selection of items that are not contiguous in the list).

Extended-selection lists should support both mouse and keyboard techniques for contiguous and disjoint selection (please see Section 3 of this document or Chapter 3 of The Microsoft Design Guide).

Examples of techniques for contiguous and disjoint selections in a list box.

A text box is an edit control that accepts text input from the user. The user can accept the current text, edit it, delete it, or replace it. Text boxes may be one or many lines high. Text boxes are usually one line high. Selection of text within a text box follows the standard selection techniques described in Section 3 of this document and Chapter 3 of the Microsoft Design Guide.

Keyboard techniques for moving within a text box that has focus are as follows.

The mnemonic access key or tab moves focus to a text box through the keyboard. When a text box gets focus by means of a keyboard technique, the text should be highlighted and the insertion point should be placed in the box at the end of the highlighted contents. When a text box gets focus by a mouse click, an insertion point should be placed inside the box as near as possible to the click location; the contents should not be highlighted.

If a text box is not available (e.g., because of the state of the application), its label should appear dimmed.

Fixed-length auto-exit text boxes can accelerate data entry by moving focus to the next control as soon as the last character of fixed length data is entered.

A combo box is useful when an application requires user input and can display a list of possible responses. The user can type a response in the text box if the correct one is not available in the list. There are two types of combo boxes: standard and drop-down.

The entries in the list should be in alphabetical order unless there is a compelling reason to use a different order (e.g., chronological order for dates). When space is at a premium in the dialog box, use a drop-down combo box.

Spin boxes are specialized text boxes that accept a limited set of discrete, ordered input values. Spin boxes may be used to display values that consist of several sub-components (e.g., date). In such cases the text box is divided into subfields (e.g., month, day, year). The subfields are separated by appropriate separator characters (e.g., / for date).

Static text fields are used to present read-only textual information. These fields are static in that the user cannot alter the text. However, the application may alter the text to indicate the current state of the application.

Although group boxes do not process mouse or keyboard input, they are technically considered controls. They are used to provide visual grouping of related controls.

The following are suggested guidelines for control labels.

1) Capitalize the first and last words of labels. Capitalize initial letters of all other words except articles (e.g., a, and, the), coordinate conjunctions (e.g. and, or, nor, for), prepositions (e.g., by, with) and the to in infinitives.

2) Provide unique mnemonic access character for controls to which the user needs direct keyboard access. If possible, use the first character of the label except when

3) Dim the label of controls that become unavailable or inapplicable.

4) Use bold font so dimmed labels remain legible.

5) Position control labels according to the following rules.

Applications can validate input into controls or other dialog settings either

Generally, the first two techniques provide better feedback because the user remains in the context. However, these first two techniques may not be appropriate when data values cannot be processed individually.

Valid input can be controlled by the type of control used to receive the input. Controls such as option buttons, check boxes, and drop-down lists limit the type of input to valid values. Other types of controls provide greater flexibility when the complete set of valid values cannot be predefined.