Best practice: Implementing submenus
• Use submenus to reduce the number of menu items in a full menu. For example, if users have to scroll to see all the
items in a full menu, group some of the menu items in a submenu.
• Group related items in a submenu. For example, if "Sort By" appears in the full menu, group "Date," "Name," and
"Subject" in a submenu.
• Consider grouping advanced features in a submenu. For example, use "Additional Options" in the full menu and group
the options in the submenu.
• Avoid using submenus for only one or two menu items.
• If a submenu includes more than six items, consider grouping the items into two sections in the submenu. Place the
menu items that are frequently used at the top of the submenu, insert a separator, and then order the rest of the items
alphabetically.
• If a menu item requires users to do more than click the item (for example, if a user has to specify a date), open a dialog
box.
• Avoid including frequently used menu items or important menu items in submenus.
• Avoid implementing a submenu from a submenu.
Guidelines for labels
• In the full menu, use concise, descriptive labels that clearly define the action. Users should not have to open the
submenu to understand the meaning of the item in the full menu.
• In the full menu, use verbs for labels. Use nouns only if the meaning is clear. For example, if "Email Accounts" appears
in the full menu, group each email account in a submenu.
• Avoid repeating verbs in submenus. For example, avoid using "Sort By" in the full menu and "Sort By Date" and "Sort
By Name" in the submenu.
• Use title case capitalization for labels. Capitalize the first word in the submenu even if it is a preposition. For example,
use "Send" > "As Email" instead of "as Email".
• Avoid using the term "More" in the full menu unless the location of the menu item clearly indicates what "more" refers
to. For example, if "Inbox," "Outbox," and "More" appear between separators in the full menu, group additional options
associated with a mailbox in a submenu.
UI Guidelines Containers and components
72
To Next Page
Loading...
Need help?
General
Weight and Dimensions
