⌕ ESC
↑↓ 选择↵ 打开esc 关闭⌘K 唤起
《点石成金·别让我思考》书封
拆书稿

点石成金·别让我思考 Don't Make Me Think, Revisited

Steve Krug · 2014 拆解 13 章 全文约 2.8 万字 预计 1 小时 12 分
书架 · 产品之道 书摘可用性UX

可用性的全部秘密只有一条——「别让我思考」:每一个页面、每一次点击、每一句文案,都要让用户在不动脑、不费劲的情况下「一眼看懂」,因为真实用户不读、只扫,不挑最优解、只取第一个看着顺眼的,不研究怎么用、只是将就着把它用起来;而验证你有没有做到的唯一办法,不是开会争论或问「大多数人喜欢什么」,而是花极小成本、每月一个上午、看三个真人当面用它。

本书电梯陈述 · 编辑部拟
0. 30 秒 TL;DR TL;DR
  1. 一全书最重要的一句话:「Don't make me think!」——这是 Krug 的「可用性第一定律」,是判断一个设计成不成立的最高原则、终极裁决标准。一个页面应当自明(self-evident);做不到自明,至少要自解释(self-explanatory)。
  2. 二用户真实行为三定律:我们不读、只扫描(scan);我们不挑最优、只将就(satisfice,取第一个差不多的);我们不研究原理、只蒙混(muddle through)。设计必须接受这个现实,而不是假想一个理性、耐心、会通读的用户。
  3. 三既然用户把你的页面当 60 迈飞驰而过的广告牌看,那就把广告牌设计好:用惯例、建立清晰的视觉层级、把页面切成明确区块、让可点的东西一看就可点、砍掉视觉噪音、把文案格式化成可扫描的。
  4. 四点击数不重要,每次点击「有多难」才重要(第二定律)。三次无脑、无歧义的点击 ≈ 一次需要动脑的点击。能给用户「无脑选择」是最大的善意。
  5. 五把文案砍掉一半,再把剩下的砍掉一半(第三定律)。「欢迎词(happy talk)」和「使用说明」是两大废话重灾区,该死。
  6. 六导航就是网站本身:网页天生让人「迷失在太空」(没有比例感、方向感、位置感),导航靠把站点层级可视化来重建「我在哪」。检验标准是「后备箱测试」——被蒙眼丢进站内任意深页,你能否瞬间说出:这是哪个站?我在哪页?有哪些大区?此层有哪些选项?我在整体中的位置?怎么搜索?
  7. 七大多数关于可用性的争论是浪费时间(「宗教辩论」)。问「大多数人喜不喜欢下拉菜单?」是错的;没有「平均用户」,所有用户都是独特的。唯一的解药是测试——把东西做出来(哪怕粗糙版),看真人怎么用。
  8. 八每天一毛钱做可用性测试:每月一个上午、测三个用户、午餐时复盘、当场决定下个月修哪几条、聚焦修最严重的问题。「测一个用户,比一个都不测好 100%。」
1. 全书结构脉络 STRUCTURE

Krug 把全书组织成「先讲普适原则,再落到两个最难的具体战场,再交给读者一套自己验证的方法,最后处理几个更大的外围议题」的四段式。它的隐藏主线是一条因果链:因为用户是这样用网页的(第2章)→ 所以要遵循「别让我思考」(第1章)并把页面当广告牌设计(第3–5章)→ 落到导航和首页这两个最容易翻车的地方(第6–7章)→ 但你怎么知道自己做对了?别争论,去测(第8–9章)→ 最后处理移动端、礼貌/好感、无障碍、以及在组织里推动可用性这几个外围但要命的议题(第10–13章)。

全书地图(层级结构):

  • 第一部分 · 指导原则(Guiding Principles) —— 立地基
    • 第1章 别让我思考(第一定律:自明 > 自解释)
    • 第2章 我们到底怎么用网页(扫描 / 将就 / 蒙混 三定律)
    • 第3章 广告牌设计101(惯例 / 视觉层级 / 分区 / 可点性 / 降噪 / 可扫描文案)
    • 第4章 动物、植物还是矿物?(第二定律:点击「难度」比「次数」重要,无脑选择)
    • 第5章 省掉废话(第三定律:砍一半文案;happy talk 与说明该死)
  • 第二部分 · 必须做对的事(Things You Need to Get Right) —— 两个最难的战场
    • 第6章 街牌与面包屑(导航 = 网站本身;持久导航、页名、「你在这里」、面包屑、标签页、后备箱测试)
    • 第7章 网页设计的大爆炸理论(首页:头几秒决定一切;传达「大局观」、tagline、共地悲剧)
  • 第三部分 · 确认你做对了(Making Sure You Got Them Right) —— 把判断权交给真实用户
    • 第8章 「农夫与牛仔应该做朋友」(宗教辩论之害;没有平均用户;测试是解药)
    • 第9章 每天一毛钱做可用性测试(DIY 测试全流程:一上午、三用户、复盘、聚焦修)
  • 第四部分 · 更大的关切与外围影响(Larger Concerns and Outside Influences)
    • 第10章 移动端(取舍 / 小屏 / 响应式 / 可供性 / 平面化 / 速度 / 移动测试的器材学)
    • 第11章 可用性即基本礼貌(好感储备这个「水库」;消耗 vs. 补充好感的清单)
    • 第12章 无障碍与你(accessibility 即 usability;当下能做的四件事)
    • 第13章 给困惑者的指南(如何在组织里推动可用性;让老板来看一次测试;抵抗「暗黑模式」)

2. 逐章深拆 CHAPTERS
01

第 1 章 · 别让我思考!Don't make me think!

① 最佳案例:Krug 让你想象自己的隔壁邻居——一个对你网站主题毫无兴趣、连「后退」按钮都用得磕磕绊绊的人——瞥一眼你的首页,能不能脱口而出:「哦,这是个 ___。」(运气好的话还会加一句「不错!」)这个「邻居测试」把「自明」这个抽象标准变成了一个可感的画面:你脑袋上方的思想气泡里,应该全是「好,那是 ___,这是 ___,那是我要的东西」,而不是一串问号。另一个生动的反例是给招聘版块起名——一家公司可能因为内部政治或公司刊物上一直这么叫,把「Jobs(招聘)」起成了「Job-o-Rama」,于是用户扫到这个名字时就被迫多想了一下。

② 核心主张:可用性的最高原则、当一个设计「行不行」拿不准时的终极裁决,就是「别让我思考」。每个页面都应当自明(self-evident / obvious / self-explanatory)——用户无需付出任何思考成本就能「get it」(这是什么、怎么用)。做不到自明,至少要做到自解释:靠尺寸、颜色、布局、精心挑选的名字和少量措辞讲究的文案,合力营造出「近乎不费力的理解」。

③ 论据 / 推演 / 前提:

  • 每一个「问号」都在增加我们的认知负荷,把注意力从手头任务上拽走。单个干扰也许很轻微,但它们会累加——尤其是「决定点哪儿」这种我们一直在做的动作。
  • 「让人多想」会侵蚀信任:建站的人懒得把事情做明白,会让用户对网站和它背后的组织失去信心。
  • 反直觉的一点:重要性不是因为「竞争对手只差一次点击」(虽然这也对)。人并不总是善变的——有时别无选择(公司内网、银行 App),有时会自责而非怪网站,硬扛很久。真正的理由是:大多数人花在你页面上的时间,远比你想象的少,所以页面必须「在一瞥之间」就完成大部分魔法。
  • 作者特意拒绝再给一张「设计清单」——他要你理解「消除问号」这个底层原则,然后自然会在自己用的、做的产品里认出并避开它们。

漫画:在互联网上,竞争对手永远只差一次点击——惹恼用户他们扭头就走

02

第 2 章 · 我们到底怎么用网页How we really use the Web

① 最佳案例:Gary Larson 的经典漫画——主人对着狗 Ginger 一本正经地训话「不许翻垃圾」,但从狗的视角,它听到的全是「blah blah GINGER blah blah blah GINGER」。用户看网页就是这样:只对那些匹配(a)当前任务、(b)个人长期兴趣、(c)写进神经系统的触发词(「免费」「打折」「性」以及自己的名字)的词句有反应,其余大片内容形同不存在。这个比喻一针见血地解释了「为什么用户看不见你精心写的那段话」。

② 核心主张:要做有效的网页,你必须接受关于真实世界网页使用的三个「生活事实」:(1) 我们不读,我们扫描;(2) 我们不挑最优,我们将就(satisfice);(3) 我们不弄懂原理,我们蒙混(muddle through)。 设计者脑中那个「理性、专注、会权衡所有选项后才点击」的用户是不存在的——我们总以为别人和自己一样井井有条,其实连自己都没那么有条理。

