Menus

Menus display a list of commands available to the user. Because menus make commands visible and discoverable, you can use them to leverage the greater capacity people have for recognizing commands than for remembering them.

There are several types of menus, including drop-down menus, shortcut menus, and cascading menus. The following sections cover these menus in more detail.

The Menu Bar and Drop-Down Menus

A menu bar, one of the most common forms of a menu interface, is a special area displayed across the top of a window directly below the title bar (as shown in Figure 8.1). A menu bar includes a set of entries called menu titles. Each menu title provides access to a drop-down menu composed of a collection of menu items, or choices.

The contents of the menu bar and its drop-down menus are determined by your application's functionality and the context in which the user is interacting with it. You can allow users to configure the menu structure.

A drop-down menu appears as a panel with its list of items arranged in a column. Avoid using multiple columns or scrolling menus. While the system supports these forms of presentation, they typically add complexity to a user's experience with browsing and interacting with the menu.

Drop-Down Menu Interaction Using the Mouse

When a user points to a menu title and clicks the primary mouse button, the menu title is highlighted and the associated drop-down menu appears. When the user moves the pointer over the menu items, the menu tracks the pointer's movement, highlighting each item in the menu as the pointer moves over it. To choose the command associated with a menu item, the user points to that item, then clicks the mouse button. The system then closes the drop-down menu.

Also in the menu bar, the user can press the primary mouse button and drag the pointer into the menu. When the user releases the button with the pointer over a menu item, the corresponding command is chosen and the menu is closed. While this is an efficient method for choosing menu items, document the click method instead.

If the user presses the mouse button, then moves the pointer off the menu and releases the mouse button, the menu is also closed. However, if the user moves the pointer back onto the menu before releasing the mouse button, the pointer tracking resumes and the user can still select a menu item. The user can also close a drop-down menu by clicking its title again or by pointing to a different menu title.

Drop-Down Menu Interaction Using the Keyboard

To use the keyboard to access drop-down menus, the user presses the ALT (or F10) key to activate the menu bar. When the user presses an alphanumeric key while holding the ALT key, or after the ALT key is released, the system displays the drop-down menu whose access key matches the alphanumeric key pressed. (Matching is not case sensitive.)

The user can also use arrow keys to access drop-down menus from the keyboard. When the user presses the ALT key, pressing the LEFT ARROW or RIGHT ARROW keys moves the input focus to the previous or next menu title, respectively. If the user continues to press the arrow key, the input focus wraps to the other end of the menu bar. The user then presses the ENTER key to display the drop-down menu associated with the selected menu title. If a drop-down menu is already displayed on the menu bar, then pressing LEFT ARROW or RIGHT ARROW highlights the next drop-down menu in that direction, unless the drop-down menu spans multiple columns. In this case, the arrow keys move the highlight to the next column in that direction, and then to the next drop-down menu.

To display a drop-down menu if none is currently open, the user can also press the ALT key and then the UP ARROW or DOWN ARROW keys in the menu bar. In an open drop-down menu, pressing these keys moves to the next menu item in that direction and wraps the highlight around at the top or bottom. If the drop-down menu spans multiple columns, then pressing the arrow keys first wraps the highlight around to the next column. To display the window's shortcut menu, the user presses ALT or F10 and then presses the SPACEBAR key.

To close a drop-down menu and deactivate the menu bar, the user can press the ALT key. Pressing the ESC key also closes a drop-down menu. However, pressing the ESC key closes only the current menu level. For example, if a drop-down menu is open, pressing the ESC key closes the drop-down menu but leaves its menu title highlighted. Pressing ESC a second time removes the highlight on the menu title, deactivates the menu bar, and returns input focus to the content in the window. Selecting a menu item within the menu also closes the menu.

You can assign shortcut keys to commands in drop-down menus. When the user presses a shortcut key associated with a command in the drop-down menu, the command is carried out immediately. You can also highlight the title of the menu that contains the command, but do not display the drop-down menu.

Common Drop-Down Menus

This section describes the conventions for drop-down menus commonly used in applications. Although these menus are not required for all applications, follow these guidelines when you use these menus in your application.

The File Menu

