Don't Make Me Think 小记

If it’s short, it’s more likely to actually be used

Preface

作者写第三版是因为以下的原因：

three of world changes

Technology got its hands on some steroids

比如滴滴打车，AirBnb，飞猪旅行，智能家居等，科技大大便捷了我们的生活，在各个方面。

The Web itself kept improving.

Web 同样在进步，变的越来越无所不能。如果有些事情不能在 web 上做的话，会令人懊恼（如 网上买火车票）。

Usability went mainstream

针对用户体验的可用性变得非常重要，因此催生了 UX 等职业。

what does this book about

It’s still a book about designing great, usable Web sites.

And it’s also still a book about designing anything that people need to interact with, whether it’s a microwave oven, a mobile app, or an ATM.

The basic principles are the same even if the landscape has changed, because usability is about people and how they understand and use things, not about technology. And while technology often changes quickly, people change very slowly.

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.

–Jakob Nielsen

Introduction: Read me first

Apple’s mistake

这个世界上有无数多的 Web 站点 （并且有无数多的手机 APP）.

I’m not quite sure why Apple brags about this. Having thousands of good apps for a platform is a really good thing. Having millions of mediocre apps just means it’s really hard to find the good ones.

I wrote this book mainly for people who can’t afford to hire (or rent) someone like me (can find and provide solutions about usability).

Knowing some usability principles will help you see the problems yourself—and help keep you from creating them in the first place.

Shorter, more use

I’ve worked hard to keep this book short—hopefully short enough. I did this for two reasons:

If it’s short, it’s more likely to actually be used.

There’s a good usability principle right there: If something requires a large investment of time—or looks like it will—it’s less likely to be used.

You don’t need to know everything

As with any field, there’s a lot you could learn about usability. But unless you’re a usability professional, there’s a limit to how much is useful for you to learn.

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

I find that the most valuable contributions I make to each project always come from keeping just a few key usability principles in mind.
I’ve tried to boil down the few things I think everybody involved in design should know about usability.

Unimportance things

Hard and fast usability rules

Design is a complicated process and the real answer to most of the questions people ask me is “It depends.”

But I do think that there are a few useful guiding principles it always helps to have in mind, and those are what I’m trying to convey.

Bad-mouthing of poorly designed sites and apps.

Designing, building, and maintaining a great Web site or app isn’t easy. It’s like golf: a handful of ways to get the ball in the hole, a million ways not to. Anyone who gets it even half right has my admiration.

As a result, you’ll find that the examples I use tend to be from excellent products with minor flaws. I think you can learn more from looking at good designs than bad ones.

Define usability

如果说什么事物（比如一个 Web 站点，一个 App）可用性高的话，那意味着：

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 trouble than it’s worth.

Take my word for it: It’s really that simple.

Guding Principles

First law of usability: “Don’t make me think!”

“Don’t make me think!”

People often ask me:

“What’s the most important thing I should do if I want to make sure my site or app is easy to use?”

The answer is “DON’T MAKE ME THINK!”

It’s the overriding principle—the ultimate tie breaker when deciding whether a design works or it doesn’t. If you have room in your head for only one usability rule, make this the one.

Thinks that make us think

No question marks. No mental chatter. And no errors.

mental chatter 内心杂乱，心里、脑子里喋喋不休的讨论

I could list dozens of things that users shouldn’t spend their time thinking about, like

• Where am I?
• Where should I begin?
• Where did they put …?
• What are the most important things on this page?
• Why did they call it that?
• Is that an ad or part of the site?

The most important thing you can do is to understand the basic principle of eliminating question marks.

eliminate 消除，排除

Eventually you’ll learn to recognize and avoid them in the things you’re building.

You can’t make everything self-evident

Your goal should be for each page or screen to be self-evident, so that just by looking at it the average user will know what it is and how to use it.
In other words, they’ll “get it” without having to think about it.

Here’s the rule: If you can’t make something self-evident, you at least need to make it self-explanatory. （如果你想做一些很创新的设计的话）

People spend far less time as we imagine

How we really use the Web: Scanning, satisficing, and muddling through

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 or vaguely resembles the thing they’re looking for.

