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

Author: Steve Krug

Note

The human brain’s capacity doesn’t change from one year to the next, so the insights from studying human behavior have a very long shelf life. What was difficult for users twenty years ago continues to be difficult today. (8.10811%)

• Comments: This is reassuring. It's also a good approach to decide what's worth learning.

Note

If something requires a large investment of time—or looks like it will—it’s less likely to be used. (10.13510%)

• Comments: Don't waste people's time. There's a moral argument to be made there too.

Note

5 I’ve always liked the passage in A Study in Scarlet where Dr. Watson is shocked to learn that Sherlock Holmes doesn’t know that the earth travels around the sun. Given the finite capacity of the human brain, Holmes explains, he can’t afford to have useless facts elbowing out the useful ones: “What the deuce is it to me? You say that we go round the sun. If we went round the moon it would not make a pennyworth of difference to me or to my work.” (10.81080%)

• Comments: You don't need to know everything, only as much as is necessary to do your job.

Note

. If something is usable—whether it’s a Web site, a remote control, or a revolving door—it means that A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more (12.16220%)

• Comments: The guiding definition of "usability".

Highlight

“Don’t make me think!” For as long I can remember, I’ve been telling people that this is my first law of usability. (13.51350%)

Don’t make me think!

Highlight

it means that as far as is humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory. (13.51350%)

Highlight

But when I’m looking at a page that makes me think, all the thought balloons over my head have question marks in them.

Thinking

When you’re creating a site, your job is to get rid of the question marks. (14.18920%)

Note

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, (14.18920%)

• Comments: Minimize thinking, so people expend less energy. I believe in this.

Highlight

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. (14.18920%)

Highlight

Take names, for example. Typical culprits are cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. (14.18920%)

Note

Sometimes, though, particularly if you’re doing something original or groundbreaking or something that’s inherently complicated, you have to settle for self-explanatory. On a self-explanatory page, it takes a little thought to “get it”—but only a little. (14.86490%)

• Comments: This is probably where something like a productivity app may lie.

Note

We’re thinking “great literature” (or at least “product brochure”), while the user’s reality is much closer to “billboard going by at 60 miles an hour.” (16.89189%)

• Comments: This is a good metaphor. Thinking about it like a billboard really changes your priorities.

Highlight

Why do we scan? We’re usually on a mission. Most Web use involves trying to get something done, and usually done quickly. (16.89190%)

Highlight

When we’re creating sites, we act as though people are going to pore over each page, reading all of our carefully crafted text, figuring out how we’ve organized things, and weighing their options before deciding which link to click. What they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest (16.89190%)

Highlight

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. (16.89190%)

How we really use the Web SCANNING, SATISFICING, AND MUDDLING THROUGH

Highlight

We’re good at it. It’s a basic skill: When you learn to read, you also learn to scan. We’ve been scanning newspapers, magazines, and books—or if you’re under 25, probably reddit, Tumblr, or Facebook—all our lives (17.56760%)

Highlight

We know we don’t need to read everything. On most pages, we’re really only interested in a fraction of what’s on the page. We’re just looking for the bits that match our interests or the task at hand, (17.56760%)

Note

we tend to focus on words and phrases that seem to match (a) the task at hand or (b) our current or ongoing personal interests. And of course, (c) the trigger words that are hardwired into our nervous systems, like “Free,” “Sale,” and “Sex,” and our own name. (17.56760%)

• Comments: This is a good summary of what we tend to scan for.

Highlight

most of the time we don’t choose the best option—we choose the first reasonable option, a strategy known as satisficing.1 (18.24320%)

Highlight

people use things all the time without understanding how they work, or with completely wrong-headed ideas about how they work. (18.91890%)

Note

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. (19.59460%)

• Comments: When great doesn't matter, good is good enough.

Note

If your audience is going to act like you’re designing billboards, then design great billboards. (20.27030%)

• Comments: Paradigm shifting thought here.

Highlight

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. (20.94590%)