③ 论据 / 推演 / 前提:

  • 为什么扫描:我们通常带着任务、赶时间(用户像鲨鱼,不动就死);我们知道一页里只有一小部分与己相关;而且我们从小扫报纸杂志,扫得很熟练、知道管用。
  • 为什么将就:来自 Gary Klein 对消防指挥官的研究——高压下他们根本不比较任何选项,而是抓住脑中第一个合理方案、快速心算一下有无问题,没问题就执行。网页上将就是有效策略,因为:通常赶时间(「优化很难很慢,将就更高效」);猜错的代价不过是按一两下后退键(后退是浏览器最常用按钮);在烂网站上多权衡也未必更好;而且猜测更有趣。
  • 为什么蒙混:很少有人读说明书,我们一头扎进去、编一套「貌似说得通」的故事。经典画面是《王子与贫儿》里贫儿把英格兰国玉玺当核桃夹子用——「对他来说这就是块沉甸甸的大金属」。很多人重度使用网页却不知道「浏览器」是什么(以为是搜索引擎、以为 Google 就是互联网),但他们照样把事办成了。
  • 蒙混之所以仍要在意「用户是否 get it」,是因为蒙混低效且易错;而一旦用户真的懂了,他们更可能找到所需、了解你产品的全貌、被你引导到你想让他们看的地方、并因「感觉自己更聪明、更掌控」而回访。结论:「如果你的受众把你当广告牌设计师,那就设计伟大的广告牌。」

我们以为用户会怎么用网页(左:耐心细读)vs. 现实(右:疯狂扫描、抓到差不多的就点)

设计师精心建造的页面 vs. 用户实际看到的——用户只盯着自己要的那一两样东西

旧连环画「还有最后一点要交代…剧终」——我们并不细读,只是将就着把它用起来

03

第 3 章 · 广告牌设计101Billboard Design 101

① 最佳案例:停车标志(STOP sign)。正因为「司机必须在远处、各种天气和光线下、一瞥之间就认出它」至关重要,所以全世界的停车标志长得几乎一模一样——独特的形状、写着「停」的字、与自然环境高对比的颜色、标准化的尺寸高度和位置。Krug 用它说明惯例(convention)的威力:把一个原本要思考的识别动作,压缩成零成本的瞬时反应。延伸的反例是「自定义滚动条」——设计师为了好看从头造滚动条,结果几乎总是暴露出他没意识到标准操作系统滚动条背后有成百上千小时的打磨。

② 核心主张:既然用户在飞驰,你能做六件事让他们尽可能多地看到并理解你想让他们知道的东西:利用惯例、建立有效的视觉层级、把页面切成清晰区块、让可点的东西显而易见、消除干扰、把文案格式化成支持扫描的样子。

③ 论据 / 推演 / 前提:

  • 惯例:标准化的设计模式让用户不必每到一个站就重新搞懂东西是什么、怎么用。要创新,先理解你要替换的东西的价值(被低估得厉害);不用惯例,替代品必须要么自明到没有学习曲线,要么增值到值得一点学习曲线。口诀:「知道自己有更好的点子时才创新,没有时就用惯例。」 但 Krug 不反对创意——他最爱的 Harlem.org 用一张 1957 年 57 位爵士乐手的合影当导航,既新奇又好用,且聪明地另配了一套常规分类导航兜底。关于一致性:「清晰胜过一致(Clarity trumps consistency)」——若把某物稍微做得不一致能让它显著更清晰,选清晰。
  • 视觉层级的三特征:越重要越显眼(更大/更粗/独特颜色/更多留白/更靠上);逻辑相关的视觉上也相关(分组、同样式、同区域);视觉上「嵌套」表达从属。好的视觉层级替我们预处理了页面,让我们近乎瞬间抓住结构;层级混乱就像读「Bill 把猫放桌上待一会儿因为它有点晃」这种歧义句,逼我们多想。
  • 分区让用户迅速决定看哪、忽略哪——眼动研究表明用户在最初几瞥就判定哪些区域可能有用、之后几乎不看其它(「横幅盲视 banner blindness」是其极端)。
  • 可点性:人在网上很大一部分动作就是找下一个可点的东西,所以靠形状、位置、格式(颜色+下划线)让可点一目了然;别犯「链接和不可点标题用同一颜色」这种蠢错。这一点在移动端重新成了问题(见第10章)。
  • 三种噪音:喊叫(什么都在争抢注意,「东西不可能全都重要」)、杂乱无章(不懂用网格对齐)、塞太多(信噪比过低)。编辑页面时先假定一切都是噪音(有罪推定),删掉一切没有真实贡献的东西。
  • 可扫描文案:多用标题(比你以为的还要多、还要花心思写);段落要短(别造「文字之墙 wall of words」,单句成段也行);多用项目符号列表;加粗关键词但别加太多。

美国「STOP」停车标志

中文「停」字标志,与 STOP 并置——遵循惯例让人一眼就懂

用字号大小表达层级:很重要 / 次要一点 / 远没那么重要

波士顿环球报头版:版面越大越重要,一眼分清主次(报纸视觉层级类比)

一级标题 / 二级标题 / 三级标题——视觉上嵌套表达从属关系

04

第 4 章 · 动物、植物还是矿物?Animal, Vegetable, or Mineral?

① 最佳案例:「二十个问题」游戏里那个经典开局——「动物、植物,还是矿物?」。只要你接受「凡不是植物或动物的(钢琴、打油诗、芝士蛋糕都算)都归矿物」这个前提,回答它几乎不需要任何思考。这就是「无脑选择」的范本。反例是几年前买家用打印机时厂商网站逼你做的顶层选择(「家用?小型办公?企业?」)——「哪个是我?」你得想,想完还不自信,目标页加载出来还要再想一遍自己是不是到对地方了;就像手里拿着商业回邮卡站在「贴邮票」和「计价邮资」两个邮筒前发懵。

② 核心主张(Krug 第二定律):「点多少次无所谓,只要每次点击都是无脑、无歧义的选择。」真正重要的不是到达目标需要几次点击(虽然有上限),而是每次点击有多难——需要多少思考、对「我选对了吗」有多少不确定。

③ 论据 / 推演 / 前提:

  • 流行的「任何页面不超过 N 次点击」规则看似有用,但抓错了重点。用户不介意多点几次,只要每次都不费劲、且持续相信自己走在正轨上——这就是常说的「信息气味(scent of information)」(源自 Xerox PARC 的「信息觅食」研究:人像动物追踪猎物气味一样找信息)。清晰无歧义的链接散发强气味,模糊措辞的链接没有。
  • 经验法则:「三次无脑、无歧义的点击 ≈ 一次需要动脑的点击。」(例外:要反复钻同一路径、或页面加载很慢时,减少点击的价值上升。)
  • 当某个选择无法避免地很难时,你要竭尽所能给恰到好处的引导——但不多给。好的引导是:简短(brief,帮我所需的最少信息)、及时(timely,在我正需要时出现)、不可回避(unavoidable,格式上确保我会注意到)。 最爱的例子是伦敦街角路面上的「LOOK RIGHT →」:简短、及时(恰在你迈下路缘那一刻看到)、不可回避(迈步时几乎总会低头),救了无数习惯了反向来车的游客的命。
05

第 5 章 · 省掉废话Omit needless words

① 最佳案例:一份网站调查问卷开头的说明文字,Krug 把它从 103 个词砍到 34 个词——「请花 2–3 分钟帮我们改进网站填这份问卷。注意:如有需要回复的意见或疑问,请勿用此表单,改为联系客服。」同样的信息、同样的功能,废话蒸发了。这是「砍一半再砍一半」最直观的演示。

② 核心主张(Krug 第三定律):「把每页的文字砍掉一半,然后把剩下的再砍掉一半。」大多数网页上的字只是在占地方,因为没人会去读它们;而它们仅仅「在那儿」就暗示你「可能需要读它们才能懂」,把页面搞得比实际更吓人。

③ 论据 / 推演 / 前提:

  • 这条定律源自 E. B. White《风格的要素》第 17 条「Omit needless words」——「有力的写作是简洁的」。Krug 说删掉一半是现实目标(他删一半从不丢失有价值的东西),「再删一半」只是逼你狠下心。
  • 删废话的三个好处:降低页面噪音、让有用内容更突出、让页面更短(用户一瞥能看到更多、少滚动)。
  • 两大废话重灾区:① 欢迎词(happy talk)必须死——那种「欢迎来到…」「本节将为您呈现…」的自我吹捧、内容为零的客套,就像书的目录页非要加一段「本书包含许多有趣章节,希望您喜欢」。识别法:读它时若听见脑后有个小声音说「blah blah blah」,那就是 happy talk。② 使用说明必须死——没人会读说明(除非反复蒙混失败后),目标永远应是靠「自解释」彻底消灭说明;实在必需就砍到骨头。
  • 边界:他不是说 WebMD 的医学文章或 NYTimes 的报道该变短——某些类型的写作(叙事、报道)本就该长。要砍的是那些「天生易过剩」的文字。
06

第 6 章 · 街牌与面包屑Street signs and Breadcrumbs

