Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

by Krug Steve

You’ll find a lot of different definitions of usability, often breaking it down into attributes like Useful: Does it do something people need done? Learnable: Can people figure out how to use it? Memorable: Do they have to relearn it each time they use it? Effective: Does it get the job done? Efficient: Does it do it with a reasonable amount of time and effort? Desirable: Do people want it? and recently even Delightful: Is using it enjoyable, or even fun?

My main point is that the tradeoffs should usually be skewed further in the direction of “Obvious” than we think. 1 There’s almost always a plausible rationale—and a good, if misguided, intention—behind every usability flaw. Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. As a user, I should never have to devote a millisecond of thought to whether things are clickable—or not.

The point is that every question mark adds to our cognitive workload, distracting our attention from the task at hand. The distractions may be slight but they add up, especially if it’s something we do all the time like deciding what to click on.

Here’s the rule: If you can’t make something self-evident, you at least need to make it self-explanatory.

Why are things always in the last place you look for them? Because you stop looking when you find them!

FACT OF LIFE #1: We don’t read pages. We scan them.

FACT OF LIFE #2: We don’t make optimal choices. We satisfice.

FACT OF LIFE #3: We don’t figure out how things work. We muddle 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.

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.

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.

Conventions are your friends

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.

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

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.

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.

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.

You end up with what engineers call a low signal-to-noise ratio: Lots of noise, not much information, and the noise obscures the useful stuff.

Here are the most important things you can do to make your pages scan-friendly: Use plenty of headings.

Even more important: Don’t let your headings float. Make sure they’re closer to the section they introduce than to the section they follow.

Keep paragraphs short.

Use bulleted lists. Think of it this way: Almost anything that can be a bulleted list probably should be. Just look at your paragraphs for any series of items separated by commas or semicolons and you’ll find likely candidates.

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.

On the face of it, “number of clicks to get anywhere” seems like a useful metric. But over time I’ve come to think that what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is—the amount of thought required and the amount of uncertainty about whether I’m making the right choice.

In general, I think it’s safe to say that users don’t mind a lot of clicks as long as each click is painless and they have continued confidence that they’re on the right track—following what’s often called the “scent of information.”1 Links

“three mindless, unambiguous clicks equal one click that requires thought.”2

THE ART OF NOT WRITING FOR THE WEB Get rid of half the words on each page, then get rid of half of what’s left.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to the bare minimum.

Web designers use the term persistent 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.”

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.

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—sometimes called the primary navigation—are the links to the main sections of the site: the top level of the site’s hierarchy.

Utilities are the links to important elements of the site that aren’t really part of the content hierarchy.

Fancy wording. They’ll be looking for the word “Search,” so use the word Search, not Find, Quick Find, Quick Search, or Keyword Search. (If you use “Search” as the label for the box, use the word “Go” as the button name.) Instructions. If you stick to the formula, anyone who has used the Web for more than a few days will know what to do. Adding “Type a keyword” is like saying, “Leave a message at the beep” on your voice mail message: There was a time when it was necessary, but now it just makes you sound clueless. Options. If there is any possibility of confusion about the scope of the search (what’s being searched: the site, part of the site, or the whole Web), by all means spell it out.

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.

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.

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

The name needs to match what I clicked.

At the top of the webpage content, breadcrumbs show the links to each level from the Home page to the current location connected with rightward arrows between them. The current location is highlighted in bold. They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.5

Try the trunk test Now that you have a feeling for all of the moving parts, you’re ready to try my acid test for good Web navigation. Here’s how it goes: Imagine that you’ve been blindfolded and locked in the trunk of a car, then driven around for a while and dumped on a page somewhere deep in the bowels of a Web site. If the page is well designed, when your vision clears you should be able to answer these questions without hesitation: What site is this? (Site ID) What page am I on? (Page name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? (“You are here” indicators) How can I search?

Here’s how you perform the trunk test: Step 1: Choose a page anywhere in the site at random, and print it. Step 2: Hold it at arm’s length or squint so you can’t really study it closely. Step 3: As quickly as possible, try to find and circle each of these items: Site ID Page name Sections (Primary navigation) Local navigation “You are here” indicator(s) Search

Taglines are a very efficient way to get your message across, because they’re the one place on the page where users most expect to find a concise statement of the site’s purpose. Some attributes to look for when choosing a tagline: Good taglines are clear and informative and explain exactly what your site or your organization does.

Good taglines are just long enough, but not too long. Six to eight words seem to be long enough to convey a full thought, but short enough to absorb easily.

Good taglines convey differentiation and a clear benefit. Jakob Nielsen has suggested that a really good tagline is one that no one else in the world could use except you, and I think it’s an excellent way to look at it.

Bad taglines sound generic.

Good taglines are personable, lively, and sometimes clever. Clever is good, but only if the cleverness helps convey—not obscure—the benefit.

I usually call these endless discussions “religious debates,” because they have a lot in common with most discussions of religion and politics: They consist largely of people expressing strongly held personal beliefs about things that can’t be proven—supposedly in the interest of agreeing on the best way to do something important (whether it’s attaining eternal peace, governing effectively, or just designing Web pages). And, like most religious debates, they rarely result in anyone involved changing his or her point of view.

ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC

And the worst thing about the myth of the Average User is that it reinforces the idea that good Web design is largely a matter of figuring out what people like. It’s an attractive notion: Either pull-downs are good (because most people like them), or they’re bad (because most people don’t). Stories should be on a single long page or they should be broken up into many shorter pages. Home page carousels, mega menus, rollovers, etc. are either good or bad, black or white. The problem is there are no simple “right” answers for most Web design questions (at least not for the important ones). What works is good, integrated design that fills a need—carefully thought out, well executed, and tested.