The File menu provides an interface for the primary operations applied to a file. Your application should include commands such as New, Open, Save, Send To, and Print. These commands are often included on the shortcut menu of the icon displayed in the title bar of the window.

For more information about the commands in the shortcut menu for a title bar icon, see "Icon Shortcut Menus" later in this chapter.

If your application supports an Exit command, place this command at the bottom of the File menu preceded by a menu separator. When the user chooses the Exit command, close any open windows and files, and stop any further processing. If the object remains active even when its window is closed — for example, a folder or printer — then use the Close command instead of Exit.

The Edit Menu

Include general-purpose editing commands on the Edit menu. These commands include the Cut, Copy, and Paste transfer commands, embedded and linked (OLE) object commands, and the following commands (if they are supported).

The View Menu

Other Commands Found on the Edit Menu
Command	Function

Undo	Reverses last action
Redo	Redoes the last undo action
Find and Replace	Searches for and substitutes text
Delete	Removes the current selection

Place commands on the View menu that change the user's view of data in the window. Include commands on this menu that affect the view and not the data itself — for example, Zoom or Outline. Also include commands for controlling the display of particular interface elements in the view — for example, Show Ruler or Show Status Bar.

You should also include these commands on the shortcut menu for the window or pane.

Help Menu

Use the Help menu for commands that provide user access to Help information. Include a Help Topics command; this command provides access to the HTML Help Viewer, which displays topics included in your application's Help file. Alternatively, you can provide individual commands that access specific pages of the HTML Help Viewer, such as Contents, Index, and Find Topic. You can include other user assistance commands on this drop-down menu.

If you provide user access to copyright and version information for your application, include an About application name command on this menu. When the user chooses this command, display a window containing the application's name, version number, copyright information, and any other information related to the application. Display this information in a dialog box or as a copyright page of the property sheet for the application's main executable file. Do not use an ellipsis at the end of this command because the resulting window does not require the user to provide any further information. (Ellipses are typically used when further input from the user is required to carry out the command.)

Shortcut Menus

Even if you include a menu bar in your software's interface, you should also support shortcut menus. Shortcut menus, also referred to as context or pop-up menus, provide an efficient way for the user to access the operations of objects (as shown in Figure 8.2). Because shortcut menus are displayed at the pointer's current location, they eliminate the need for the user to move the pointer to the menu bar or a toolbar. In addition, because you include on shortcut menus commands that are specific to the object or to its immediate context, shortcut menus reduce the number of commands the user must browse through. Shortcut menus also minimize screen clutter because they are displayed only on demand and do not require dedicated screen space.

While a shortcut menu looks similar to a drop-down menu, include only commands that apply to the selected object (or objects) and its context, rather than commands grouped by function. For example, a shortcut menu for a text selection can include commands for moving and copying the text. It could also provide access to the font properties of the text and to the paragraph properties associated with the text.

Keep the length and depth (use of submenus) of a shortcut menu as small as possible. Limit the items you include on the menu to common, frequent actions. For example, to provide access to a large number of properties, it may be better to include a single Properties command and allow the user to navigate in a property sheet.

The container of a selection, or the composite object of which a selection is a part, typically provides the shortcut menu for the selection. Similarly, the commands included on a shortcut menu may not always be supplied by the object itself, but rather may be a combination of commands supplied by the object and by its current container. For example, the shortcut menu for a file in a folder includes transfer commands. In this case, the folder (container) supplies the commands, not the files. Shortcut menus for embedded or linked objects follow these same conventions.

Avoid using a shortcut menu as the only way for a user to access a particular operation. At the same time, the items on a shortcut menu need not be limited only to commands that are included in drop-down menus. For example, you can include frequently used commands typically found in a secondary window, such as a specific property setting.

To decide the order of commands on a shortcut menu, use the following guidelines:

Place the object's primary commands first — for example, Open, Play, and Print.
Place transfer commands next. Order the transfer commands as follows: Cut, Copy, Paste, and other specialized Paste commands.
Include other commands supported by the object (whether provided by the object or by its context).
Include the What's This? command (when supported).
Place the Properties command, when present, as the last command on the menu.
Use separators to separate groups of commands.

Shortcut Menu Interaction

