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
Ribbons, menus, and toolbars
Ribbons, menus, and toolbars are three methods that programs can use to show users what commands are available in those programs.
Ribbons
The ribbon is a rectangular area that fits across the top of an application window. It was introduced as a component of the Microsoft Office Fluent user interface in Office 2007.
The ribbon is composed of several tabs, each of which represents a subset of program functionality. The tabs contain related commands that are organized, grouped, and labeled.
The ribbon has several elements. They are listed and described in the following table, using examples from Microsoft Word.
Element |
Description |
Tools |
Context-sensitive tabs that appear on the ribbon under certain circumstances. For example, if you select an image in a document, the Picture Tools tab appears on the ribbon. If you select or are working in a table, the Table Tools tab appears on the ribbon. The tools tab disappears when the user clicks away from the selected item. |
tab |
A rectangular region on a ribbon that represents a subset of the program’s functionality. In the following example, the Home tab is open. |
group |
A rectangular region on a tab that contains a set of related controls and commands. The following example shows the Paragraph group on the Home tab. |
gallery |
A rectangular window or menu that presents an array or grid of visual choices to a user. For example, when a user clicks an image in a document and then clicks the Picture Tools tab, the Picture Styles gallery becomes available. |
mini toolbar |
A set of controls that appears in context when an object is selected. A user can use these controls to perform actions upon the object. For example, when a user selects text, the formatting mini toolbar automatically appears above the text. As the mouse pointer moves closer to the mini toolbar, the toolbar becomes more visible. As the mouse pointer moves away from it, the toolbar fades away or disappears altogether. |
ScreenTip |
A ScreenTip is a small window that displays descriptive text when a mouse pointer rests on a command or control. A ScreenTip may include a link to a Help topic. |
Quick Access Toolbar |
A collection of icons, located on a program’s title bar, that provides shortcuts to commonly used commands. Users can add icons to this toolbar or remove them. |
Dialog Box Launcher |
A specific icon that is used within a group to launch a related dialog box. It is located in the lower-right corner of a group. |
KeyTips |
Small keyboard tips that indicate what key to press to access program functionality. The user must press the Alt key to see the KeyTips and then press the indicated number or letter to run the associated command. In the following example, pressing the number 1 saves a Word document. |
Ribbon terminology
In Office 2007, Ribbon is capitalized. In Office 2010, ribbon is lowercase. Use on the ribbon, not in the ribbon.
Microsoft style
On the ribbon, click the appropriate tab or group to display the command that you want to add to the Quick Access Toolbar.
Not Microsoft style
Some tabs display in the ribbon only when they are relevant to the task at hand, such as when formatting a table or an image.
Do not use the possessive form of ribbon.
Microsoft style
One of the benefits of using the ribbon is its clear visual layout.
Not Microsoft style
One of the ribbon’s benefits is its clear visual layout.
Spell out Quick Access Toolbar. Do not abbreviate it to QAT.
Microsoft style
You can add or remove commands from the Quick Access Toolbar.
Not Microsoft style
You can add or remove commands from the Quick Access Toolbar (QAT).
You can add or remove commands from the QAT.
To refer to tools, use the following format: Under x on the y tab, in the z group, click zz.
Microsoft style
Under Table Tools, on the Layout tab, in the Data group, click Repeat Header Rows.
Not Microsoft style
Click the Layout tab under Table Tools, and then in the Data group, click Repeat Header Rows.
To refer to the Dialog Box Launcher, use the following format: On the x tab, in the y group, click the z Dialog Box Launcher.
Microsoft style
On the Home tab, in the Font group, click the Font Dialog Box Launcher.
Not Microsoft style
Click the Home tab, and click the Font Dialog Box Launcher in the Font group.
On the Home tab, in the Font group, click the Font box down-arrow.
When writing procedures that involve the ribbon, use the following format:
On the x tab, in the y group, click z.
On the x tab, in the y group, click z, and then click zz.
Microsoft style
On the Review tab, in the Comments group, click New Comment.
On the Home tab, in the Font group, click the arrow next to the Text Highlight Color icon, and then click the color that you want.
Not Microsoft style
Click the Review tab, and then click New Comment in the Comments group.
On the Review tab, under Comments, click New.
Menus
A menu is a group of the main commands of a program arranged by category such as File, Edit, Format, View, and Help. Menus are usually displayed on a menu bar typically located near the top of a window.
Menus contain commands. Do not refer to a menu command as a choice or an option. Also do not refer to a menu command as a menu item, except in content for software developers about the user interface.
To describe user interaction with menus and menu commands, use click. Do not use choose, select or pick. If you must refer to the user action of opening a menu, use click. To open a submenu, the user points to a command on the main menu, which causes the submenu to open, and then clicks the appropriate command.
Microsoft style
On the File menu, click Open.
On the View menu, point to Sort by, and then click Date.
The following illustration shows elements of menus. In most content, you should not have to refer to user interface elements by their technical names. The usual practice, here as elsewhere in the user interface, is to refer to elements by their labels.
Menu terminology
When referring to a specific menu, use lowercase for the word menu, as in “the Edit menu.”
In general, refer to unavailable commands as unavailable, not as dimmed, disabled, or grayed unless you are describing their appearance. In that case, use dimmed, but not grayed or disabled. In content for a technical audience, it is all right to refer to unavailable commands as disabled.
Microsoft style
There are several unavailable commands on the Edit menu.
If the Paste command is unavailable, first select the text that you want to paste, and then click Cut or Copy.
The Paste command appears dimmed because it is unavailable.
A disabled control is unavailable to the user. (In content for software developers.)
Not Microsoft style
There are several dimmed commands on the Edit menu.
If the Paste command is disabled, first select the text that you want to paste, and then choose Cut or Copy.
The Paste command appears grayed because it is unavailable.
In general, mention the name of the menu the first time that you refer to a particular command. However, if the location of the command is clear from the immediate context, you do not have to mention the menu name. An example is a topic about the Edit menu.
Microsoft style
If the Paste command on the Edit menu is unavailable, first select the text that you want to paste, and then click Cut or Copy. You now should be able to click Paste to insert the text in its new location.
Kinds of menus
In content for a general audience, do not qualify the term menu with the adjectives cascading, drop-down, pull-down, pop-up, shortcut, or submenu unless the way that the menu works needs to be emphasized as a feature of the product. Shortcut menu is all right to use, although in most cases, you can avoid it. Do not use any of these terms as verbs.
Microsoft style
Click the File menu.
When you click the right mouse button, a shortcut menu appears.
Not Microsoft style
Drop down the File menu.
When you click the right mouse button, a shortcut menu pops up.
In content for software developers about the user interface, you might need to detail specific kinds of menus.
Style of menu names and commands
Always surround menu names with the words the and menu both in text and in procedures.
Microsoft style
On the File menu, click Open.
Not Microsoft style
On File, click Open.
From File, click Open.
In procedures, do not surround command names with the words the and command. In text, you can use “the … command” for clarity.
Microsoft style
On the File menu, click Open.
Not Microsoft style
On the File menu, click the Open command.
Do not use the possessive form of menu and command names.
Microsoft style
The Open command on the File menu opens the file.
Not Microsoft style
The File menu’s Open command opens the file.
Follow the user interface for capitalization and use bold formatting both in text and procedures. Do not capitalize the identifier, such as menu or command.
Microsoft style
On the Options menu, click Keep Help on Top.
Not Microsoft style
On the Options menu, click Keep Help On Top.
Toolbars
A toolbar is a grouping of commands optimized for efficient access. Unlike a menu, which contains a comprehensive list of commands, a toolbar contains the most frequently used commands. Most toolbars are customizable, enabling users to add or remove toolbars, change their size and location, and even change their contents. Some toolbars are called bars. An example is the Command bar in Internet Explorer. Always follow the user interface.
Toolbars contain buttons. A toolbar button can have a submenu, which is indicated by an arrow next to it. A toolbar button with a submenu is called a menu button if the user can click either the button or the arrow to open the submenu, and it is called a split button if clicking the button carries out the command, but clicking the arrow opens the submenu. Do not refer to a toolbar button as a choice or an option. Also do not refer to a toolbar button as a toolbar item or a toolbar control except in content for software developers about the user interface.
To describe user interaction with toolbars and toolbar buttons, use click for toolbar buttons and submenu commands, and click, type, or enter for submenu commands that require users to provide information. Do not use choose, select, or pick.
Microsoft style
To read mail in Internet Explorer, click Read mail on the Command bar.
On the Command bar, click Tools, and then click Internet options.
The following illustration shows an example of a toolbar. In most content, you should not have to refer to user interface elements by their technical names. The usual practice, here as elsewhere in the user interface, is to refer to elements by their labels.
Toolbar Terminology
When referring to a specific toolbar, use lowercase for the word toolbar, unless the word Toolbar appears in uppercase in the user interface, as is the case with the Quick Access Toolbar in programs that use a ribbon, such as Word 2010. Toolbar is one word.
If there is only one toolbar, refer to it as the toolbar. If there are multiple toolbars, refer to them by name, followed by the word toolbar.
Refer to the main toolbar that is on by default and contains buttons for basic tasks, such as opening and printing a file, as the Standard toolbar, unless it is named in the user interface, as is the case with the Quick Access Toolbar.
Refer to named toolbar buttons by their user-interface names. Refer to unnamed toolbar buttons by their tooltip labels. Use the exact label text, including its capitalization, but do not include the shortcut key, the explanation, or the ellipsis for buttons that have them.
Refer to toolbar menu buttons and split buttons by their labels and the word menu. Use the exact label text, including its capitalization.
Microsoft style
On the Quick Access Toolbar, click New.
On the Quick Access Toolbar, click the arrow next to the Font color menu, and then click the color that you want.
On the Command bar, click Feeds.
On the Command bar, click the Print menu, and then click Print Preview.
Not Microsoft style
On the Quick Access Toolbar, click New (Ctrl+N).
On the Quick Access Toolbar, click the arrow next to Font color, and then click the color that you want.
On the Command bar, click the No feeds detected on this page button.
On the Command bar, click the Print menu, and then click Print Preview….
In general, refer to unavailable commands and options as unavailable, not as dimmed, disabled, or grayed, unless you are describing their appearance. In that case, use dimmed, but not grayed or disabled. In content for a technical audience, it is all right to refer to unavailable commands as disabled.
Microsoft style
There are several unavailable buttons on the Quick Access Toolbar.
When Word first opens, the Can’t Undo and Can’t Repeat buttons are dimmed because they are not available until there is something to undo or repeat.
In Microsoft Visual Basic .NET, the Stop Debugging button is disabled when a program is not in the process of being debugged. (In content for software developers.)
Not Microsoft style
There are several dimmed buttons on the Quick Access Toolbar.
When Word first opens, the Can’t Undo and Can’t Repeat buttons are disabled.
In Microsoft Visual Basic .NET, the Stop Debugging button is grayed when a program is not in the process of being debugged.
Kinds of toolbars
In content for a general audience, do not qualify the term toolbar menu button or toolbar split button with the adjective cascading, drop-down, pull-down, pop-up, or submenu unless the way that the menu works needs to be emphasized as a feature of the product. Shortcut menu is all right to use, although in most cases, you can avoid it. Do not use any of these terms as verbs.
Microsoft style
On the Windows Help and Support toolbar, click the Options menu.
On the Options menu, point to Text Size, and then click Largest.
Not Microsoft style
On the Windows Help and Support toolbar, open the Options pull-down menu.
On the Options menu, point to Text Size, and then click Largest on the submenu.
In content for software developers about the user interface, you might need to detail specific kinds of toolbars.
Style of toolbar names and buttons
In general, do not use the words the and button with toolbar buttons.
Microsoft style
To start a new document, click New on the Quick Access Toolbar.
Not Microsoft style
To start a new document, click the New button on the Quick Access Toolbar.
In general, do use the and menu with toolbar menu buttons and split buttons, but do not use the word button.
Microsoft style
To change Internet options, click the Tools menu on the Command bar, and then click Internet Options.
Not Microsoft style
To change Internet options, click Tools on the Command bar, and then click the Internet Options button.
To describe removing a check mark from a menu command, use click to remove the check mark. Do not use clear.
Microsoft style
To remove the Desktop toolbar from the taskbar, right-click the taskbar, and then click Desktop to remove the check mark.
Not Microsoft style
To remove the Desktop toolbar, right-click the taskbar, and then click Desktop to clear the check mark.
Do not use the possessive form of toolbars and toolbar buttons.
Microsoft style
To read mail, click Read Mail on the Command bar.
Not Microsoft style
You can read mail by clicking the Command bar’s Read Mail button.
Follow the interface for capitalization and use bold formatting for toolbar names and buttons. Do not capitalize the identifier, such as toolbar or button.
Microsoft style
In Windows Help and Support, click Help and Support home on the toolbar.
Not Microsoft style
In Windows Help and Support, click the Help And Support Home button on the toolbar.