Global Navigation
From Microsoft Money |
|
What: |
Using a small section of every page, show a consistent set of links or buttons that take the user to key sections of the site or application. |
|
You build a large web site, or an application with several separate sections or tools. In either case, users are likely to want to move directly from one section to another. You have plenty of space to work with, and you don't mind having extra elements on each page. |
Why: |
On the Web, a global navigation bar is a well-established
convention, so users expect it there. More importantly, though,
a set of links or buttons that reflects the UI's highest-order
structure makes that structure visible to users from every page.
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
section only one click away from anyplace else.
You can add to the utility of a global navigation panel by making it show what section the user is currently in, like tabs do. Thus it becomes a "You are here" signpost as well as a navigational device. |
How: |
First, devise a sensible organizational structure. Keep the
number of sections down to something you can display in the space
available, and name the sections well -- make them meaningful to
the user, don't use too many words, and follow whatever
conventions are appropriate (such as "About Us" or "Products").
As for the global navigation panel, 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 (with the notable exception of applications using a Hub and Spoke structure). A desktop UI has far fewer conventional uses of such a thing, but it should probably go into every major application window (not every dialog box). A good global navigation panel is one component of a well-designed Visual Framework (see Chapter 4). To show where the user is now, simply make the link for the current section look different from the others. Use a contrasting color, perhaps, or an unobtrusive 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 one another. Users may look to the top of the page for the global navigation; that leaves the left- and righthand sides for other links, or you could put them in the 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, remember 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 a purpose of the home page or opening window, then global navigation 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. Engineers and designers share a common misconception 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 (this is called Satisficing; see Chapter 1.) It's analogous to someone looking for the restrooms in an airport -- they probably won't bother reading a map if there are signs or architectural clues. |
Examples: |
|
PalmOS Palms and similar PDAs use a hardware form of Global Navigation. The four round buttons at the bottom of the device bring the user directly to the calendar, phone list, To-Do list, and memo pad applications. Similarly, the silkscreened "soft" buttons above it bring the user to the Applications hub, calculator, and two helper tools, Menu and Find. Notice that the calendar application shown has no explicit "Close" or "Exit" button. I suppose the designers expected that people would use global navigation to move around. This implies that the applications retain their state as the user switches applications, so no changes get lost inadvertently. It's a very different model from Hub and Spoke (an alternative pattern). |
|