With a mouse, the user displays a shortcut menu by clicking an object with the secondary button. When the button is pressed, if the object under the pointer's hotspot is not selected, select the object. When the button is released, display the menu to the right of and below the hot spot of the pointer. Adjust the menu to avoid its being clipped by the edge of the screen.

If the pointer is over an existing selection when the user invokes a shortcut menu, display the menu that applies to that selection. If the pointer is outside a selection but within the same selection scope, then establish a new selection (usually resetting the current selection in that scope) at the point where the user pressed the button. Display the menu for the new selection. If the pointer is over an area that can't be selected but is within the container for the selectable items, such as the white space between icons in a folder, then display that container's shortcut menu.

Close the shortcut menu when the user clicks outside the menu with the primary mouse button or presses the ESC key. Also close the menu if the user clicks with the secondary mouse button in another window.

You can support shortcut menus for objects that are implicitly selected or that cannot be directly selected, such as scroll bars or items in a status bar. When you provide shortcut menus for objects such as controls, include commands for the object that the control represents rather than for the control itself. For example, a scroll bar represents a navigational view of a document, so commands might include Beginning of Document, End of Document, Next Page, and Previous Page. But when a control represents itself as an object, as in a forms layout or window design environment, you can include commands that apply to the control — for example, commands to move or copy the control.

To provide keyboard access to shortcut menus, use SHIFT+F10 and the Application key (for keyboards that support the Windows keys specification). In addition, access keys, arrow keys, enter, and ESC keys operate in shortcut menus the same way they operate in drop-down menus. However, to enhance spatial efficiency and readability, avoid including shortcut keys in shortcut menus.

When the user presses a system-defined shortcut menu key, the system provides a message, WM_CONTEXTMENU. For more information about this message, see the MSDN Online Web site at http://msdn.microsoft.com/ui/guide/sdk.asp.

When the keyboard focus is on an item that can also be selected (such as an item in a list view control), the user presses SHIFT+F10 or the Application key to display the shortcut menu for the selected item or items. In some cases, this may not be the item that has the keyboard focus. If no item is selected, the user presses SHIFT+F10 or the Application key to display the shortcut menu for the container. This is the most common way to provide access to the shortcut menu for a container.

If the keyboard focus is on an object that does not explicitly support selection (such as a command button), the user presses SHIFT+F10 or the Application key to display the shortcut menu for the object with the keyboard focus.

Common Shortcut Menus

The shortcut menus included in any application depend on the objects and context supplied by that application. The following sections describe common shortcut menus for Windows-based applications.

The Window Shortcut Menu

The window shortcut menu is just that: the shortcut menu associated with a window. Do not confuse it with the window drop-down menu found in MDI applications. It is sometimes also referred to as the system or Control menu. The shortcut menu for a typical primary window includes the Close, Restore, Move, Size, Minimize, and Maximize commands.

You can include other commands on a window's shortcut menu that apply to the window or to the view within the window. For example, you could do any of the following:

For compatibility with previous versions of Windows, the system also supports accessing a window shortcut menu by clicking the icon in the title bar with the primary mouse button. However, do not document this as the main method for accessing the window shortcut menu. Document only the use of the secondary mouse button.

A secondary window also has a window shortcut menu. Because the range of operations is more limited than in a primary window, a secondary window's shortcut menu usually includes only Move and Close commands (and a Size command if the window is resizable). Palette windows can include an Always on Top command that sets the window to always be on top of its parent window and other secondary windows.

The user displays a window shortcut menu by clicking anywhere in the title bar area with the secondary mouse button, excluding the title bar icon. Clicking the title bar icon with the secondary button displays the shortcut menu for the object represented by the icon. To avoid confusing users, if you do not provide a shortcut menu for the title bar icon, do not display the window shortcut menu when the user clicks the title bar icon with the secondary button.

There are other ways to display a window shortcut menu. The user can press ALT+SPACEBAR, or press the ALT key and then the UP ARROW and DOWN ARROW keys to navigate beyond the first or last entry in the menu bar.

Icon Shortcut Menus

A shortcut menu displayed for an icon should contain the operations of the object that the icon represents. To provide user access to the shortcut menu of an application or document icon, follow the standard convention of displaying a shortcut menu when the user clicks the secondary mouse button. You can also display the shortcut menu when the user selects the object's icon and then presses SHIFT+F10 or the Application key.

An icon's container application supplies the shortcut menu for the icon. For example, shortcut menus for icons placed in standard folders or on the desktop are automatically provided by the system. However, your application supplies the shortcut menus for OLE embedded or linked objects placed in it — that is, placed in the document or data files your application supports.

The container populates an icon's shortcut menu with commands the container supplies for its content, such as transfer commands and those registered by the object's type. For example, an application can register a New command that automatically generates a new data file of the type supported by the application.

The shortcut menu of an application's icon — for example, the Microsoft WordPad executable file — should include the commands listed in the following table.

An icon representing a document or data file typically includes the following common menu items for its shortcut menu.

Application File Icon Shortcut Menu Commands
Command	Meaning

Open	Opens the application.
Send To	Displays a submenu of destinations to which the application file can be transferred; the content of the submenu is based on the content of the system's Send To folder.
Cut	Marks the application file for moving and registers the file on the Clipboard.
Copy	Marks the application file for duplication and registers the file on the Clipboard.
Paste	Attempts to open a file registered on the Clipboard with the application.
Create Shortcut	Creates a shortcut icon to the application.
Delete	Deletes the application file.
Rename	Allows the user to edit the application file name.
Properties	Displays the properties for the application file.

Document or Data File Icon Shortcut Menu Commands
Command	Meaning

Open	Opens the file's primary window (using the application registered for opening it).
Print	Prints the file on the current default printer (using the application registered for printing it).
Quick View	Displays the file (using the application registered for viewing it).
Send To	Displays a submenu of destinations to which the file can be transferred; the content of the submenu is based on the content of the system's Send To folder.
Cut	Marks the file for moving and registers the file on the Clipboard.
Copy	Marks the file for duplication and registers the file on the Clipboard.
Delete	Deletes the file.
Rename	Allows the user to edit the file name.
Properties	Displays the properties for the file.

Except for the Open and Print commands, the system automatically provides these commands for icons when they appear in system containers, such as on the desktop or in folders. If your application supplies its own containers for files, you need to supply these commands.

For the Open and Print commands to appear on the shortcut menu, your application must register these commands in the system registry. You can also register additional or replacement commands. For example, you can optionally register a Quick View command that displays the content of the file without running the application that created it, and a What's This? command that displays a description of your data file type.

The icon in the title bar of a window represents the same object as the icon the user opens. As a result, the application associated with the icon also should include a shortcut menu with appropriate commands for the title bar's icon. When an application's icon appears in the title bar, include the same commands on its shortcut menu as are included for the icon that the user opens, unless a particular command cannot be applied when the application's window is open. In addition, replace the Open command with the Close command.

Similarly, when the icon of the data or the document file icon appears on the title bar, you use the same commands as for its file icon as it appears in a folder, with the following exceptions: replace the Open command with the Close command, and add Save if the edits in the document must be saved to a file.

Cascading Menus

A cascading menu (also referred to as a hierarchical menu or child menu) is a submenu of a menu item. The visual cue for a cascading menu is a triangular arrow displayed adjacent to the label of its parent menu item.

You can use cascading menus to provide user access to additional choices rather than using more space in the parent menu. A cascading menu can also display hierarchically related objects.

However, be aware that cascading menus add complexity to the menu interface by requiring the user to navigate further through the menu structure to get to a particular choice. The navigation also requires more effort on the part of the user. In light of these design trade-offs, use cascading menus sparingly. Minimize the number of levels for any given menu item, ideally limiting your design to a single submenu. Avoid using cascading menus for frequent, repetitive commands.

As an alternative, you can make choices available in a secondary window, particularly when the choices are independent settings; this allows the user to set multiple options with one invocation of a command. You can also support many common options as entries on a toolbar. This is effective unless you overload the toolbar. However, do not use toolbar entries as the only way to access a feature. Commonly used features should also be available through a menu or a keyboard shortcut.

Users interact with a cascading menu similarly to the way they interact with a drop-down menu off the menu bar, except that a cascading menu appears when the user moves the pointer over its parent menu item for a short time-out. The DEL ay avoids displaying the menu unnecessarily if the user is browsing or navigating to another item on the parent menu. If the user moves the pointer to another menu item after the cascading menu appears, the cascading menu does not close immediately but remains displayed for a brief time. This time-out DEL ay enables the user to drag an item directly from the parent menu onto an entry on its cascading menu.