vaguely 有点儿，含糊的
resembles 像，相似

There are almost always large parts of the page that they don’t even look at.

If you want to design effective Web pages, though, you have to learn to live with 3 facts about real-world Web use.

We don’t read pages. We scan them

即使在那些专有的网站，如学校教务处网站，银行 app 等，人们也是在 scanning 和 reading 之中切换的。

因为有以下原因

• We’re usually on a mission

Most Web use involves trying to get something done, and usually done quickly.

• 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 that.

• We’re good at scaning.

It’s a basic skill: When you learn to read, you also learn to scan.

We’ve been scanning those to find we’re interested in.

What we see when we look at a page depends on what we have in mind, and it’s usually just a fraction of what’s there.

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.

We don’t make optimal choices. We satisfice.

In reality, though, most of the time we don’t choose the best option—we choose the first reasonable option.

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.

Why don’t Web users look for the best choice?

• We’re usually in a hurry.
• There’s not much of a penalty for guessing wrong.
• Weighing options may not improve our chances (On poorly designed sites, putting effort into making the best choice doesn’t really help. Back button is more usable)
• 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.

We don’t figure out how things work. We muddle through

I’ve seen lots of people use software, Web sites, and consumer products effectively in ways that are nothing like what the designers intended.

Why does this happen?

• It’s not important to us (as long as we can use them)
• If we find something that works, we stick to it (We’ll use a better way if we stumble across one, but we seldom look for one.)

stumble 绊倒，犯错 stumble across 偶然发现

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:

makes them feel smart.

Designing for scanning, not reading

Faced with the fact that your users are whizzing by, there are some important things you can do:

whiz by 呼啸而过

Take advantage of conventions

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.

比如说标题栏一般放在网页正上方这样的经典样式，比如某些图标背后的含义（购物车类图标就代表购物车本身），遵循用户已经习惯的约定俗成的规则，可以降低用户的上手难度。

Conventions have also evolved for different kinds of sites—commerce, colleges, blogs, and many more—since all the sites in each category have to solve the same set of problems.

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.

但是很多设计师不愿意照搬经典设计，而是想要重新造轮子（这点和程序员有些相似），

但真实世界中创新是偶发的，照搬经典才是经常的。

每当你想要抛弃一个经典而要重新发明轮子的时候，请仔细考虑你改善的地方是否增加了足够多的价值，值得用户去学习。（比如当你想要设计一个全新的滚动条的时候，要想想经典进度条的发展过程中已经经过了上千次的微调）。

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.

innovative 创新的，新颖的
innovation 创新，新方法

For instance: Harlem.org . 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.

Consistency & Inconsistent

Consistency is always a good thing to strive for within your site or app.

But there will be cases where things will be clearer if you make them slightly inconsistent.

Create effective visual hierarchies

Each page should have a clear visual hierarchy: which things are most important, which things are similar, and which things are part of other things.

hierarchy 层次，等级制度
clear visual hierarchy 清晰的视觉层次

Pages with a clear visual hierarchy have 3 traits:

trait 特质、特性

• The more important something is, the more prominent it is.

prominent 突出的、显著的

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.

一个好的、清晰地视觉层次结构相当于对页面做了预处理，节省了用户许多思考，方便用户去获取他们想要的信息。

但是如果没有的话，体验会很差。

Break pages up into clearly defined areas

break up 将…分解为，解散，破裂

It is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore.

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 (or “tappable” on touch screens).

——things like shape (buttons, tabs, etc.), location (in a menu bar, etc.), and formatting (color and underlining).

Keep the noise down to a dull roar

keep down 抑制，缩减
dull 迟钝的，无趣的
roar 咆哮，轰鸣

One of the great enemies of easy-to-grasp pages is visual noise.

类似这样的视觉噪音有：主次不分的结构、大量抓眼球的东西、混乱的位置摆放等。

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 content to support scanning

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.

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.

interspersed 点缀，散布
informal 通俗的，随意的，非正式的。所以 formal 也有拘谨的意思

下面有一些关于格式化文本的建议、注意事项：

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

• 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

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 keeping paragraphs short.

• Use bulleted lists.

