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.
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.
Figure 2 , Learning Tools popup 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.