This page is not complete.
Designing a menu for an application might seem like a simple task, but the truth is it can be difficult. Any design would require consideration about who the audience is (skills, abilities, knowledge), and the complexity of the application.
In this article, we look over some categories for menus and some common issues in menu design. There are no technical requirements since the knowledge contained in this article is more based on common sense. Besides, there are numerous tools that help in building a graphical menu.
Writing a simple helpful menu is more valuable than a fancy menu with animations that confuse users and drive them away frustrated. Users should feel comfortable when then land on your page and be able to navigate quickly.
A menu is a list of selections of two or more items. As a web user, you've probably seen many examples of menus. For example, they can be tables of content, navigation tables, pop-up menus and toolbars. This page discusses various types of menus.
Pull Down Menus
A multi-level menu consists of clicking on one menu item to display another menu . How deep is the menu? well, you rarely need to design a menu that goes beyond three levels. As an example, in Firefox, the view menu is the 1st level, and it points to the zoom menu (2nd level). The more levels, the more time it takes users to accomlish a task. Also, users have to remember the path through many levels, in order to do a simple task.
Menu items can have keyboard shortcuts. This would cut the time needed to reach a menu item. To simply add a shortcut to an HTML element, use the accesskey attribute. Note that shortcut might be reserved by the operating system, browser, or add-ons, hence it's a good idea to let the user change shortcuts as appropriate.
Iconic Menus/ Toolbars
Iconic menus have icons/images for text in their menu items. The user attaches an icon to a task. The icon symbol has to have a common property with the task. For example, the popular icon for setting text to bold has the letter B bold. Sometimes, an icon doesn't say much. Tooltips are very helpful.
A context menu is a menu where the items on the menu are specific to the context in which the menu was opened. A typical usage is for the user to right-click on an element to display a menu of commands pertaining to what was clicked on.
For menu items that represent physical locations on a map, this would be a great option. An area map consists of an image and on it pre-defined areas, each area representing a menu item. In the example below from jVectorMap is a map of the US with cities represented as circles. When the user hovers over one, a caption pops out with information about the unemployment rate in that city.
Area maps look cool even for non-geophysical cases. All you have to do is replace the map with a another picture.
When the user needs to navigate through pages without pre-configured groupings, an array of page numbers is most appropraite. Pagination’s primary purpose is to serve as an improved navigation, it is supposed to make it clear for visitors about where they are, where they’ve already been and where they can go next.
- Provide large clickable areas
- Don’t use underlines
- Identify the current page
- Space out page links
- Provide Previous and Next links
- Use First and Last links (where applicable)
- Put First and Last links on the outside
Viewing an app in a storyboard makes it easy to grasp its anatomy.
Elements of a Menu
A set of items
Menu Item Selection
- Pressing a key on the keyboard
- Positioning the cursor using keyboard, mouse, or remote control D-pad.
- Pointing with a pen or a finger.
- Speaking to a voice-recognition system.
Menu Items From Commands
Grouping of Menu Items
There are many factors that influence how to group menu items.
- Common properties
Some items should be ordered ascending order, for example, the list of page numbers to navigate the search results. Also, if the page is in English, they will appear left to right.
Some items should be ordered by frequency. The most frequent items show up at the top of the list.
Icons as Metaphors
The Mental Model
influences expecation. Models are made in the real world brought over to the digital world.
Menus don't have to be static. They can change with context. For example, for a web application that has two roles for users (i.e. administrator and regular), the menu can change. For administrators, they need to access administration tasks while regular users don't.
Contexts are application constructs that have a special meaning. For example, before logging in to a site, you will find the "login" button. After logging in, that button disappears and the new button "log out" appears. Here the conext changed as the user logs in or out.
Another situation is when choosing a menu item is not a valid choice. The item can be disabled or hidden until the context changes.
Icons change with context.
ARIA guidelines for menu design
Use of icons
Use of keyboard shortcuts