ul better than commas or semicolons

• 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. And 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), Ginny Redish’s book Letting Go of the Words will be good for you.

Why users like mindless choices

mindless 盲目的，愚蠢的，不需要动脑筋的

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.

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.

unambiguously: 不含糊的，明白的

I think the rule of thumb might be something like
3 mindless, unambiguous clicks == 1 click that requires thought.

Of course, there are exceptions. For instance, if I’m going to have to drill down through the same path in a site repeatedly, or if the pages are going to take a long time to load, then the value of fewer clicks increases.

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.

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.

• 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

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.

Omit needless 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

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.

— William Strunk, Jr., and E. B. White, The Elements of Style (Allyn and Bacon, 1979).

vigorous: 有力的，精力充沛的

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.

excessive: 极端的，过度的

But the idea of removing half of what’s left is just my way of trying to encourage people to be ruthless about it.

ruthless: 无情的，残忍的

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.

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

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.

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.

Things You Need To Get Right

Street signs and Breadcrumbs: Designing navigation

It’s a fact: People won’t use your Web site if they can’t find their way around it.

how do you create the proverbial “clear, simple, and consistent” navigation?

Web navigation 101

• You’re usually trying to find something.
• You decide whether to search first or browse first.
• If you choose to browse, you make your way through a hierarchy, using signs to guide you.
• Eventually, if you can’t find what you’re looking for, you’ll leave.

The unbearable lightness of browsing

Looking for things on a Web site and looking for them in the “real” world have a lot of similarities.

But the Web experience is missing many of the cues we’ve relied on all our lives to negotiate spaces. Consider these oddities of Web space:

• No sense of scale. (Even the people who manage Web sites often have very little idea how big their sites really are)
• No sense of direction. (No right, left, up and down)
• No sense of location. (So we need home page button, back button and bookmarks)

I think we talk about Web navigation because “figuring out where you are” is a much more pervasive problem on the Web than in physical spaces.

Web navigation compensates for this missing sense of place by embodying the site’s hierarchy, creating a sense of “there.”

The overlooked purposes of navigation

Two of the purposes of navigation are fairly obvious:

1. to help us find whatever it is we’re looking for
2. to tell us where we are.

But navigation has some other equally important—and easily overlooked—functions:

• It tells us what’s here. (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.)
• It tells us how to use the site. (Done correctly, it should be all the instructions you need. Which is good, since most users will ignore any other instructions anyway.)
• It gives us confidence in the people who built it. (Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression.)

Web navigation conventions

Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else.

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

Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site—which is more important than you might think.

And keeping it the same throughout the site means that (hopefully) you only have to figure out how it works once.

Did I say every page?

I lied. There is one exception to the “follow me everywhere” rule: forms.

On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction. 比如在 登陆的页面、支付宝支付的页面、填写信息的页面，你会只想把当前这个步骤完成，而不是看导航栏。

For these pages, it’s useful to have a minimal version of the persistent navigation with just the Site ID, a link to Home, and any Utilities that might help me fill out the form.

在页面的可视化层次结构中，一般 site ID 放置于页面左上角，并且 site ID 一般由标志性的图片或字体组成，让用户方便辨识。

The utilities

These are things that either can help me use the site (like Sign in/Register, Help, a Site Map, or a Shopping Cart) or provide information about its publisher (like About Us and Contact Us).

Like the signs for the facilities in a store, the Utilities list should be slightly less prominent than the Sections.

As a rule, the persistent navigation can accommodate only 4 or 5 Utilities—the ones users are likely to need most often. Or it will seems crowd.

The less frequently used leftovers belong in the footer: the small text links at the bottom of each page.

Users need a home button

Having a Home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over.

A way to search

Given the power of searching and the number of people who prefer searching to browsing, unless a site is very small and very well organized, every page should have either a search box or a link to a search page.

搜索框的样式要符合常用规范，让用户一眼就能看出来（如一个放大镜，一个搜索框等等）。而且如果你要加上搜索选项的话，尽可能在用户需要的时候出现，比如淘宝的搜索框：店铺、商品的搜索切换一目了然。

Secondary, and whatever comes after secondary