Billboard Design 101 DESIGNING FOR SCANNING, NOT READING

Highlight

Occasionally, time spent reinventing the wheel results in a revolutionary new rolling device. But usually it just amounts to time spent reinventing the wheel. (21.62160%)

Note

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. (22.29730%)

• Comments: Great heuristic here.

Highlight

Things that are related logically are related visually. (22.97300%)

Highlight

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. (22.97300%)

Highlight

The more important something is, the more prominent it is. (22.97300%)

Highlight

Things are “nested” visually to show what’s part of what. (22.97300%)

Note

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. (23.64860%)

• Comments: This is the selling point of visual hierarchy: cognitive offloading.

Highlight

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. (23.64860%)

Highlight

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. (24.32430%)

Highlight

One of the great enemies of easy-to-grasp pages is visual noise. (25.00000%)

Note

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. (25.00000%)

• Comments: Less is more.

Highlight

Here are the most important things you can do to make your pages scan-friendly: (25.67570%)

Highlight

Use plenty of headings. (25.67570%)

Highlight

Use bulleted lists. (26.35140%)

Highlight

Highlight key terms. (26.35140%)

Highlight

Keep paragraphs short. (26.35140%)

WHY USERS LIKE MINDLESS CHOICES

Note

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. (27.02700%)

• Comments: I think the point here is that the click itself is not the cost to the user. It's the mental energy expended to make a decision to click. As a result, the number of clicks isn't the true metric.

Highlight

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. (29.05410%)

Highlight

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. (29.72970%)

Omit needless words.

Highlight

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 (29.72970%)

Highlight

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. (30.40540%)

Highlight

People won’t use your Web site if they can’t find their way around it. (32.43240%)

Street signs and Breadcrumbs DESIGNING NAVIGATION

Highlight

You decide whether to ask first or browse first. The difference is that on a Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching (33.10810%)

Note

In many ways, you go through the same process when you enter a Web site. (33.10810%)

• Comments: The point is that browsing the web is like walking into a big store and trying to find an item on the shelves.

Highlight

If you choose to browse, you make your way through a hierarchy, using signs to guide you. Typically, you’ll look around on the Home page for a list of the site’s main sections (like the store’s department signs) and click on the one that seems right. (33.10810%)

Highlight

Eventually, if you can’t find what you’re looking for, you’ll leave. This is as true on a Web site as it is at Sears. (33.78380%)

Highlight

When we’re exploring the Web, in some ways it even feels like we’re moving around in a physical space. (33.78380%)

Highlight

No sense of location. In physical spaces, as we move around we accumulate knowledge about the space. (33.78380%)

Highlight

But the Web experience is missing many of the cues we’ve relied on all our lives to negotiate spaces. (33.78380%)

Highlight

No sense of direction. In a Web site, there’s no left and right, no up and down. (33.78380%)

Highlight

No sense of scale. Even after we’ve used a Web site extensively, unless it’s a very small site we tend to have very little sense of how big it is (33.78380%)

Highlight

This lack of physicality is both good and bad. On the plus side, the sense of weightlessness can be exhilarating and partly explains why it’s so easy to lose track of time on the Web (34.45950%)

Highlight

When we want to return to something on a Web site, instead of relying on a physical sense of where it is we have to remember where it is in the conceptual hierarchy and retrace our steps. This is one reason why bookmarks—stored personal shortcuts—are so important, and why the Back button is the most used button in Web browsers. It also explains why the concept of Home pages is so important. Home pages are—comparatively—fixed places. When you’re in a site, the Home page is like the North Star. (34.45950%)

Highlight

On the negative side, I think it explains why we use the term “Web navigation” even though we never talk about “department store navigation” or “library navigation.” If you look up navigation in a dictionary, it’s about doing two things: getting from one place to another, and figuring out where you are. (34.45950%)

Note

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. (Which is good, since most users will ignore any other instructions anyway.) (35.13510%)

• Comments: Like Don Norman says, the design should give you the instructions for the product. And it looks like navigation helps communicate those instructions!

