Improving Web Navigation with the "All-Menu" Nav

read the PDF

When DHTML was first introduced, there was much discussion over the complexity of dropdown menus. “Will users know to roll over the menu to display them?” “Can users handle elements that appear and disappear?”

Over time, the desire to include more links outweighed the additional complexity. Dropdown menus are a standard feature of many websites. But usability problems remain.


[image]
The dropdown menu (shown above) is a standard navigation element on many websites. The user moves the cursor over the selected item, causing a menu of items to “drop down”. No special criticism of travelocity.com is intended.

Dropdown menus can be surprisingly difficult to use
It is all too easy to forget that many people are less than expert in using the mouse. There is the inherent difficulty of accurately hitting a small target. Users must be careful to keep their mouse pointer in the proscribed areas. It can be difficult to move the mouse pointer from one menu to another. Many able mouse users have the same problem getting accustomed to a laptop track pad.


Tiny, fragile menus, as shown in this chase.com example above, are more difficult to use than they should be.


Small menus can be difficult to see on graphic-intensive pages
Dropdown menus are designed to be as minimal as possible, perhaps due to a lingering uneasiness with having something "cover" the page content. But when the user is navigating, we should help them focus on their task, allotting as much space as needed.


The tiny menu is lost on this visually complex page.

For even the most experienced users, it is often far too easy to select a wrong item or accidentally roll off the menu item. “Fly out” third level navigation menus are commonly reviled, as they underscore the precise mouse control needed to accomplish a simple task. Navigating is a basic functionality for a website; there should be no stress or difficulty involved in the task. We should question the usability tradeoff of dropdown menus and seek new solutions.

Unclear or overlapping categories require users to compare menus
Anyone who has designed a corporate website has probably found that site architecture is often a compromise among logically consistent structure, competing business needs, promotions, and company culture and values. This can lead to inconsistent, overly general, unclear, or overlapping categories.

The architect of a site sees the navigation as a set of categories, with items “bucketed” within them. The expectation is that a user chooses the correct menu item, rolls over it, and selects the correct item from the list that appears, using the structure of the site to inform the decisions.

Users, however, are not so methodical. They are learning the structure of the site as they are using it. A consistent observation in many usability tests is that the user slowly, carefully moves the mouse pointer over each menu item, reads each menu and finally goes back to the best menu and clicks. In the quest to narrow the menus down to a few likely candidates, a complicated site requires new users to view each menu.

Imagine if a restaurant menu were designed like this:


Many people scan the whole menu to get a sense of the options, then make a choice in context of the whole, for example, ordering an appetizer to go with a certain entrée.


Navigation items give context to each other
A navigation category is defined not only by what it contains, but also by what it doesn’t. Users are often looking for a subject that may be poorly defined on the site, often referred to as “___ kind of stuff”. They will compare menus against each other to find the most likely area. Knowing all the options enables users to make the most informed choice.

Sites with unclear or overlapping categories require the user to compare and evaluate (e.g., Is my cell phone plan a “product” or a “service”?). Individual dropdown menus are not easy to compare. Users will move their mouse from one item to another, searching each menu for an item they recognize. Additionally, this action requires precise mouse control.

[image]
In this Travelocity.com example, a plane ticket can be found under “Flights”, “Vacations”, and “Last Minute Deals”.

[image]
In this chase.com example, would IRA retirement planning be found under “Individuals” or “Advice & Planning”? (Answer: Both, suggesting the architect knew it to be unclear.)



Seeing all the options
As we know from usability studies, users often do not think about navigation hierarchically, but often scan the page looking for a particular word. In studies of breadcrumb navigation, for example, the breadcrumb links weren't used directly but had the unanticipated benefit of containing the word the user was looking for.

An old solution to this problem was the sitemap. A popular navigation feature, the sitemap allowed users to see all the navigation options.


[image]
Volvo.com sitemap

[image]
Amazon.com has a menu not unlike a sitemap.


In sum, individual dropdown menus are poorly suited for users who are unfamiliar with a site, especially one with unclear navigation categories.

One solution: The “all-menu” nav
The “all-menu” nav displays a wide field, showing all the menu choices, highlighting the column and items the user has moved their mouse over.

[image]
The Navicorp site

[image]
The user has rolled over the navigation bar, displaying the all-menu navigation layer. The “Services” column is highlighted.

[image]
The user has rolled over “Service Industries”, highlighting it.
The "all-menu" nav offers a number of benefits:
It enables the user to quickly scan the options available without moving their mouse. The highlighted column helps focus their attention on what they have selected, reducing the added visual complexity.

The "all-menu" nav is easier to use
The user will find it much easier to move their mouse pointer to another sub-menu item. Menus are not fragile and do not disappear as the user moves across categories. This increases speed and accuracy, benefiting all users. The large backdrop field makes it easier for the user to focus on the navigation above a vibrant and visually complex page. Helping the user avoid distraction during the fragile moment of navigation will assist them in accomplishing their task.

The "all-menu" nav makes it easier to compare navigation categories
Overlapping categories are less of a problem when the user can scan the sub items and compare them. Careful selection of the sub items can clarify what the website means by “products” or “services”.

Best Practices with the "all-menu" nav
The "all-menu" nav is not appropriate under all circumstances and is best used in navigation where:
• one is concerned about ease of findability
• there are indistinct or overlapping categories, (e.g.,"products" and "small business")
• the user is unfamiliar with the site or subject
• the user is in an “exploring” mindset, rather than an “finding” one

It is less useful in situations such as these, where the navigation is too complex:
• more than 7 columns may not fit on a page
• more than 7 rows in several of the menu categories will likely be too many for the user to comprehend (Rarely used items can be hidden in a “show all” link, expanding the menu to show all items.)
• the audience is highly familiar with the site, and in a “finding” mindset rather than an “exploring” one

Conclusion
The limitations of the standard dropdown menu have never been fully addressed. The "all-menu" nav offers a potentially useful design solution to these problems. In general, we should not accept standards blindly, but explore new opportunities to see how we can better help our users. The competing needs of content, promotion and advertising, and navigation will continue to grow. We may yet see navigation layers cover the entire page as users switch between navigating and interacting with the page.