I think this is one of the most common problems in Web design (especially in larger sites): failing to give the lower-level navigation the same attention as the top.

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

这一点网易严选的首页做得很好，以图标 + 文字的方式形象地展示比较低级别的元素目录（当然也和它本身没有那么大量的低级别目录有关），其他可以参考的还有淘宝和京东首页的低级别元素目录。

所谓细节见差距，做好低级别 / 潜在级别目录的展示同样非常重要。

Page names, just like street signs

Page names are the street signs of the Web. When things are going well I may not notice page names at all. But as soon as I start to sense that I may not be headed in the right direction, I need to be able to spot the page name effortlessly so I can get my bearings.

There are four things you need to know about page names:

1. Every page needs a name. (Just as every corner should have a street sign, every page should have a name.)
2. The name needs to be in the right place. (The page name should appear to be framing the content that is unique to this page. )
3. The name needs to be prominent. (In most cases, it will be the largest text on the page. Or you can use some special color)
4. The name needs to match what I clicked. (It may seem trivial, but it’s actually a crucial agreement. Each time a site violates it, I’m forced to think, even if only for milliseconds, “Why are those two things different?”)

Navigation shows you are here

导航栏应当能够显示用户所在网页的位置，并且应该用明显的颜色加以区分（用户往往看页面非常快，所以避免微妙的颜色差异，选用较大、较明显的颜色差异）。

Breadcrumbs

Like “You are here” indicators, Breadcrumbs show you where you are.

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. They’re most useful in a large site with a deep hierarchy.

Here are a few best practices for implementing them:

• Put them at the top.
• Use > between levels.
• Boldface the last item.

Three reasons why I still love tabs

1. They’re self-evident. (I’ve never seen anyone—no matter how “computer illiterate”—look at a tabbed interface and say, “Hmmm. I wonder what those do?”)
2. They’re hard to miss. (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.)
3. They’re slick. (make pages more visually interesting)

The Big Bang Theory of Web Design: The importance of getting people off on the right foot

When you think you’ve covered all the bases, there’s always just one…more…thing.

Think about all the things the Home page has to accommodate:

• Site identity and mission. (Right off the bat, the Home page has to tell me what site this is and what it’s for—and if possible, why I should be here and not at some other site.)
• Site hierarchy. (This is usually handled by the persistent navigation.)
• Search
• Teases (Like the cover of a magazine, the Home page needs to entice me with hints of the “good stuff” inside.)
• Content promos. (spotlight the newest, best, or most popular pieces of content, like top stories and hot deals.)
• Feature promos. (invite me to explore additional sections of the site or try out features)
• Timely content. (The Home page needs to have some content that gets updated frequently. It prove that it’s not abandoned or hopelessly outdated.)
• Deals. (advertising, cross-promotion, and co-branding deals)
• Shortcuts. (The most frequently requested pieces of content (software updates, for instance) may deserve their own links on the Home page so that people don’t have to hunt for them.)
• Registration
• Establish credibility and trust. (For some visitors, the Home page will be the only chance your site gets to create a good impression.)

Everybody wants a piece of home page

因为主页是如此的寸土寸金（占据主页多的部分往往能有更大的流量），每个部分都想在主页上多占一些位置。

鉴于这样的局面，我们没法满足每一个网页部分的要求，所以我们必须做出权衡（编程本身也同样需要不断地权衡取舍）。

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.

As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:

1. What is this?
2. What can I do here?
3. What do they have here?
4. Why should I be here-and not somewhere else?

I need to be able to answer these questions at a glance, correctly and unambiguously, with very little effort.

If it’s not clear to me what I’m looking at in the first few seconds, the chances are greater that I’ll misinterpret something and get frustrated.

But if I do “get it”, which greatly improves my chances of having a satisfying, successful experience.

This is what I call the Big Bang Theory of Web Design. It’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.

并不是说人们的第一印象总是正确的，恰恰相反，第一印象总是错的。一旦获得了错误的第一印象，他们接下来的判断都会被错误的第一印象带偏。正因如此给用户一个正确的第一印象非常重要。

This is why it’s so crucial that you get them off on the right foot, making sure that they’re clear on the big picture.

