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

by Krug Steve

Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.

One of the very few well-documented facts about Web use is that people tend to spend very little time reading most Web pages. Instead, we scan (or skim) them, looking for words or phrases that catch our eye.

In reality, though, most of the time we don’t choose the best option—we choose the first reasonable option, a strategy known as satisficing.1 As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it.

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.

My recommendation: Innovate when you know you have a better idea, but take advantage of conventions when you don’t.

In general, you’ll be fine if you just stick to one color for all text links or make sure that their shape and location identify them as clickable. Just don’t make silly mistakes like using the same color for links and nonclickable headings.

Use plenty of headings. Well-written, thoughtful headings interspersed in the text act as an informal outline or table of contents for a page.

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.

I find I have no trouble getting rid of half the words on most Web pages without losing anything of value. But the idea of removing half of what’s left is just my way of trying to encourage people to be ruthless about it.

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.

When you’re in a site, the Home page is like the North Star. Being able to click Home gives you a fresh start.

By making the hierarchy visible, navigation tells us what the site contains. Navigation reveals content! And revealing the site may be even more important than guiding or situating us.

If the navigation is doing its job, it tells you implicitly where to begin and what your options are. Done correctly, it should be all the instructions you need.

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.

In so many sites, as soon as you get past the second level, the navigation breaks down and becomes ad hoc. The problem is so common that it’s actually hard to find good examples of third-level navigation.

Every page needs a name. Just as every corner should have a street sign, every page should have a name.

Done right, Breadcrumbs are self-explanatory, they don’t take up much room, and they provide a convenient, consistent way to do two of the things you need to do most often: back up a level or go Home.

When I do usability tests, I’m surprised at how often people can overlook horizontal navigation bars at the top of a Web page. But tabs are so visually distinctive that they’re hard to overlook. And because they’re hard to mistake for anything but navigation, they create the kind of obvious-at-a-glance division you want between navigation and content.

A tagline is a pithy phrase that characterizes the whole enterprise, summing up what it is and what makes it great.

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.

Don’t confuse a tagline with a motto, like “We bring good things to life,” “You’re in good hands,” or “To protect and to serve.” A motto expresses a guiding principle, a goal, or an ideal, but a tagline conveys a value proposition.

The kinds of things you learn from focus groups—like whether you’re building the right product—are things you should know before you begin designing or building anything, so focus groups are best used in the planning stages of a project. Usability tests, on the other hand, should be used through the entire process.

Testing one user early in the project is better than testing 50 near the end.

I think every Web development team should spend one morning a month doing usability testing.

I think the ideal number of participants for each round of do-it-yourself testing is three.

Do-it-yourself tests are a qualitative method whose purpose is to improve what you’re building by identifying and fixing usability problems. The process isn’t rigorous at all: You give them tasks to do, you observe, and you learn. The result is actionable insights, not proof.

Everybody appreciates clarity. (True clarity, that is, and not just something that’s been “dumbed down.”) If “almost anybody” can use it, your experts will be able to use it, too.

Even before you begin designing your site, for instance, it’s a good idea to do a test of competitive sites. They may be actual competitors, or they may just be sites that have the same style, organization, or features that you plan on using.

If you’re redesigning an existing site, you’ll also want to test it before you start, so you’ll know what’s not working (and needs to be changed) and what is working (so you don’t break it).

FOCUS RUTHLESSLY ON FIXING THE MOST SERIOUS PROBLEMS FIRST

When it’s obvious in testing that users aren’t getting something, the team’s first reaction is usually to add something, like an explanation or some instructions. But very often the right solution is to take something (or some things) away that are obscuring the meaning, rather than adding yet another distraction.

One approach was Mobile First. Instead of designing a full-featured (and perhaps bloated) version of your Web site first and then paring it down to create the mobile version, you design the mobile version first based on the features and content that are most important to your users. Then you add on more features and content to create the desktop/full version.

Affordances are visual clues in an object’s design that suggest how we can use it.

For instance, the three-dimensional style of some buttons makes it clear they’re meant to be clicked. The same as with the scent of information for links, the clearer the visual cues, the more unambiguous the signal.

Once you’ve figured out how to use an app, will you remember how to use it the next time you try or will you have to start over again from scratch?

The whole point of hiding support phone numbers is to try to keep users from calling, because each call costs money. The usual effect is to diminish goodwill and ensure that they’ll be even more annoyed when they do find the number and call.

I should never have to think about formatting data: whether or not to put dashes in my Social Security number, spaces in my credit card number, or parentheses in my phone number. Many sites perversely insist on no spaces in credit card numbers, when the spaces actually make it much easier to type the number correctly. Don’t make me jump through hoops just because you don’t want to write a little bit of code.

Most users are very skeptical of requests for personal information and find it annoying if a site asks for more than what’s needed for the task at hand.

We’re always on the lookout for faux sincerity, and disingenuous attempts to convince me that you care about me can be particularly annoying. Think about what goes through your head every time you hear “Your call is important to us.”

Know the main things that people want to do on your site and make them obvious and easy.

Be upfront about things like shipping costs, hotel daily parking fees, service outages—anything you’d rather not be upfront about. You may lose points if your shipping rates are higher than I’d like, but you’ll often gain enough points for candor and for making it easy for me to compensate for the price difference.

Save me steps wherever you can. For instance, instead of giving me the shipping company’s tracking number for my purchase, put a link in my email receipt that opens their site and submits my tracking number when I click it.

The folks at WebAIM have written excellent practical articles covering the nuts-and-bolts details of almost every accessibility technique.

Use an accessible template. If you’re using WordPress, for example, make sure that the theme you choose has been designed to be accessible.

Now the term you hear most often is User Experience Design, or just User Experience (UXD or UX, for short), and there are probably a dozen specialties involved, like Interaction Design, Interface Design, Visual Design, and Content Management—and, of course, Usability and Information Architecture—all under the UX umbrella.