You are here: Home ~ Web UIs ~ Preface to Web Application Design Handbook
We wrote the Web Application Design Handbook: Best Practices for Web-Based Software for two reasons: 1) to answer twenty years’ worth of
real design questions, and 2) to predict the future.
There are three types of people in the software industry: Consultants, contractors,
and employees. Consultants solve big problems—you go in, listen to everyone,
recommend some solutions, get big paychecks, and leave. Consulting is fun.
However, since you don’t stick around, you rarely get to see how your ideas play
out, or even whether anyone took your advice (see Weinberg 1986 for more on
Contractors, since they already know how to use or design a particular
program or database, are hired when a job has to be done quickly. Contracting
is also fun—you don’t have to get involved in office politics and you leave
before things get boring. However, since you aren’t an employee, you stay on
the surface; you’re not invited to help with the most difficult problems.
Being an employee is not so much fun. However, it’s the only position in
which you can get deeply into a problem. It’s also the only role in which, if
you’re lucky, your team can find a novel answer to an industry-wide problem.
Every topic in this book comes from real-life experience with data-intensive
applications such as bond pricing analysis, telecommunications, and back-office
mortgage application processing. Each section answers an actual design question.
Think of Web Application Design as a “fake book” for interfaces. Many
of the topics it covers—for example, diagram symbols or geographic-map projections—are not web-specific.However, to design a web-based application
quickly, it helps to know what standards already exist and what solutions
people have already found.
Trust What You Already Know
This isn’t the first time the entire software industry has thrown out old methods
and started over on a completely different platform. The key to a successful
move from one type of interface to another is not to recreate old methods and
old widgets on the new platform. Rather, it is intelligent generalization. If you
don’t confuse the button with the task, then you can identify a new type of
button or a new method for the same task.
In the same way that this handbook builds on earlier standards and
design ideas, we hope that it helps you do the same. Cannibalize your own best
ideas—good thinking always transfers.
Predicting the Future
The Web Application Design Handbook doesn’t talk about how to program
a web application using HTML, Java, ActiveX, or any other programming
language, although there are a few program fragments. Instead, it shows how
developers might use the web to add magic to applications.
For example, a troubleshooting diagram can be more than a picture. Using
the diagram, technicians can link to a failing server, check it, and even reboot
it by just clicking on its icon.
Also, web applications can pull in many more types of information than
most desktop applications can. For example, by pressing a button, a user can get
help for a particular question (“Is this piece of XYZ equipment prone to water
damage?”) from a web-based content-management system (“XYZ equipment
is watertight. Look for battery failure”).
Finally, web applications can be more colorful and more interesting to
look at than most desktop applications.
However, like desktop and client/server applications, web applications
rely on data. Under the surface, web applications are not all that different from
desktop applications or even the missile trajectory programs that ran on the
earliest computers like the ENIAC. In fact, the first half of Web Application
Design addresses data input, output, and retrieval.
What is different about web applications is that interface designers might
finally make a visualization breakthrough. This is why the second half of the
book concentrates on graphs, diagrams, and geographic maps. (The best way
to predict the future is to help create it.)
But why are so visualizations important? The answers to that question
require a bit of history first.
A Short History of Visualization
From the 1440s, when Gutenberg invented typesetting, to the 1980s, pictures
in books and journals were relegated to special sections simply because it was
too difficult to include them in running text. Until the late 1990s, it was so
expensive to print in color that color pictures, if they were used at all, were
printed on separate pages in the center of the book. However, as you can see
from Web Application Design and other Morgan Kaufmann Publishing books,
these constraints have fallen away.
The history of computer software may be following the same trajectory—from no monitors at all in the 1940s and 1950s, to the character-based, graphics-free
systems of the 1970s and early 1980s, to the graphical user interfaces and
web-browser interfaces of our own era.
Following this trajectory, we predict that web applications will become
much more graphical than desktop applications. The reasons:
- There is an enormous cadre of visual designers who know how to design
for browsers and need work.
- Web-literate users expect more from a web application than they do
from a desktop application.
- Memory and disk space continue to get bigger and cheaper, and processors
are becoming faster. Physical constraints are becoming irrelevant.
- Accessibility advocates have pressured software companies to make
interfaces more usable for blind, partially sighted, deaf, and physically
disabled people. By doing so, they have compelled the industry to create
multisensory tools that any software company can add to or at least
accommodate in their products.
Most important, however, is that multisensory interfaces match our
- People understand information better when it is in context, and the
richer the context, the easier it is to understand, as described below.
- People are especially capable when the new information can be
organized into, or recognized as part of, patterns.
- Multi-sensory systems (visual, textual, aural, kinesthetic) support fast,
accurate reflexive action when needed.
Visuals Provide More Context
People do not remember isolated pieces of information very well. When information
is divorced from context, the often-cited “7 plus or minus 2” rule is
probably valid. In other words, if you ask people to repeat sets of unrelated
digits or short words back to you, they can do so fairly well if there are no more
than five to nine digits or words in the set. Beyond nine, accuracy falls off
quickly (LeCompte 2000).
However, as the experimental psychologist George Miller says, “Everyday
experience teaches us that we can identify accurately any one of several
hundred faces, any one of several thousand words, any one of several thousand
objects, etc.”A possible explanation for our failure with more than seven digits
or words, he says, is that “[o]bjects, faces, words, and the like differ from one
another in many ways, whereas the simple stimuli we have considered thus far
differ from one another in only one respect” (In “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing
Information,” Miller debunks many of the uses to which his original work was put; see http://www.musanim.com/miller1956/). By enriching
the context, in other words, people can remember much more.
Recent research has changed our ideas of how the brain works and
provides hints as to why richer is better. Instead of a passive vessel into which
information is poured (the “Nurnberg funnel” popularized by John Carroll,
1990), the brain is now seen as much more malleable, flexible, and (to be blunt)
weird than it was 10 years ago.
The idea that we have only five areas for the five senses seems to be a
mistake (Motluk 2001, p. 24). Rather,
Tasks we’ve long assumed were handled by only one sense turn out to be the
domain of two or three. And when we are deprived of a sense, the brain
responds—in a matter of days or even hours—by reallocating unused capacity
and turning the remaining senses to more imaginative use….
It might be a big shift in thinking, but it began with a simple finding—the
discovery of “multisensory” neurons. These are brain cells that react to many
senses all at once instead of just to one. No one knows how many of these
neurons there are—maybe they are just a rare, elite corps. But perhaps there are
no true vision, hearing or touch areas dedicated to a single sense, after all. Perhaps
all the neurons in our brains are multisensory—and we mistakenly label them
“visual” or “auditory” simply because they prefer one sense over the others.
Multiple inputs yield better understanding.
George Bernard Shaw said
that we remember 30 percent of what we hear; 60 percent of what we see; and
90 percent of what we do—actions still speak louder than words. What Shaw described was formalized into “multiple intelligences” by Howard Gardner (1993):
linguistic and musical (Shaw’s hearing), logical-mathematical, spatial (Shaw’s
seeing), bodily-kinesthetic (Shaw’s doing), intrapersonal, interpersonal, and
naturalist. Teachers aware of multiple intelligences build their lessons
from visual, aural, read-write, and kinesthetic elements. By doing so, they
address all of the students’ intelligences at some point during the day (if not all
at the same time with the same lesson), building on the students’ strengths and
making them more capable in their areas of weakness.
What is true for children is equally true for adults—we may become more
capable overall but we don’t necessarily lose our preferences for one learning
style over another. By providing multiple modes for analyzing data—text,
numbers, graphs, visualizations, simulations, and so on—designers can better
accommodate their variously talented audiences.
Visuals Encourage Pattern Recognition
Cognitive psychologists (and trainers) have discovered that you can get around
working memory’s limitations if you show how new information fits into an
existing structure or pattern.
The classic experiment on pattern recognition involved chess players.
The experimenters showed a mid-play chessboard to two groups: novice and
master-level chess players. The chess players were given a short time to study
the set-up and were then asked to reconstruct the board from memory.
The master players reconstructed the board much more accurately and
quickly than the novice players. Was this because the master players had
superior memories? No, as it turned out. When the experimenters showed
both groups another chessboard with the pieces lain out randomly, neither
group did well and, in fact, the master players did worse than the novice players.
The difference in the non-random test was that the novice players had to
remember 24 discrete pieces of information (the 24 playing pieces) whereas the
master players only had to remember about nine familiar strategies. By recognizing
patterns of play, they were able to reconstruct the board more quickly
and accurately than the novices (Clark 1998, pp. 20-22; Chase and Simon 1973,
"Perception in chess," Cognitive Psychology, 4:55-81).
Experienced users like visualizations because graphics often show patterns
more readily. For example, it is much easier to see an outlying data point on a
graph than it is on a table, or to understand the structure of a molecule from a
3D picture than from a description. The problem, of course, is turning novices
into experts. Note: For more on turning novices into experts, see the literature on performance support, especially Ruth Clark’s Building Expertise: Cognitive Methods for Training and Performance Improvements (1998).
Visuals Speed Up Decisions
Visual or multi-sensory tools bypass the conscious mind and allow people to
react instantaneously when necessary.
Gary Klein, a psychologist who studies how people make life-and-death
decisions, says that not just experience but intuition that helps professionals
make the right choices. Most of the time, he says, expert decision makers
cannot say how they make decisions. “Their minds move so rapidly when they
make a high-pressure decision, they can’t articulate how they did it,” says Klein.
“They can see what’s going on in front of them, but not behind them.”What
these experts are doing, Klein decided after 20 years of studying them at
fires, during medical emergencies, and in war zones, is pattern recognition or
“intuition” (Breen 2000, pp. 1-9).
Cognitive psychologists say that the brain has at least two distinct modes
of thinking: one verbal, logical, and conscious, and the other nonverbal and
unconscious. Intuition is rooted in mechanisms that let the brain soak up and
ruminate on information, looking for subtle patterns and connections without
words and without conscious awareness.
Another type of unconscious awareness may be at work as well.Mel Goodale
at the University of Western Ontario had found that, in certain situations, your
unconscious brain and body (what he calls the “Zombie”) know more about the
world than “Yourself,” the conscious you. When he showed people an optical
illusion of poker chips of three different sizes (see figure), then asked them to
judge the relative sizes of the two inner chips, they always got the sizes wrong.
However, when he asked them to reach out to pick up the chips, they always
opened their hands to the right size—the same size for both.
Center disks are the same size, but don’t look it.
“Vision for action is very different from vision for perception,” says
Goodale. The conscious perceptual system—the one Yourself uses—describes
objects so the mind can remember, compare, and think about them. By contrast,
the visuomotor system—the one the Zombie uses—needs to know not what
the object is, but exactly how big it is and where it is located relative to the
body. “It’s there to guide you without your having to take time out to think
about things. If you’re a monkey jumping from branch to branch in a tree, it’s
pretty important to get your arm in the right place at the right time, or you’re
going to die,” says David Milner, a researcher at the University of St. Andrews
in Fife, Scotland (Holmes 1998, p. 32).
This visuomotor intelligence is what simulations support. Klein found that
his experts used mental simulations to check their decisions, running through
the implications of a particular decision in their minds until they were confident
either that it would work or fail. When a simulation failed, they ran through
more simulations until they felt they had a workable solution.
Companies in high-risk businesses—for example, warplane designers and
nuclear power plant construction firms—use simulators to train people who
will be using the actual machinery. These simulators are probably not just
training users kinesthetically—in other words, giving them body memory—but
are also training their Zombies to make intelligent, intuitive, and preconscious
decisions faster than their conscious selves could if they had to think about it.
In short, visualizations, simulations, and other multi-sensory programs
should not be seen as frivolous, marketer-driven add-ons to the “more serious”
text-based software analysis tools. Rather, they tap into some very basic and
important types of awareness and intelligence, and if well designed, can
support decision-making at a profound level.
Reviewers do an enormous amount of work reading and sending off
comments, for no credit except a line or two in the acknowledgments and with
no guarantee that the authors will pay attention to their corrections. (We just
want to say that we did pay attention and if there are any mistakes left in the
book, they are our responsibility alone.)
Many thanks to reviewers Alice Preston, Chauncey Wilson, Jeff Johnson,
Nicholas Zvegintzov, Giovanni Bacigalupi, and Ed Kiraly. We’d also like to
thank Whitney Quesenbery for ideas that ended up in Chapter 1, and we need
to thank the many readers of the drafts on our web site who wrote or called us
with thought-provoking questions and comments. They often sent us back to
our reference books for more information.
We are most grateful to our editor, Diane Cerra, who encouraged us
throughout the three years of research and writing, and Mona Buehler, editorial
coordinator, who nudged us and prodded us ever so gently to keep us on track
over that long, long haul. Thanks, also, to the production staff at Morgan
Kaufmann, especially Simon Crump, who helped get this book into print.