You are here: Home ~ Web UIs ~ Preface to Web Application Design Handbook

Preface

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.

Answering Questions

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 this situation).

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 strengths:

• 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.

Acknowledgments

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.