Design of Navigation Menus

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.

Menus

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.

Context Menus

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.

Although HTML5 defines context menus, most browsers do not support them yet. Anyways, you can develop your own context menu by using HTML4, CSS and Javascript and attaching the menu to some keyboard/mouse key combination.

Area Maps

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.

Pagination

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.

1. Provide large clickable areas
2. Don’t use underlines
3. Identify the current page
4. Space out page links
5. Provide Previous and Next links
6. Use First and Last links (where applicable)
7. 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 Title

A set of items

Separator

Submenu Indicator

Keyboard Shortcut

Icon

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

global commands

Menu Layout

Grouping of Menu Items

There are many factors that influence how to group menu items.

• Aphabetical
• Time
• Location
• Frequency
• Common properties

Item Ordering

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.

Interoperability

Mental Model

Icons as Metaphors

The Mental Model

influences expecation. Models are made in the real world brought over to the digital world.

Direct Manipulation

Feedback

Adaptivity

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.

Accessibility

ARIA guidelines for menu design

appropriate fonts

Use of icons

Use of keyboard shortcuts

Case Scenarios: