by Steve Krug
2 People also rely on the fact that the cursor in a Web browser changes from an arrow to a hand when you point it at a link, but this requires deliberately moving the cursor around, a relatively slow process. Also, it doesn’t work on touch screens because they don’t have a cursor.
This process of looking for clues in the appearance of things that tell us how to use them isn’t limited to Web pages. As Don Norman explains so enjoyably in his recently updated usability classic The Design of Everyday Things, we’re constantly parsing our environment (like the handles on doors) for these clues (to decide whether to pull or push). Read it. You’ll never look at doors the same way again.
Easily identifying what’s clickable on a page has waxed and waned as a problem since the beginning of the Web.
It’s currently resurfacing as an issue in mobile design, though, as you’ll see in Chapter 10.
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.
Keep the noise down to a dull roar
One of the great enemies of easy-to-grasp pages is visual noise.
Users have varying tolerances for complexity and distractions; some people have no problem with noisy pages, but many find them downright annoying. Users have even been known to put Post-its on their screen to cover up animation that’s distracting them while they’re trying to read.
There are really three different kinds of noise:
Shouting. When everything on the page is clamoring for your attention, the effect can be overwhelming: Lots of invitations to buy! Lots of exclamation points, different typefaces, and bright colors! Automated slideshows, animation, pop-ups, and the never-ending array of new attention-grabbing ad formats!
The truth is, everything can’t be important. Shouting is usually the result of a failure to make tough decisions about which elements are really the most important and then create a visual hierarchy that guides users to them first.
Disorganization. Some pages look like a room that’s been ransacked, with things strewn everywhere. This is a sure sign that the designer doesn’t understand the importance of using grids to align the elements on a page.
Clutter. We’ve all seen pages—especially Home pages—that just have too much stuff. The net effect is the same as when your email inbox is flooded with things like newsletters from sites that have decided that your one contact with them has made you lifelong friends: It’s hard to find and focus on the messages you actually care about. 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.
When you’re editing your Web pages, it’s probably a good idea to start with the assumption that everything is visual noise (the “presumed guilty until proven innocent” approach) and get rid of anything that’s not making a real contribution. In the face of limited time and attention, everything that’s not part of the solution must go.
Format text to support scanning
Much of the time—perhaps most of the time—that users spend on your Web pages is spent scanning the text in search of something.
The way your text is formatted can do a lot to make it easier for them.
Which one would you rather scan?
Here are the most important things you can do to make your pages scan-friendly:
Use plenty of headings. Well-written, thoughtful headings interspersed in the text act as an informal outline or table of contents for a page. They tell you what each section is about or, if they’re less literal, they intrigue you. Either way they help you decide which parts to read, scan, or skip.
In general, you’ll want to use more headings than you’d think and put more time into writing them.
Also, be sure to format headings correctly. Two very important things about the styling of headings that people often overlook:
If you’re using more than one level of heading, make sure there’s an obvious, impossible-to-miss visual distinction between them. You can do this by making each higher level larger or by leaving more space above it.
Bad
Better
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. This makes a huge difference.
Bad
Better
Keep paragraphs short. Long paragraphs confront the reader with what Caroline Jarrett and Ginny Redish call a “wall of words.” They’re daunting, they make it harder for readers to keep their place, and they’re harder to scan than a series of shorter paragraphs.
You may have been taught that each paragraph has to have a topic sentence, detail sentences, and a conclusion, but reading online is different. Even single-sentence paragraphs are fine.
If you examine a long paragraph, you’ll almost always find that there’s a reasonable place to break it in two. Get in the habit of doing it.
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.
And for optimal readability, there should be a small amount of additional space between the items in the list.
Bad
Better
Highlight key terms. Much page scanning consists of looking for key words and phrases. Formatting the most important ones in bold where they first appear in the text makes them easier to find. (If they’re already text links, you obviously don’t have to.) Don’t highlight too many things, though, or the technique will lose its effectiveness.
If you really want to learn about making content scannable (or about anything related to writing for screens in general), run, do not walk, to an Internet-connected device and order Ginny Redish’s book Letting Go of the Words.
And while you’re at it, order a copy for anyone you know who writes, edits, or has anything to do with creating digital content. They’ll end up eternally indebted to you.
Chapter 4. Animal, Vegetable, or Mineral?
WHY USERS LIKE MINDLESS CHOICES
It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.
—KRUG’S SECOND LAW OF USABILITY
Web designers and usability professionals have spent a lot of time over the years debating how many times you can expect users to click (or tap) to get what they want without getting too frustrated. Some sites even have design rules stating that it should never take more than a specified number of clicks (usually three, four, or five) to get to any page in the site.
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 that clearly and unambiguously identify their target give off a strong scent that assures users that clicking them will bring them nearer to their “prey.” Ambiguous or poorly worded links do not.
1 This term comes from Peter Pirolli and Stuart Card’s “information foraging” research at Xerox PARC in which they drew parallels between people seeking information (“informavores”) and animals following the scent of their prey.
I think the rule of thumb might be something like “three mindless, unambiguous clicks equal one click that requires thought.”2
2 Of course, there are exceptions. For instance, if I’m going to have to drill down through the same p
ath in a site repeatedly, or if the pages are going to take a long time to load, then the value of fewer clicks increases.
The classic first question in the word game Twenty Questions—“Animal, vegetable, or mineral?”—is a wonderful example of a mindless choice. As long as you accept the premise that anything that’s not a plant or an animal—including things as diverse as pianos, limericks, and cheesecake, for instance—falls under “mineral,” it requires almost no thought to answer the question correctly.3
3 In case you’ve forgotten the game, there’s an excellent version that you can play against at www.20q.net. Created by Robin Burgener, it uses a neural net algorithm and plays a mean game.
Unfortunately, many choices on the Web aren’t as clear.
For example, as recently as a few years ago when I was trying to buy a product or service to use in my home office (like a printer, for instance), most of the manufacturers’ sites asked me to make a top-level choice like this:
Which one was me? I had to think about it, and even when I made my choice I wasn’t very confident it was the right one. In fact, what I had to look forward to when the target page finally loaded was even more thinking to figure out whether I was in the right place.
It was the feeling I get when I’m standing in front of two mailboxes labeled Stamped Mail and Metered Mail with a business reply card in my hand. What do they think it is—stamped or metered? And what happens if I drop it in the wrong box?
Here’s another example:
I’m trying to read an article online. The page I arrive at gives me all these options:
Now I’ve got to scan all this text and work out whether I’m a subscriber but not a member, or a member, or neither one. And then I’ll have to dig up the account number or the password that I used or decide whether it’s worth joining.
At this point, the question I’m asking myself is probably changing from “How do I answer this question?” to “Just how interested am I in this article?”
The New York Times makes the same kind of choice seem much easier by not confronting you with all the details at once. Making an initial selection (to log in or to see your options for subscribing) takes you to another screen where you see only the relevant questions or information for that selection.
This problem of giving the user difficult choices and questions that are hard to answer happens all the time in forms. Caroline Jarrett has an entire chapter about it (“Making Questions Easy to Answer”) in her book Forms that Work: Designing Web Forms for Usability.
As with Ginny Redish’s book about writing for the Web, anyone who works on forms should have a well-worn copy sitting on their desk.
Some assistance may be required
Life is complicated, though, and some choices really aren’t simple.
When you can’t avoid giving me a difficult choice, you need to go out of your way to give me as much guidance as I need—but no more.
This guidance works best when it’s
Brief: The smallest amount of information that will help me
Timely: Placed so I encounter it exactly when I need it
Unavoidable: Formatted in a way that ensures that I’ll notice it
Examples are tips adjacent to form fields, “What’s this?” links, and even tool tips.
My favorite example of this kind of just-in-time guidance is found on street corners throughout London.
It’s brief (“LOOK RIGHT” and an arrow pointing right), timely (you see it at the instant you need to be reminded), and unavoidable (you almost always glance down when you’re stepping off a curb).
I have to think it’s saved the lives of a lot of tourists who expect traffic to be coming from the other direction. (I know it saved mine once.)
Whether you need to offer some help or not, the point is that we face choices all the time on the Web and making those choices mindless is one of the most important things you can do to make a site easy to use.
Chapter 5. Omit words
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.
—KRUG’S THIRD LAW OF USABILITY
Of the five or six things that I learned in college, the one that has stuck with me the longest—and benefited me the most—is E. B. White’s seventeenth rule in The Elements of Style:
17. Omit needless words.
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.1
1 William Strunk, Jr., and E. B. White, The Elements of Style (Allyn and Bacon, 1979).
When I look at most Web pages, I’m struck by the fact that most of the words I see are just taking up space, because no one is ever going to read them. And just by being there, all the extra words suggest that you may actually need to read them to understand what’s going on, which often makes pages seem more daunting than they actually are.
My Third Law probably sounds excessive, because it’s meant to. Removing half of the words is actually a realistic goal; 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.
Getting rid of all those words that no one is going to read has several beneficial effects:
It reduces the noise level of the page.
It makes the useful content more prominent.
It makes the pages shorter, allowing users to see more of each page at a glance without scrolling.
I’m not suggesting that the articles at WebMD.com or the stories on NYTimes.com should be shorter than they are. But certain kinds of writing tend to be particularly prone to excess.
Happy talk must die
We all know happy talk when we see it: It’s the introductory text that’s supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see in the section we’ve just entered.
If you’re not sure whether something is happy talk, there’s one sure-fire test: If you listen very closely while you’re reading it, you can actually hear a tiny voice in the back of your head saying, “Blah blah blah blah blah....”
A lot of happy talk is the kind of self-congratulatory promotional writing that you find in badly written brochures. Unlike good promotional copy, it conveys no useful information, and it focuses on saying how great we are, as opposed to explaining what makes us great.
Although happy talk is sometimes found on Home pages—usually in paragraphs that start with the words “Welcome to...”—its favored habitat is the front pages of the sections of a site (“section fronts”). Since these pages are often just a list of links to the pages in the section with no real content of their own, there’s a temptation to fill them with happy talk. Unfortunately, the effect is as if a book publisher felt obligated to add a paragraph to the table of contents page saying, “This book contains many interesting chapters about _____, _____, and _____. We hope you enjoy them.”
Happy talk is like small talk—content-free, basically just a way to be sociable. But most Web users don’t have time for small talk; they want to get right to the point. You can—and should—eliminate as much happy talk as possible.
Instructions must die
Another major source of needless words is instructions. The main thing you need to know about instructions is that no one is going to read them—at least not until after repeated attempts at “muddling through” have failed. And even then, if the instructions are wordy, the odds of users finding the information they need are pretty low.
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.
For example, here are the instructions I found at the beginning of a
site survey:
I think some aggressive pruning makes them much more useful:
Before: 103 Words
* * *
After: 34 Words
Please help us improve the site by taking 2-3 minutes to complete this survey.
NOTE: If you have comments or concerns that require a response, don’t use this form. Instead, please contact Customer Service.
* * *
And now for something completely different
In these first few chapters, I’ve been trying to convey some guiding principles that I think are good to have in mind when you’re building a Web site.
Now we’re heading into two chapters that look at how these principles apply to two of the biggest and most important challenges in Web design: navigation and the Home page.
You might want to pack a lunch. They’re very long chapters.
Things You Need to Get Right
Chapter 6. Street signs and Breadcrumbs
DESIGNING NAVIGATION
And you may find yourself | in a beautiful house | with a beautiful wife And you may ask yourself | Well... | How did I get here?!
—TALKING HEADS, “ONCE IN A LIFETIME”
It’s a fact:
People won’t use your Web site if they can’t find their way around it.
You know this from your own experience as a Web user. If you go to a site and can’t find what you’re looking for or figure out how the site is organized, you’re not likely to stay long—or come back. So how do you create the proverbial “clear, simple, and consistent” navigation?