Don’t get me wrong: Everything else is important. You do need to impress me, entice me, direct me, and expose me to your deals. But these things won’t slip through the cracks.

How to get the message across

get … across 被理解

There are 3 important places on the page where we expect to find explicit statements of what the site is about.

1. The tagline.
2. The Welcome blurb
3. The “Learn more.” (You can use a short video)

The point isn’t that everyone will use these 3 elements—or even that everyone will notice them.

Here are a few guidelines for getting the message across:

• Use as much space as necessary. (比如 Kickstarter.com，因为它带来的是新颖的概念，所以用了大量的主页篇幅来介绍 what they do and how it works.)
• but don’t use any more space than necessary. (凡是过犹不及，更简洁的介绍会增加被看的可能性)
• Don’t use a mission statement as a Welcome blurb. (“XYZCorp offers world-class solutions in the burgeoning field of blah blah blah blah blah….” Nobody reads them.)
• It’s one of the most important things to test. (You can’t trust your own judgment about this. You need to show the Home page to people from outside your organization to tell you whether the design is getting this job done. 当局者迷，旁观者清)

The fifth question

• Where do I start?

The best way to keep this from happening is to make the entry points look like entry points (i.e., make the search box look like a search box and the list of sections look like a list of sections). It also helps to label them clearly, with labels like “Search,” “Browse by Category,” “Sign in,” and “Start here” (for a step-by-step process).

i.e. 也就是

Making Sure You Got them Right

Why most arguments about usability are a waste of time, and how to avoid them

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.

Unfortunately, there are several forces at work in most Web teams that make these debates almost inevitable. In this chapter, I’ll describe these forces and explain what I think is the best antidote.

antidote 解药

Everybody likes …

持有某种意见的人往往会认为大多数用户想的和他是一样的，但真的是这样的吗？我们需要明智一些。

The myth of the average user

The only problem is, there is no Average User.

All web users are unique and all web use is basically idiosyncratic.

idiosyncratic: 特殊的、特质的

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.

It’s just that they aren’t the things that Web teams usually argue about.

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

Usability testing tends to defuse most arguments and break impasses.

Keeping testing simple—so you do enough of it

作者举出了两个例子：

• 距离上线还有两周时做可用性测试：不用说我们都能预料会发生什么，那很可能会是一场灾难性检查。
• 距离上线还有两个月时做可用性测试：一般是这样的：想解决一些关于内部的审美争论，于是一个人说，让我们来做可用性测试吧。

And while usability testing will sometimes settle these arguments, the main thing it usually ends up doing is revealing that the things they were arguing about weren’t all that important.

For instance, they might discover that it doesn’t make much difference whether you go with cascading menus or mega menus if nobody understands the value proposition of your site.

We need to make usability part of every project right from the beginning.

Sadly, though, this is still how a lot of usability testing gets done: too little, too late, and for all the wrong reasons.

Focus groups are not usability tests

Here’s the difference in a nutshell:

in a nutshell 简而言之

• In a focus group, a small group of people (usually 5 to 10) sit around a table and talk about things, like their opinions about products, their past experiences with them, or their reactions to new concepts. Focus groups are good for quickly getting a sampling of users’ feelings and opinions about things.
• 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.

The main difference is that in usability tests, you watch people actually use things, instead of just listening to them talk about them.

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.

Several true things about usability testing

• If you want a great site, you’ve got to test. (You know it too much. The only way to find out if it really works is to watch other people try to use it.)

I used to say that the best way to think about testing is that it’s like travel: a broadening experience. It reminds you how different—and the same—people are and gives you a fresh perspective on things. And at the same time, you realize that a lot of things that you take for granted aren’t obvious to everybody.

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

It’s often not that easy to make changes—especially major changes—to a site once it’s in use. Some percentage of users will resist almost any kind of change, and even apparently simple changes often turn out to have far-reaching effects. Any mistakes you can correct early in the process will save you trouble down the line.

Do-it-yourself usability testing

Don’t get me wrong: If you can afford to hire a professional to do your testing, do it. Odds are they’ll be able to do a better job than you can. But if you can’t hire someone, do it yourself.

I believe in the value of this kind of testing so much that I wrote an entire (short) book about how to do it. It’s called Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.

It covers the topics in this chapter in a lot more detail and gives you step-by-step directions for the whole process.

How often should you test?

One morning a month doing usability testing.

If you’re doing Agile development, you’ll be doing testing more frequently, but the principles are still the same.

This is much better than basing your test schedule on milestones and deliverables. because schedules often slip and testing slips along with them.

How many users do you need?

The ideal number of participants for each round of do-it-yourself testing is three.

They’ll say that it’s too small a sample to prove anything and that it won’t uncover all of the problems. Both of these are true but they just don’t matter, and here’s why:

• The purpose of this kind of testing isn’t to prove anything.

Proving things requires quantitative testing, with a large sample size, a clearly defined and rigorously followed test protocol, and lots of data gathering and analysis.

quantitative 严格的

而这里的自己动手测试不是一种严格的、覆盖全局的测试，它的目的是通过识别和修复可用性问题来改进正在构建的事物。

• You don’t need to find all of the problems.

You can find more problems in half a day than you can fix in a month.

You’ll always find more problems than you have the resources to fix, so it’s very important that you focus on fixing the most serious ones first. And three users are very likely to encounter many of the most significant problems related to the tasks that you’re testing.

How do you choose the participants

不用特地去挑选最像你的目标用户的的测试者，一方面会增加挑选的成本，一方面因为样本单一，更难发现问题。为此作者提出了建议：

recruit loosely and grade on a curve

即放松挑选测试者的标准。

How do you find participants?

I like to offer people a little more than the going rate, since it makes it clear that I value their time and improves the chances that they’ll show up.

Remember that even if the session is only an hour, people usually have to spend another hour traveling.

Who should observe?

As many people as possible!

One of the most valuable things about doing usability testing is the effect it can have on the observers. For many people, it’s a transformative experience that dramatically changes the way they think about users: They suddenly “get it” that users aren’t all like them.

You should try to do whatever you can to encourage everyone—team members, stakeholders, managers, and even executives—to come and watch the test sessions.

During the break after each test session, observers need to write down the three most serious usability problems they noticed during that session so they can share them in the debriefing.

debrief 盘问

It’s important that they make this short list because, as you’ll see, the purpose of the debriefing is to identify the most serious problems so they get fixed first.

What do you test, and when do you test it?

In fact, it’s never too early to start. 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.

Bring in three participants and watch them try to do some typical tasks on one or two competitive sites and you’ll learn a lot about what works and doesn’t work without having to design or build anything.

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

Typical problems

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.

what to make of it 怎么回事

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

anticipate 预期，预料

• There’s too much going on.

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 visuasl hierarchy more.

Larger Concerns and Outside Influences

Mobile time

一开始手机上也有浏览器，不过用户体验非常差。直到 iPhone 的出现，开创了智能手机的时代，改变了这一切。

One of Apple’s great inventions was the ability to scroll (swiping up and down) and zoom in and out (pinching and…unpinching) very quickly. (It was the very quickly part—the responsiveness of the hardware—that finally made it useful.)

不仅是 Web 功能的便捷，携带一部智能手机意味着很多：一个网页浏览器、一部相机、一个钱包（如支付宝）、一张地图（基于 GPS）。

正如这句话所说：The best camera really is the one you have with you.

And think about the fact that for most people in emerging countries, in the same way they bypassed landlines and went straight to cellphones, the smartphone is their first—and only—computer.

bypassed：绕过，忽视

There’s not much denying that mobile devices are the wave of the future, except for things where you need enormous horsepower (professional video editing, for example, at least for now) or a big playing surface (Photoshop or CAD).

What’s the difference?

In one sense, the answer is: Not much. The basic principles are still the same. If anything, people are moving faster and reading even less on small screens.

但是 mobile 确实有一些不一样的地方。作者不打算写一些很具体的操作，而是：

What I will do is tell you a few things that I’m sure will continue to be true. And the first one is…

It’s all about tradeoffs

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

Rather than being the negative force that they often feel like, constraints actually make design easier and foster innovation.

foster 培育，培养

