UI Patterns and Techniques

Toplevel Navigation

From Microsoft Money
Use when:	You're building a large Web site, or a complex application with several separate divisions or tools. In either case, users are likely to want to move from one division to another.
Why:	On the Web, a toplevel navigation bar is a well-established convention, so users will expect it. More importantly, though, a set of links or buttons that reflects the UI's highest-order structure makes that structure visible to users. It gives them an overview of the UI, and helps them find what they need in it (if the naming scheme makes sense, anyway). It also facilitates exploration and easy movement, by putting each division only one click away from anyplace else. You can add to the utility of a toplevel navigation panel by making it show what division the user is currently in. Thus it becomes a signpost as well as a navigational device.
How:	The most important thing is to use a sensible organizational structure to start with. Keep the number of divisions down to something you can display in the space available, and name the divisions well -- not too many words, meaningful to the user, and following whatever conventions are appropriate ("About Us," "Products," etc.). As for the toplevel navigation itself, design a single panel that looks the same -- and goes into the same place -- on each page where it appears. On the Web, that should be every page. On a desktop UI, there are far fewer conventional uses of such a thing, but it should probably go into every major application window (not necessarily every dialog). A good toplevel navigation panel is one component of a well-designed Visual Framework. To show where the user is now, simply make the link for the current division look different from the others. Use a contrasting color, perhaps, or an inobtrusive graphic like an arrow. One design issue that you may run into, especially on Web pages, is how to present this kind of navigational device along with other sets of links. They ought to be distinct from each other. Users may look to the top of the page for the toplevel navigation; that leaves the lefthand and righthand sides for other links, or you could put them in the Center Stage and/or content area itself. You could also use two very different sets of affordances -- simple clickable text for the toplevel navigation, and tabs for more "local" things, for instance. As with Center Stage, keep in mind that home pages and main windows may require different layouts than other pages in the UI. If getting to the different sections of the UI is one of the purposes of the home page or opening window, then toplevel navigation there may need to be more prominent than everywhere else, and you might want to flesh it out with details or sublinks. Finally, understand that not every user will use, or even notice, a navigational device like this. It's a common misconception among engineers and designers that users will logically look for the overview first, then decide where to go. They won't. They often don't care to know how the site or UI is organized, but simply follow the nearest and most obvious signposts until they find what they need. It's analogous to someone looking for the restrooms in a museum -- they probably won't bother reading a map if there are signs or architectural clues.
Examples:
From http://newscientist.com A very typical Web toplevel navigation.
From http://aiga.org. Note the Flash dropdown menu, which offers more choices in a small space.
From http://economist.com. This navigation bar contains other tools in addition to toplevel links.