Home

Syntagm > Design for Usability > Resources > Articles

Foraging à la Carte:
An appetite for popup menus?

(interactions magazine January/Februrary 2004)


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.

Illustration of dropdown (from the top) and flyout (from the side) dynamic menus

Figure 1, the two main types of popup menus

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

By comparison, popup menus can have real advantages:

  • Less screen space needed – menus only pop up when activated
  • Better context for users – categories can be viewed in full
  • Exploration without navigation – not stuck with the navigation-as-a-journey metaphor

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

Home > Level 1 > Level 2 … Level n > This Page

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.

 

Learning Tools flyout menu from www.microsoft.com

Figure 2 , Learning Tools popup menu from www.microsoft.com

Alternative (non-JavaScript) menu from www.microsoft.com

Figure 3 , Learning Tools static menu page

  • Finally, maintain a sense of location. If your menu headings are relatively constant throughout a site, highlight the one that is relevant to the current page.

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

*See the Xerox Parc web site at http://www2.parc.com/istl/projects/uir/publications/project/index.html#cs-if for a list of relevant citations by Stuart Card, Peter Pirolli and others.

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.

Other free articles on user-centred design: www.syntagm.co.uk/design/articles.htm

© 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

© 1995-2013 Syntagm Ltd | Contact Us