The Microsoft Manual of Style: The User Interface

  • 1/15/2012

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.

httpatomoreillycomsourcemspimages1831344.jpg

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.

httpatomoreillycomsourcemspimages1831346.jpg

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.

httpatomoreillycomsourcemspimages1831348.jpg

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.

httpatomoreillycomsourcemspimages1831350.jpg

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.

httpatomoreillycomsourcemspimages1831352.jpg

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.

httpatomoreillycomsourcemspimages1831354.jpg

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.

httpatomoreillycomsourcemspimages1831356.jpg

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.

httpatomoreillycomsourcemspimages1831358.jpg

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.

httpatomoreillycomsourcemspimages1831360.jpg

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.

httpatomoreillycomsourcemspimages1831362.jpg
httpatomoreillycomsourcemspimages1831364.jpg

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.

httpatomoreillycomsourcemspimages1831366.jpg

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.