Taking Your Talent to the Web | 6 | WebReference

Taking Your Talent to the Web | 6

To page 1To page 2To page 3current pageTo page 5
[previous] [next]

Taking Your Talent to the Web


The so-called "Rule of Five" sounds like a period out of Chinese history, but it's actually just another guideline most working web designers keep in mind-especially if they want to keep working.

The Rule of Five postulates that complex, multi-layered menus offering more than five main choices tend to confuse web users. A glance back at Figure 3.5 should confirm the common sense behind this "rule." The main menu at Overstock.com offers not five, not six, not seven, but a whopping twelve main categories to choose from. (And that's not even counting the strange tagline area that is inexplicably designed to resemble a clickable menu button.) Overstock.com is so busy offering everything that many users will be hard pressed to find anything.

By contrast, Sapient's main menu (back in Figure 3.14) offers four choices: Clients, Expertise, Company Info, and Careers. Giving users three, four, or five main choices makes it easier for them to decide where they want to go. Hitting them with ten or more choices makes their next move harder to predict-for them and for you. Confuse them enough, and it becomes easier to predict where they will go, namely: anywhere else.

As with the Three-Click Rule, evolving a site whose architecture can be navigated in five main areas or less is easier if you engage in scenario playing before you begin to design. Chapter 7, "Riding the Project Life Cycle," provides a detailed analysis of how you, your team, and your client can collaborate to develop logical site structures that facilitate the Three-Click Rule and the Rule of Five.

On multi-purpose sites (and there are many of those), several layers of navigation may peacefully coexist. Looking yet again at Sapient (Figure 3.14), four choices are enough to guide visitors to main areas of the site but not enough to help those seeking one-click access to various client/vendor success stories. The icon-driven menu on the right ignores the Rule of Five without incident.

On a shopping site, the main menu may offer three choices: Women's, Men's, and Kids'. But submenus can be far more extensive: the Women's section might offer Outerwear, Sportswear, Business Attire, Casual Wear, Accessories, Cosmetics, Health Aids, and sundry other stuff without confusing any shopper. As the shopper burrows deeper into the hierarchy, these submenus can sprout submenus of their own, for example Cosmetics could include Hair Products, Makeup, Toners, Cleansers, and beyond. Such sub-menus may run deep, as long as they appear when users expect them to appear and behave consistently from section to section.

Some site designers and architects distinguish between goal- and task-oriented navigation. With goal-oriented navigation, the user wants to go somewhere (Clients, Expertise, or Company Info, for example). With task-oriented navigation, the user wants to do something (apply for a job, log in, or read case studies). Combining the two types of user needs in the same navigational context can be more confusing than helpful. In such cases, task and goal-oriented navigation coexist separately (see Figure 3.16), and the Rule of Five pertains to each navigational stream rather than to the page as a whole.

Figure 3.16
Goal-oriented navigation
(Expertise, Process, Proof)
and task-oriented naviga-
tion(Hire Us, Work Here,
Login) carefully separated
and balanced. The user can
quickly follow a desired
activity path without
becoming confused or
overwhelmed. Such com-
plex structures are hard to
pull off (www.hesketh.net).


Drivers use road signs to track their location in space. Web users rely on navigation. Well-designed sites cue the visitor to her location within the site's hierarchy. For instance, if the visitor is within the Breeds section of the cat site, the Breeds item in the menu bar may be highlighted by a subtle change of color. This "you are here" indicator helps keep the visitor grounded, thus promoting lengthier visits (see Figure 3.17).

It's all about comfort. Better hotels offer fluffier pillows; better sites provide constant spatial and hierarchical reassurance. Breadcrumbs, called this because they resemble the trails left by Hansel and Gretel, not only serve as hierarchical location finders, but they also allow visitors to jump to any section further up in the hierarchy (see Figure 3.18).

Figure 3.17
Subtle highlighting on the
menu bar reminds you that
you're on the Home Store
page. Click to a different
page, and a different menu
item will be highlighted.
Note, too, how much air
the design team has
managed to work into the
page, in spite of the vast
number of links and menu
items the page must carry
Compare with Figure 3.16
and contrast with Figure


The location of the navigation in the digital nation permits much permutation without causing perturbation. Navigation can exist in a horizontal strip at the top or bottom of the site. It can live in a navigation bar on the left or right side of the page. It also can float in a JavaScript remote popup window (as long as alternatives are provided).

What matters most, aside from technological and user appropriateness (remote popup window navigation is probably not the best choice for the Happy Valley Retirement Home), is that the navigation stay in one place so the user knows where to find it when he or she is ready to move on. A handrail guides someone down a flight of stairs, and the guidance works because the handrail remains in the location where the user expects to find it. Good site navigation works the same way. With few exceptions, it doesn't really matter where you stick your navigation as long as you keep sticking it there throughout the site.

Figure 3.18
Breadcrumbs remind you
that you're on the Miles
Davis page of the Artists
section. Essential to
complex directories,
breadcrumbs also can
enhance branding, enter-
tainment, and content
sites by providing alterna-
tive navigation for those
using less-capable
browsers. They reassure
beginners while enabling
sophisticated users to skip
tedious hierarchical layers
and move quickly to the
exact content they seek

To page 1To page 2To page 3current pageTo page 5
[previous] [next]

Created: May 07, 2001
Revised: May 07, 2001

URL: http://webreference.com/authoring/design/talent/chap3/2/