The Microsoft Manual of Style: The User Interface

  • 1/15/2012

Other user interface elements

In most content, especially for a general audience, do not differentiate between drop-down combo boxes, list boxes, and text boxes. Refer to such a control by its label, and use a descriptor only if necessary for clarity. If you must use a descriptor, use list or box. Do use the term check box, however.

The following table describes the various controls that can appear in dialog boxes and on webpages. Unless otherwise noted, avoid using the control name except in a discussion about designing a user interface. Use lowercase for the name of the control (“the Spaces check box”). In general, use sentence-style capitalization for the specific descriptor.

Control name

Definition

Usage

Example

Check box*

Square box that is selected or cleared to turn on or off an option. More than one check box can be selected.

Select the Spaces check box.

Click to clear the Bookmarks check box.

Under Show, select the Draft font check box.

Note Always include check box with the label name.

httpatomoreillycomsourcemspimages1831389.jpg

Combo box

Text box with a list box attached. The list is always visible. Because users can either type or select their choice, you can use enter to describe the action. Follow your project style sheet.

In the Font box, type or select the font you want to use.

or

In the File Name box, enter a file name.

httpatomoreillycomsourcemspimages1831391.jpg

Command button

Rectangular button that initiates an action. A command button label ending with ellipses indicates that another dialog box will appear. More information is needed before the action can be completed.

Click Options.

httpatomoreillycomsourcemspimages1831393.png

Command link

Command links enable users to make a choice among a set of mutually exclusive, related choices.

Insert a hyperlink for the link text.

If the user must click the link, refer to the text without using link or hyperlink. If the user must make a selection, refer to the links as options.

Click Browse the Internet now.

or

Click one of the following options:

Drop-down arrow

Arrow associated with a drop-down combo or list box or some toolbar buttons, indicating a list the user can view by clicking the arrow.

Click the Size arrow to see more options.

httpatomoreillycomsourcemspimages1831395.png

Drop-down combo box

Closed version of a combo box with an arrow next to it. Clicking the arrow opens the list.

In the Size box, type or select a point size.

httpatomoreillycomsourcemspimages1831397.png

httpatomoreillycomsourcemspimages1831399.jpg

Drop-down list box

Closed version of a list box with an arrow next to it. Clicking the arrow opens the list.

Depending on the type of list, use either list or box, whichever is clearer.

In the Item list, click Desktop.

httpatomoreillycomsourcemspimages1831401.jpg

Group box

Frame or box that encloses a set of related options. In some programs, a group box can be indicated by a single line that unifies the options below it. The group box is a visual device only. If necessary for clarity, you can use either under followed by the label or in the <name of group> area.

Click Small Caps.

or

Under Effects, click SmallCaps.

or

In the Effects area, click Small Caps.

httpatomoreillycomsourcemspimages1831403.jpg

Label (do not use caption)

Text attached to any option, box, command, and so on. Refer to any option, box, and so on by its label.

In the Font list, click Arial.

httpatomoreillycomsourcemspimages1831405.png

Links

Links enable a user to go to another page, window, or Help topic; display a definition; initiate a command, or select an option.

Insert a hyperlink for the link text, and then refer to the text without using the word link or hyperlink.

Click Check for updates.

List box

Any type of box containing a list of items the user can select. The user cannot type a selection in a list box.

Depending on the type of list, use either list or box, whichever is clearer.

In the Wallpaper list, click the background wallpaper of your choice.

httpatomoreillycomsourcemspimages1831407.jpg

List view

List views enable users to view and interact with a collection of data objects, using either single selection or multiple selection. Refer to a list view as a list.

In the Picture library list, click Forest Flowers.

Option button (do not use radio button except in developer content.)

Round button used to select one of a group of mutually exclusive options.

Click Portrait.

httpatomoreillycomsourcemspimages1831409.jpg

Progress bar

Progress bars enable users to follow the progress of a lengthy operation.

While the Memory Diagnostics Tool runs, you see a progress bar that indicates the status of the test.

httpatomoreillycomsourcemspimages1831411.jpg

Progressive disclosure controls

Progressive disclosure controls enable users to show or hide additional information including data, options, or commands.

Refer to individual controls by name. You can also use the name and a symbol in parentheses or an image.

To expand or collapse the folder, click the plus sign (+) or the minus sign (-) next to the folder name.

or

Click the chevron to expand your current network profile.

httpatomoreillycomsourcemspimages1831413.png

Slider* (also called trackbar control in some developer content)

Indicator on a gauge that displays and sets a value from a continuous range, such as speed, brightness, or volume.

Move the slider to the right to increase the volume.

httpatomoreillycomsourcemspimages1831415.jpg

Spin box (do not use spinner or other labels)

Text box with up and down arrows that the user clicks to move through a set of fixed values. The user can also type a valid value in the box.

In the Date box, type or select the part of the date that you want to change.

httpatomoreillycomsourcemspimages1831417.png

Tab* (also called tabbed page in technical documentation)

Labeled group of options used for many similar kinds of settings.

On the Tools menu, click Options, and then click the View tab.

Note Always include tab with the label name.

httpatomoreillycomsourcemspimages1831419.jpg

Text box

Rectangular box in which the user can type text. If the box already contains text, the user can select that default text or delete it and type new text.

In the Size box, select 10 or type a new font size.

In the Size box, enter a font size.

Note You can use enter if there is no chance of confusion.

httpatomoreillycomsourcemspimages1831421.png

Title (do not use caption)

Title of the dialog box. It usually, but not always, matches the title of the command name. Refer to the dialog box by its title when necessary, especially if the user needs to go to a new tab.

In the Options dialog box, click the View tab.

httpatomoreillycomsourcemspimages1831423.jpg

Unfold button

Command button with two “greater than” signs (>>) that enlarges a secondary window to reveal more options or information.

Click Profiles for more information.

httpatomoreillycomsourcemspimages1831425.png

For the names and functions of some other controls not included in this list, see the Controls section of the Windows User Experience Interaction Guidelines on MSDN.

Unnamed buttons

If you refer to an unnamed button that appears in the interface, use the name of the tooltip, and then insert a bitmap showing the button, if possible. For more information, see dialog boxes, Document conventions (Chapter 6), User interface text.

Microsoft style

Click the Minimize button httpatomoreillycomsourcemspimages1831427.png.

If you need help, click the Microsoft Word Help button httpatomoreillycomsourcemspimages1831429.jpg.

  • If you cannot use inline graphics, use the name only.

Microsoft style

Click the Minimize button.