If a sofa has to fit in this space and match this color scheme, it’s sometimes easier to find one than if you just go shopping for any sofa.

Having something pinned down can have a focusing effect, where a blank canvas with its unlimited options—while it sounds liberating—can have a paralyzing effect.

pin down 约束，确定，阻止
paralyzing 使…麻痹

Whenever you’re designing, you’re dealing with constraints. And where there are constraints, there are tradeoffs to be made.

Some serious usability problems are the result of a poor decision about a tradeoff.

Most of the challenges in creating good mobile usability boil down to making good tradeoffs.

The itty-bitty living space

如果在设计主页的时候你感到寸土寸金的话，那么来感受一下 mobile site 的可怕吧。（假设主页是杭州的房价，mobile 的页面就是北京的房价）

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. But which parts do you leave out?

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.

If you’re going to include everything, you have to pay even more attention to prioritizing.

Things I want to use in a hurry or frequently should be close at hand. Everything else can be a few taps away, but there should be an obvious path to get to them.

Smaller screen 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. As long as the user continues to feel confident that what they want is further down the screen or behind that link or button, they’ll keep going.

Scalable design is hard

If there are two things I can tell you about scalable design (a/k/a dynamic layout, fluid design, adaptive design, and responsive design), they’re these:

a/k/a or a.k.a 换句话说，又名 （是 also known as 的缩写）

1. Image It tends to be a lot of work.
2. Image It’s very hard to do it well.

Now that small screens are taking over, everybody cares: If you have a Web site, you have to make it usable on any size screen.

Trying to create separate versions of anything—keeping two sets of books is a surefire path to madness. It doubles the effort (at least) and guarantees that either things won’t be updated as frequently or the versions will be out of sync.

It’s still getting sorted out. This time, the problem has real revenue implications, so there will be technical solutions, but it will take time.

这里作者有个建议

• Allow zooming

If you don’t have the resources to “mobilize” your site at all and you’re not using responsive design, you should at least make sure that.

• Always provide a link to the “full” Web site.

There are many situations where people will be willing to zoom in and out through the small viewport of a mobile device in return for access on the go to features they’ve become accustomed to using or need at that moment. Also, some people will prefer to see the desktop pages when using 7″ tablets with high-resolution screens in landscape mode.

Affordances

affordances 功能可见性

和 Web 端一样，手机端的按钮要长得像一个按钮，输入框要像一个输入框，可以点击的链接要显示出来，而不是要用户猜。

This is not to say that all affordances need to hit you in the face. They just have to be visible enough that people can notice the ones they need to get their tasks done.

Flat design: friend or foe?

Affordances require visual distinctions. But the recent trend in interface design has moved in exactly the opposite direction: removing visual distinctions and “flattening” the appearance of interface elements.

It looks darned good (to some people, anyway), and it can make screens less cluttered-looking. But at what price?

The distinctions required to draw attention to an affordance often need to be multi-dimensional: It’s the position of something (e.g., in the navigation bar) and its formatting (e.g., reversed type, all caps) that tell you it’s a menu item.

By removing a number of these distinctions from the design palette, Flat design makes it harder to differentiate things.

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.

beyond usability

Some people include in their definitions of usability:

• useful
• learnable
• memorable
• effective
• efficient
• desirable
• delightful

Personally, my focus has always been on the three that are central to my definition of usability:

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 trouble than it’s worth.

For now let’s talk about delight, learnability, and memorability and how they apply to mobile apps.

• delightful

让人快乐的应用通常来自和某个人们希望能实现但没想过真的能实现的想法的结合，再加上一个明朗的想法，使用某些新技术来完成它。

• memorability

可记忆性可能影响人们是否会经常使用这个应用的重要因素。很久不用之后，还会使用。

Usability as common courtesy

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

undue 过度的

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

mensch [美国俚语]有道德且受尊敬的人；正人君子

The reservoir goodwill

I’ve always found it useful to imagine that every time we enter a Web site, we start out with a reservoir of goodwill. Each problem we encounter on the site lowers the level of that reservoir.

The reservoir is limited, and if you treat users badly enough and exhaust it there’s a good chance that they’ll leave.