When the user uses the keyboard to interact with a menu, there is no DEL ay in displaying (or closing) a cascading menu. The submenu is displayed immediately when the user chooses its parent menu item.

Menu Titles

All drop-down and cascading menus have a menu title. For drop-down menus, the menu title is the entry that appears in the menu bar. For cascading menus, the menu title is the name of their parent menu item. Menu titles represent the entire menu and should communicate as clearly as possible the purpose of all items on the menu.

Menu Items

Menu items are the individual choices that appear on a menu. Menu items can be text or graphics — such as icons — or graphics and text combinations that represent the actions presented in the menu. Graphics-only or owner-drawn menus without keyboard access are not recommended; these types of menus may not be accessible to all users.

The format for a menu item provides the user with visual cues about the nature of the effect it represents, as shown in Figure 8.3.

Whenever a menu contains a set of related menu items, you can separate those sets with a grouping line known as a separator. The standard separator is a single line that spans the width of the menu. Avoid using menu items themselves as group separators, as shown in Figure 8.4.

Always provide the user with a visual indication about which menu items can be applied. If a menu item is not appropriate or applicable in a particular context, then disable or remove it. Leaving the menu item enabled and presenting a message box when the user selects the menu item is a poor method for providing feedback.

In general, it is better to disable a menu item rather than remove it because this provides more stability in the interface. However, if the context is such that the menu item is no longer or never relevant, remove it. For example, if a menu displays a set of open files and one of those files is closed or DEL eted, it is appropriate to remove the corresponding menu item.

If all items in a menu are disabled, disable its menu title. If you disable a menu item or its title, the user can still browse to it or choose it. You should include a status bar message, balloon tip, or other context-sensitive Help support indicating that the command is unavailable and why. If you use a status bar message, display it when the input focus moves to the corresponding item.

The system provides a standard appearance for displaying disabled menu items. If you are supplying your own text or graphic for a disabled menu item, follow the visual design guidelines for how to display it. Check the colors for the current system settings, because these can change the appearance of menu items that appear unavailable.

Types of Menu Items

Many menu items take effect as soon as they are chosen. If the menu item is a command that requires the user to provide additional information before it can be completed, follow the command with an ellipsis (…). For example, the Save As command includes an ellipsis because the command is not complete until the user supplies or confirms a file name. However, not every command that opens a window should include an ellipsis.

While you can use menu items to carry out commands, you can also use menu items to switch a mode or set a state or property rather than to initiate a process. For example, choosing an item from a menu that contains a list of tools or views implies changing to that state. If the menu item represents a property value, when the user chooses the menu item, the property setting changes.

Independent settings are the menu equivalent of check boxes.
For example, if a menu contains commands for text properties, such as Bold and Italic, they form a group of independent settings. The user can change each setting without affecting the others, even though they both apply to a single text selection. Include a check mark to the left of an independent setting when that state applies, as shown in Figure 8.5.

Figure 8.5 A checked independent menu item
Interdependent settings are the menu equivalent of option buttons.
For example, if a menu contains alignment properties — such as Left, Center, and Right — they form a group of interdependent settings. Because a particular paragraph can have only one type of alignment, choosing one resets the property to the chosen menu item setting. When the user chooses an interdependent setting, place an option button mark to the left of that menu item, as shown in Figure 8.6.

Figure 8.6 Selected option in a set of interdependent menu items

To represent two opposing states of a setting on the menu bar, such as the presence or absence of a property value, you can use a check mark to indicate when the setting applies. For example, a text selection marked bold shows a check mark next to the menu item labeled Bold. There is no check mark next to the menu item when the text is normal. If a selection contains mixed states for the setting listed in the menu, display the menu without the check mark applied.

However, if the two states of the setting are not obvious opposites, use similar menu item names to indicate the two states, or choices. For example, a new user might incorrectly guess that the opposite of a menu item named Full Duplex is Empty Duplex. Because this is not the case, pair the Full Duplex command with an altered command name, Half Duplex, instead of using a check mark to indicate the different states. Use the following guidelines to display related setting states:

If there is room on a menu, include both setting states as individual menu items and interdependent choices. This helps to avoid confusion because the user can view both options at once. Use menu separators to group the choices.
If there is not sufficient room on the menu for both choices, use a single menu item and change its name to the related action when selected. In this case, the menu item's name does not reflect the current state; it indicates the state after the user chooses the item. Where possible, define names that use the same access key. For example, the letter D could be used for a menu item that toggles between Full Duplex and Half Duplex. Carefully consider the trade-offs before using this alternative because it is harder for users to locate and identify the appropriate menu item.

Avoid defining menu items that change depending on the state of a modifier key. Such techniques hide functionality from a majority of users.

A menu can also have a default item. A default menu item reflects a choice that is supported through a shortcut technique, such as double-clicking or drag-and-drop. For example, if the default command for an application or document file icon is Open, define this as the default menu item. Similarly, if the default command for a drag-and-drop operation is Copy, display this command as the default menu item on the shortcut menu for a nondefault (secondary mouse button) drag-and-drop operation. The system designates a default menu item by displaying its label in bold text.

Menu Item Labels

Include descriptive text or a graphic label for each menu item. Even if you provide a graphic for the label, consider including text also. Or provide an option to use the text label instead of, or in addition to, the graphic. The text allows you to provide more direct keyboard access to the user and provides support for a wider range of users. When you use graphics, verify that the menu item label can be accessed by user automation and accessibility utilities. For more information, see the Microsoft Accessibility Web site at http://www.microsoft.com/enable/training/keyboard.htm.

Menu Text

Use unique menu title text across the menu bar and unique menu items within an individual menu. Item names can be repeated in different menus to represent similar or related actions.
Keep menu text for a command brief, but clearly represent its functionality. Verbose menu names make it hard for users to scan the menu. Use single words for menu bar menu titles. Multiple-word titles or titles that contain spaces may be indistinguishable from two 1-word titles. However, don't create artificial compound words, such as Fontsize, either.
Designate one character out of each menu title or item as its access key.
This character provides keyboard access to the menu. Windows displays the access key for a menu title as an underlined character, as shown in Figure 8.7.

Figure 8.7 Access keys on a menu bar

Choose unique access keys for each menu title. Using the same access key for more than one menu title can eliminate direct access to a menu.
Use book title capitalization. For English language versions, capitalize the first letter of every word, except for articles, conjunctions, and prepositions that occur other than at the beginning or end of a multiple-word label. For example, the following capitalization is correct for menu text: New Folder, Go To, Select All, and Table of Contents.
Avoid formatting individual menu items with different font properties. Even though these may illustrate a particular text style, they also may make the menu appear cluttered or illegible. For example, access keys might not be visible if you format a menu item using underlined text. If you do use special formatting, also provide users with the option to display elements that use system fonts, such as menus, in normal text.
Use verbs or verb and noun phrases to label commands that represent actions. Use nouns for menu items that represent an object or group of objects, such as Headings or Revisions, as shown in the following table.

For more information about defining access keys, see Chapter 5, "Input Basics." For more information about common access key assignments, see Appendix B, "Keyboard Interface Summary."

Shortcut Keys in Menu Items

If you define a keyboard shortcut for a command that also appears in a drop-down menu, display the shortcut in the menu. Display the shortcut key next to the item, and align shortcuts with other shortcuts in the menu. Left-align shortcuts to the first tab position after the longest menu item with a shortcut. Do not use spaces for alignment. They may not be displayed properly in the proportional font that the system uses to display menu text or if the user changes the font setting for menu text.

Suggested Wording for Menu Items
If the menu title is	Use	Example

A verb	A noun or noun phrase	On the Insert menu: Text, Table, Picture
A noun	A verb or verb phrase	On the Table menu: Insert Table, Select Row, Insert Column

Match key names to those inscribed on the key caps. For example, display CTRL and SHIFT key combinations as CTRL+key (rather than CONTROL+key or control+key or ^+key) and SHIFT+key. When using function keys for menu item shortcuts, display the name of the key as Fn, where n is the function key number.

Avoid including shortcut keys on shortcut menus. Shortcut menus are already a shortcut form of interaction and are typically accessed with the mouse. In addition, shortcut menus without shortcut keys are easier for users to scan.