Highlight

because people in L.A. take driving seriously, they have the best street signs I’ve ever seen. In L.A., Street signs are big. When you’re stopped at an intersection, you can read the sign for the next cross street. (38.51350%)

Note

Page names are the street signs of the Web. (38.51350%)

• Comments: Helpful analogy!

Highlight

One of the ways navigation can counteract the Web’s inherent “lost in space” feeling is by showing me where I am in the scheme of things, the same way that a “You are here” indicator does on the map in a shopping mall—or a National Park. (39.86490%)

Highlight

On the Web, this is accomplished by highlighting my current location in whatever navigation bars, lists, or menus appear on the page. (39.86490%)

Note

Too-subtle visual cues are actually a very common problem. Designers love subtle cues, because subtlety is one of the traits of sophisticated design. But Web users are generally in such a hurry that they routinely miss subtle cues. (39.86490%)

• Comments: I need to really put this to practice!

Note

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) (41.21620%)

• Comments: This is known as the trunk test. Useful!

Note

. As interface devices go, they’re clearly a product of genius.

Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. (41.21620%)

• Comments: If this guy is saying tabs work really well in apps, then I should try to use them!

Highlight

For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs. This is the main thing that makes them feel like tabs—even more than the distinctive tab shape. To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it. This is what makes the active tab “pop” to the front. (41.21620%)

Highlight

And the blindfold? You want your vision to be slightly blurry, because the true test isn’t whether you can figure it out given enough time and close scrutiny. The standard needs to be that these elements pop off the page so clearly that it doesn’t matter whether you’re looking closely or not. (41.89190%)

Highlight

it’s so easy to forget that the Web experience is often more like being abducted than following a garden path. When you’re designing pages, it’s tempting to think that people will reach them by starting at the Home page and following the nice, neat paths you’ve laid out. But the reality is that we’re often dropped down in the middle of a site with no idea where we are because we’ve followed a link from a search engine, a social networking site, or email from a friend, (41.89190%)

Note

It’s that way with the Home page. Just when you think you’ve covered all the bases, there’s always just one...more...thing. (42.56757%)

• Comments: His point is that there are so many things to put on a homepage that need to be included. It's full of so many competing stakes. It's the most important page.

The Big Bang Theory of Web Design THE IMPORTANCE OF GETTING PEOPLE OFF ON THE RIGHT FOOT

Highlight

The one thing you can’t afford to lose in the shuffle—and the thing that most often gets lost—is conveying the big picture. Whenever someone hands me a Home page design to look at, there’s one thing I can almost always count on: They haven’t made it clear enough what the site is. (43.91890%)

Note

This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical. We know now from a very elegant experiment (search for “Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression!”) that a lot happens as soon as you open a page. For instance, you take a quick look around (in milliseconds) and form a number of general impressions: Does it look good? Is there a lot of content or a little? Are there clear regions of the page? Which ones attract you? The most interesting thing about the experiment was that they showed that these initial impressions tended to be very similar to the impressions people had after they actually had a chance to spend time on the page. (43.91892%)

• Comments: This is the core message of the chapter!

Highlight

If their first assumptions are wrong (“This is a site for __”), they begin to try to force-fit that explanation on to everything they encounter. And if it’s wrong, they’ll end up creating more misinterpretations. If people are lost when they start out, they usually just keep getting...loster. (44.59460%)

Highlight

tagline is a pithy phrase that characterizes the whole enterprise, summing up what it is and what makes it great. (46.62160%)

Highlight

On a Web site, the tagline appears right below, above, or next to the Site ID. (46.62160%)

Highlight

When I enter a new site, after a quick look around the Home page I should be able to say with confidence: Here’s where to start if I want to search. Here’s where to start if I want to browse. Here’s where to start if I want to sample their best stuff. (47.29730%)

Highlight

The problem with promoting things on the Home page is that it works too well. Anything with a prominent Home page link is virtually guaranteed to get more traffic—usually a great deal more—leading all of the site’s stakeholders to think, “Why don’t I have one?” (48.64860%)