但还有比用户离开更严重的后果：他们会在朋友圈、微博之类的地方吐槽，这时候对公司声誉的危害可就大了。

There are a few things worth noting about this reservoir:

• It’s idiosyncratic.

Some people have a large, some small; some are more suspicious by nature, or more ornery; others are inherently more patient, trusting, or optimistic. The point is, you can’t count on a very large reserve.

• It’s situational.

If I’m in a huge hurry, or have just come from a bad experience on another site, my expendable goodwill may already be low when I enter your site, even if I naturally have a large reserve.

• You can refill it.

Even if you’ve made mistakes that have diminished my goodwill, you can replenish it by doing things that make me feel like you’re looking out for my best interests.

• Sometimes a single mistake can empty it.

For instance, just opening up a registration form with tons of fields may be enough to cause some people’s reserve to plunge instantly to zero.

Things that diminish goodwill

• Hiding information that I want

The most common things to hide are customer support phone numbers, shipping rates, and prices.

• Punishing me for not doing things your way.

如输入框中要求必须输入 xxx-xxx-xxx（或者其他的格式化），而其中的 - 本可以由代码完成。

• Asking me for information you don’t really need.

• Your site looks amateurish.

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 color. (I tell people to ignore all comments that users make about colors during a user test, unless three out of four people use a word like “puke” to describe the color scheme. Then it’s worth rethinking.

• Sometimes business decision

There may be times when you’ll choose to have your site do some of these user-unfriendly things deliberately.

Sometimes it makes business sense not to do exactly what the customer wants.

For instance, uninvited pop-ups almost always annoy people to some extent. But if your statistics show you can get 10 percent more revenue by using pop-ups and you think it’s worth annoying your users, you can do it.

It’s a business decision. Just be sure you do it in an informed way, rather than inadvertently.

Things that increase goodwill

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

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

• Tell me what I want to know.

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

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

• Put effort into it.

My favorite example is the HP technical support site, where it seems like an enormous amount of work has gone into (a) generating the information I need to solve my problems, (b) making sure that it’s accurate and useful, (c) presenting it clearly, and (d) organizing it so I can find it. I’ve had a lot of HP printers, and in almost every case where I’ve had a problem I’ve been able to solve it on my own.

• FAQs

Keep them up to date.

Customer Service and Technical Support can easily give you a list of this week’s five most frequently asked questions. I would always put this list at the top of any site’s Support page.

• Make it easy to recover from errors.

If you actually do enough user testing, you’ll be able to spare me from many errors before they happen.

But where the potential for errors is unavoidable, always provide a graceful, obvious way for me to recover.

• When in doubt, apologize.

Sometimes you can’t help it: You just don’t have the ability or resources to do what the user wants.

If you can’t do what they want, at least let them know that you know you’re inconveniencing them.

Accessibility

It’s the right thing to do.

How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?

The four things you can do right now

尽管成为 无障碍访问 专家很难，但我们可以简单的做到以下几点：

• fix the usability problems that confuse everyone

The single best thing you can do to improve your site’s accessibility is to test it often, and continually smooth out the parts that confuse everyone.

• watch people use

If you have the time and the motivation, I’d highly recommend locating one or two blind Web users and spending a few hours with them observing how they actually use their screen reader software.

Screen-reader users scan with their ears. 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. Many set the voice to speak at an amazingly rapid rate.

• read a book about Accessibility

A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery. (Their approach: “Good UX equals good accessibility. Here’s how to do both.”)

Web Accessibility: Web Standards and Regulatory Compliance by Jim Thatcher et al. (“Here are the laws and regulations, and we’ll help you understand how to meet them.”)

Making usability happen where you live

UCD（User Centered Design，以用户为中心的设计）的目标是：设计正确的产品，保证它可用。

UXD（User Experience Design，用户体验设计）是在产品生命周期的每个阶段，都把用户需求考虑进来。

说服管理层支持可用性设计

• 演示 ROI （投资回报率）：寻找数据证明可用性的改进会节约成本或带来额外的收入
• 用他们的语言说话：了解公司的难题，陈述我们的方法可以协助解决这些问题
• 让老板（以及他的老板）来观看可用性测试