The rapid pace at which the Web has evolved has placed an incredible strain on those faced with the task of creating web sites. It is only natural, then, for web site creators to grasp onto anything posing as standard to accelerate their own work. But many so-called standards have little justification to warrant their continued use. As we move into what some refer to as the 2nd-generation web, it is fitting to reexamine current web practices.
One guideline that needs closer attention is the "Magic Seven, Plus or Minus Two" (7±2) rule of thumb. This principle has often been applied to determine the number of items in a navigation menu on a web page. It arose to satisfy a tactical need to make quick design choices and to objectively justify navigation to site stakeholders.
But where did this rule come from?
Psychologist George Miller published the original study in 1956. Since then, the (7±2) rule has been cited frequently by interface designers. A closer reading shows that Miller makes no conclusions that can be directly applied to web navigation.
First, Miller was studying the limitations of short-term memory. He concluded that there is a limit to the amount of items the immediate memory can retain: (7±2). He wasn't studying how many items humans can perceive, which he admits can be thousands. Web site navigation, however, is generally not concerned with short-term memory. Visitors are rarely required to memorize items in a menu. In fact, many site navigations are presented on all pages at all times for continuous reference. Immediate memory doesn't play a significant role.
Second, it is astounding that this outdated study has survived so long. While Miller's research was well executed, it is simply not current enough to be applied to web design. More recent studies have shown Miller's conclusion to be inaccurate and oversimplified. Also, in the 50 years since Miller's study, our ability and willingness to sift through information has probably increased, particularly with the rise of the Internet.
While Miller's "Magic (7±2)" principle reminds us of moderation, it is not appropriate for fundamental navigation decisions and leads to an arbitrary "one-size-fits-all" solution. In no event should it be taken as an absolute law. On the other hand, spamming site visitors with hundreds of navigation links is also irresponsible. Feelings of confusion and information overload are problematic. There probably are limits to the number of menu items a web page can display without overwhelming the user, but these do not come from Miller.
Clearly, the optimal number of menu items cannot be reduced to one generalized rule applicable in all situations. Instead, when planning the information architecture of a site, the two most important considerations are breadth versus depth and the display of information.
Breadth vs. Depth
Breadth vs. depth refers to the balance between the number of visible menu items on a page (breadth) and the number of hierarchical levels in an information structure (depth). There is a clear tradeoff: The fewer the navigation items at a time, the deeper the structure; conversely, more navigation items at once results in a broader structure with fewer levels of hierarchy.
Research strongly shows that broader structures perform more successfully than deeper structures in general. Users are better able to navigate and find information in shallow hierarchies. Indeed, the most popular sites on the Web today often have broad structures: It is not uncommon for successful portals and news sites to have 50-100 links (or more) on the homepage.
Here's the theory: The effort it takes to repeatedly choose categories across many levels of a deep hierarchy outweighs the effort to scan many items in a broad navigation.
Users also have a greater chance of getting lost in deeper structures. A broader structure presents the total information space defined by a web site. New visitors or users with unclear goals will be able to get a better overview of site offerings from a broader structure. They can then easily peruse categories and make informed choices.
Take www.health.com for example. I like this site—pleasant design with good, up-to-date content. The main navigation, however, is carefully squeezed into seven categories (not counting "home") resulting in a deep structure. Finding permanent content is sometimes problematic: I find myself wandering around looking for even generic topics like "stretching." Perhaps the navigation could benefit from a slightly broader structure to give a better overview.
Information Display
Broader navigation schemes place a greater demand on the proper display of information. Facilitating scanning and making complex menu structures clear are of primary importance: You don't want to confuse visitors. The navigation should gracefully lead the user through the site.
Unskilled designers often resort to one of two unfortunate tactics: They either artificially reduce navigation (to seven items, for example) or present everything equally at once. Both can lower access to information and cause usability problems.
But in this age when information itself is a commodity of value, decreasing access seems counter productive. Indeed, the goal of most sites is present information. Why would you want to cut it out or reduce it?
Ultimately, it is not how much information there is, but how it can be best presented. As Edward Tufte, the famous information designer and Yale professor, says: "Clutter and confusion are failures of design, not attributes of information" (Envisioning Information, Graphics Press 1990).
I believe we don't have to shy away from presenting broader, more comprehensive site navigations. Making a complex navigation system clear and understandable without cutting things out, while creating an emotional user experience, is the real challenge. But this is not easy.
Many viable solutions to presenting broad navigations have already arisen. Here are some examples:
Prioritize Navigation Types. Sites often have main, secondary, and tertiary navigations. The separation of menu types can be done by position on the page, font size and type, and color. You've probably already prioritized navigation types without knowing.
Example: PayPal makes good use of various font weights and sizes to prioritize links, though lacking visual chutzpah. With spatially separated menus, the 40 links on the homepage present no problem. Compare: Fleet Homebanking has around 35 links, not counting the pull-down menus and search area. I found this page very difficult to use.
Cluster Like Items. With many items of equal importance, create groupings. This allows users to scan at the cluster level and then zoom in on the subcategories.
Example: All Recipes' vertical navigation on the left has 25+- items that are grouped. Instead of category labels, there is simply a break between clusters. Rather than one long list, you are confronted with several manageable chunks. See also Etrade for a use of category headings.
Show Multiple Levels Simultaneously. The widely used portal style for arranging links shows two levels of hierarchy at one time. By this I mean a linked category name directly above a sample of the items within that category. This improves browsing and allows direct access to two levels of hierarchy. Also referred to as split navigation.
Example: At CNET, the difference between the category header and the items within that category are clearly differentiated with font style: The headers are larger and bold. Compare: MegaGo—there is no help to wade through these lists and little value added to the information here.
Conceal Second-Level Menu Items. Navigational menus that have concealed layers activated on click or on rollover have become common. Menu items are available at all times, though not always visible. Careful: This method can cause usability problems. Be sure to avoid "mystery meat" navigation and label menu points clearly.
Example: The main sections of the International Herald Tribune online are available from every page with one click. This results in a very clean page so you can concentrate on reading news. Compare: Not only is MSNBC overwhelming, there are severe usability problems with using the layered menus.
Visualize Information. Information visualization is a relatively new field of interest spearheaded by interface researchers such as Ben Schneiderman. Representing information in spatial or visual relationships can make complex data sets clear and understandable. But this is not always appropriate and can be unsuccessful in many situations.
Example: In BMWUSA (click "Virtual Center," then "Choose a Model"), you can quickly see the price range of available convertibles, for example. Though not without problems, this is an appropriate visualization.
Of course combinations of the above solutions are possible, in addition to others not mentioned here. See Art and Culture for a good example of navigation prioritization and visualization techniques. This site offers a mix of navigation types that facilitate browsing, direct searching, and serendipitous discovery within an overall positive user experience.
How Much Navigation?
For many sites it may indeed be seven items. The decision, however, should not be based on the "Magic 7±2" rule. Very large bodies of information will demand many more then seven menu items to balance out breadth and depth. In the end, let users have a say in what's best: Test often and adjust as necessary as part of a healthy, ongoing user-centered design process.
My point is this: Generally, the key to navigation design is a balance between breadth and depth with a clear presentation of navigation. Don't avoid broader structures to arbitrarily conform to the 7±2 guideline or to accommodate a pure design aesthetic. But also don't confuse users with information overload: Present only what is truly necessary for your primary target groups in the most understandable fashion within an attractive design.