<Previous Lesson

Human Computer Interaction

Next Lesson>



As the aim of this lecture is to introduce you the study of Human Computer
Interaction, so that after studying this you will be able to:

. Understand the significance of navigation
People won't use your Web site if they can't find their way around it.
You know this from your own experience as a Web user. If you go to a site and can't
find what you're looking for or figure out how the site is organized, you're not likely
to stay long—or come back. So how do you create the proverbial "clear, simple, and
consistent" navigation?

32.1 Scene from a mall

Picture this: It's Saturday afternoon and you're headed for the mall to buy a chainsaw.
As you walk through the door at Sears, you're thinking, "Hmmm. Where do they keep
chainsaws?" As soon as you're inside, you start looking at the department names, high
up on the walls. (They're big enough that you can read them from all the way across
the store.)
"Hmmm," you think, 'Tools? Or Lawn and Garden?" Given that Sears is so heavily
tool-oriented, you head in the direction of Tools.
When you reach the Tools department, you start looking at the signs at the end of each

When you think you've got the right aisle, you start looking at the individual products.
If it rums out you've guessed wrong, you try another aisle, or you may back up and
start over again in the Lawn and Garden department. By the time you're done, the
process looks something like this:
Basically, you use the store's navigation systems (the signs and the organizing
hierarchy that the signs embody) and your ability to scan shelves full of products to
find what you're looking for.

Of course, the actual process is a little more complex. For one thing, as you walk in the
door you usually devote a few microseconds to a crucial decision: Are you going to start
by looking for chainsaws on your own or are you going to ask someone where they are?
It's a decision based on a number of variables—how familiar you are with the store,
how much you trust their ability to organize things sensibly, how much of a hurry
you're in, and even how sociable you are.
When we factor this decision in, the process looks something like shown in figure on
next page:
Notice that even if you start looking on your own, if things don't pan out there's a
good chance that eventually you'll end up asking someone for directions anyway.

32.2 Web Navigation

In many ways, you go through the same process when you enter a Web site.

. You're usually trying to find something.

In the "real" world it might be the emergency room or a can of baked beans. On
the Web, it might be the cheapest 4-head VCR with Commercial Advance or the
name of the actor in Casablanca who played the headwaiter at Rick's.

