Web Navigation Designing The User Experience
Web Navigation Designing The User Experience
Visual messages
Look at the example of a subway system. The Boston subway system has
several routes that bisect the city, reaching a large part of the population. The
subway's infrastructure is generally well planned, well labeled, consistent, and
predictable. No small feat for the nation's oldest subway system, which (like
many web sites) grew over time.
To make the subway as easy as possible to use, its designers used color to help
differentiate routes. There is a Red Line, a Green Line, a Blue Line, and so on.
Cars are painted in the color of their route, to help riders make connections.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 2 sur 12
Subway maps showing the various routes and their colors are prominently
displayed in station stops. Walls, signs, and stairwells are also appropriately
colored.
While the Boston subway system has its quirks, it's relatively easy to figure
out where you need to go. Architecture (the system's logical structure) and
interface (visual cues and guidance) work together to help the subway's riders
make decisions and plan routes.
If the subway provided visual cues that were at odds with its architecture--for
example, if Red Line trains were occasionally used to service the Green Line--
there would be confusion. Many web sites do the equivalent of running Red
Line trains on the Green Line, though. These sites construct environments in
which logical structure is not supported by visual cues. Instead, these two
important ways of organizing information contradict each other, and there is
confusion.
How can this be? Some people will tell you that a solid site architecture will
stand on its own. I don't believe it can. Even in an "undesigned" site (which is
hard to imagine, since virtually all sites have some level of design), there must
be a relationship between visual messages and logical structure. How large are
headers? Are some items indented? How are fonts and styles used? What
content appears first? How we present information--unintentionally or by
design--sends messages about its relationships and context.
If you read the previous chapter, you may have a growing sense of the
importance of information hierarchies, the careful organization of information
into clear, logical categories. Hierarchies can also be visual.
Relative size can communicate information about the importance of one item
over another. Large items will generally draw attention first and will be seen
as the more important elements on screen. Headers, for example, are almost
always larger than text, which communicates that they have weight and
importance. When these clues are not available, sorting through information
can be an overwhelming experience for users.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 3 sur 12
Rather than being seen as a solution to some of the Web's usability problems,
graphic design is often regarded as their source. While they are central figures
in print communication, designers are not yet playing a serious role in this
medium.
"This role is slow in coming," he says, jokingly adding that, "when you come
in with Photoshop files and say, `This is the new way of dealing with this
problem,' engineers and developers look at designers as fuddy duddies. As
much as we believe it's true, there has not been a precedent set that we are
credible in this category. Unless we prove that, it's still going to be
questioned."
Nathan Shedroff, vivid studios' Creative Director, has written a great deal
about interaction and information design for the Web, and has plenty of
insight into the process behind the results.
"When we start any project," Nathan explains, "we begin by asking our
clients what their goals are for the site, which will determine how the site's
success will be measured. We also ask who their audience is, and what their
messages are to that audience. This is where everything important happens.
The answers to these questions affect every other question down the road."
Early on, vivid looks at the amount and type of content a client has and
experiments with organizing and presenting it in different ways. "We try to
bring fresh eyes to their materials, and approach it as their audience would
rather than from the perspective of how the company itself views or values
the content--and certainly not how the company is organized internally. Most
clients tend to approach their information from their own inside perspective
because that's what they deal with every day. It's hard for them to see
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 4 sur 12
anything new."
Nathan points out that most companies are still approaching the Web with
the idea that they can post a lot of marketing materials and be done with it.
He says this approach results in "Phase 1 sites," and adds that "most
companies find out that while there is some value to this, they need to think
about other concerns, especially branding, identity, and navigation. So they
redo their sites (Phase 2 sites). They find out that while the site may look
better, be more appropriate to their company, and be easier to navigate, it
doesn't do much more for them and certainly wasn't the hotbed of activity
they once thought.
"So they go off in search of more," Nathan continues. "If they figure out that
branding is really about experience rather than identity, then they are often
led to the idea of interactivity being an enhancement for their products,
services, support, and so on (Phase 3 sites). If not, they usually get duped
into believing that cool new technologies are the answer and add lots of
VRML, JavaScript, and Shockwave online tchotchkes that cost a lot and do
even less for them."
Offering words of wisdom for new web developers, Nathan stresses that
"Web developers need to understand `interactivity' just as much as clients.
Interactivity isn't about non-linear navigation or moving animations on the
screen. It's about what people can do on the site, what they can participate in,
what the site does to address their needs, interests, goals, and abilities."
"Developers also need to learn to build what their clients need instead of
what they want to build because they think it's `cool' or fun for them. Too
many sites don't reflect what a company's business is all about. They're out
of character for the company. This is often a fault of the client too, but it's up
to us to inform our clients of the potential mistakes they may be making.
That's the value and responsibility we bring to the relationship."
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 5 sur 12
If you read much writing on design, you'll soon discover that there are many
approaches to communication design. Visual hierarchies are the basic building
blocks, but there are other tools available for our use. Metaphor is one of the
most powerful--and most misused--of these.
If you use a familiar device to help guide shoppers (such as FAO Schwarz's
shopping bag, a clever device for the storage of purchases), you're using
metaphor. If you use the image of a highway to explain the Internet (the
"information superhighway" of Al Gore's famous speech), you're using
metaphor.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 6 sur 12
In planning this new feature, Photodisc had to give some thought to how
designers would relate to it. How could it be explained to this audience in the
best possible way? They could have gone with a literal explanation, such as,
"We'll be using cookies to maintain state for seven days," or even, "We'll store
your user profile and relevant thumbnail images in a database and allow
multiple users to access it." Snooze.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 7 sur 12
How has this happened? Design is a broad and varied field, encompassing
aspects of art, business, and psychology. Because of its frequent association
with sales, design has had a longstanding affair with getting attention. But
lately, it seems this has led to an interest in pure shock value: bright colors,
chaotic layouts, hostile typography, convention turned on its head.
Much of this has been done in the name of innovation. That's a shame, since
it's a fallacy that innovation means breaking all the rules. Sometimes it means
understanding them better than anyone else--getting at the core of why rules
exist, and extracting nuggets of truth about communication that have never
been explored before.
On the Web, it can be especially troublesome to play with chaos in design. For
many users, the Web already represents chaos. Adding a veneer of confusion
is sometimes the last straw. If scripts and animation are battling for attention,
adding unreadable type and bad color contrast is probably not going to help.
What's fun and different in an MTV video or cutting-edge print magazine does
not automatically translate well to the Web. If you're designing a band site or a
grungy e-zine, you'll certainly have more flexibility than if you're designing a
medical information site, since purpose and audience will affect the approach.
But even MTV buffs deserve a structured layout. Even the nattiest hipster
deserves readable text in an e-zine. Without these basic design values, you're
creating art (which is about individual expression), not practicing design
(which is fundamentally about communication). It's a crucial difference--
especially to your users, and especially on the Web.
Things have gotten so out of hand that it's become a bit of a joke in the field
(one that would be funnier if there weren't still a raging controversy over it).
One site, jodi.org, uses a deliberately chaotic interface to satirize the current
trend. It's purposefully confusing and makes no claims to guidance or
instruction. Essentially, it's the Web's first real piece of performance art,
letting visitors experience what chaos in interface design feels like.
In navigation design, it's cruel and unusual punishment to offer chaos instead
of guidance, self-expression instead of shared communication. Interface
design, like many areas of design, is service-oriented--it's in service to the
message, the client, the users, and the medium. That makes the work of an
interface designer a serious challenge, since it is much harder to understand
others' needs than it is to know your own tastes. There may not always be
glory in it, but service is the hallmark of good design.
Visual explanations
Could better design have prevented the space shuttle Challenger's disastrous
explosion? Edward Tufte thinks so, and he's not even talking about the
shuttle's design.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 8 sur 12
together multiple charts to explain the danger, none of which convinced the
decision-makers to halt the launch. The shuttle was launched the next morning
in 29-degree cold. Less than two minutes after launch, it burst into flames.
What went wrong? The direct cause was that the O-rings were not designed to
withstand extreme cold. But Tufte shows a more tragic design flaw: the sadly
unpersuasive charts used to explain the O-ring problem.
Tufte argues that the charts failed to display the data causally, or in a way that
would clearly show cause and effect. It was clear to the engineers that low
temperature caused O-ring damage. They simply failed to show that it did.
Navigating the Web could hardly be called a matter of life and death (though
cases of fatal misinformation exist). But if misinterpreting information could
cause a group of intelligent people to proceed with a doomed launch, imagine
how it could confuse and mislead web users! We should be as concerned with
how we show connections within a site as Tufte is with showing relationships
within data. Visual displays, whether charts, books, or interfaces, have the
power to be expository--a power far beyond decoration.
Form is function
But form and function, as the architect Louis Sullivan meant when he
originally coined the phrase, go hand in hand. In Sullivan's view, "The
architect who combines in his being the powers of vision, of imagination, of
intellect, of sympathy with human need and the power to interpret them in a
language vernacular and true--is he who shall create poems in stone."
Good architects tend to understand what this is all about, and some of our
finest public buildings and corporate workspaces are the tangible results.
Information architects understand that this same concept can be applied to
information spaces. Design is not a battle between form and function, emotion
and reason, decoration and purpose. In your users' eyes, these elements are
intertwined, for better or for worse.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 9 sur 12
interactive spaces, these issues are thrown into high relief. It's essential that
we try to understand how people are likely to react to problems, why they
sometimes fear the screen, and how they learn new things. Without
understanding some of these areas, predicting the active process of navigation
becomes little more than guesswork. Without understanding some of these
areas, we'll never get past our reputation as an unfriendly and butt-ugly
medium.
If you accept that a web site is a space, then it's natural to assume that there
are objects in it--things we can pick up, manipulate, press, or otherwise
interact with. There may be control panels with buttons to press, or drop-down
menus to scroll through, or objects that change when you roll your mouse over
them. All of this may end up sounding a lot like building a transistor radio--
and in a way, it is.
There are lessons from industrial design that we can borrow for use in web
design, many of which are based on solid cognitive science. They help explain
how we think, react, interpret, and learn. They explain why we sometimes
push handles that are meant to be pulled, and why a large segment of the
population doesn't have a clue how to program a VCR.
The psychologist we have to thank for most of this research and writing on
user-centered industrial design is Donald Norman. Norman's most famous
book, The Design of Everyday Things, sheds some light on how design can be
brought more into line with human needs. It's an appealing thought--a world in
which we don't struggle to understand objects; instead, they are designed to
"understand" us.
In studying how people use tools and complete processes, one of the things
Norman looked at was actions. He highlighted seven stages of completing a
task:
In order to support each stage of this process, Norman suggested using these
seven stages of action to ask design questions, described in Table 5-1.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 10 sur 12
These specific design questions can be boiled down into broader principles,
based on cognitive processes. These are Norman's "principles of good design":
? Visibility. By looking, the user can tell the state of the device and the
alternatives for action.
? A good conceptual model. The designer provides a good conceptual
model for the user, with consistency in the presentation of operations
and results and coherent, consistent system image.
? Good mappings. It is possible to determine the relationships between
actions and results, between the controls and their effects, and between
the system state and what is visible.
? Feedback. The user receives full and continuous feedback about the
results of actions.
We talk a lot about "interactive media," but what does this really mean?
Interactivity has become a bit of a buzzword. Is it synonymous with
"responsive technical feature" or is it synonymous with "good conversation?"
I'd argue that it's more of the second, though it can also be the first, when
things have been done well.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 11 sur 12
It turns out that, if Reeves and Nass are right, we had all better brush up on
our Emily Post. Netiquette doesn't begin to cover what we'll need to know.
Reeves and Nass found that "individuals' interactions with computers,
television, and new media are fundamentally social and natural, just like
interactions in real life." One of the more interesting things they found is that,
odd as it sounds, we are actually polite to computers (or in computing
situations).
From these findings, Reeves and Nass extrapolated that, on the principle that
reciprocity often drives interactions, we expect computers to return the favor.
We expect that they will be as polite to us as we are to them. As the authors
explain it:
When media violate social norms, such as by being impolite, the media are not
viewed as technologically deficient, a problem to be resolved with a better
central processing unit. Rather, when a technology (or a person) violates a
politeness rule, the violation is viewed as social incompetence and it is
offensive. This is why we think that the most important implication of the
politeness studies is that media themselves need to be polite. It's not just a
matter of being nice; it's a matter of social survival.
Recap
Our understanding of the interface and how to design for it is constantly
evolving, but there are some things we have already discovered. The
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001
Web Navigation: Designing the User Experience -- Sample chapter Page 12 sur 12
Reeves, Byron, and Clifford Nass. The Media Equation: How People Treat
Computers, Television, and New Media Like Real People and Places.
Cambridge University Press, 1996.
Spiekermann, Erik, and E.M. Ginger. Stop Stealing Sheep & Find Out How
Type Works. Hayden Books, 1993.
http://www.oreilly.com/catalog/navigation/chapter/ch05.html 24/09/2001