① 最佳案例:「去 Sears 买电锯」的商场寻物全过程。你进门,抬头看高处的部门大字招牌(大到能从店那头读到)——「工具?还是草坪园艺?」拿不准但总得从一处开始,于是奔向「工具」;到了工具部就看每条过道尽头的指示牌;觉得对了就看具体商品;猜错就换条过道、或退回去从「草坪园艺」重来。Krug 用这个谁都经历过的场景,把抽象的「网页导航」翻译成「招牌体系(层级)+ 你扫货架的能力」,并指出网页与商场最大的不同:网上没有一个站在那儿能告诉你东西在哪的店员——网页版的「问路」就是搜索。

② 核心主张:导航不是网站的一个功能,导航就是网站本身(如同建筑、货架、收银台就是 Sears 本身)。「没有导航就没有『那儿(there there)』。」因为网页天生缺少我们一生赖以在空间中导航的线索,所以导航必须靠把站点层级可视化来补偿——重建一种「我在哪、这里有什么、怎么用」的踏实感。

③ 论据 / 推演 / 前提:

  • 网页空间的三个怪异之处导致「迷失在太空」:没有比例感(不知站点多大、不知看没看全、不知何时该停——所以已点过的链接变色很有用);没有方向感(没有左右上下,只有层级里的「上下」);没有位置感(脚不沾地,点一下就被「瞬移」过去,没有沿途的空间体验)。这正是我们说「网页导航」却不说「百货商店导航」「图书馆导航」的原因——「搞清自己在哪」在网上是个普遍得多的问题。
  • 导航被忽视的功能:除了「帮我找到」和「告诉我在哪」,它还告诉我这里有什么(导航即揭示内容!这甚至比指路更重要)、隐含地告诉我怎么用这个站(如果导航称职,它就是你需要的全部说明)、以及给我对建站者的信心(每一刻我们都在心里算账:「这帮人靠谱吗?」)。
  • 关键构件:持久导航(persistent / global navigation)——出现在每页、用「平静安抚的口吻」说「导航一直在这儿、一直这么用」;它应含四要素:站点 ID、各大区(Sections / 主导航)、工具(Utilities,约 4–5 个最常用,其余塞页脚)、回首页的按钮、以及一个搜索框(公式:一个框 + 一个按钮 + 「Search」字样或放大镜图标;别花哨措辞、别加说明、慎给范围选项)。唯一例外是表单页——可只留站点 ID、回首页和必要工具。
  • 页名(page names)是网页的街牌。四条要求:每页都要有名字(不能只靠在导航里高亮就算);名字要在对的位置(框住本页独有内容);名字要醒目(多数情况是页面上最大的字);名字要和我点的东西匹配——每个站都和访客有一份隐性的社会契约「页名将匹配我点进来时用的词」,违约一次就逼我多想一次、侵蚀信任。
  • 「你在这里(You are here)」指示器靠在导航条里高亮当前位置来对抗迷失;最常见的毛病是太微妙——设计师爱微妙,但赶时间的用户routinely 看不见。口诀:「如果你觉得某个视觉提示已经醒目得像根刺,那很可能意味着你得把它再加倍。」
  • 面包屑(Breadcrumbs)展示从首页到当前位置的路径,最适合层级很深的大站;最佳实践:放页顶、层级间用「>」、最后一项(当前页)加粗且不可点。
  • 标签页(tabs) Krug 仍然偏爱:自明、难以忽略、且有质感;但要做对——必须用图形制造「当前标签在最前面」的视觉错觉(当前标签换色 + 与下方内容物理相连,让它「弹」到前面,像「鸭子冲你扑来」)。
  • 章末的验收工具——后备箱测试(Trunk Test):想象你被蒙眼、锁进后备箱、拉到站内某个深页扔下,视线恢复时你应能毫不犹豫答出:这是什么站(站点 ID)?我在哪页(页名)?有哪些大区(Sections)?此层我有哪些选项(局部导航)?我在整体中的位置(「你在这里」)?怎么搜索?做法:随机选一页打印、举到一臂远或眯眼、尽快圈出这几样。蒙眼是因为「真正的考验不是你给足时间能不能找出来,而是这些元素是否清晰到无论你看不看仔细都会自己跳出来」。

用户浏览 vs. 搜索的大流程图:从「进入网站」一路到 LEAVE HAPPY / LEAVE UNHAPPY

藏宝图「第一次 vs. 之后」——首次乱走找路,熟悉后直奔目标

持久导航解剖图(Williams-Sonoma):站点ID/工具/分区/你在这里/页名/局部导航/页脚

漫画「我在 South Park…还在…现在在 Facebook」——用户常意识不到自己在哪个站

街牌类比:Covington Road 又大又清晰 vs. Russett Rd 又小又含糊——页名要像街牌一样醒目

三种版面对比:当前「页名」应当足够醒目、与内容呼应

我点了什么(Lug nuts)→ 我得到什么:名称匹配=信任无需思考,不匹配=挫败与不信任

经典漫画:熊站在国家公园「YOU ARE HERE」地图前——寻路全靠「你在这里」

标签页 BAD / BETTER / BEST:选中的标签要与下方内容相连、又要有对比(像鸭子冲你扑来)

07

第 7 章 · 网页设计的大爆炸理论The Big Bang Theory of Web Design

① 最佳案例:xkcd 那张「大学官网」漫画背后的维恩图——大学想在首页放的内容(董事会致辞、捐赠基金、各种部门促销)和用户来找的内容(图书馆时间、停车、考试安排、招生)几乎完全不重叠,唯一的交集只是「学校全名」(而且漫画还吐槽:有些大学官网连全名都没放)。这张图把「首页设计的根本困境」可视化到了极致:所有利益相关者都在抢首页这块「海滨地产」,结果最该传达的「这是个什么站」反而第一个被挤掉。Krug 说他看首页设计时常觉得自己像《第六感》里的男孩:「我看见利益相关者(I see stakeholders)。」

② 核心主张:你在新站/新页上度过的头几秒至关重要——这就是「网页设计的大爆炸理论」。首页必须尽快、尽清楚地回答用户进站时脑中的四个问题(这是什么站?这里有什么?我能在这儿做什么?为什么我该待在这儿而不是别处?)。首页设计中最该保住、却最常丢掉的那一样东西,就是「传达大局观(conveying the big picture)」——让人一眼明白「这到底是个什么」。

③ 论据 / 推演 / 前提:

  • 首页要背负的东西多到荒谬(站点身份与使命、站点层级总览、搜索、各种「钩子 teases」/内容促销/功能促销、时效内容、广告交易位、快捷入口、注册登录…),还要在恶劣条件下完成(人人都想要一块、连 CEO 都有意见、要 one-size-fits-all 取悦所有访客)。设计首页必然是妥协,而压力下「再塞一样」时,最该保的「大局观」恰恰最容易在混乱中丢失——因为团队内外总有人盯着促销、钩子、交易别落下,却没人对「把主旨讲清楚」有切身利害。
  • 有实验证据(「你只有 50 毫秒留下第一印象」):人在毫秒级就形成对页面的总体印象,且这些初印象和他们后来花时间细看后的评价高度一致——我们做的是快速判断,但它相当可靠地预测了深思熟虑后的评价。更糟的是,如果初印象错了(「这是个 ___ 的站」),人会把这个错误解释强加到之后看到的一切上,越错越离谱(「越来越迷路」)。
  • 即便「现在没人从首页进站了」(多数人从邮件/博客/社交链接直达深页),首页依然重要——人会「像潜水员浮上水面看自己在哪」一样回到首页找方向、判断这个站可不可信。所以每个页面都该尽力定位用户,但首页仍是这件事发生的地方。
  • 传达大局的三处显式位置:tagline(紧挨站点 ID 的一句话,最能概括全站purpose)、欢迎语块(Welcome blurb,简短、放在内容区左上或中央)、「了解更多」(短解说视频)。好 tagline 的属性:清晰且有信息量、长短适中(6–8 个词)、传达差异化和明确好处(Nielsen:好 tagline 应该是「世上除了你没人能用的那句」)、个性鲜活有时机智;别把 tagline 和 motto(口号/理念)混为一谈——「我们点亮生活」是 motto,传达不了「你是干嘛的」。指导原则:该用多少空间就用多少(Kickstarter 因为命题新颖,明智地用了大量首页空间解释自己),但别用超过必要的空间;别拿公司使命陈述当欢迎语;这是最该测试的东西,因为「主旨缺失」恰恰是组织内部没人会注意到的那一个。
  • 第五个问题(知道「这是什么」之后):进站扫一眼,我应能自信地说出「想搜的话从这儿开始 / 想浏览从这儿 / 想尝鲜从这儿」。让入口看起来像入口、并清楚标注。
  • 「共地悲剧(tragedy of the commons)」框架解释了首页为何不断变臃肿:促销「太有效」了,任何上首页的链接几乎必然带来巨大流量增长,于是每个利益方都想要一个;但收益归被促销的版块独享,而首页整体效力下降的代价由所有版块共担——于是每个「理性的牧人」都往公地里再添一头牛,公地注定毁灭。对策:教育所有利益相关者认识「过度放牧首页」的危险,给他们别的导流办法(从其它热门页交叉促销、轮流共用同一块首页空间)。

维恩图:大学官网首页「想放的内容」与「用户来找的内容」几乎不重叠,只交于「学校全名」

08