Note

The section that’s being promoted gets a huge gain in traffic, while the overall loss in effectiveness of the Home page as it gets more cluttered is shared by all sections. It’s a perfect example of the tragedy of the commons.4 (48.64865%)

• Comments: His point is just that you can't clutter the homepage, or else it loses its effectiveness. You have to be picky and choose the most important things to show.

Highlight

All of us who work on Web sites have one thing in common—we’re also Web users. And like all Web users, we tend to have strong feelings about what we like and don’t like about Web sites. (50.00000%)

Highlight

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 (50.00000%)

Highlight

And when we’re working on a Web team, it turns out to be very hard to check those feelings at the door. (50.00000%)

WHY MOST ARGUMENTS ABOUT USABILITY ARE A WASTE OF TIME, AND HOW TO AVOID THEM

Highlight

Left to their own devices, Web teams aren’t notoriously successful at making decisions about usability questions. Most teams end up spending a lot of precious time rehashing the same issues over and over. (50.00000%)

Highlight

On top of this layer of personal passion, there’s another layer: professional passion. (50.67570%)

Note

While the hype culture (upper management, marketing, and business development) is focused on making whatever promises are necessary to attract venture capital, revenue-generating deals, and users to the site, the burden of delivering on those promises lands on the shoulders of the craft culture artisans like the designers and developers. (51.35135%)

• Comments: This is my life.

Highlight

At the same time, designers and developers often find themselves siding together in another, larger clash between what Art Kleiner describes as the cultures of hype and craft.2 (51.35140%)

Highlight

designers want to build sites that look great, and developers want to build sites with interesting, original, ingenious features. (51.35140%)

Highlight

As soon as the clash of personal and professional opinions results in a stalemate, the conversation usually turns to finding some way (whether it’s the opinion of an outside expert, published research, a survey, or focus groups) to determine what most users like or don’t like—to figure out what the Average Web User is really like. (52.02700%)

Highlight

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. (52.02700%)

Highlight

all of the time I’ve spent watching people use the Web has led me to the opposite conclusion: ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC (52.02700%)

Note

The point is, it’s not productive to ask questions like “Do most people like pull-down menus?” The right kind of question to ask is “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?”

And there’s really only one way to answer that kind of question: testing. (52.02703%)

• Comments: This reminds me of lean startup: you build something quickly, then you test it, gather feedback, and iterate.

KEEPING TESTING SIMPLE—SO YOU DO ENOUGH OF IT

Note

Usability tests are about watching one person at a time try to use something (whether it’s a Web site, a prototype, or some sketches of a new design) to do typical tasks so you can detect and fix the things that confuse or frustrate them. (54.05405%)

• Comments: Definition

Highlight

testing is really more like having friends visiting from out of town. Inevitably, as you make the rounds of the local tourist sites with them, you see things about your hometown that you usually don’t notice because you’re so used to them. And at the same time, you realize that a lot of things that you take for granted aren’t obvious to everybody. (54.05410%)

Note

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

• Comments: How often to test

Note

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

• Comments: How many users to test

Highlight

morning a month is about as much time as most teams can afford to spend doing testing. If it’s too complicated or time-consuming, it’s much more likely that you won’t make time for it when things get busy. (56.08110%)

Note

For many sites, you can do a lot of your testing with almost anybody. And if you’re just starting to do testing, your site probably has a number of usability flaws that will cause real problems for almost anyone you recruit. (56.75680%)

• Comments: Who to test

Note

There are many places and ways to recruit test participants, like user groups, trade shows, Craigslist, Facebook, Twitter, customer forums, a pop-up on your site, or even asking friends and neighbors. (57.43240%)

• Comments: How to find participants

Highlight

If they ask for help, just say something like “What would you do if I wasn’t here?” (60.13510%)

Highlight

