We are going to look at several general principles that underlie every decision in
designing navigation. Navigation should do the following:
- Provide a conceptual map of the site. A visitor should be able to make a mental
model of the site structure.
- Give feedback as to current location: “You are here.” In other words, show visitors
where they are currently located in relation to the entire site. Psychologists
call this grounding: locating a known reference point in a foreign information
space. Page titles, color-coded sections of the site, a disabled link for the page
that is currently loaded, and breadcrumbs (more on all this later) serve as current
location markers.
- Remind the visitor how he or she got there: “You were there.” Breadcrumbs as
well as a disabled current link (but left intact in the menu system) give the visitor
some idea of how he or she got to the current page.
- Help the visitor find what he or she wants: “You want to go there.” After all,
that’s the point, isn’t it? A logically-structured hierarchy with clear categories
and labels, along with secondary navigation aids such as a search function and
site map, help to render the visitor’s quest painless.
- Make the visitor aware of other offerings on your site: “You could go there, if
you’re interested.” The navigation should point out other intriguing content
on the site. Think of the navigation as serving the same function as a table of
contents of a magazine; both provide an introduction to what is available on
the pages the stuff you were looking for, and the stuff you might be happy or
surprised to find as well.
All of these considerations facilitate wayfinding, the process visitors use to find
what they need. We all use the same general way finding techniques whether we’re
navigating a web site or the Mall of America.
Navigation Principles
We are going to look at several general principles that underlie every decision in
designing navigation:
- Create simple, visible, consistent navigation.
- Take advantage of what visitors already know.
- Orient visitors with “You Are Here” markers.
- Minimize visitor effort.
- Provide multiple ways to access information.
- Provide for visitors with varied skill levels.
- Provide feedback.
- Make sure the navigation is fl exible and expandable.
Create Simple, Visible, Consistent Navigation
Navigation should be instantly recognizable as navigation don’t force visitors to
“scrub” the cursor all over the screen to find an unidentifi ed hotspot (link). It might
be intriguing on an artsy “experience” site, one designed just for entertainment, but
it’s not at all acceptable for a more mainstream ecommerce site.
Don’t vary the look, feel, and placement of navigation from page to page unless you
have some overwhelmingly good reason to do so. The number and order of links
shouldn’t be altered, because menus with links that appear on one page but disappear
on another page are confusing to users. For instance, the link to the current
page shouldn’t disappear from that page’s menu, because changing the structure
from page to page confuses visitors. After all, the link to the current page serves as
the grounding “you are here” marker on the site structure. However, you should disable
the current link (simply remove the <a> tag) and somehow alter it visually (for
example, gray it out) so that it’s obviously no longer clickable.
Navigation labels should be consistent as well. For instance, don’t call a person who
belongs to a health club a “member” on one page, a “participant” on another page,
and a “visitor” somewhere else. Pick a preferred term and stick to it. Also be consistent
in punctuation, spelling, capitalization, and grammar usage (all labels starting
with either a verb or a noun, for instance).
Finally, remember that the label within the <a> tag is a promise, really, and we
shouldn’t make misleading promises. We need to be very clear to visitors where
they are going before they get there.
Take Advantage of What Visitors Already Know
If we unexpectedly changed all stop signs in the United States to blue triangles, the
most likely result would be uncountable nasty collisions. If we instead erected red
circle signs, the results would probably be less disastrous drivers would leverage
their knowledge of red octagons and perhaps fi gure out that the very similar red
circles had a similar meaning. The point this story tries to make is that we have a
better shot at making unusual navigation elements understandable if they have at
least some characteristics in common with the tried and true standards.
Keep in mind that the greater the obvious benefi t to any new standard, the more
willing users will be to retrain themselves. For example, would you be willing to learn
a completely new computer keyboard layout if it eventually provided you with a 10%
increase in typing speed? No? What if it doubled your speed? Quadrupled it? Yes,
it would have to provide quite a bit of benefi t before any of us would be motivated
to invest the time and effort required to learn the new system. The same holds
true for navigation systems on web pages. Try to leverage what the visitors already
know and assume, even if you do choose to change things somewhat.
Orient Visitors with “You Are Here” Markers
The visitor needs to know his or her position in the site at all times. Imagine being
dropped into the middle of Kansas, without signs telling you where you are. Visitors
can be similarly baffl ed when dropped into a lower-level page from a search engine
results page. They need a sense of place a sense of where they are located in the
hierarchy of the site and where they can go next within that hierarchy. “You are
here” indicators, like the site logo, page title, page header, and a disabled menu link
to the current page, can provide this guidance.
Minimize Visitor Effort
If you force visitors to log in or download a special plug-in to enter a site, you might
just lose them. Visitors will endure such extra exertion only after they’ve been convinced
there is some compelling personal benefi t. Until then, they would rather bail
out of the site.
Just as importantly, visitors don’t want to click through endless pages to get where
they want to go. However, clicks that are unambiguous, that lead them to information
of high personal value, or that somehow reassure them that they are close to
goal are usually tolerated.
The “Poorly Designed Workflow” sidebar shows a site that required numerous clicks
and separate page loads just to buy a set of matching bedsheets.
Provide for Visitors with Varied Skill Levels
Experienced web surfers can often fi gure out even confusing navigation systems.
Web “newbies,” though rare these days, may not even be familiar with the convention
of using an underline as a way of indicating links. The vast majority of visitors
fall somewhere in between. The good news is that a clear and elegant navigation
system does indeed support everyone, regardless of skill level. Still, if the newcomers
need additional support such as instructions or help pages, make sure those
support features don’t hinder the more experienced visitors.
Provide Feedback
We should provide some sort of feedback any time a visitor must wait for an
extended period of time after clicking a link. For instance, if a visitor is downloading
a large file, we might offer a small animation that proves to the user that the
download is progressing. For instance, United Airlines shows an animation of an
airplane fl ying across the page as the site takes a few moments to search for fl ights.
Without such an animation, a long wait might convince the visitor that the web site
is locked up. User perception is critical here; a long wait in which something, anything,
appears to be happening is often perceived to be shorter than an uncertain
wait of the same duration.
| 
Disclaimer