第 8 章 · 「农夫与牛仔应该做朋友」The Farmer and the Cowman Should Be Friends

① 最佳案例:「网页设计搞笑剧:宗教辩论」——一屋子人就「大多数人喜不喜欢某种设计」争得面红耳赤、各执一词、谁也说服不了谁。Krug 把这类无休止的讨论叫「宗教辩论(religious debates)」:和谈宗教、谈政治一样,全是人们对「无法被证明的事」表达强烈的个人信念,名义上是为了商定「把重要的事做好的最佳方式」,结果几乎从不让任何人改变观点,只是浪费时间、制造紧张、侵蚀团队互相尊重、并常常让团队做不出关键决策。书名借自音乐剧《俄克拉荷马!》——「一个爱扶犁、一个爱赶牛,但这不是他们不能做朋友的理由」。

② 核心主张:大多数关于可用性的争论都是浪费时间,而它们之所以几乎不可避免,是因为团队里同时存在「个人激情」和「专业激情」两层投射,背后还藏着一个最阴险的信念——相信存在一个「平均用户(Average User)」。真相是:没有平均用户;所有网页用户都是独特的,所有网页使用本质上都是特异的(idiosyncratic)。 唯一的解药是测试。

③ 论据 / 推演 / 前提:

  • 个人激情:搞网站的人自己也是网页用户,对喜欢/讨厌什么有强烈感受,且很难在工作时把这些感受留在门外,于是自然地把自己的好恶投射到「用户」身上——「我们倾向于认为大多数用户和我们一样」。
  • 专业激情(农夫 vs. 牛仔):团队里不同工种对「什么是好设计」有迥异视角,而且很可能正因为他们「是这样的人」才干了这行——设计师享受优雅的视觉(有内啡肽参与),开发者喜欢复杂、爱琢磨things 怎么运作(也有内啡肽);因为这些反应发生在脑化学层面,他们很难想象别人不是这么感受的。设计师想要好看,开发者想要有趣原创的功能,冲突在定优先级时爆发。此外两者还常联手卷入更大的「炒作文化 vs. 工匠文化」之争(管理层/市场/BD 负责吹牛拉投资,设计开发负责兑现承诺)——书里有个真事:某显著网站首页有个莫名其妙的功能,一问,答曰「哦那个,是我们 CEO 梦里梦到的,所以只好加上」。
  • 平均用户的神话之所以最坏,是因为它强化了「好设计 = 搞清大多数人喜欢什么」这个错误观念,把一切(下拉菜单、长页 vs. 多短页、首页轮播、大菜单…)简化成非黑即白的好/坏。但对大多数(重要的)网页设计问题没有简单的「正确答案」——管用的是「好的、整合的、填补需求的、深思熟虑、执行到位、且经过测试的设计」。
  • 因此问对问题很关键:别问「大多数人喜欢下拉菜单吗?」,要问「这一个下拉菜单、带这些条目、用这种措辞、在这个语境下的这一页上,对这个站可能的多数用户来说,是不是创造了好体验?」回答这种问题只有一条路——测试:用团队的集体技能把东西做出来(哪怕粗糙版),看真人怎么用。测试把讨论从「谁对谁错、谁喜欢谁不喜欢」搬到「什么管用、什么不管用」,并通过让你亲眼看到用户多么千差万别,让你很难再坚持「所有用户都和我们一样」。

网页设计搞笑剧:宗教辩论——人人都有设计意见、各执一词争论不休

09

第 9 章 · 每天一毛钱做可用性测试Usability testing on 10 cents a day

① 最佳案例:一整段「Janice 测 eLance」的逐字测试实录。25 岁的 Janice 看着首页念叨「我喜欢这个橙色…『全球服务市场』…我不知道这是什么意思」,慢慢猜「好像是买卖…某种东西…哦看下面这些分类,法律、金融、创意,都像是服务,那就是买卖服务吧」;接着做任务「找人给我搭个露台」,她点进「家居改善」却卡在「RFPs」和「Fixed-Price」之间——「固定价格我大概懂,他们给我报价然后得照办;但 RFP 是啥我不确定」,于是选了 Fixed-Price——而她其实搞反了(RFP 才是能拿到她想要的报价的那个选项)。Krug 点评:「这正是那种常常让建站者大吃一惊的误解。」这段实录把抽象的「看真人用」变成了可触摸的细节,也示范了主持人怎么不诱导、怎么把追问留到最后。

② 核心主张:可用性测试不必是大工程。你可以在没时间没钱的情况下自己做(DIY)。关于测试最重要的几条真理是:想要好网站就必须测;测一个用户,比一个都不测好 100%;项目早期测一个用户,胜过临近结尾测 50 个。具体节奏:每月一个上午、测三个用户、午餐时复盘、当场决定下月修哪几条、并聚焦修最严重的问题。

