by Steve Krug
Klein’s team of observers went into their first study (of field commanders at fire scenes) with the generally accepted model of rational decision making: Faced with a problem, a person gathers information, identifies the possible solutions, and chooses the best one. They started with the hypothesis that because of the high stakes and extreme time pressure, fire captains would be able to compare only two options, an assumption they thought was conservative.
As it turned out, the fire commanders didn’t compare any options. They took the first reasonable plan that came to mind and did a quick mental test for possible problems. If they didn’t find any, they had their plan of action.
So why don’t Web users look for the best choice?
We’re usually in a hurry. And as Klein points out, “Optimizing is hard, and it takes a long time. Satisficing is more efficient.”
There’s not much of a penalty for guessing wrong. Unlike firefighting, the penalty for guessing wrong on a Web site is usually only a click or two of the Back button, making satisficing an effective strategy. (Back is the most-used button in Web browsers.)
Weighing options may not improve our chances. On poorly designed sites, putting effort into making the best choice doesn’t really help. You’re usually just as well off going with your first guess and using the Back button if it doesn’t work out.
Guessing is more fun. It’s less work than weighing options, and if you guess right, it’s faster. And it introduces an element of chance—the pleasant possibility of running into something surprising and good.
Of course, this is not to say that users never weigh options before they click. It depends on things like their frame of mind, how pressed they are for time, and how much confidence they have in the site.
FACT OF LIFE #3: We don’t figure out how things work. We muddle through.
One of the things that becomes obvious as soon as you do any usability testing—whether you’re testing Web sites, software, or household appliances—is the extent to which people use things all the time without understanding how they work, or with completely wrong-headed ideas about how they work.
Faced with any sort of technology, very few people take the time to read instructions. Instead, we forge ahead and muddle through, making up our own vaguely plausible stories about what we’re doing and why it works.
It often reminds me of the scene at the end of The Prince and the Pauper where the real prince discovers that the look-alike pauper has been using the Great Seal of England as a nutcracker in his absence. (It makes perfect sense—to him, the seal is just this great big, heavy chunk of metal.)
The Prince and the Pauper (Classics Illustrated)
And the fact is, we get things done that way. I’ve seen lots of people use software, Web sites, and consumer products effectively in ways that are nothing like what the designers intended.
Take the Web browser, for instance—a crucial part of Internet use. To people who build Web sites, it’s an application that you use to view Web pages. But if you ask users what a browser is, a surprisingly large percentage will say something like “It’s what I use to search...to find things” or “It’s the search engine.” Try it yourself: ask some family members what a Web browser is. You may be surprised.
Many people use the Web extensively without knowing that they’re using a browser. What they know is you type something in a box and stuff appears.2 But it doesn’t matter to them: They’re muddling through and using the thing successfully.
2 Usually a box with the word “Google” next to it. A lot of people think Google is the Internet.
And muddling through is not limited to beginners. Even technically savvy users often have surprising gaps in their understanding of how things work. (I wouldn’t be surprised if even Mark Zuckerberg and Sergey Brin have some bits of technology in their lives that they use by muddling through.)
Why does this happen?
It’s not important to us. For most of us, it doesn’t matter to us whether we understand how things work, as long as we can use them. It’s not for lack of intelligence, but for lack of caring. It’s just not important to us.3
3 Web developers often have a particularly hard time understanding—or even believing—that people might feel this way, since they themselves are usually keenly interested in how things work.
If we find something that works, we stick to it. Once we find something that works—no matter how badly—we tend not to look for a better way. We’ll use a better way if we stumble across one, but we seldom look for one.
It’s always interesting to watch designers and developers observe their first usability test. The first time they see a user click on something completely inappropriate, they’re surprised. (For instance, when the user ignores a nice big fat “Software” button in the navigation bar, saying something like, “Well, I’m looking for software, so I guess I’d click here on ‘Cheap Stuff’ because cheap is always good.”) The user may even find what he’s looking for eventually, but by then the people watching don’t know whether to be happy or not.
The second time it happens, they’re yelling “Just click on ‘Software’!” The third time, you can see them thinking: “Why are we even bothering?”
And it’s a good question: If people manage to muddle through so much, does it really matter whether they “get it”? The answer is that it matters a great deal because while muddling through may work sometimes, it tends to be inefficient and error-prone.
On the other hand, if users “get it”:
There’s a much better chance that they’ll find what they’re looking for, which is good for them and for you.
There’s a better chance that they’ll understand the full range of what your site has to offer—not just the parts that they stumble across.
You have a better chance of steering them to the parts of your site that you want them to see.
They’ll feel smarter and more in control when they’re using your site, which will bring them back. You can get away with a site that people muddle through only until someone builds one down the street that makes them feel smart.
If life gives you lemons...
By now you may be thinking (given this less than rosy picture of your audience and how they use the Web), “Why don’t I just get a job at the local 7-Eleven? At least there my efforts might be appreciated.”
So, what’s a girl to do?
I think the answer is simple: If your audience is going to act like you’re designing billboards, then design great billboards.
Chapter 3. Billboard Design 101
DESIGNING FOR SCANNING, NOT READING
If you / Don’t know / Whose signs / These are You can’t have / Driven very far / Burma-Shave!
—SEQUENCE OF ROADSIDE BILLBOARDS PROMOTING SHAVING CREAM, CIRCA 1935
Faced with the fact that your users are whizzing by, there are some important things you can do to make sure they see and understand as much of what they need to know—and of what you want them to know—as possible:
Take advantage of conventions
Create effective visual hierarchies
Break pages up into clearly defined areas
Make it obvious what’s clickable
Eliminate distractions
Format content to support scanning
Conventions are your friends
One of the best ways to make almost anything easier to grasp in a hurry is to follow the existing conventions—the widely used or standardized design patterns. For example:
Stop signs. Given how crucial it is that drivers see and recognize them at a glance, at a distance, in all kinds of weather and lighting conditions, it’s a really good thing that all stop signs look the same. (Some of the specifics may vary from country to country, but overall they’re remarkably consistent around the world.)
The convention includes a distinctive shape, the word for “Stop,” a highly visible color that contrasts with most natural surroundings, and standardized size, height, and location.
In the past twenty years, many conventions for Web pages have evolved. As users, we’ve come to have a lot of expectations about
Where things will be located on a page. For example, users expect the logo identifying the site to be in the top-left corner (at least in countries where reading is left-to-right) and the primary navigation to be across the top or down the left side.
How things work. For example, almost all sites that sell products use the metaphor of a shopping cart and a very similar series of forms for specifying things like your method of payment, your shipping address, and so on.
How things look. Many elements have a standardized appearance, like the icon that tells you it’s a link to a video, the search icon, and the social networking sharing options.
Conventions have also evolved for different kinds of sites—commerce, colleges, blogs, restaurants, movies, and many more—since all the sites in each category have to solve the same set of problems.
SomeSlightlyIrregular.com
cityislandmovie.com
These conventions didn’t just come out of thin air: They all started life as somebody’s bright idea. If an idea works well enough, other sites imitate it and eventually enough people have seen it in enough places that it needs no explanation.
When applied well, Web conventions make life easier for users because they don’t have to constantly figure out what things are and how they’re supposed to work as they go from site to site.
Want proof that conventions help? See how much you know about this page—even if you can’t understand a word of it—just because it follows some conventions.
One problem with conventions, though: Designers are often reluctant to take advantage of them.
Faced with the prospect of following a convention, there’s a great temptation for designers to try reinventing the wheel instead, largely because they feel (not incorrectly) that they’ve been hired to do something new and different, not the same old thing. Not to mention the fact that praise from peers, awards, and high-profile job offers are rarely based on criteria like “best use of conventions.”
Occasionally, time spent reinventing the wheel results in a revolutionary new rolling device. But usually it just amounts to time spent reinventing the wheel.
If you’re going to innovate, you have to understand the value of what you’re replacing (or as Dylan put it, “To live outside the law, you must be honest”), and it’s easy to underestimate just how much value conventions provide. The classic example is custom scrollbars. Whenever a designer decides to create scrollbars from scratch—usually to make them prettier—the results almost always make it obvious that the designer never thought about how many hundreds or thousands of hours of fine tuning went into the evolution of the standard operating system scrollbars.
If you’re not going to use an existing Web convention, you need to be sure that what you’re replacing it with either (a) is so clear and self-explanatory that there’s no learning curve—so it’s as good as the convention, or (b) adds so much value that it’s worth a small learning curve.
My recommendation: Innovate when you know you have a better idea, but take advantage of conventions when you don’t.
Don’t get me wrong: I’m not in any way trying to discourage creativity. I love innovative and original Web design.
One of my favorite examples is Harlem.org. The whole site is built around Art Kane’s famous photo of 57 jazz musicians, taken on the steps of a brownstone in Harlem in August 1957. Instead of text links or menus, you use the photo to navigate the site.
Not only is it innovative and fun, but it’s easy to understand and use. And the creators were smart enough to understand that the fun might wear off after a while so they also included a more conventional category-based navigation.
You can also browse the musicians by name, instrument, or jazz style.
The rule of thumb is that you can—and should—be as creative and innovative as you want, and add as much aesthetic appeal as you can, as long as you make sure it’s still usable.
And finally, a word about consistency.
You often hear consistency cited as an absolute good. People win a lot of design arguments just by saying “We can’t do that. It wouldn’t be consistent.”
Consistency is always a good thing to strive for within your site or app. If your navigation is always in the same place, for instance, I don’t have to think about it or waste time looking for it. But there will be cases where things will be clearer if you make them slightly inconsistent.
Here’s the rule to keep in mind:
CLARITY TRUMPS CONSISTENCY
If you can make something significantly clearer by making it slightly inconsistent, choose in favor of clarity.
Create effective visual hierarchies
Another important way to make pages easy to grasp in a hurry is to make sure that the appearance of the things on the page—all of the visual cues—accurately portray the relationships between the things on the page: which things are most important, which things are similar, and which things are part of other things. In other words, each page should have a clear visual hierarchy.
Pages with a clear visual hierarchy have three traits:
The more important something is, the more prominent it is. The most important elements are either larger, bolder, in a distinctive color, set off by more white space, or nearer the top of the page—or some combination of the above.
Things that are related logically are related visually. For instance, you can show that things are similar by grouping them together under a heading, displaying them in the same visual style, or putting them all in a clearly defined area.
Things are “nested” visually to show what’s part of what. For instance, a site section name (“Computer Books”) would appear above the titles of the individual books, reflecting the fact that the books are part of the section. And each book title in turn would span all the elements that make up the description of that book.
There’s nothing new about visual hierarchies. Every newspaper page, for instance, uses prominence, grouping, and nesting to give us useful information about the contents of the page before we read a word. This picture goes with this story because they’re both spanned by this headline. This story is the most important because it has the biggest headline and a prominent position on the page.
We all parse visual hierarchies every day, but it happens so quickly that the only time we’re even vaguely aware that we’re doing it is when we can’t do it—when the visual cues (or absence of them) force us to think.
A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.
But when a page doesn’t have a clear visual hierarchy—if everything looks equally important, for instance—we’re reduced to the much slower process of scanning the page for revealing words and phrases and then trying to form our own sense of what’s important and how things are organized. It’s a lot more work.
Parsing a page with a visual hierarchy that’s even slightly flawed—where a heading spans things that aren’t part of it, for instance—is like reading a carelessly constructed sentence (“Bill put the cat on the table for a minute because it was a little wobbly”).
This flawed visual hierarchy suggests that all the major sections of the site are part of the Computer Books subsection.
Putting the heading where it belongs makes the relationship clearer.
Even though we can usually figure out what the sentence is supposed to mean, it still throws us momentarily and forces us to think when we shouldn’t have to.
Break up pages into clearly defined areas
Ideally, on any well-designed Web page users can play a variation of the old TV game show $25,000 Pyramid.1 Glancing around, they
should be able to point at the different areas of the page and say, “Things I can do on this site!” “Links to today’s top stories!” “Products this company sells!” “Things they’re eager to sell me!” “Navigation to get to the rest of the site!”
1 Contestants had to get their partners to guess a category like “Things a plumber uses” by giving them examples (“a wrench, a pipe cutter, pants that won’t stay up...”).
Dividing the page into clearly defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore. Eye-tracking studies of Web page scanning suggest that users decide very quickly in their initial glances which parts of the page are likely to have useful information and then rarely look at the other parts—almost as though they weren’t there. (Banner blindness—the ability of users to completely ignore areas they think will contain ads—is just the extreme case.)
Make it obvious what’s clickable
Since a large part of what people are doing on the Web is looking for the next thing to click, it’s important to make it easy to tell what’s clickable.
As we scan a page, we’re looking for a variety of visual cues that identify things as clickable (or “tappable” on touch screens)—things like shape (buttons, tabs, etc.), location (in a menu bar, for instance), and formatting (color and underlining).2