Foraging à la Carte: An appetite for popup menus?

Information foraging theory* gives us a useful analogy for explaining user behavior when searching for information: much as they might in a forest, users try to follow the scent of their prey. On the web, this scent takes the form of visual clues, for the most part links displayed either in navigation panels or within the content area of each page. A central tenant of this theory is that users attempt to maximize the gain of useful information while minimizing the cost of their effort in obtaining it. Much of this can be seen by observing users performing information-gathering tasks during usability testing: each page is examined for clues of the trail where the information scent is strongest. If there are too many false clues, users perceive that the cost of continuing is too high and they adopt another strategy such as using a search facility, site map or abandoning the current site altogether.

An interesting aspect of the foraging model is that it implies a navigation-as-a-journey metaphor. This was certainly true in the early evolution of the web: users arrived at a page, sniffed out the trail and moved on to another page. If the trail went cold, users would follow their tracks back to the point where indecision first took hold. Naturally, this meant a lot of navigation, page loading and scanning by users which lead to an increased effort in obtaining information. But there is another approach – currently shunned by many in usability circles – which offers some real benefits in the design of complex sites. Popup menus (dropdown and flyout are the most common varieties, shown in Figure 1) allow users to navigate with reduced effort and can actually improve the usability of a site, especially when considered along side some of the alternatives. Here are just a few of the issues that the committed avoidance of popup menus can raise:

Running battles between navigation panels and content
A surfeit of links in an attempt to expose the sites entire navigation structure
Cramped navigation with menu items split over multiple lines or requiring horizontal scrolling
Small menu fonts that are both hard to read and to select
Difficult-to-use expand and collapse menu trees, with some implementations requiring a page load for each operation
Vertical scrolling to reach navigation

These are all pretty substantial benefits, but the last point is in a class of its own. If users can decide where they need to go just by looking at a menu, their effort in finding information is substantially reduced. It also means they do not have to retrace their steps in order to recover from a lost trail. Note that I am not suggesting that we abandon the idea of journey altogether, but that users now have a choice: experienced users can hop from one branch to another in the hierarchical tree without the tedious linear navigation that a journey requires. (Of course this can already be done to a limited extent with “breadcrumb trail” navigation of the form

But only up the tree – towards the home page – not down.) Users who prefer to walk the tree page by page still can.

What about usability and accessibility? There are plenty of opportunities to make popup menus difficult or impossible to use for some audiences. However, these issues can be effectively resolved with careful design:

Avoid “cascading” menus. Although these are familiar to Windows users – particularly through the desktop Start button – they require levels of manual dexterity more normally associated with the game of billiards.
Do not make the menus too small. Popup menus are only on the screen for a short while and it usually does not matter if they obscure the underlying page. Make the menu text large enough to be read comfortably by your whole user population. This will make items easier to select too.
Maintain a sense of the journey path by including a breadcrumb navigation line (as discussed earlier) on all pages. You may be tempted to question the need for this but bear in mind that many pages will be reached via external search engines.
Make sure that your menus will work with older browsers and assistive technologies such as screen readers. In most you will need separate pages to present the contents of the popups as static HTML. This is illustrated in Figures 2 and 3. Figure 2 shows a popup menu for Learning Tools from the Microsoft site. If users click on the Learning Tools heading itself, the reach a content page displaying the same links in simple HTML.

I know that for the usability-conscious being told to use popup menus sounds a little counter-intuitive. But the technology is now fairly mature and web users are more sophisticated then they were when dynamic menus first appeared. Popup menus do have a place in the web usability toolbox.

Footnote

The Author

William Hudson is principal consultant for Syntagm Ltd, based near Oxford in the UK. His experience ranges from firmware to desktop applications, but he started by writing interactive software in the early 1970's. For the past ten years his focus has been user interface design, object-oriented design and HCI.

© 2001-2005 ACM. This is the author's version of the work. It is posted here by permission of ACM for your personal use. Not for redistribution. The definitive version was published in interactions, {Volume 11, Issue 1, January-February 2004} http://doi.acm.org/10.1145/962342.962360