③ 论据 / 推演 / 前提:

  • 先正本清源:焦点小组(focus group)不是可用性测试。焦点小组是 5–10 人围坐聊「意见/感受/对概念的反应」,适合在规划阶段判断「你是否在做对的产品、价值主张是否吸引人」;可用性测试是「一次看一个人真的去用东西做典型任务」,贯穿整个开发过程。核心区别:一个是听人谈,一个是看人用。
  • 为什么三个用户够:这种测试的目的不是证明任何事(证明需要大样本的定量测试),而是定性地改进(im-prove)——找出并修掉问题,产出的是「可行动的洞察」而非「证据」。你永远找不全所有问题,找全也没用——因为「你半天能找到的问题,比你一个月能修的还多」。所以重点是聚焦修最严重的,而三个用户极可能撞上与所测任务相关的多数严重问题;而且多跑几轮远比把单轮榨干更重要。
  • 为什么一上午一个月:保持简单你才会一直做;它给你够修一个月的东西;它把你从「何时测」的决策里解放出来(定个固定日,如每月第三个周四,别等里程碑——进度一滑测试就跟着滑);可预测的固定档期也让更多团队成员愿意来观摩。
  • 招募:「宽松招募,曲线评分(Recruit loosely and grade on a curve)」——尽量找像你受众的人,但别钻牛角尖;当某人遇到问题,自问「我们的真实用户会遇到这个吗,还是只因为他不知道我们用户知道的东西?」理由:不该把站设计成只有目标受众能用;「扒开任何专家,底下都是个在更高层级蒙混的人(We're all beginners under the skin)」;专家很少会被「对新手足够清楚」的东西冒犯。
  • 谁主持:几乎人人能当主持人,关键是耐心、平和、共情、会倾听;主持人最主要的工作是鼓励参与者尽量出声思考(think out loud)——「看他做什么 + 听他边做边想什么」才能让观察者透过别人的眼睛看产品。测试中别问诱导性问题、别给提示(除非彻底卡死),他求助就回「如果我不在你会怎么做?」。
  • 谁观摩:越多越好!观摩对观察者常是「变革性体验」,让他们突然「get 到用户不都和自己一样」——所以用最好的零食(巧克力可颂特别管用)把人(团队、利益相关者、经理甚至高管)骗进来。
  • 复盘与「聚焦修最严重的」:测完立刻边吃午饭边复盘(订贵的好披萨提高出席率)。方法:每人说出本场观察到的三个最严重问题→集体列在白板上(「我也是」打勾)→选出最严重的十个→排序→自上而下写「下月怎么修、谁来修、要什么资源」,把时间资源分配完就停。诀窍:另列一张「唾手可得的果子(low-hanging fruit)」清单(一人一小时内能修、不用谁批准的);抑制「加东西」的冲动(用户没 get 到时团队第一反应总是加说明,但往往正确解法是拿掉遮蔽含义的东西);对「新功能」请求持保留(让参与者描述它怎么工作,他们常会自己说「想想我大概也不会用」——参与者不是设计师);忽略「皮划艇问题(kayak problems)」(用户短暂走偏但立刻自己回到正轨、毫不受影响,就像皮划艇翻了又自己正过来,无伤大雅)。
  • 两种变体:远程测试(用屏幕共享,把招募池从「住你办公室附近的人」扩到「几乎任何人」)和非主持远程测试(如 UserTesting.com,发任务+链接,平均一小时内就能看到有人边做边出声思考的视频)。Krug 还为此专门写了本姊妹小书《Rocket Surgery Made Easy》,把本章流程展开到一步步可操作。

《Rocket Surgery Made Easy》封面——作者写的自助可用性测试姊妹篇

日历:把可用性测试固定成「每月一个上午」的例行公事

10

第 10 章 · 移动端Mobile: It's not just a city in Alabama anymore

① 最佳案例:Krug 自述「我不用 iPhone 上的 CBS News」。它把新闻拆成(对他而言)太小的碎块、每块加载很久,更气人的是每翻一页都得先滑过同一张照片才够到下一小口文字——「点开故事,然后等、等、等;加载完滑过照片;读两段,点下一页,再等、再等;为读完一整篇重复 8 次」。烦到他在刷 Google News 时一看到某条来自 CBS 的链接,就改点「更多来源」换一家。Krug 用这个亲身体验引出全章核心:大多数移动可用性问题,归根结底是一个糟糕的「取舍(tradeoff)」决策的结果——CBS 这个糟糕体验显然不是没想过,而是某次「激烈辩论后达成的妥协」(也许为了页面浏览量/广告,也许是 CMS 切分内容的方式),只是那个取舍没给「为用户创造好体验」足够的权重。

② 核心主张:移动端的基本可用性原则和桌面没什么不同(人在小屏上动得更快、读得更少而已),但有几个真正的差异制造了新难题,而它们大多可归结为「做好取舍」。一条压舱石口诀:「应对地产(屏幕空间)挑战,不应以牺牲可用性为代价。」

③ 论据 / 推演 / 前提:

  • 设计的本质是约束 + 取舍:约束(必须做的、不能做的)+ 取舍(为在约束内生活而做的不那么理想的选择)。「套用林肯的话,你最多只能让一部分人在一部分时候满意。」(Krug 顺带吐槽:网上 92% 归到名人头上的金句他们根本没说过。)有种说法认为约束反而让设计更容易、激发创新(沙发要塞进这个空间配这个色调,有时比漫无目的逛更好找)——你信不信无所谓,反正只要在设计,就在和约束打交道,有约束就有取舍要做。
  • 小屏的暴政(itty-bitty living space):处理小空间的一招是「留白做减法」——做个全站子集的移动版,但「砍哪些」很棘手。Mobile First 是好主意(逼你确定什么才真正essential),但被一些人误解成「按『人在移动时想做什么』来取舍」——假设用移动版的人都「在路上」。结果错了:人同样会窝在家沙发上用手机,且想要、也期望能做所有事(或者说每个人都想做某些事,加起来就是所有事)。要包含一切,就更要狠抓优先级:常用/急用的近在手边,其余可以隔几次点击但要有明显路径。小屏导致移动站常比桌面版更「深」(要往下点三四五层),点击变多没关系——只要用户持续相信想要的东西就在更下面/那个链接后面,他们会一直点下去。
  • 培育变色龙(响应式/可伸缩设计):两条真相——「很费工」「很难做好」。过去可伸缩设计是可选项,现在小屏占领世界,人人都得让站在任意屏上可用。「记两套账」(为同一东西维护多个独立版本)是通往疯狂的捷径。三条建议:允许缩放(即便没资源「移动化」,至少别让站抗拒在手机上缩放);别把我晾在大门口(点邮件/社交里的链接应直达那篇文章,而非甩你到移动版首页让你自己找);始终提供「完整版网站」的链接(移动版再全也要给用户看非移动版的选项)。
  • 别把可供性藏起来(Don't hide your affordances under a bushel):可供性(affordances)是物体设计中暗示「怎么用它」的视觉线索(Don Norman 在《设计心理学》里推广,新版改叫 signifiers,但 Krug 嫌改了头疼、仍叫 affordances)。如带边框的方框暗示「可以点进去打字」。可供性要起作用就得可被注意到,而「按定义,可供性是你最不该藏的东西」。移动端的一些特性让它们变得不显眼甚至隐形:
    • 没有光标 = 没有悬停(hover) = 没有线索:电容触摸屏感知不到手指悬空,所以没有光标,于是一大批依赖 hover 的有用特性(工具提示、指上去变色/变形表示可点、悬停就展开内容的菜单)在移动端不复存在,设计师必须找替代。
    • 平面化设计(Flat design):朋友还是敌人?——可供性需要视觉区分,而平面化的潮流恰恰反向而行(移除视觉区分、把界面元素「压平」)。它好看、也能让屏幕显得不那么杂乱,但代价是:平面化往往不仅带走了可能分散注意的装饰,也带走了那些更有质感的元素本来在传达的有用信息。引导注意到一个可供性所需的区分常是多维的(位置 + 格式:在导航条里 + 反白/全大写才告诉你这是菜单项),平面化从调色板里拿掉了若干维度,就更难区分东西。结论:平面化你随便做(可能还是被迫的),但务必用上所有剩下的维度来补偿你失去的。
  • 速度即一切:「你确实可能太有钱或太瘦,但电脑永远不嫌太快」——尤其在移动端,慢 = 用户挫败 + 出版方流失好感(例:AP 的突发新闻推送很棒,但每次点开都非要先加载一大堆其它头条的照片才肯给你看详情,于是 Krug 养成新习惯:AP 一推送,他立刻去 NYTimes 或 Google News 看人家有没有这条)。要小心你的响应式方案别给页面塞进远超用户屏幕所需的大量代码和图片。
  • 可用性的三个属性 vs. 时髦词:有人把 usable 定义成 useful / learnable / memorable / effective / efficient / desirable / delightful 一长串,但 Krug 只盯三个核心:「一个能力和经验中等(甚至偏下)的人,能搞懂怎么用它 [可学习] 来完成某事 [有效],且不至于得不偿失 [高效]。」其中delight(愉悦)是 UX 的「附加题」——来自「把一件人们很想做却没想到可能的事,与一个用新技术实现它的妙点子结合」(SoundHound 能听歌识曲并同步滚动歌词就是范例),但别为了 delight 忘了先把它做 usable。learnable(可学习):功能一多就难学(以 Clear 这个 to-do App 为例,它创新好玩但有「列表层/条目层/设置层」三级,Krug 在演示测试里让人新建一个「芝加哥行」列表加三项——「至今无人成功」,因为人搞不懂有层级、即使记得也不会在层级间导航,于是连帮助页都到不了,Catch-22)。memorable(可记忆):最好的「易重学」就是「第一次就极易学」;反例是绘图 App ASketch,他爱它但「每次打开都想不起怎么新建一幅画」,每次都得把双击/三击/各种滑动多指点试一遍——可记忆性常决定一个 App 会不会被长期采用(移动端「生命很廉价,99 美分而已」)。
  • 移动端测试基本同第9章(同样编任务、看人做、催出声思考、把追问留到最后、尽量拉人现场观摩),不同的几乎全是器材学(logistics):移动端缺好用的屏幕共享/录屏工具(系统多禁后台进程、设备马力也不够)。Krug 的建议:用对着屏幕的摄像头而非镜像(镜像看不到手势和点按,「看不到手指就像看自动钢琴」);把摄像头固定到设备上(这样用户能自然手持、画面仍稳定在焦内);别费劲对着脸架第二个摄像头(脸部摄像头是干扰,从语气就能听出用户感受)。他自己用书灯夹子 + 摄像头 DIY 了个约 30 美元、一小时做成的轻量「Brundlefly」相机鉴架来证明可行。压轴判断:「移动就是我们未来要生活的地方」,确保可用性别在变迁中丢失——最好的办法仍是测试。

三个手机 App 界面(SoundHound 等)——移动端的可用性范例

11

第 11 章 · 可用性即基本礼貌Usability as common courtesy

① 最佳案例:「航空公司罢工」的亲身遭遇。Krug 订了飞丹佛的机票,恰逢航司和工会集体谈判的最后期限。他做了任何人都会做的事:每小时刷 Google News,并上航司官网看官方说法——结果整个网站从首页到 FAQ 没有一个字提到这场迫在眉睫的罢工。「罢工?什么罢工?」可那天早上,手握下周机票的几十万人心里只有一个高频问题:我会怎么样?(会不会罢工?谈判现状?真罢了怎么办?怎么改签?你会怎么帮我?)——网站一概沉默。无论真实原因是哪个(没有应急更新首页的流程 / 法律商业上不愿承认 / 没想到有人关心 / 就是懒得管),它都「出色地耗光了我对这家航司和它网站的全部好感」,把人家一年砸几亿美元擦亮的品牌在他这儿擦掉了一层光。

② 核心主张:可用性除了清晰(clarity)这一面,还有「做正确的事、体贴用户」这另一面。除了问「我的站清楚吗?」,你还要问「我的站表现得像个 mensch(正派、靠谱、会做对的事的人)吗?」一个有用的心智模型:每个用户进站时都自带一座「好感水库(reservoir of goodwill)」,每遇到一个问题水位就下降一点,耗光了人就走。

③ 论据 / 推演 / 前提:

  • 好感水库的四个特点:因人而异(有人天生储量大、有人小、有人更多疑或更暴躁,你不能指望储量大);因情境而异(我若赶时间或刚在别处吃了瘪,进你站时好感可能已经很低);可以再充满(即便你犯错降了我的好感,做些让我觉得「你在为我着想」的事就能补回来);有时一个错误就能把它清零(比如一打开就是个几十栏的注册表单,有些人的储量瞬间归零)。负面结果不止「离开」——还可能不再爱用、看低你的组织、在社交媒体上痛骂你(市场部的 NPS 会掉)。
  • 消耗好感的典型做法:藏我想要的信息(最常被藏的是客服电话、运费、价格——藏客服电话是为了省钱少接电话,效果却是降好感、且他们费劲找到号码后更生气;反之 800 电话明摆着、甚至每页都有,「知道想打就能打」往往反而让人愿意在站上多找一会儿自助解决);因我没按你的方式做而惩罚我(不该让我操心数据格式——信用卡号要不要空格、电话要不要括号;很多站偏要求信用卡号不能有空格,可空格明明更易输对——别让我为「你不想多写几行代码」跳火圈);问我并不真需要的信息;对我「装」(faux sincerity,「您的来电对我们很重要」式的虚情假意);拿「噱头(sizzle)」挡道(让我趟过一堆 feel-good 营销大图,摆明你不在乎我在赶时间);站看起来很业余(虽然几乎没人会只因为站「不够好看」就离开——Krug 说测试时要忽略用户对颜色的一切评论,除非四个里有三个用「想吐 puke」这种词形容配色,那才值得重想)。
  • 补充好感(多数是上面那张清单的反面):搞清人们来你站上主要想做的事,并把它做得显眼又简单(即便对网站其它一切看法相左的人,问「用户最想做的三件事」时答案常一致——可惜「把这三件事做容易」往往没成为它本该是的最高优先级);告诉我我想知道的(运费、酒店每日停车费、服务中断——这些你宁可不坦白的事,坦白往往为「诚实 + 便于我应对」赢回的分,多于因价格高丢的分);能省我步骤就省(别只给我快递单号,在邮件回执里放个一点就自动提交单号、打开物流站的链接——Amazon 是第一个这么干的);用心去做(最爱的例子是惠普技术支持站,看得出花了巨大功夫生成、核准、清晰呈现、并组织好我需要的信息——他几乎每次打印机出问题都能自助解决,于是一直买惠普);知道我可能有什么问题并回答它(真正的 FAQ,不是伪装成 FAQ 的营销话术「我们希望用户问的问题 QWWPWA」,且要保持更新、要坦诚);提供「打印友好页」之类的体贴小确幸;让从错误中恢复变容易;实在做不到时,至少道歉(你没能力/没资源满足用户时,至少让他们知道你知道给他们添麻烦了)。
  • 一条诚实的边界:有时为商业利益故意做点用户不喜欢的事是合理的(如未邀的弹窗几乎总惹人烦,但若数据显示用弹窗能多 10% 收入、你认为值得惹恼用户,那就做——这是商业决策)。关键是「在知情的情况下」做这个取舍,而不是无意中造成。

漫画「你那句『话务繁忙』让我等了20分钟…我的来电对你重要,我的时间却不重要」——消耗用户好感的典型做法

12

第 12 章 · 无障碍与你Accessibility and you

① 最佳案例:芝加哥出租车后座那块「巧妙的盲文牌」。乍看是块普通的牌子,但它捕捉光线的方式让 Krug 多看了一眼——原来牌面覆了一层薄薄的有机玻璃,盲文就压凸在这层玻璃上。通常印刷字和盲文都得缩到一半大才能挤在一块牌子上,但这个设计让两类受众都得到了最佳体验,是个优雅的解法。Krug 用它对冲设计师对无障碍的最大恐惧——「黄油猫(buttered cats)」式的两难(为残障者做的好设计 vs. 为其他人做的好设计正面冲突,逼你做出对多数人更难看也更难用的站)——证明无障碍未必等于妥协设计。

② 核心主张:无障碍(accessibility)就是可用性(usability)的一部分——除非你索性决定残障人士不属于你的受众,否则一个站不无障碍就谈不上可用。而且最重要的理由只有一个:「这是正确的事,而且是『深刻地』正确的事」——「能上网的盲人现在可以自己读几乎任何报纸杂志了,想想这个。我们有多少机会能仅仅靠把本职工作做好一点点,就如此戏剧性地改善一些人的生活?」

③ 论据 / 推演 / 前提:

  • 几乎每个站都过不了 Krug 的「三秒无障碍测试」——放大字号(只有那些已脱离固定字号的站——通常是用心做过无障碍的好指标——才会响应 Text Size)。
  • 现实地剖析了设计师/开发者为何不买账:他们听到的标准理由(「X% 的人有残疾」「让东西更无障碍对所有人都有好处」)对一群 22 岁的健全人没说服力——「X% 有残疾」让他们觉得是为崇高事业夸大其词,而「一个论点明显不实,我就有权怀疑其余的」;「对所有人都好」每次都只举闭路字幕这一个例子,听起来像「太空计划值得搞因为给了我们 Tang 橙汁粉」。他们还有两怕:更多工作(像又一件塞不进排期的复杂新事,最坏还作为上头的「倡议」砸下来带着报告评审任务组会议)和妥协设计(黄油猫之忧,担心被迫做对多数人更差的站,像冯内古特小说里靠给每个人施加障碍来制造平等)。
  • 但 Krug 诚实承认「让站无障碍,确实可能很复杂、也比它本该的更难」——把站丢进校验器,它更像语法检查器而非拼写检查器(除了能找到漏掉 alt 文本这类明显错误,还会吐出一堆模糊警告和「可能不是问题」的建议,把刚入门的人吓退)。大多数设计师/开发者不会成为无障碍专家;要让无障碍普及,工具和适配技术得更聪明、设计流程得从一开始就纳入无障碍思考。
  • 现在就能做的四件事(聚焦影响最大、且都离黄油猫远远的):
    • #1 先修那些让所有人都困惑的可用性问题——这才是把「Tang 论证」反过来用:让站对「我们其余人」更好用,是让它对残障者更有效的最有力方式之一(「人不会因为有残疾就突然变聪明」,而且他们更难从困惑中恢复)。改善无障碍最该做的第一件事就是常测试、持续抹平让所有人困惑的地方;不先做这个,无障碍准则用得再严,残障者照样用不了——底子不清晰时只修代码问题,就像「给猪涂口红」。
    • #2 读一篇文章——最好的学法是看真人用,但多数人没看过别人用辅助技术。幸好 Mary Theofanos 和 Ginny Redish 替你做了重活,观察 16 位盲人用屏幕阅读器做任务并写成文章。一个范例洞察:「屏幕阅读器用户用耳朵扫描(scan with their ears)」——多数盲人和明眼人一样没耐心,不听每个词,只听够判断「要不要继续听」(很多人把语速调到惊人地快);他们听链接或一行字的头几个词,不相关就迅速跳到下一个——所以关键词若不在链接/行首,盲人可能根本听不到。
    • #3 读一本书(推荐 Horton & Quesenbery 的《A Web for Everyone》和 Thatcher 等的《Web Accessibility》,先抓大局即可)。
    • #4 摘唾手可得的果子(落地具体改动):给每张图加恰当的 alt 文本(装饰图用空 alt 让屏幕阅读器忽略);正确使用标题(用 <h1>/<h2>/<h3> 表达逻辑结构、再用 CSS 改外观);用 <label> 让表单能配合屏幕阅读器;每页开头放「跳到主内容」链接;让所有内容可用键盘访问;文字与背景制造足够对比(别在深灰底上放浅灰字);用无障碍的模板(如 WordPress 选已做无障碍的主题)。
  • 一个略带悲凉的注脚:七年前写这章时他希望「五年后能直接删掉本章」,因为工具/浏览器/屏幕阅读器/准则都会成熟到「不用刻意想就能建无障碍的站」——结果再版时只能叹气「Sigh.」「希望这次运气好点。」
13

第 13 章 · 给困惑者的指南Guide for the perplexed

① 最佳案例:「让你老板(和他老板)来看一次可用性测试」这一招。Krug 说他听过最管用的战术,就是把食物链上层的人请来现场观摩哪怕一场测试(理由就说「我们要做点测试,您来探个头几分钟,对网页团队士气会很好」)。他的经验是:高管常会看入迷、待得比计划久——因为这是他们头一回看见有人真的去用公司的网站,而那画面往往远没他们想象的好看。「现场看测试和听汇报的区别,就像现场看比赛 vs. 在晚间新闻听复盘——现场比赛创造难忘的记忆,晚间新闻不会。」这一招把「在组织里推动可用性」从「靠嘴说服」变成了「让事实自己说话」。

② 核心主张:本章回答一封 Krug 常收到的来信——「我懂了,可用性很重要,我真想自己做;可怎么说服我老板、老板的老板认真对待用户、并让我有时间去做?」他的答案核心是:少讲道理,多创造『让别人亲眼看见用户的时刻』;从小处、用自己的时间偷偷做出第一个成果;并以谦卑和真正的共情对待管理层。 最后,他给可用性这门「用户代言人」的职业划了一条道德底线——抵抗「暗黑势力」:不帮人操纵用户。

③ 论据 / 推演 / 前提:

  • 先认清地形:1990 年代末人们用 Usability 和信息架构(IA)来描述「以用户为中心」的努力;现在最常听到的是「用户体验(UX)」,底下有一打专业(交互设计、界面设计、视觉设计、内容管理…加上可用性和 IA)。UCD 和 UX 的差别在范围——UCD 聚焦「设计对的产品并确保可用」,UX 把用户需求贯穿到产品生命周期每一阶段(从看广告、购买、在线追踪配送,到去门店退货)。好消息是关注用户的意识更强了(乔布斯和 Ive 给 UX 立了极有力的商业范例,可用性比几年前更好卖);坏消息是可用性多了一堆争座位的「兄弟姐妹」,且没几个人懂这些专业各自独特的贡献。所以当有人说「我是做 UX 的」或「可用性是 2002 年的老黄历了,现在都讲 UX」,你就优雅地微笑、问几个问题:你怎么了解用户?怎么测人们能不能用你做的东西?怎么让改动真的发生?「重要的不是我们怎么称呼自己,而是我们带来的态度和能贡献的技能。」
  • 常规建议(可做但都有局限):证明 ROI(拿数据证明某次可用性改动带来了省钱或增收,如「改这个按钮标签让销量涨了 0.25%」——但严谨做 ROI 很费工,且不够严谨时总有人说增值是别的原因造成的)和说他们的语言(学公司当下的棘手问题、用「痛点/触点/KPI/CSI」之类管理层热词描述你的工作——但学说「商业语」也难,那是 MBA 干的事)。
  • 「如果我是你」的实战战术(除了上面的「请老板来看测试」):第一次测试用自己的时间做(别申请许可,保持极简非正式、找志愿者当参与者所以零成本,并确保有东西因此变好——挑个你知道有至少一个能快速修掉、不用很多人签字的严重问题,比如给个标签糟糕的按钮改名,然后测它、修它、宣传它,能量化改进就量化);做一次竞品测试(人人都爱了解竞争对手,且测的不是自家站、没人有切身利害,是绝佳的「棕袋午餐」活动,也是为「做测试」造势的好办法);共情管理层(不是「怎么摸清他们的动机好让他们听我的」,而是真正从情感上理解他们所处的位置);认清自己在大局中的位置(在商界几乎每个人都只是庞大齿轮组里一个很小的齿轮,放下「我在给芸芸众生带来真理」的姿态,你的首要角色是「分享你所知,而非告诉别人事情该怎么做」)。他另推荐两本书:Tomer Sharon《It's Our Research》和 Leah Buley《The User Experience Team of One》(专为「公司里唯一一个做用户中心设计的人」写)。
  • 抵抗暗黑势力(Resist the dark forces):可用性本质是个用户代言人的工作——「像 Lorax 那样,为树(其实是为用户)代言」。但有种趋势是某些人 [咳,市场部,咳] 想让可用性从业者帮他们琢磨怎么操纵用户而非服务用户需求(甚至有本《Evil by Design》按七宗罪逐章教你怎么利用人性弱点)。Krug 的立场分得很清:帮人影响/说服用户没问题,只要不欺骗(出声思考协议常能揭示说服为何成败);他真正焦虑的是有人想用可用性测试判断某物是否「desirable(合人心意)」——这是市场研究问题,不是可用性测试擅长测的;而这些人往往根本不是想搞清/提升「是否合人心意」,而是想让可用性告诉他们怎么让人『以为』它合人心意,即操纵他们(从「默认勾选的隐蔽复选框替你订阅 newsletter」这种相对无害的,一路滑向「骗人装上不想要的浏览器工具栏、趁人不注意改默认搜索和首页」[咳,Yahoo,咳] 这种欺骗)。

3. 关键概念词典 GLOSSARY 逐条速查
术语 含义(1–2 句)
Don't make me think(第一定律) 可用性的最高原则、判断设计行不行的终极裁决:页面应让用户无需思考就「一眼看懂」是什么、怎么用。
自明 / 自解释(self-evident / self-explanatory) 自明=完全不费思考就懂;自解释=只需一点点思考就懂。做不到自明,至少要自解释。
扫描(scanning) 用户不通读、只快速掠过页面,找匹配任务/兴趣/触发词的词句;大片内容形同不存在。
将就(satisficing) satisfy + suffice,源自 Herbert Simon:不挑最优解,抓住第一个「看着差不多能行」的选项就点。
蒙混(muddling through) 不读说明、不弄懂原理,编一套貌似说得通的故事把东西将就着用起来,照样能把事办成。
信息气味(scent of information) 源自 Xerox PARC「信息觅食」研究:清晰无歧义的链接散发强气味,让用户相信点它会更接近目标。
无脑选择(mindless choice) 几乎不需思考、无歧义就能做对的选择(如「动物/植物/矿物」);第二定律的核心善意。
第二定律 点击次数不重要,每次点击「有多难」(需多少思考与不确定)才重要;三次无脑点击≈一次费脑点击。
第三定律 把每页文字砍掉一半,再砍掉剩下的一半;多数网页文字只是占地方、没人读。
Happy talk(欢迎词/客套话) 「欢迎来到…」式内容为零的自我吹捧;识别法:读它时脑后响起「blah blah blah」。该死。
惯例(convention) 广泛使用的标准化设计模式(停车标志、logo 在左上、购物车);用它把识别成本压到零。
清晰胜过一致(Clarity trumps consistency) 若把某物稍微做得不一致能让它显著更清晰,选清晰,别盲目供奉一致性。
视觉层级(visual hierarchy) 用尺寸/粗细/颜色/留白/位置/嵌套,让外观如实反映重要性、相似性、从属关系,替用户预处理页面。
横幅盲视(banner blindness) 用户在最初几瞥就判定某区域可能是广告,之后完全无视它,仿佛它不存在。
可供性(affordance / signifier) 物体设计中暗示「怎么用它」的视觉线索(带边框的框=可输入);Norman 新版改称 signifier。
持久/全局导航(persistent / global navigation) 出现在每一页的导航元素集合,含站点 ID、各大区、工具、回首页、搜索;让你只需搞懂一次。
页名(page names) 网页的「街牌」;每页都要有、要在对的位置、要醒目、且必须匹配用户点进来时用的词。
「你在这里」(You are here) 在导航里高亮当前位置以对抗「迷失在太空」;常见毛病是太微妙,用户看不见。
面包屑(Breadcrumbs) 展示从首页到当前页的路径;放页顶、用「>」分隔、末项(当前页)加粗不可点;适合深层级大站。
后备箱测试(Trunk Test) 验收导航的「酸性测试」:被蒙眼丢进任意深页,能否瞬间答出站点ID/页名/大区/此层选项/位置/搜索。
大爆炸理论(Big Bang Theory) 进站头几秒决定一切;初印象会被强加到之后看到的一切上,错了就越来越迷路。
大局观(the big picture) 首页最该传达、却最常丢掉的东西——让人一眼明白「这到底是个什么站」。
Tagline 紧挨站点 ID 的一句话价值主张(≈6–8 词、清晰、差异化);区别于表达理念的 motto(口号)。
共地悲剧(tragedy of the commons) 共享资源会因过度使用而毁灭;解释首页为何不断变臃肿(人人想要链接、收益独享代价共担)。
宗教辩论(religious debates) 团队就「无法证明的事」表达强烈个人信念的无效争论,浪费时间、侵蚀尊重、阻碍决策。
平均用户的神话(myth of the Average User) 「没有平均用户;所有用户都是独特的」;好设计不是搞清大多数人喜欢什么,而是测出什么管用。
焦点小组 vs. 可用性测试 焦点小组是「听人谈意见/感受」(规划阶段用);可用性测试是「看一个人真的用东西做任务」(全程用)。
DIY 可用性测试 没时间没钱也能自己做:每月一上午、三用户、午餐复盘、聚焦修最严重问题。
宽松招募,曲线评分(Recruit loosely, grade on a curve) 尽量找像受众的人但别钻牛角尖;某人遇问题时自问「真实用户会遇到吗」来折算。
出声思考(think out loud) 测试中让参与者边做边说脑中所想;「看他做什么+听他想什么」是透过别人的眼睛看产品的关键。
皮划艇问题(kayak problems) 用户短暂走偏但立刻自己回正、毫不受影响的小插曲,可安全忽略(无伤大雅)。
聚焦修最严重的(Focus ruthlessly on the most serious) 你能找到的问题永远比能修的多;优先修最严重的,别被「唾手可得的果子」带偏。
取舍(tradeoff) 在约束(必须做/不能做)内做的不那么理想的选择;多数严重可用性问题源自一个糟糕的取舍。
Mobile First 先设计移动版(逼你确定什么最essential)再加功能成桌面版;但别误解成「只按移动时想做什么取舍」。
响应式/可伸缩设计(responsive / scalable design) 一个站适配多种屏幕;两条真相:很费工、很难做好;别「记两套账」。
平面化设计(Flat design) 移除视觉区分、压平界面;好看但易连同有用信息一起抹掉,削弱可供性,须用剩余维度补偿。
可用性三属性 Krug 的核心定义:可学习(learnable)+ 有效(effective)+ 高效(efficient);愉悦是「附加题」。
好感水库(reservoir of goodwill) 用户进站自带一座好感水库,每遇问题水位下降;因人/情境而异、可补充、有时一个错误即清零。
Mensch 意第绪语,指正派、靠谱、会做对的事的人;好网站应「表现得像个 mensch」。
QWWPWA 「我们希望用户问的问题」——伪装成 FAQ 的营销话术,真 FAQ 的反面。
无障碍即可用性(accessibility = usability) 除非残障者不属于你的受众,否则不无障碍就谈不上可用;最该做的第一件事是先修让所有人困惑的问题。
黄油猫(buttered cats) 设计师对无障碍的最大恐惧:为残障者好的设计与为其他人好的设计正面冲突(其实未必)。
用耳朵扫描(scan with their ears) 屏幕阅读器用户和明眼人一样没耐心,只听链接/行首几个词判断要不要继续,常把语速调到极快。
抵抗暗黑势力(Resist the dark forces) 可用性是用户代言人的工作;可帮人「说服」用户(不欺骗),但拒绝帮人「操纵」用户。

4. 方法论 / 框架 FRAMEWORKS

可被直接复用的操作清单/模型:

A. 「别让我思考」自查(设计当场裁判)

  • 把每个待定设计放进这句话:「它会让用户停下来想吗?」会想 → 改。
  • 邻居测试:让一个对主题无兴趣、连后退键都用不利索的人瞥一眼,能否说出「哦,这是个 ___」。
  • 自明优先;做不到则确保自解释(靠尺寸/颜色/布局/好名字/少量好文案)。

B. 广告牌六件套(让飞驰的用户尽可能多接收)

  1. 利用惯例(没有更好点子时);2. 建立清晰视觉层级(越重要越显眼、相关的视觉相关、从属的嵌套);3. 把页面切成明确区块;4. 让可点的一看就可点;5. 把噪音压到最低(有罪推定,删一切无贡献的);6. 把文案格式化成可扫描(多标题、短段落、项目符号、加粗关键词)。

C. 三定律口诀(贴在工位上)

  • 第一定律:别让我思考。
  • 第二定律:点几次无所谓,只要每次都是无脑、无歧义的选择。
  • 第三定律:砍掉一半文案,再砍一半。

D. 难选择的「三性」引导:当某选择无法避免地难时,给的帮助必须 简短 + 及时 + 不可回避(伦敦「LOOK RIGHT →」范式)。

E. 后备箱测试(导航验收):随机选一页打印 → 举到一臂远或眯眼 → 尽快圈出 ① 站点 ID ② 页名 ③ 各大区(主导航)④ 局部导航 ⑤「你在这里」指示 ⑥ 搜索。圈不出/慢 → 导航不合格。

F. 首页四问 + 第五问:一眼能否答出「这是什么站?/ 这里有什么?/ 我能做什么?/ 为什么待这儿?」;再加「想搜/想浏览/想尝鲜分别从哪开始?」最该测的是「主旨是否清晰」(内部没人会注意到它缺失)。

G. 每月一上午 DIY 可用性测试(完整流程)

  1. 定档:每月固定一天(如第三个周四),别等里程碑。
  2. 招募:宽松招募、曲线评分;3 个参与者;激励略高于行情。
  3. 任务:列出用户需要能做的事 → 选够填满约 35 分钟的 → 仔细措辞、含必要信息、尽量让用户参与选任务。
  4. 一小时脚本:欢迎(4') → 背景提问(2') → 首页漫游(3') → 做任务(35',催出声思考、不诱导不提示) → 追问(5') → 收尾(5')。
  5. 观摩:尽量多人现场看(用好零食引人);每场休息时各自写下三个最严重问题。
  6. 午餐复盘:集体列问题(打勾)→ 选最严重十个 → 排序 → 自上而下写「下月怎么修/谁修/要什么资源」,分配完即停。
  7. 修复纪律:聚焦修最严重的;另列 low-hanging fruit;抑制「加东西」冲动(常该「拿掉」);新功能请求打折;忽略皮划艇问题。

H. 好感水库管理(礼貌清单)

  • 消耗项(避免):藏信息(电话/运费/价格)、因格式罚用户、问不需要的信息、装、噱头挡道、显得业余。
  • 补充项(多做):把「用户最想做的三件事」做得显眼又简单、坦白我想知道的、省我步骤、用心做、维护真 FAQ、给打印友好页、让错误易恢复、做不到时就道歉。

I. 移动取舍原则:设计 = 约束 + 取舍;管理屏幕空间不得以牺牲可用性为代价;包含一切但狠抓优先级;可供性最不该藏;平面化要用剩余维度补偿;速度即一切。

J. 无障碍当下四件事:① 先修让所有人困惑的可用性问题 ② 读 Theofanos & Redish 那篇文章 ③ 读一本无障碍的书 ④ 摘果子(alt 文本、正确用标题、<label>、跳到主内容、键盘可达、足够对比、无障碍模板)。

K. 在组织里推动可用性:请老板/高管来现场看一次测试(事实胜雄辩);第一次测试用自己时间、零成本、确保修出一个可宣传的成果;做竞品测试造势;共情管理层;分享而非说教。


5. 批判性审视 COUNTERPOINTS 另一种声音 · 编辑部整理,不代表原书立场

1. 「没有平均用户」与「每月测三个用户」之间有张力。 Krug 一面强调用户千差万别、所有使用都是特异的(第8章),一面又说三个用户足以暴露多数严重问题(第9章)。这两者其实是在不同断言层级上成立的:前者反对「用『多数人喜欢什么』来定设计」,后者只声称「定性发现最严重的障碍」(这些障碍恰恰是个体差异之下的共性)。书里讲清了「定性不是证明」,但一个不细读的读者很容易把「三个用户够」误用成「三个用户能代表全体/能给量化结论」。边界要记牢:DIY 测试给的是「可行动的洞察」,不是统计证据;涉及转化率、A/B 量化决策时它替代不了大样本方法。

2. 多为「直觉 + 第一人称轶事」,几乎不引数据。 全书的论据主体是 Krug 自己看测试的经验和精心挑选的故事(航司罢工、CBS News、Clear App…),硬证据只点了两处(Klein 的消防员研究、「50 毫秒第一印象」实验)。这让书极其好读、说服力靠共鸣而非统计,但也意味着很多论断本质是「资深从业者的高质量启发式」,不是被严格检验过的因果。对一个想拿它去说服 data-driven 团队的 PM,这是要心里有数的——它给你的是判断力和提问框架,不是可以甩到脸上的 benchmark。

3. 部分论断属「乐观假设」。 例如「专家很少被对新手清楚的东西冒犯」「把客服电话明摆着反而让人愿意在站上多待」——方向多半对,但都没有边界条件(什么场景、什么用户、多大比例会反转)。又如第12章他自己也承认「五年后删掉无障碍这章」的预言落空了(再版只能叹气),这恰恰诚实地暴露了书中一些乐观预期的失准。

4. 时代局限:例子和媒介老化,但原则没老。 全书围绕「桌面网页 + 早期移动」,大量例子(Williams-Sonoma、eLance、用 GoToMeeting/WebEx/Camtasia、DIY 摄像头鉴架)已过时;它没覆盖今天的原生 App 设计系统、暗黑模式、无限滚动信息流、推荐算法、以及对话式/生成式界面。但「降低思考成本、用户只扫不读、测真人而非争论」这套底层原则对新媒介反而更适用——这正是它能跨二十年再版的原因。


附 · 章节速览 AT A GLANCE
  • 第1章 别让我思考:可用性第一定律=设计的终极裁判;页面要自明,做不到则自解释;目标是消除用户脑袋上的问号。
  • 第2章 我们到底怎么用网页:用户不读只扫、不挑最优只将就(satisfice)、不弄懂原理只蒙混(muddle through);据此「设计伟大的广告牌」。
  • 第3章 广告牌设计101:用惯例、建视觉层级、分区、让可点的显眼、降噪、可扫描文案;清晰胜过一致。
  • 第4章 动物、植物还是矿物?:第二定律——点几次无所谓,每次都要是无脑无歧义的选择;难选择就给「简短+及时+不可回避」的引导。
  • 第5章 省掉废话:第三定律——砍一半文案再砍一半;欢迎词(happy talk)和使用说明必须死。
  • 第6章 街牌与面包屑:导航就是网站本身;持久导航/页名(街牌)/「你在这里」/面包屑/标签页;用后备箱测试验收。
  • 第7章 大爆炸理论:进站头几秒决定一切;首页最该保住的是「传达大局观」;tagline≠motto;当心首页的「共地悲剧」。
  • 第8章 农夫与牛仔应该做朋友:多数可用性争论是浪费时间的「宗教辩论」;没有平均用户;唯一解药是测试。
  • 第9章 每天一毛钱做可用性测试:DIY 测试——每月一上午、三用户、午餐复盘、聚焦修最严重;测一个用户好过一个不测。
  • 第10章 移动端:基本原则不变,难点全在「做好取舍」;管理屏幕空间不得牺牲可用性;可供性最不该藏;平面化要补维度;速度即一切。
  • 第11章 可用性即基本礼貌:好网站要像 mensch;用「好感水库」模型管理体验;列清消耗 vs. 补充好感的做法。
  • 第12章 无障碍与你:无障碍即可用性、是「深刻正确」的事;先修让所有人困惑的问题,再摘 alt 文本/标题/键盘可达等果子。
  • 第13章 给困惑者的指南:在组织里推动可用性——请老板来看一次测试、用自己时间偷偷做出第一个成果、共情管理层;抵抗「操纵用户」的暗黑势力。
这本书的邻居 NEIGHBORS 同书架 · 产品之道