UI elements and interaction

Formatting names of UI elements

When referring to any UI element by name, put its name in boldface, using the <b> element. This includes names for buttons, menus, dialogs, windows, list items, or any other feature in the UI that has a visible name.

Don't make an official feature name or product name bold, except when it directly refers to an element in the UI that uses the name (such as a window title or button name).

In most cases, follow the capitalization as it appears in the UI. However, if the UI is inconsistent or the label is all uppercase, use title case.

Not recommended: In the New Project window, select "New Activity", and then click the "Next" button.

Recommended: In the New Project window, select the New Activity checkbox and then click Next.

Terminology and usage

A user interface can contain a variety of UI elements. Following are some definitions of the terms to use when referring to them.

Windows, dialogs, and panes

Most often, a window is the entire application window in a desktop environment. However, it can also refer to modular application elements that you can open and close. For example, in Android Studio, several windows are available in the View > Tool Windows menu.

A dialog is a smaller window that is detached from the main application window and appears in front.

A pane is similar to a window inside the application—it's a distinct rectangular region of a window. However, a pane is tightly coupled to the other UI regions around it and usually cannot be hidden on its own, whereas a window is distinctly separate and can be hidden.

Menu bar

In a desktop application, the menu bar appears at the top of the window or the top of the screen; it's a set of menus (such as File or Edit), each of which is a set of related commands and/or nested submenus.

To refer to an item in a menu, use the term "command," not "choice," "menu item," or "option." Exception: if you're documenting how to build an interface, you may use "menu item."

To refer to a menu, use the form "the Label menu."

To tell the reader where to find a command in a menu or submenu, use arrow (>) notation.

Recommended: Select View > Tools > Developer Tools.

It's okay to use just one <b> element that includes the entire sequence. Put a nonbreaking space before each greater-than sign.

One advantage of this notation is that it lets you give the menu name before the item name (the same order in which the user encounters them), thus avoiding phrases like "Select Open from the File menu."

However, this notation applies only to menu items. Don't use it to describe a combination of different UI elements.

Not recommended: Select MyApp > Preferences > Languages > + > CSS.

Recommended: Select MyApp > Preferences and then select the Languages preference pane. Below the Custom Language Preferences table, click Add and select CSS.

Toolbar

A toolbar is a set of buttons for common user actions. A toolbar button that includes a menu is called a menu button.

To refer to a button in a toolbar, use the terms "button" or "menu button," not "choice," "option," "toolbar control," or "toolbar item." Exception: if you're documenting how to build an interface, you may use "toolbar control" or "toolbar item."

Button

A button initiates an action when clicked (or tapped, in the case of a touchscreen). To refer to a button, use the button's label.

Not recommended: Click the "OK" button.

Recommended: Click OK.

If the button includes an icon, write the name of the button as shown in the tooltip, and add the button icon immediately after the name.

Not recommended: Click the hammer icon button.

Recommended: Click Add .

Before you mention a toolbar button for the first time, provide instructions for using the menu bar to execute the same command. After that, you may refer to the toolbar button.

Recommended: Select Build > Make Project, or click Make Project in the toolbar.

If a UI element name ends with an ellipsis (...), leave out the ellipsis.

Not recommended: Click Browse ....

Recommended: Click Browse.

Tab

A tab is a navigation element that looks like a file tab. To refer to a tab, use the form "the Label tab."

Recommended: Select Tools > Options, and then click the Edit tab.

Text box

A text box is a box that the user can type in. To refer to a text box, use the form "the Label box."

Recommended: In the Owner box, enter your name.

List box, combo box, and spin box

A list box is a box that offers the user a list of items. To refer to a list box, use the form "the Label drop-down list" or "the Label box," whichever is clearer.

Recommended: In the Item drop-down list, select Desktop.

A combo box is a combination of a text box and a list box. To refer to a list box, use the form "the Label box." To refer to entering a value into a combo box, use the verbs "type or select" or "enter."

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

