Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Icons and Symbols in Menus

Icons Can Help Users Identify Items

Sometimes, displaying icons in menus can help users recognize menu items and relate them to other items they know about. As with all icons and images, make sure that using symbols instead of text doesn’t add confusion or ambiguity.

Don’t use an icon without any text. Even if you use an icon you think all users will recognize, it’s best to reinforce the icon’s meaning by including a textual menu item name.

Use only familiar icons. Use an icon in a menu item to represent something the user can learn to associate with specific functionality in your app or to represent something recognizable from other parts of the system. For example, the Finder uses icons in the Go menu because users associate them with the icons they see in the Finder sidebar.

image: ../Art/familiar_icons_2x.png

In another example, Safari uses the icons displayed by some webpages to help users make the connection between the webpage and the menu item for that webpage.

image: ../Art/webpage_icons_2x.png

Avoid displaying an icon for every menu item. If you include icons in your menus, include them only for menu items for which they add significant value. A menu that includes too many icons (or poorly designed ones) can appear cluttered and be hard to read.

Symbols Can Give Users Information About State

There are a few standard symbols you can use to provide additional information in menus. The symbols listed in Table 19-1 are used consistently throughout macOS, so users are accustomed to their meaning.

Table 19-1Standard menu symbols

Symbol

Meaning

image: ../Art/menu_check_2x.png

In the Window menu, the active document; in other menus, a setting that applies to the entire selection.

image: ../Art/menu_mixed_2x.png

A setting that applies to only part of the selection.

image: ../Art/menu_bullet_2x.png

A window with unsaved changes (typically, when Auto Save is not available).

image: ../Art/menu_diamond_2x.png

In the Window menu, a document that is currently minimized in the Dock.

Avoid using custom symbols in a menu. If you use other, arbitrary symbols in menus, users are unlikely to know what they mean. Also, additional symbols tend to add visual clutter.

Use a checkmark to indicate that something is currently active. In an app’s Window menu, a checkmark appears next to the active window’s name. In other menus, a checkmark can indicate that a setting applies to the entire selection. As described in Toggled Menu Items, you can use checkmarks within mutually exclusive attribute groups (the user can select only one item in the group, such as font size) or accumulating attribute groups (more than one item can be selected at once, such as Bold and Italic).

Use a dash to indicate that an attribute applies to only part of the selection. For example, if the selected text has two styles applied to it, you can put a dash next to each style name. Or, you can display a checkmark to every style currently in effect. When it’s appropriate, you can combine checkmarks and dashes in the same menu.

As much as possible, use a dot only when Auto Save is not available. When you support Auto Save, users don’t have to think about the saved state of their documents. However, you might need to display a dot if, for example, the user’s disk is full and Auto Save can't complete. For more information about supporting Auto Save in your app, see Auto Save and Versions.

Allow the diamond and the checkmark to replace the dot (if it is used). A minimized document with unsaved changes should have only a diamond. If the active window has unsaved changes, the checkmark should override the dot in the Window menu.

Use actual text styles only in a Style menu. If you have a Style menu, you can display menu items in the actual styles that are available, such as bold or italic, so that users can see what effect the menu item has. Don’t use text styles in menus other than a Style menu.