The Microsoft Manual of Style: The User Interface
- 1/15/2012
- Windows user interface
- Windows Phone user interface
- User interface elements
- Ribbons, menus, and toolbars
- Webpage controls, dialog boxes, and property sheets
- Backstage view
- Control Panel
- Messages
- Other user interface elements
- Modes of interaction
- Mouse terminology
- Key names
- Content for multiple platforms
- User interface text
- User interface formatting
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
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 .
If you need help, click the Microsoft Word Help button .
If you cannot use inline graphics, use the name only.
Microsoft style
Click the Minimize button.