Multilevel Menus: Less Is More | Prioritizing Web Usability

Use fly-out horizontal menus sparingly and keep the levels to no more than two. Any more than that covers up the page and is difficult to use. A third level is usually a sign of trouble, and a fourth level virtually always makes a menu impossible to operate. With too many levels, it becomes a navigation problem in its own right to locate the desired option in the constantly expanding and hiding submenus.

People generally operate under the assumption that the shortest distance between two points is a straight line. So with multilevel menus, they tend to drag their mouse diagonally to get to the sublevels. When this happens, they usually lose their position and become frustrated at having to reselect their options. The problem is worse on laptops because touch pads make drag-and-click manipulations even more cumbersome.

The longer the menu list, the more difficult it is to control. The further users must travel down the list, they more likely they are to lose their place.

Make sure that dynamic menus remain on the page long enough for people to make their selections. Temperamental menus that require precision and open and close at the slightest mouse movements are difficult to control. Power users might have the experience to control dynamic menus without much difficulty, but the average person will struggle.

(Facing page, top) The multilevel menus on this site annoyed users because they were difficult to control. Accidentally moving the pointer just outside of the product category area caused a different menu to appear unexpectedly.

www.escaldesports.com

(Facing page, bottom) The American Heart Association Web site incorporates fly-out menus judiciously by restricting them to two levels. Also, the design accommodates the tendency for people to drag mouses diagonally when making a selection. The menu persists even if people veer slightly outside of the menu area.

www.americanheart.org

(Facing page, top) Old design: Here's an example of an excessive use of fly-out menus. Four levels of panels cover up most of the page on this site, making it difficult for people to control their movements. Errors are more likely because the design demands concentration and manual dexterity. People who let go of position or go outside of the menus must start all over again.

www.blackmountainbicycles.com

(Facing page, bottom) New design: Black Mountain's new design improves the site by reducing the number of menu levels from four to three. While this implementation is better, the large number of menus still covers up a significant part of the page and requires the mouse to travel far.