Navigation - Page 11
May 18, 2001
The Web is a navigational system: The basic user interaction is
to click on hypertext links in order to move around a huge
information space with hundreds of millions of pages. Because the
space is so vast, navigation is difficult, and it becomes
necessary to provide users with navigational support beyond the
simple "go-to" hyperlinks.
Navigation interfaces need to help users answer the three
fundamental questions of navigation:
- Where am I?
- Where have I been?
- Where can I go?
Where Am I?
The most important navigation question is probably "Where am I?"
because users will never stand a chance of understanding the
site's structure if they don't understand where they are. If you
don't know where you are, then you also don't have the ability to
interpret the meaning of the link you just followed.
The user's current location needs to be shown at two different
levels:
- Relative to the Web as a whole
- Relative to the site's structure
You need to identify your site on all of your pages because they
form a subset of the Web as a whole. All web pages are much the
same from the user's perspective; they share interaction
techniques, they are downloaded (slowly) from the Internet, and
they have relatively similar layouts. These similarities are in
fact good because they allow users a measure of transfer of skill
from one site to the next. My usability studies show that users
complain bitterly when a site tries to use navigation interfaces
that are drastically different from the ones they have come to
expect from the majority of other sites.
The Web as a whole dominates the user experience because users
tend to view no more than four to five pages at a time at any
individual site. The potential downside is that users will not
know what site they are on unless you tell them. Thus, navigation
rule number one is to include your logo (or other site
identifier) on every page. The logo should have consistent
placement (preferably the upper-left corner if the page is in a
language that reads left to right) and should be made into a
hypertext link to the home page so that users can get to your
home page from any other page. Location relative to the site's
structure is usually given by showing parts of the site structure
and highlighting the area where the current page is located. It
is also important to have a clear main headline for the page that
states its name or main content in a glance. Finally, the page
title in the HTML header definition should be used to generate a
meaningful name for each individual page so that users can locate
it easily in their bookmark list if they bookmark the page.
Where Have I Been?
Because standard web technology is state-less, it may be hard for
page designs to directly address the "Where have I been"
question, because the site doesn't know without resorting to
cookies or other user-tracking measures. Luckily, some of the few
useful navigation mechanisms in current web browsers provide some
assistance with this question. The Back button takes the user
directly to the previous page, the history list includes a list
of recently visited pages, and hypertext links are shown in a
different color if they point to previously visited pages.
I recommend not changing the standard link colors because users
will only understand the meaning of the link colors if they are
kept the same. I tested many sites with non-standard link colors
where the users ended up not understanding what links they had
already followed.
Knowing what links lead to previously visited pages is useful for
two reasons: It helps users learn the structure of the site, and
it prevents them from wasting time going to the same page many
times.
Where Can I Go?
This question is answered by the visible navigation options and
any other links on the page. In addition, assuming that the user
has acquired some understanding of the site's structure, the user
may have a general idea of other, currently invisible, places to
go. Because it is impossible to show all possible destinations on
all pages, it is obvious that a good site structure is a major
benefit in helping users answer the "Where can I go" question.
There are three kinds of hypertext links that can be used on a
page:
- Embedded links are the traditional underlined text
that indicates that "more stuff" is available about some topic
that is discussed in the body text.
- Structural links are links that systematically point
to other levels of the site structure as well as to siblings or
children in a hierarchy. It is important to have the same
structural links on all pages so that the user will understand
what structural navigation options to expect.
Of course, the exact destinations pointed to by the structural
links will be different from page to page. Therefore, it is often
better to use link anchors that name the specific destinations in
addition to giving the generic structural relationship between
the current page and the destination page. For example, it is
better to have a link that reads "Up to Widget Product Family"
than a link that simply reads "One Level Up."
- Associative links are used to give users "see also"
hints about pages that may be of interest to them because they
are similar or related to the current page.
It is usually best to represent links as underlined text, keeping
the standard link colors of blue for links to unvisited pages and
purple for links to pages the user has seen before. Everybody
learns the meaning of this convention the first day they are on
the Web, and there is simply no doubt that underlined text means
"click here." Because underlining now has a strong perceived
clickability affordance, it is best not to underline any text
that cannot be clicked.
Usability problems are also associated with links that have any
form other than simple, underlined text. Pull-down menus and
graphics should be used for navigation only with great care
because they don't behave in the standard manner of underlined
text. In particular, they don't turn purple if they link to
places the user has already seen.
Still More Metaphors - Page 10
Designing Web Usability
Navigation: Examples - Page 12
|