If the participant stops saying what they’re thinking, prompt them by saying—wait for it—“What are you thinking?” (For variety, you can also say things like “What are you looking at?” and “What are you doing now?”) (60.13510%)

Note

Here are some of the types of problems you’re going to see most often: Users are unclear on the concept. They just don’t get it. They look at the site or a page and either they don’t know what to make of it or they think they do but they’re wrong. The words they’re looking for aren’t there. This usually means that either you failed to anticipate what they’d be looking for or the words you’re using to describe things aren’t the words they’d use. There’s too much going on. Sometimes what they’re looking for is right there on the page, but they’re just not seeing it. In this case, you need to either reduce the overall noise on the page or turn up the volume on the things they need to see so they “pop” out of the visual hierarchy more. (62.83780%)

• Comments: Most common problems in usability tests

Highlight

FOCUS RUTHLESSLY ON FIXING THE MOST SERIOUS PROBLEMS FIRST (63.51350%)

Highlight

Unmoderated remote testing. Services like UserTesting.com provide people who will record themselves doing a usability test. You simply send in your tasks and a link to your site, prototype, or mobile app. Within an hour (on average), you can watch a video of someone doing your tasks while thinking aloud. (64.86490%)

Mobile: It’s not just a city in Alabama

Highlight

One way to look at design—any kind of design—is that it’s essentially about constraints (things you have to do and things you can’t do) and tradeoffs (the less-than-ideal choices you make to live within the constraints). (66.89190%)

Highlight

In my experience, many—if not most—serious usability problems are the result of a poor decision about a tradeoff. (67.56760%)

Highlight

One way to deal with a smaller living space is to leave things out: Create a mobile site that is a subset of the full site. Which, of course, raises a tricky question: Which parts do you leave out? (68.24320%)

Highlight

People are just as likely to be using their mobile devices while sitting on the couch at home, and they want (and expect) to be able to do everything. Or at least, everybody wants to do some things, and if you add them all up it amounts to everything. If you’re going to include everything, you have to pay even more attention to prioritizing. (68.24320%)

Highlight

The most obvious thing about mobile screens is that they’re small. (68.24320%)

Note

In some cases, the lack of space on each screen means that mobile sites become much deeper than their full-size cousins, so you might have to tap down three, four, or five “levels” to get to some features or content. This means that people will be tapping more, but that’s OK. With small screens it’s inevitable: To see the same amount of information, you’re going to be either tapping or scrolling a lot more. (68.91890%)

• Comments: It's not the number of clicks but the feeling of getting somewhere that determines if the user will keep going.

Highlight

MANAGING REAL ESTATE CHALLENGES SHOULDN’T BE DONE AT THE COST OF USABILITY (68.91890%)

Highlight

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

Note

For affordances to work, they need to be noticeable, and some characteristics of mobile devices have made them less noticeable or, worse, invisible. And by definition, affordances are the last thing you should hide. (70.27030%)

• Comments: Lean into the conventions for affordances in apps. People will more clearly know your intent.

Highlight

Affordances require visual distinctions. But the recent trend in interface design (which may have waned by the time you read this) has moved in exactly the opposite direction: removing visual distinctions and “flattening” the appearance of interface elements. (70.94590%)

Highlight

many useful interface features that depended on hover are no longer available, like tool tips, buttons that change shape or color to indicate that they’re clickable, and menus that drop down to reveal their contents without forcing you to make a choice. As a designer, you need to be aware that these elements don’t exist for mobile users and try to find ways to replace them. (70.94590%)

Highlight

You can do all the Flat design you want (you may have to, it may be forced on you), but make sure you’re using all of the remaining dimensions to compensate for what you lose. (70.94590%)

Note

Unfortunately, Flat design has a tendency to take along with it not just the potentially distracting decoration but also the useful information that the more textured elements were conveying. (70.94595%)

• Comments: A pretty aesthetic can come at the cost of usability. Something that must be balanced.

Highlight

some people include in their definitions of usability: useful, learnable, memorable, effective, efficient, desirable, and delightful. Well, that time has arrived. (71.62160%)

