| page.title=Menu Design Guidelines |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| |
| <h2>Menu design quickview</h2> |
| |
| <ul> |
| <li>An Options menu is for any commands that are global to the current activity. </li> |
| <li>A Context menu is for any commands that apply to the current selection. </li> |
| <li>Place the most frequently used operations first. </li> |
| <li>Put only the most important commands fixed on the screen. </li> |
| <li>The commands on the Context menu that appears when you touch & hold on an item should be duplicated on the activity you get to by a normal press on that item. |
| </ul> |
| |
| |
| <h2>In this document</h2> |
| |
| <ol> |
| <li><a href=#tour_of_the_menus>Tour of the Menus</a> |
| <ol> |
| <li style="padding-top: 4px;"><a href=#options_menu>Options Menu</a></li> |
| <li style="padding-top: 4px;"><a href=#context_menu>Context Menu</a></li> |
| <li style="padding-top: 4px;"><a href=#comparison_of_options_and_context_menus>Comparison of Options & Context Menus</a></li> |
| <li style="padding-top: 4px;"><a href=#commands_fixed>Commands Fixed in an Activity Screen</a></li> |
| </ol> |
| </li> |
| <li><a href=#guidelines>Guidelines</a> |
| <ol> |
| <li style="padding-top: 4px;"><a href=#separate_commands>Separate specific from global commands</a></li> |
| <li style="padding-top: 4px;"><a href=#most_frequently_used>Place most frequently used first</a></li> |
| <li style="padding-top: 4px;"><a href=#dont_put_commands>Don't put commands <em>only</em> in a Context menu</li> |
| <li style="padding-top: 4px;"><a href=#first_in_context_menu>First command in Context menu should be most intuitive</li> |
| <li style="padding-top: 4px;"><a href=#selecting_content_item>Selecting an item should perform most intuitive operation</a></li> |
| <li style="padding-top: 4px;"><a href=#context_menu_should_identify>A Context menu should identify the selected item</li> |
| <li style="padding-top: 4px;"><a href=#most_important_commands>Put only most important commands fixed on the screen</a></li> |
| <li style="padding-top: 4px;"><a href=#short_names>Use short names in Options icon menu</a></li> |
| <li style="padding-top: 4px;"><a href=#a_dialog_should_not_have_an_options_menu>A dialog should not have Options menu</a></li> |
| <li style="padding-top: 4px;"><a href=#do_not_substitute_message>If no Options menu, don't display message</a></li> |
| <li style="padding-top: 4px;"><a href=#dim_hide_menu_items>Dim or hide menu items not available</a></li> |
| </ol> |
| </li> |
| </ol> |
| |
| <h2>See also</h2> |
| |
| <ol> |
| <li><a href="http://android-developers.blogspot.com/2008/12/touch-mode.html">Touch mode</a></li> |
| <li><a href="{@docRoot}guide/practices/ui_guidelines/activity_task_design.html">Activity and Task Design</a></li> |
| </ol> |
| |
| </div> |
| </div> |
| |
| <p> |
| A menu holds a set of commands (user actions) that are normally hidden, and |
| are accessible by a button, key, or gesture. Menu commands provide a means |
| for performing operations and for navigating to other parts of your |
| application or other applications. Menus are useful for freeing screen space, |
| as an alternative to placing functionality and navigation, in buttons or other |
| user controls in the content area of your application. |
| </p> |
| |
| <p> |
| The Android system provides two types of menus you can use to provide |
| functionality or navigation. Between them, you should be able to organize |
| the functionality and navigation for your application. Briefly: |
| <ul> |
| <li>The <em>Options menu</em> contains primary functionality that applies |
| globally to the current activity or starts a related activity. |
| It is typically invoked by a user pressing a hard button, often labeled MENU.</li> |
| <li>The <em>Context menu</em> contains secondary functionality for the currently |
| selected item. It is typically invoked by a user's touch & hold |
| on an item. Like on the Options menu, the operation can run either |
| in the current or another activity.</li> |
| </ul> |
| </p> |
| |
| <p> |
| All but the simplest applications have menus. The system automatically |
| lays the menus out and provides standard ways for users to access them. |
| In this sense, they are familiar and dependable ways for users to access |
| functionality across all applications. All menus are panels that "float" |
| on top of the activity screen and are smaller than full screen, so that the |
| application is still visible around its edges. This is a visual reminder |
| that a menu is an intermediary operation that disappears once it's used. |
| </p> |
| |
| <p> |
| Let's start out with a quick tour of the menus. |
| </p> |
| |
| <h2 id="tour_of_the_menus">Tour of the Menus</h2> |
| |
| <p class="note"><strong>Note:</strong> Your menus and screens might not look |
| like those shown in this document; they may vary from one version of Android |
| or device to another. |
| </p> |
| |
| <h3 id="options_menu">Options Menu</h3> |
| |
| <p> |
| The Options menu contains commands that apply globally across the current |
| activity, or can start another activity. They do not apply to a selected |
| item in the content (a <a href="#context_menu">Context menu</a> does that). |
| </p> |
| |
| <p> |
| On most devices, a user presses the MENU button to access the Options menu, |
| as shown in the screenshot below. To close the menu, the user presses |
| MENU again, or presses the BACK button. |
| In fact, to cancel out of any menu, press the BACK button. (Pressing the MENU |
| button or touching outside the menu also works.) Note that how to invoke this |
| menu may be different on different devices. |
| </p> |
| |
| <p> |
| Each |
| <a href="{@docRoot}guide/practices/ui_guidelines/activity_task_design.html#activities">activity</a> |
| activity has its own set of operations and therefore its own Options menu. |
| An application with multiple activities would have a different Options menu |
| for each activity. |
| </p> |
| |
| <p> |
| For example, in the message list view of an email program, the Options menu |
| might let you search the messages, compose a new message, refresh the list, |
| or change the email settings. The compose view of an email program would |
| have a different Options menu, such as adding a CC field, attaching a file, |
| or discarding the message. |
| </p> |
| |
| <p id="options_icon_expanded_menus"> |
| In order to handle a large number of menu items, the Options menu |
| progressively discloses them in two steps: |
| </p> |
| |
| <ul> |
| <li> |
| <b>Options icon menu</b> - The first press of the MENU button displays a |
| non-scrollable grid of icons at the bottom of the screen. (On the G1 |
| phone, up to 6 buttons typically appear.) |
| </li> |
| <li> |
| <b>Options expanded menu</b> - If the activity has more menu items than will |
| fit on the icon menu, then the last icon is labeled "More" — selecting it |
| displays a list that can contain any number of menu items and will scroll |
| as necessary. |
| </li> |
| </ul> |
| |
| <img src={@docRoot}images/menu_design/MenuDiagram.png> |
| |
| <p> |
| On some versions of Android, the user can display keyboard shortcuts in the |
| icon menu by long pressing the MENU button — the text in the icon menu |
| alternates between the command names and their keyboard shortcuts (if any). |
| </p> |
| |
| <h3 id="context_menu">Context Menu</h3> |
| |
| <p> |
| A Context menu is similar to a right-click context menu in a desktop |
| operating system. It is normally a shortcut that duplicates commands |
| found elsewhere. |
| </p> |
| |
| <p> |
| A user can touch & hold on content on the screen to |
| access a Context menu (if one exists), as shown in the screenshot below. |
| A Context menu is a list of menu items (commands) that can operate |
| on the selected content. The command can either be part of the current |
| activity, or the system can pass the selected content along to |
| an operation in another activity (by way of an |
| <a href="{@docRoot}guide/practices/ui_guidelines/activity_task_design.html#intents">intent</a>). |
| </p> |
| |
| <p> |
| For example, in an email message list, a user can touch & hold on |
| an email message to open a Context menu containing commands to read, |
| archive, or delete the message. |
| </p> |
| |
| <p id="location"> |
| A user can also touch & hold a <em>location</em> on the screen to |
| access a Context menu. An example is when the user does touch & hold |
| on a blank spot on the Home screen, a Context menu appears; selecting |
| an item from that menu inserts an icon at that location. |
| </p> |
| |
| <img src={@docRoot}images/menu_design/ContextMenuDiagram.png> |
| |
| <h4 id="context_menu_shortcut">Context Menu is a Shortcut</h4> |
| |
| <p> |
| In the above example, if the user performs touch & hold on the contact |
| "Obi Wan Kenobi", a Context menu opens. The commands provided in |
| this Context menu are the complete set of actions that can be performed |
| on this contact. |
| </p> |
| |
| <p> |
| A normal touch on an item in the content activates the most intuitive |
| command for that selection — in this case, "View contact". |
| We recommend that the most intuitive command also be listed as the |
| first item in the Context menu. In this example, selecting the contact |
| "Obi Wan Kenobi" runs the same command "View contact" that is listed |
| at the top of the Context menu. |
| </p> |
| |
| <p> |
| Also note, as shown in the following screenshot, the Context menu and the |
| next screen both hold the same complete set of commands that can be performed |
| on this contact. The Context menu displays the commands in a list, |
| while the "View contact" activity splits them into various items in the |
| Options menu, icon buttons and list items. |
| </p> |
| |
| <p> |
| Because of this duplication, using the Context menu is considered a <em>shortcut</em> |
| for going to the next screen and performing the operation there. Context menus |
| are less discoverable than either buttons fixed on-screen or the Options menu. |
| Many users never discover or use Context menus. It is for this reason that, for |
| the most part, any command on a Context menu should also appear on the most |
| intuitive operation's screen. As the next section explains, text operations, |
| such as "Select text" might appear only on a Context menu. Also, rich |
| applications, such as browsers, which themselves can contain web applications, |
| may have commands on Context menus that are not available elsewhere. |
| </p> |
| |
| <img src={@docRoot}images/menu_design/ContextMenuViewContactDiagram.png> |
| |
| <h4>Text Commands in Context Menu</h4> |
| |
| <p> |
| Text links and text fields in the content both have system-provided operations |
| that are common across all applications: operations such as "Select all", "Select text", |
| "Copy all", and "Add to dictionary". If the text field is editable, it also |
| has other operations, such as "Cut all" and "Input Method", and if text |
| is also on the clipboard, it has "Paste". The system automatically inserts |
| the appropriate menu items into the Context menu of text links and text |
| fields, as shown in the following screenshot. |
| </p> |
| |
| <img src={@docRoot}images/menu_design/TextFieldContextMenuDiagram.png> |
| |
| |
| <h3 id="comparison_of_options_and_context_menus">Comparison of Options and Context Menus</h3> |
| |
| <p> |
| An Options menu holds commands that are global to the activity while a |
| Context menu holds commands that apply only to an item in the content. |
| As shown in these diagrams, the user navigates to the menu, then |
| touches a menu item to perform an action or open a dialog. |
| </p> |
| |
| <img src={@docRoot}images/menu_design/TaskFlowDiagram.png> |
| |
| <p> |
| For more technical information on menus, see |
| <a href="{@docRoot}guide/topics/ui/menus.html">Creating Menus</a>. |
| </p> |
| |
| <h3 id="commands_fixed">Commands Fixed in an Activity Screen</h4> |
| |
| <p> |
| Commands can also be fixed directly on screen, typically in |
| text buttons, graphic buttons, or list items. This placement is by far the most |
| discoverable location for commands — a user can immediately see the command |
| without having to first press a button. This increased visibility needs to be |
| weighed against the space such user controls take up, or the sense that they |
| might clutter the visual design. |
| </p> |
| |
| <h2 id="guidelines">Guidelines</h2> |
| |
| <p> |
| Selecting the right kind of menu to present, and using menus |
| consistently, are critical factors in good application design. The following |
| guidelines should assist user experience designers and application developers |
| toward this end. |
| </p> |
| |
| <h3 id="separate_commands">Separate selection-specific commands from global commands</h3> |
| |
| <p> |
| Put any commands that are global to the current activity in the Options menu |
| or place them fixed in an activity screen; put commands that apply to the |
| current selection in the Context menu. (In any case, the command |
| could either run as part of this activity or start another activity.) |
| </p> |
| |
| <p> |
| You can determine in which menu to place a command by what it operates on: |
| If the command acts on selected content (or a particular |
| <a href="#location">location</a>) on the screen, put the command in the |
| Context menu for that content. If the command acts on no specific content |
| or location, put it in the Options menu. This separation of commands |
| is enforced by the system in the following way. When you press the MENU |
| button to display the Options menu, the selected content becomes unselected, |
| and so cannot be operated on. For an explanation |
| of why the content becomes unselected, see the article on |
| <a href="http://android-developers.blogspot.com/2008/12/touch-mode.html">Touch mode</a>. |
| </p> |
| |
| <p> |
| An example of a selection-specific Context menu is when a user performs a |
| touch & hold on a person's name in a list view of a contacts application. |
| The Context menu would typically contain commands "View contact", "Call contact", |
| and "Edit contact". |
| </p> |
| |
| <h3 id="most_frequently_used">Place the most frequently used operations first</h3> |
| |
| <p> |
| Because of limited screen height, some menus may be scrollable, so it's |
| important to place the most important commands so they can be viewed without |
| scrolling. In the case of the Options menu, place the most frequently used |
| operation on its <a href="#options_icon_expanded_menus">icon menu</a>; |
| the user will have to select "More" to see the rest. |
| It's also useful to place similar commands in the same location — |
| for example, the Search icon might always be the first icon in the Options |
| menu across several activities that offer search. |
| </p> |
| |
| <p> |
| In a Context menu, the most intuitive command should be first, followed |
| by commands in order of decreasing use, with the least used command at the bottom. |
| </p> |
| |
| <h3 id="dont_put_commands">Don't put commands <em>only</em> in a Context menu</h3> |
| <p> |
| If a user can fully access your application without using Context menus, |
| then it's designed properly! In general, if part of your application is inaccessible |
| without using Context menus, then you need to duplicate those commands elsewhere. |
| </p> |
| |
| <p> |
| Before opening a Context menu, it has no visual representation that identifies |
| its presence (whereas the Options menu has the MENU button), and so is not |
| particularly discoverable. |
| Therefore, in general, a Context menu should <em>duplicate</em> commands |
| found in the corresponding activity screen. For example, while it's useful to |
| let the user call a phone number from a Context menu invoked by touch |
| & hold on a name in a list of contacts, that operation should <em>also</em> |
| be available by the user touching the phone number itself when viewing contact details. |
| See <a href="#context_menu_shortcut">shortcut</a> for an illustration of this example. |
| </p> |
| |
| <h3 id="first_in_context_menu">The first command in a Context menu should be the selection's most intuitive command</h3> |
| |
| <p> |
| As described under <a href="#context_menu_shortcut">shortcut</a>, |
| touching on an item in the content should activate the same command as touching |
| the first item in the Context menu. Both cases should be the most intuitive |
| operation for that item. |
| </p> |
| |
| <h3 id="selecting_content_item">Selecting an item in the content should perform the most intuitive operation</h3> |
| |
| <p> |
| In your application, when the user touches any actionable text (such as a link |
| or list item) or image (such as a photo icon), execute the operation most |
| likely to be desired by the user. |
| </p> |
| |
| <p> |
| Some examples of primary operations: |
| </p> |
| |
| <ul> |
| <li>Selecting an image executes "View image"</li> |
| <li>Selecting a media icon or filename executes "Play"</li> |
| <li>Selecting a URL link executes "Open link"</li> |
| <li>Selecting an address executes "Go to address" (in a maps application)</li> |
| </ul> |
| |
| <p> |
| Note that selecting the same item in different contexts might invoke |
| different operations: |
| </p> |
| |
| <ul> |
| <li>In a contact application, selecting a contact executes "View details"</li> |
| <li>In an IM application, selecting a contact executes "Start chat"</li> |
| <li>In an Email application, when adding a recipient to the "To" field |
| through the contact book, selecting a contact executes "Add to recipient |
| list"</li> |
| </ul> |
| |
| |
| <h3 id="context_menu_should_identify">A Context menu should identify the selected item</h3> |
| |
| <p> |
| When a user does touch & hold on an item, the Context menu should |
| contain the name of the selected item. Therefore, |
| when creating a Context menu, be sure to include a title and the name of the |
| selected item so that it's clear to the user what the context is. |
| For example, if a user selects a contact "Joan of Arc", put that name in the |
| title of the Context menu (using |
| {@link android.view.ContextMenu#setHeaderTitle(java.lang.CharSequence) setHeaderTitle}). |
| Likewise, a command to edit the contact should be called "Edit contact", |
| not just "Edit". |
| </p> |
| |
| |
| <h3 id="most_important_commands">Put only the most important commands fixed on the screen</h3> |
| |
| <p> |
| By putting commands in menus, you free up the screen to hold more content. |
| On the other hand, fixing commands in the content area of an activity |
| makes them more prominent and easy to use. |
| </p> |
| |
| <p> |
| Here are a number of important reasons to place commands fixed on the activity screen: |
| </p> |
| |
| <ul> |
| <li> |
| To give a command the highest prominence, ensuring the command is obvious and won't be overlooked.<br> |
| Example: A "Buy" button in a store application. |
| </li> |
| <li> |
| When quick access to the command is important and going to the menu would be |
| tedious or slow.<br> |
| Example: Next/Previous buttons or Zoom In/Out buttons in an image viewing application. |
| </li> |
| <li> |
| When in the middle of an operation that needs to be completed.<br> |
| Example: Save/Discard buttons in an image crop activity. |
| </li> |
| <li> |
| Dialogs and wizards.<br> |
| Example: OK/Cancel buttons |
| </li> |
| <li> |
| For direct manipulation.<br> |
| Example: Dragging an icon in the Home screen to the trash |
| </li> |
| </ul> |
| |
| <h3 id="short_names">Use short names in the Options icon menu</h3> |
| |
| <p> |
| If a text label in the <a href="#options_icon_expanded_menus">Options icon menu</a> |
| is too long, the system truncates it in the middle. Thus, "Create Notification" |
| is truncated to something like "Create…ication". You have no control over |
| this truncation, so the best bet is to keep the text short. In some versions of Android, |
| when the icon is highlighted by a navigation key (such as a trackball), the |
| entire descriptive text may be shown as a marquee, where the words are |
| readable as they scroll by. <!--For more information, see the Text Guidelines |
| [update link].--> |
| </p> |
| |
| <h3 id="a_dialog_should_not_have_an_options_menu">A dialog should not have an Options menu</h3> |
| |
| <p> |
| When a dialog is displayed, pressing the MENU button should do nothing. This also holds true |
| for activities that look like dialogs. A dialog box is recognizable by being |
| smaller than full-screen, having zero to three buttons, is non-scrollable, and |
| possibly a list of selectable items that can include checkboxes or radio buttons. |
| <!--For examples of dialogs, see Text Guidelines.--> |
| </p> |
| |
| <p> |
| The rationale behind not having a menu is that when a dialog is displayed, the user is in |
| the middle of a procedure and should not be allowed to start a new global task |
| (which is what the Option menu provides). |
| </p> |
| |
| <h3 id="do_not_substitute_message">If an activity has no Options menu, do not display a message</h3> |
| |
| <p> |
| When the user presses the MENU button, if there is no Options menu, the system |
| currently does nothing. We recommend you do not perform any action (such as |
| displaying a message). It's a better user experience for this behavior to be |
| consistent across applications. |
| </p> |
| |
| |
| |
| <h3 id="dim_hide_menu_items">Dim or hide menu items that are not available in the current context</h3> |
| |
| <p> |
| Sometimes a menu item's action cannot be performed — for example, |
| the "Forward" button in a browser cannot work until after the "Back" |
| button has been pressed. We recommend: |
| </p> |
| |
| <ul> |
| <li> |
| <b>In Options menu</b> - disable the menu item, which dims the text and icon, |
| turning it gray. This applies to menu items in both the icon menu and the |
| "More" menu. It would be disorienting for the icon menu to change from 6 |
| items to 5 items, and we treat the "More" menu the same way. |
| </li> |
| <li> |
| <b>In Context menu</b> - hide the menu item. This makes the menu shorter so the |
| user sees only available choices (which also reduces any scrolling). |
| </li> |
| </ul> |
| |
| </body> |
| </html> |
| |