. You decide whether to ask first or browse first.
The difference is that on a Web site there's no one standing around who can tell
you where things are. The Web equivalent of asking directions is searching—
typing a description of what you're looking for in a search box and getting back a
list of links to places where it might be.
Some people (Jakob Nielsen calls them "search-dominant" users) will almost always
look for a search box as soon as they enter a site. (These may be the same people who
look for the nearest clerk as soon as they enter a store.)
Other people (Nielsen's "link-dominant" users) will almost always browse first,
searching only when they've run out of likely links to click or when they have gotten
sufficiently frustrated by the site.
For everyone else, the decision whether to start by browsing or searching depends on
their current frame of mind, how much of a hurry they're in, and whether the site
appears to have decent, browsable navigation.

. If you choose to browse, you make your way through a hierarchy, using
signs to guide you.
Typically you'll look around on the Home page for a list of the site's main sections
(like the store's department signs) and elide on the one that seems right.
Then you will choose from the list of subsections.
With any luck, after another click or two you'll end up with a list of the kind of thing
you're looking for:

Then you can click on the individual links to examine them in detail, the same way
you'd take products off the shelf and read the labels.

. Eventually, if you can't find what you're looking for, you'll leave.
This is as true on a Web site as it is at Sears. You'll leave when you're
convinced they haven't got it, or when you're just too frustrated to keep
Here is what the process looks like:

The unbearable lightness of browsing

Looking for things on a Web site and looking for them in the "real" world have a lot
of similarities. When we're exploring the Web, in some ways it even feels like we're
moving around in a physical space. Think of the words we use to describe the
experience—like "cruising," "browsing," and "surfing." And clicking a link doesn't
"load" or "display" another page—it "takes you to" a page.
But the Web experience is missing many of the cues we've relied on all our lives to
negotiate spaces. Consider these oddities of Web space:

No sense of scale.

Even after we've used a Web site extensively, unless it's a very small site we tend to
have very little sense of how big it is (50 pages? 1,000? 17,000?). For all we know,
there could be huge corners we've never explored. Compare this to a magazine, a

museum, or a department store, where you always have at least a rough sense of the
seen/unseen ratio.
The practical result is that it's very hard to know whether you've seen everything of
interest in a site, which means it's hard to know when to stop looking.

No sense of direction.

In a Web site, there's no left and right, no up and down. We may talk about moving up
and down, but we mean up and down hi the hierarchy—to a more general or more
specific level.

No sense of location.

In physical spaces, as we move around we accumulate knowledge about the space.
We develop a sense of where things are and can take shortcuts to get to them.
We may get to the chainsaws the first time by following the signs, but the next time
we're just as likely to think,
"Chainsaws? Oh, yeah, I remember where they were: right rear corner,
near the refrigerators."
And then head straight to them.
But on the Web, your feet never touch the ground; instead, you make your way around
by clicking on links. Click on "Power Tools" and you're suddenly teleported to the
Power Tools aisle with no traversal of space, no glancing at things along the way.
When we want to return to something on a Web site, instead of relying on a physical
sense of where it is we have to remember where it is in the conceptual hierarchy and
retrace our steps.
This is one reason why bookmarks—stored personal shortcuts—are so important, and
why the Back button accounts for somewhere between 30 and 40 percent of all Web
It also explains why the concept of Home pages is so important. Home pages are—
comparatively—fixed places. When you're in a site, the Home page is like the North
Star. Being able to click Home gives you a fresh start.
This lack of physicality is both good and bad. On the plus side, the sense of
weightlessness can be exhilarating, and partly explains why it's so easy to lose track
of time on the Web—the same as when we're "lost" in a good book.
On the negative side, I think it explains why we use the term "Web navigation" even
though we never talk about "department store navigation" or " navigation." If
you look up navigation in a dictionary, it's about doing two things: getting from one
place to another, and figuring out where you are.

We talk about Web navigation because "figuring out where you are" is a much more
pervasive problem on the Web than in physical spaces. We're inherently-lost when
we're on the Web, arid we can't peek over the aisles to see where we are. Web
navigation compensates for this missing sense of place by embodying the site's
hierarchy, creating a sense of "there."
Navigation isn't just a feature of a Web site; it is the Web site, in the same way that the
building, the shelves, and die cash registers are Sears. Without it, there's no there there.
The moral? Web navigation had better be good.
The overlooked purposes of navigation
Two of the purposes of navigation are fairly obvious: to help us find whatever it is
we're looking for, and to tell us where we are.
And we've just talked about a third:
It gives us something to hold on to.
As a rule, it's no fun feeling lost. (Would you rather "feel lost" or "know your way
around?"} Done right, navigation puts ground under our feet (even if it's virtual
ground) and gives us handrails to hold on to— to make us feel grounded.
But navigation has some other equally important—and easily overlooked—functions:
It tells us what’s here.
By making the hierarchy visible, navigation tells us what the site contains. Navigation
reveals content! And revealing the site may be even more important than guiding or
situating us.
It tells us how to use the site.
If the navigation is doing its job, it tells you implicitly where to begin and what your
options are. Done correctly, it should be all the instructions you need. (Which is good,
since most users will ignore any other instructions anyway.)
It gives us confidence in the people who built it.
Every moment we're in a Web site, we're keeping a mental running tally: "Do these
guys know what they're doing?" It's one of the main factors we use in deciding
whether to bail out and deciding whether to ever come back. Clear, well-thought-out
navigation is one of the best opportunities a site has to create a good impression.
Web navigation conventions
Physical spaces like cities and buildings (and even information spaces like books and
magazines) have their own navigation systems, with conventions that have evolved
over time like street signs, page numbers, and chapter titles. The conventions specify
(loosely) the appearance and location of the navigation elements so we know what to
look for and where to look when we need them.
Putting them in a standard place lets us locate them quickly, with a minimum of effort;
standardizing their appearance makes it easy to distinguish them from everything else.
For instance, we expect to find street signs at street corners, we expect to find them by
looking up (not down), and we expect them to look like street signs (horizontal, not

We also take it for granted that the name of a building will be above or next to its front
door. In a grocery store, we expect to find signs near the ends of each aisle. In a
magazine, we know there will be a table of contents somewhere in the first few pages and
page numbers somewhere in the margin of each page—and that they'll look like a table of
contents and page numbers.
Think of how frustrating it is when one of these conventions is broken (when
magazines don't put page numbers on advertising pages, for instance).
Navigation conventions for the Web have emerged quickly, mostly adapted from
existing print conventions. They'll continue to evolve, but for the moment these are
the basic elements:


Don't look now, but it's following us

Web designers use the term penitent navigation (or global navigation) to describe the
set of navigation elements that appear on every page of a site.
Done right, persistent navigation should say—preferably in a calm, comforting voice:
"The navigation is over here. Some parts will change a little depending on where you
are, but it will always be here, and it will always work the same way."
Just having the navigation appear in the same place on every page with a consistent
look gives you instant confirmation that you're still in the same site—which is more
important than you might think. And keeping it the same throughout the site means that
(hopefully) you only have to figure out how it works once.
Persistent navigation should include the five elements you most need to have on
hand at all times.
We'll look at each of them in a minute. But first...

Some Exceptions

There are two exceptions to the "follow me everywhere" rule:

The Home page.

The Home page is not like the other pages—it has different burdens to bear, different
promises to keep. As we'll see in the next chapter, this sometimes means that it makes
sense not to use the persistent navigation there.


On pages where a form needs to be filled in, the persistent navigation can sometimes
be an unnecessary distraction. For instance, when I'm paying for my purchases on an
e-commerce site you don't really want me to do anything but finish filling in the
forms. The same is true when I'm registering, giving feedback, or checking off
personalization preferences.
For these pages, it's useful to have a minimal version of the persistent navigation
with just the Site ID, a link to Home, and any Utilities that might help me fill out the

Site ID

The Site ID or logo is like the building name for a Web site. At Sears, I really only
need to see the name on my way in; once I'm inside, I know I'm still in Sears until I
leave. But on the Web—where my primary mode of travel is teleportation—I need to
see it on every page.
In the same way that we expect to see the name of a building over the front entrance,
we expect to see the Site ID at the top of the page—usually in (or at least near] the
upper left corner/
Why? Because the Site ID represents the whole site, which means it's the highest
thing in the logical hierarchy of the site.

And there are two ways to get this primacy across in the visual hierarchy of the page:
either make it the most prominent thing on the page, or make it frame everything else.
Since you don't want the ID to be the most prominent element on the page (except,
perhaps, on the Home page), the best place for it—the place that is least likely to make me
think—is at the top, where it frames the entire page.
And in addition to being where we would expect it to be, the Site ID also needs to look like a
Site ID. This means it should have the attributes we would expect to see in a
brand logo or the sign outside a store: a distinctive typeface, and a graphic that's
recognizable at any size from a button to a billboard.

The Sections

The Sections—sometimes called the primary navigation—are the links to the main
sections of the site: the fop level of the site's hierarchy

In most cases, the persistent navigation will also include space to display the secondary
navigation: the list of subsections in the current section.

The Utilities

Utilities are the links to important elements of the site that aren't reaj iy part of the
content hierarchy.
These are things that either can help me use the site (like Help, a Site Map, or a
Shopping Cart} or can provide information about its publisher (like About Us arid
Contact Us).
Like the signs for the facilities in a store, the Utilities list should be slightly less
prominent than the Sections.
Utilities will vary for different types of sites. For a corporate or e-commerce site, for
example, they might include any of the following:
As a rule, the persistent navigation can accommodate only four or five Utilities—the
tend to get lost in the crowd. The less frequently used leftovers can be grouped
together on the Home page.


Low Level Navigation

It 's happened so often I've come to expect it: When designers I haven't worked with
before send me preliminary page designs so I can check for usability issues. I almost
inevitably get a flowchart that shows a site four levels deep...
...and sample pages for the Home page and the top two levels.
I keep flipping the pages looking for more, or at least for the place where they've
scrawled, "Some magic happens here," but I never find even that. I think this is one of
the most common problems in Web design (especially in larger sites): failing to give
the lower-level navigation the same attention as the top. In so many sites, as soon as
you get past the second level, the navigation breaks down and becomes ad hoc. The
problem is so common that it's actually hard to find good examples of third-level
Why does this happen?
Partly, because good multi-level navigation is just plain hard to figure out— given the
limited amount of space on the page, and the number of elements that have to be
squeezed in.
Partly because designers usually don't even have enough time to figure out the first two
Partly because it just doesn't seem that important. (After all, how important can it be?
It's not primary. It's not even secondary.) And there's a tendency to think that by the
time people get that far into the site, they'll understand how it works.
And then there's the problem of getting sample content and hierarchy examples for
lower-level pages. Even if designers ask, they probably won't get them, because the
people responsible for the content usually haven't thought things through that far,
But the reality is that users usually end up spending as much time on lower-level
pages as they do at the top. And unless you've worked out top-to-bottom navigation
from the beginning, it's very hard to graft it on later and come up with something
The moral? It's vital to have sample pages that show the navigation for all the
potential levels of the site before you start arguing about the color scheme for the
Home page.


Page names

If you've ever spent time in Los Angeles, you understand that it's not just a song
lyric—L.A. really is a great big freeway. And because people in LA. take driving
seriously, they have the best street signs I've ever seen. In L.A.,

. Street signs are big. When you're stopped at an intersection, you can read the
sign for the next cross street.

. They're in the right place—hanging ovsr the street you're driving on, so all
you have to do is glance up.
Now, I'll admit I'm a sucker for this kind of treatment because I come from Boston,
where you consider yourself lucky if you can manage to read the street sign while
there's still time to make the turn.
The result? When I'm driving in LA., I devote less energy and attention to dealing
with where I am and more to traffic, conversation, and listening to All Things
Page names are the street signs of the Web. Just as with street signs, when things are
going well I may not notice page names at all. But as soon as I start to sense that I
may not be headed in the right direction, I need to be able to spot the page name
effortlessly so I can get my bearings.
There are four things you need to know about page names:

. Every page needs a name. Just as every corner should have a street sign, every
page should have a name.
Designers sometimes think, "Well, we've highlighted the page name in the
navigation. That's good enough." It's a tempting idea because it can save space, and
it's one less element to work into the page layout, but it's not enough. You need a
page name, too.

. The name needs to be in the right place. In the visual hierarchy of the page,
the page name should appear to be framing the content that is unique to this
page. (After all, that's what it's naming—not the navigation or the ads, which
are just the infrastructure.)


. The name needs to be prominent. You want the combination of position,
size, color, and typeface to make the name say "This is the heading for the
entire page." In most cases, it will be the largest text on the page.

. The name needs to match what I clicked. Even though nobody ever
mentions it, every site makes an implicit social contract with its visitors:
In other words, if" I click on a link or button that says "Hot mashed potatoes,"
the site will take me to a page named "Hot mashed potatoes."
It may seem trivial, but it's actually a crucial agreement. Each time a site violates
it, I'm forced to think, even if only for milliseconds, "Why are those two things
different?" And if there's a major discrepancy between the link name and the
page name or a lot of minor discrepancies, my trust in the site—and the
competence of the people who publish it—will be diminished.
Of course, sometimes you have to compromise, usually because of space limitations. If
the words I click on and the page name don't match exactly, the important thing is that
(a) they match as closely as possible, and (b) the reason for the difference is obvious.
For instance, at Gap.com if I dick the buttons labeled "Gifts for Him" and "Gifts for
Her," I get pages named "gifts for men" and "gifts for women." The wording isn't
identical, but they feel so equivalent that I'm not even tempted to think about the


"You are here"

One of the ways navigation can counteract the Web's inherent "lost in space" feeling is by
showing me where I am in the scheme of things, the same way that a "You are here"
indicator does on the map in a shopping mall—or a National Park.
On the Web, this is accomplished by highlighting my current location in whatever
navigational bars, lists, or menus appear on the page.
In this example, the current section (Women's) and subsection (Pants/Shorts) have
both been "marked." There are a number of ways to make the current location stand
The most common failing of "You are here" indicators is that they're too subtle. They
need to stand out; if they don't, they lose their value as visual cues and end up just
adding more noise to the page. One way to ensure that they stand out is to apply more
than one visual distinction—for instance, a different color and bold text.



Like "You are here" indicators, Breadcrumbs show you where you are. (Sometimes
they even include the words "You are here.")
They're called Breadcrumbs because they're reminiscent of the trail of crumbs Hansel
dropped in the woods so he and Gretel could End their way back home.
Unlike "You are here" indicators, which show you where you are in the context of the
site's hierarchy, Breadcrumbs only show you the path from the Home page to where
you are. (One shows you where you are in the overall scheme of things, the other shows
you how to get there—kind of like the difference between looking at a road map and
looking at a set of turn-by-turn directions. The directions can be very useful, but you
can learn more from the map.)
You could argue that bookmarks are more like the fairy tale breadcrumbs, since we drop
them as we wander, in anticipation of possibly wanting to retrace our steps someday.
Or you could say that visited links (links that have changed color to show that you've
clicked on them) are more like breadcrumbs since they mark the paths we've taken,
and if we don't revisit them soon enough, our browser (like the birds) will swallow
them up.

<Previous Lesson

Human Computer Interaction

Next Lesson>


Lesson Plan


Go to Top

Next Lesson
Previous Lesson
Lesson Plan
Go to Top