A spin box is a box that lets the user choose a value by clicking arrows or by typing. To refer to a spin box, use the form "the Label box." To refer to entering a value into a spin box, use the verb "enter."

Recommended: In the Font Size box, enter a font size.

Checkbox

A checkbox is a small box that indicates whether an option is on or off. To refer to a checkbox, use the form "the Label checkbox." Be wary of using the verb "check," which can be ambiguous; it's often best to use "select" instead.

Recommended: Select the Automatically check for updates checkbox.

Recommended: Clear the Bookmarks checkbox.

Radio button

A radio button is a small button used to select one item from a group of mutually exclusive options. To refer to a radio button, use the radio button's label, or refer to the group of buttons by its label.

Recommended: Select Do not remember passwords.

Recommended: Select your preferred Startup mode.

Pressing and typing keyboard keys

To indicate that the user should press or type a given keyboard key or combination, use the <kbd> element.

To refer to a keyboard key, use the key's name. If that's ambiguous, use the form "the Key key."

Recommended: Press Esc.

Recommended: Press the Esc key.

Spell out the names of modifier keys such as Command, Control, Option, and Shift. Don't use symbols for those keys. To refer to a key combination, use the form "Modifier+Key."

Recommended: Press Control+V.

When the user may be on either Windows or Mac, put the Mac shortcut in parentheses after the Windows shortcut.

Not recommended: To copy, press Ctrl+C (⌘+C).

Recommended: To copy, press Control+C (or Command+C on Mac).

To refer to a key or combination that uses the Shift key, use the form "Modifier+Shift+Key."

Recommended: Press Control+Shift+?.

Spell out the names of characters that could be confusing in a keyboard shortcut, such as comma, hyphen, period, and plus.

To refer to a keyboard shortcut, use either "keyboard shortcut" or "key combination."

To refer to pressing a key or combination to cause an action to occur, use the verb "press." To refer to typing a key or combination as part of text, use the verbs "enter" or "type."

Verbs glossary

To describe an action in the UI, generally use the following verbs:

Click

When the environment is probably a desktop with a mouse, use "click" for most targets, such as buttons, links, list items, and radio buttons.

Recommended: Click OK.

Enter, type

Use either of these verbs when referring to the user entering text.

Recommended: In the Owner box, enter your name.

Recommended: In the Size box, type or select a font size.

Press

Use when referring to pressing a key or combination to cause an action to occur.

Recommended: Press Control+C (or Command+C on Mac).

Select

Use when referring to a menu command. You can use it instead of "click" in some cases, such as when choosing a list item or when the action highlights an item that is followed by another action. You can also use it instead of "check" for checkboxes.

Recommended: Select File > New.

Recommended: In the Font drop-down list, select Roboto.

Recommended: In the Available qualifiers list, select Locale and then click Add.

Tap

Use instead of "click" when the environment is definitely a touch device.

Recommended: Tap OK.

Here are some other guidelines for verbs:

  • Hyphenate "right-click," "left-click," and "double-click."
  • To refer to the action of pointing the mouse pointer, use "point to."
  • Use "drag," not "click and drag" and not "drag and drop," though you may use "drag-and-drop" as an adjective.
  • When a click or tap action reveals a collapsed list, you can write "click to expand" or simply "expand."
  • It's okay to write "click in" when referring to a region that needs focus ("click in the window"), but not when referring to a control or a link. Also, don't write "click on."
  • When the sentence is not a procedural instruction, use phrases like "turn on" and "turn off" instead of "enable" and "disable." It's also okay to use "toggle" for a control that switches back and forth between on and off states.

    Recommended: To turn on Magic Mode, follow these steps.

    Recommended: You can toggle Magic Mode in the Settings window.

See also the word list.

Enviar comentarios sobre…

Google Developer Documentation Style Guide
Google Developer Documentation Style Guide