Highlight

Building delight into mobile apps has become increasingly important because the app market is so competitive. Just doing something well isn’t good enough to create a hit; you have to do something incredibly well. (72.29730%)

Highlight

One of the biggest problems with apps is that if they have more than a few features they may not be very easy to learn. (72.97300%)

Highlight

There’s one more attribute that’s important: memorability. 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? (73.64860%)

Highlight

Memorability can be a big factor in whether people adopt an app for regular use. Usually when you purchase one, you’ll be willing to spend some time right away figuring out how to use it. But if you have to invest the same effort the next time, it’s unlikely to feel like a satisfying experience. (74.32430%)

Highlight

But mirroring isn’t a good way to watch tests done on touch screen devices, because you can’t see the gestures and taps the participant is making. (75.00000%)

Highlight

Most of this book has been about building clarity into Web sites: making sure that users can understand what it is they’re looking at—and how to use it—without undue effort. Is it clear to people? Do they “get it”? But there’s another important component to usability: doing the right thing—being considerate of the user. Besides “Is my site clear?” you also need to be asking, “Does my site behave like a mensch?” (77.02700%)

Usability as common courtesy

Highlight

Note that while people love to make comments about the appearance of sites—especially about whether they like the colors—almost no one is going to leave a site just because it doesn’t look great. (79.05410%)

Highlight

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. (79.05410%)

Note

I find that even people who disagree about everything else about their organization’s site almost always give me the same answer when I ask them, “What are the three main things your users want to do?” The problem is, making those things easy doesn’t always become the top priority it should be. (If most people are coming to your site to apply for a mortgage, nothing should get in the way of making it dead easy to apply for a mortgage.) (79.72970%)

• Comments: Focus on top use cases

Highlight

Be upfront about things like shipping costs, hotel daily parking fees, service outages—anything you’d rather not be upfront about. (79.72970%)

Accessibility

Highlight

And yet almost every site I go to still fails my three-second accessibility test—increasing the size of the type.1 (81.75680%)

Highlight

Unless you’re going to make a blanket decision that people with disabilities aren’t part of your audience, you really can’t say your site is usable unless it’s accessible. (81.75680%)

Note

: Making sites more usable for “the rest of us” is one of the most effective ways to make them more effective for people with disabilities.

If something confuses most people who use your site, it’s almost certain to confuse users who have accessibility issues. (84.45950%)

• Comments: Usability improvements ARE accessibility improvements as well.

Note

Most blind users are just as impatient as most sighted users. They want to get the information they need as quickly as possible. They do not listen to every word on the page—just as sighted users do not read every word. They “scan with their ears,” listening to just enough to decide whether to listen further. (85.13510%)

• Comments: I love how this squares my experiences with screen reader users with the idea in this book that users scan pages.

Note

Mary Theofanos and Janice (Ginny) Redish watched 16 blind users using screen readers to do a number of tasks on a variety of sites and reported what they observed in an article titled “Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers.”6 (85.13514%)

• Comments: This is a recommended read to see firsthand how users with disabilities behave.

MAKING USABILITY HAPPEN WHERE YOU LIVE

Highlight

Don’t use small, low-contrast type. You can use large, low-contrast type, or small (well, smallish) high-contrast type. But never use small, low-contrast type. (And try to stay away from the other two, too.) (91.89190%)

Highlight

Don’t put labels inside form fields. Yes, it can be very tempting, especially on cramped mobile screens. But don’t do it unless all of these are true: The form is exceptionally simple, the labels disappear when you start typing and reappear if you empty the field, the labels can never be confused with answers, and there’s no possibility that you’ll end up submitting the labels along with what you type (91.89190%)

Highlight

Preserve the distinction between visited and unvisited text links. By default, Web browsers display links to pages that you’ve already opened in a different color so you can see which options you’ve already tried. (91.89190%)

Highlight

Don’t float headings between paragraphs. Headings should be closer to the text that follows them than the text that precedes them. (92.56760%)