Fat Menus

The menus at microsoft.com

What

Display a long list of navigation options in drop-down or fly-out menus. Use these to show all the subpages in site sections. Organize them with care, using well-chosen categories or a natural sorting order, and spread them out horizontally.

Use when

The site or app has many pages in many categories, possibly in a hierarchy with three or more levels. You want to expose most of these pages to people casually exploring the site, so they can see what’s available. Your users are comfortable with drop-down menus (click to see them) or fly-outs (roll over them with the pointer).

Why

Fat Menus make a complex site more discoverable. They expose many more navigation options to visitors than they might otherwise find.

By showing so many links on every page, you make it possible for a user to jump directly from any subpage to any other subpage (for most subpages, anyhow). You thus turn a multi-level site—where subpages aren’t linked to the subpages in other site sections—into a fully connected site.

Fat Menus are a form of progressive disclosure, an important concept in user interface design. Complexity is hidden until the user asks to see it. A visitor to a site that uses these can look over the menu headings to get a high-level idea of what’s there, and when he’s ready to dive in, he can open up a Fat Menu with a gesture. He isn’t shown millions of subpages before he’s ready to deal with them.

If you’re already using menus in your global navigation, you might consider expanding them to Fat Menus if surfacing more links makes the content more attractive to casual browsers. People won’t have to drill down into categories and subcategories of your site hierarchy in order to discover interesting pages—they’ll see them there, right up front.

How

On each menu, present a well-organized list of links. Arrange them into Titled Sections if they fit into subcategories; if not, use a sorting order that suits the nature of the content, such as an alphabetical or time-based list.

Use headers, dividers, generous whitespace, modest graphic elements, and whatever else you need to visually organize those links. And take advantage of horizontal space—you can spread the menu across the entire page if you wish. Many sites make excellent use of multiple columns to present categories. If you make the menu too tall, it might go right off the end of the browser page. (The user controls how tall the browser is; guess conservatively.)

The best sites have Fat Menus that work stylistically with the rest of the site. Design them to fit well into the color scheme, grid, and so on of the page.

Some menu implementations don’t work well with accessibility technology such as screen readers. Ensure that your Fat Menus can work with these. If they can’t, consider switching to a more static strategy, such as a Sitemap Footer.

Examples

The Fat Menus on the Starbucks website are very well designed. Each menu is a different height but the same width, and follows a strict common page grid (they’re all laid out the same way). The style blends in with the site, and the generous whitespace makes it easy to read. Ads are worked into the design, but not obnoxiously. The non-rectangular shape adds a polished look.

The menus at starbucks.com

Slate’s menus are less readable and more crowded (in keeping with the overall style of the site). These don’t take full advantage of horizontal space, either. But the idea of using them to show featured articles is clever—the knowledgeable user can skim a large number of headlines by rolling over the menus.

The menus at slate.com

The American Red Cross doesn’t merely float its menus over the top of the page. When the user rolls over any top-level menu item, the resultant Fat Menu actually replaces a carousel-style rotating news panel, taking its space in the page. The menu is the same for all the top-level menu items, so all the subpages in every category are visible at once.

The menus at the Red Cross website

WebMD uses an alphabetical sorting order for its long, flat list of health topics.

The menus at webmd.com