A Web page's main navigation section contains hyperlinks to all the primary pages or sections of a Web site. The location and look of any navigation section should be consistent across all content pages, and should be similar or even identical to the location and look of the navigation section found on the home page. There are many ways to layout and design navigation sections; let's look at some basic examples:
At the very least, a navigation system should have text. This example uses just text for links the primary navigation section, and displays the links horizontally. The effect is simple and minimalistic--but can be done in a very stylish way. This example also uses, albeit subtly, font size to indicate prominence and positioning to indicate hierarchy of one set of links to the other.
Often times designers prefer to offset the text of their links with bordered boxes:
This vertically stacked example uses box outlines around the text links. In such cases its important to make the box an actual part of the hyperlink so that the box AND the text is clickable.
Here's an example that uses solid color backgrounds for their links, making the links look more button-like:
This horizontal layout at the top of the page minimizes the screen real estate used up by the navigation section. A vertical layout on the side of the content is more prominent, but usually ends up taking up more of the useful screen real estate:
Beyond the primary navigation system, one must determine where the secondary navigation system should reside, if the site requires it. In this example the primary navigation is on the top, but the secondary navigation system for each primary page is on the side.
The primary section category appears at the top, laid out horizontally. Secondary navigation links appear as text directly below the primary section header, and are laid out vertically.
Adagio is also a nice example because it uses color and icons for it's primary navigation in addition to text--it proves very effective to get users thinking about their product while they're navigating.
Novell's Groupwise e-mail interface does the same thing:
As exemplifed by the samples shown above, most sites have more than just the links found in the primary navigation area. Adagio deals with this by putting the primary links prominently at the top, and adding in secondary navigation links on the left-hand side. Here's another example of the same strategy, but with the links on the right:
Here's another example of an expanding vertical menu:
In this example clicking a link in the secondary navigation system expands the area to reveal a tertiary navigation system. This efficiently uses space and identifies the user's location through already-familiar navigation conventions:
These examples of expanding menus are fairly discreet. Let's look at some expanding menus that are more explicit in their functionality.
At one time expanding primary, secondary and tertiary navigation systems were all the rage. I'm not sure why they've fallen out of favor. Part of it may be the percieved complexity of coding and maintaining such systems. (As we'll see in later lessons, this is actually not necessarily true.) In explicitly expanding/collapsing menus we usually see:
Using the Novell Groupwise example again, here's how an example of an expanding menu with multiple levels:
This example is particularly useful as it uses a file folder metaphor for structure. When used to refer to Web site elements, a metaphor is a tool, object, or interactive element represents a real-life experience. For instance, we don't really have folders on a computer, we have data and files assigned to an arbitrary "name" category. The computer folder metaphor just triggers users to relate a task to something they already know how to do.
So Novell's use of the file folder metaphor is based on the Mac/Windows file folder metaphor which is based on the physical paper file folder organization system. To operate the metaphor, users click on the buttons next to each item to expand or collapse. In the Novell example the buttons are + or - signs, which simply mean expand or shrink.
More abstract representations are available too. WebCT uses a simple outline with right or down arrows.
One big advantage of the expanding/collapsing menu is user control. And while they ecnomically utilize screen real estate, they also allow links to be displayed semi-permanently, which aids users in finding what they need.
A similar concept without the permanence is the drop-down menu, which minimizes the use of screen real estate even more so. In the following example, the designer utilized a drop-down menu to reveal a secondary navigation system for each of the primary pages. This drop-down menu appears on mouse-over, or hover--that is, when a user positions his/her cursor over an object or link without clicking:
Drop-down menus look nice and are fun, and can be very effective. But they do offer some usability problems in the fact that they "hide" secondary and tertiary navigation systems from the users once the user mouses-off or mouses-over another section. This sort of system requires users to try to remember what links appear under which primary pages. Designers are also at risk of "tricking" users into thinking there are not secondary or tertiary pages.
Here's an example of secondary hyperlinks that are anchored within the same page--that is, they don't open a new page, they just take you further down in the page. This is often referred to as in-page navigation:
This example tries to break up the sometimes monotonous grid patters of normal navigation systems by...spreading the links out all over the place.
This sort of information structure doesn't give me much confidence in an organization devoted to child development.
Here's an example of a navigation system where the layout of the links is slightly curved, and content actually appears on mouse-over/hover rather than on click:
This takes up more screen real-estate, but in this example the site is very shallow, and none of the content pages have much more than a couple paragraphs of content. The navigation system--which essentially lists reasons why you should visit this coffee shop--is made more prominent for it, and the more informal and immediate feel suited the client's desires.
The previous example is also interesting because it focuses on graphics as visual cues for the links while including a text reference. The other examples we've seen so far were rather minimalistic design examples that focus on just the text in a button-like background.
I think the previous example is as far away from a text-based navigation system as you'll probably ever want to go. The extreme end of the spectrum uses what's been popularly dubbed "mystery meat navigation". This is the sort of navigation system wherein links use no text at all, consisting instead of only of colors, images, or icons that do not quickly convey the critical information. As much as I like Peter Gabriel as an artist, his production studio's Web site was an early adopter of mystery meat navigation, and as a wholeis just a plain bad example of usability:
Peter Gabriel's Real World Studio site wants you to click on those little tiny colored boxes as its primary navigation system(!)
Strangely, the Real World Studio site does provide it's secondary navigation menu in text not just once, but twice on each page: on the left side, and at the bottom right. And don't get me started on those puny font sizes...
Artsy sites tend to like mystery meat navigation because the designer wants to be different or unusual or mysterious. Users tend to hate this crap because its hard to tell exactly what s/he will get when a link is clicked on. As we see in the example above, Peter Gabriel fans are apparently imbued with rare psychic and cognitive powers that allow them to know and then remember where each little arbitrarily colored box will take them. It's better to use text--simple text that makes immediate sense to ordinary people.
Mystery meat navigation is, I think, justifiable on truly artsy web sites, where users are there to explore and entertainment experience. They are not appropriate for commercial sites like Fry Steel (frysteel.com):
There are links there somewhere, but I'm not sure where they go:
For more pain, visit the actual Fry Steel Web site.
One alternative I find myself favoring more and more for Web site designs is the tab-based navigation system. Steve Krug succinctly describes how tabs could and should be used for Web site navigations in his book Don't Make Me Think!. Let's read another short excerpt from Chapter 6 right now on tab-based navigation titled, Four Reasons Why I Love Tabs .
return to top