点石成金——访客至上的网页设计秘籍

Ch1 · 别让我思考——Krug可用性第一定律

这是作者的可用性第一定律。它意味着，设计者应该尽量做到，当访问者看一个页面时，它应该是不言而喻、一目了然、自我解释的。

访问者应该能明白它——它是什么，怎样使用它——而不需要花费精力进行思考。

有时候，如果在进行一些崭新的、开拓性的或非常复杂的页面设计时，也许只能做到“自我解释”，在一个自我解释的页面中，用户需要花一点点时间去理解——但只需要一点点时间。

如果要让网页有效，就必须在用户第一眼看到它们时将自己展示出来。做到这一点最好的方法就是创建不言而喻的网页，或者至少也要做到自我解释。

Ch2 · 我们实际上是如何使用Web的——扫描，满意即可，勉强应付

第一个事实：我们不是阅读，而是扫描

人们会花极少的时间来阅读大部分的页面，其实，只是扫描一下（或匆匆掠过）网页，寻找能吸引我们注意力的文字或词语。

我们为什么扫描？

• 我们总是处于忙碌之中。大部分情况下，我们使用Web就是想节约时间，我们没有时间来阅读那些不必要的内容。
• 我们知道自己不必阅读所有内容。在绝大多数页面上，我们实际上只对其中的一小部分内容感兴趣，剩下的内容我们并不关心。
• 我们善于扫描。在日常生活中，我们一直在扫描报纸、杂志、书籍，来找到我们感兴趣的部分，我们知道这样做没有问题。

第二个事实：我们不作最佳选择，而是满意即可

设计页面时，我们通常假设用户只是扫过整个页面，考虑所有可能的选项，然后选择一个最好的。

事实上，大多数时间里我们不会选择最佳选项，而是选择第一个合理的选项，这就是满意策略。一旦我们发现一个链接，看起来似乎能跳转到我们想去的地方，那就是一个我们将会点击它的大好机会。

为什么Web用户不寻找最佳选择呢？

• 我们总是处于忙碌之中。寻找最佳策略很难，需要的时间也很长，满意策略效率更高。
• 如果猜错了，也不会产生什么严重的后果。在网站上做了一次错误选择的后果通常只是点击几次后退按钮，这样也使得满意策略成为一项有效的策略。
• 对选择进行权衡并不会改善我们的机会。在设计不佳的网站中，花费精力去做最佳选择并没有用，还不如查看猜到的第一个页面，不行的话再退回来。
• 猜测更有意思。猜测不会像仔细衡量那么累，如果猜对了，速度会更快。它还带来了一个机会因素——有可能无意中看到某个令人意外但还不错的内容，这种可能性让人开心。

当然，这并不是说用户在点击之前从不进行衡量，这要取决于他们头脑中的打算，时间上有多紧迫，还有，他们对这个网站的信心。

第三个事实：我们不是追根究底，而是勉强应付

只要做一些可用性测试，就会发现，很大程度上人们一直在使用这些东西，但并不理解它们的运作原理，甚至对它们的工作原理有完全错误的误解。还有很多人完全不是以设计师设想的方式使用网络和软件，但他们用得很好。

为什么会这样？

• 这对我们来说并不重要。对于我们中的大多数人来说，是否明白事物背后的工作机制并不重要，只要我们能正常使用它们即可。
• 如果发现某个事物能用，我们会一直用它。如果偶然发现一种更好的方法，我们会换用这种更好的方法，但很少会主动寻找更好的方法。

Ch3 · 广告牌设计101法则——为扫描设计，不为阅读设计

如果用户们都是疾驰而过，那么，我们需要注意一下5个重要方面，来保证用户尽可能看到了——并理解了我们的网站：

• 在每个页面上建立清楚的视觉层次。
• 尽量利用习惯用法。
• 把页面划分成明确定义的区域。
• 明显标识可以点击的地方。
• 最大限度降低干扰。

建立清楚的视觉层次

让页面在瞬间明白易懂的好方法是确保页面上所有内容的外观、可视线索都清楚，而且能准确地表述页面上内容之间的关系：哪些内容相关，哪些内容是其他内容的组成部分。即：每个页面都应该有清楚的视觉层次。

一个视觉层次清楚的页面有三个特点：

• 越重要的部分越突出。例如，最重要的标题要么字体更大、更粗、颜色更特别，旁边留有更多空白，要么更接近页面的顶部——或者，以上几点的综合。

越重要的部分越突出

• 逻辑上相关的部分在视觉上也相关。例如，可以把相近的内容分成一组，放在同一个标题之下，采用类似的显示样式，或者把它们全部放在一个定义明确的区域之内。

越逻辑上相关的部分在视觉上也相关

• 逻辑上包含的部分在视觉上进行嵌套。例如，一个分类的标题（“Computer Books”）出现在某本具体书籍书名的上面，在视觉上包括书籍区域，因为该书籍属于这个标题，而且书籍的标题也要横向覆盖描述这本书的元素。

逻辑上包含的部分在视觉上进行嵌套

我们每天都会对视觉层次进行分解——不管是在网络上还是在报纸上。但是这种分解发生得太快了，因此我们经常只有在不能这么做的时候才能模模糊糊地感觉到它——即这些可视信息线索迫使我们思考的时候。

好的视觉层次通过预先处理页面，用一种我们能快速理解的方式对页面的内容进行组织并区分优先级，从而减少了我们的工作。否则，我们会降低页面扫描速度，寻找关键字和短语，然后拼凑出我们感觉重要的内容和内容的组织方式，这样就增加了很多工作。

视觉层次

习惯用法是你的好帮手

我们知道，了解报纸版面的布局和格式的不同习惯用法能让我们更快、更容易地扫描报纸。Web上已经有很多习惯用法，大部分是从报纸和杂志上延续过来的，而新的习惯用法也在不断涌现。

所有的习惯用法都是从某个人灵光一现的想法开始的，如果这个想法相当不错，其他站点就会效仿，最终，会有足够多的人在足够多的地方见到它，让它变得不言而喻。比如“购物车”图标。

关于Web上的习惯用法，有两点非常重要：

• 它们非常有用。通常，习惯用法因为有用才会成为习惯用法。适当的习惯用法会使用户在网站之间的访问更容易，不需要花费额外的学习成本。这样还保证了一种熟悉感，哪怕这种熟悉感也会让用户感觉到某种似曾相识的单调乏味。
• 设计师通常不愿意利用它们。他们在很大程度上觉得网站是请他们来做一些崭新的、与众不同的设计，而不是使用那些原有的东西。

我们应该在清楚自己有一个更好的想法时进行创新，否则就尽量利用习惯用法。

把页面划分成明确定义的区域

这可以让用户很快决定关注页面的哪些区域，或者放心地跳过哪些区域。对网页扫描所进行的几项初始眼动研究表名，用户很快就会确定页面哪些部分包含有用信息，然后对其他部分看都不看——就像他们根本不曾来过一样。

明显标识可以点击的地方

因为人们在网络上所做的大多数事情就是找到下一个地方点击，那么明确地标识哪些地方可以点击，哪些地方不能点击，这很重要。

虽然用户确定哪里可以点击并不会花很长时间，但如果我们迫使用户去思考某些通过下意识就可以知道的东西，那么我们完全是在浪费每个用户对新站点有限的耐心和好感。

降低视觉噪声

让页面不易理解的一个最大原因是视觉噪声，实际上有两类视觉噪声

• 眼花缭乱。如果页面上所有的内容都在嚷嚷着希望得到用户的注意，那么结果可能适得其反。
• 背景噪声。有些页面就像在开鸡尾酒会一样，虽然没有一个地方会造成过分的干扰，但是这些很小的噪声太多也会让人觉得厌烦。

把这些线变成灰色会让菜单更容易扫描

不同用户对复杂性和干扰的容忍度不一样，一些人不在乎眼花缭乱的界面和背景噪声，但很多人在乎。我们设计页面时，不妨先假定所有内容都是视觉噪声，除非得到证明他们不是。

Ch4 · 动物、植物、无机物——为什么用户喜欢无需思考的选择

点击多少次都没关系，
只要每次点击都是无需思考、明确无误的选择。
    ——Krug可用性第二定律

Ch5 · 省略不必要的文字——不要在Web上写作的艺术

去掉每个页面上一半的文字，
然后把剩下的文字再去掉一半。
    ——Krug可用性第三定律

有力的文字都很简练。去掉没有人看的文字有几个好处：

• 可以降低页面的噪声
• 让有用的内容更加突出
• 让页面更简短，让用户在每个页面上一眼就能看见更多的内容，而不必滚动屏幕

这里的“文字”是指两种特别的文字——欢迎词和指示说明。

欢迎词必须消灭

很多欢迎词就像小册子里的蹩脚的促销文字一样，根本没有包括有用的信息，只是在一个劲说自己有多好，而不是描述什么东西能让我们感觉更好。

指示说明必须消灭

没有人会细读它们，至少在多次“勉强应付”失败之前不会。

我们的目标应该是通过让每项内容不言而喻来完全消除指示说明，或者是至少做到，当指示文字变得完全没有必要时，应把它们全部去掉。

Ch6 · 街头指示牌和面包屑——设计导航

网络导航101法则

• 你通常是为了寻找某个目标。
• 你会决定先询问还是先浏览。一些人（搜索框用户）总是一到某个网站就开始寻找搜索框（就像一到商场就开始向服务员询问的人）。另一些人（链接狂用户）通常会先浏览，只有在他们久寻不到的情况下才开始搜索。
• 如果选择浏览，你将通过标志的引导在层次结构中穿行。
• 最后，如果找不到想要的东西，你会离开。

无法承受的浏览之轻

在Web上的体验却少了许多我们在生活中用来同空间相处的感觉，想想下面这些Web空间的奇怪之处：

• 感觉不到大小
• 感觉不到方向
• 感觉不到位置

这解释了书签——存储的个人捷径——如此重要的原因，也是为什么后退按钮的点击率占据网络上所有点击率的30%~40%的原因。

它也解释了为什么主页的概念这么重要。相对来说，主页就是固定的空间。它就像北极星，点击“主页”给了我们一个重新开始的机会。

缺乏物理感觉好在这种无重状态让人愉快，也部分解释了为什么在Web上容易忘记时间。不好在Web导航通过具体化网站的层次结构补偿了这种缺失的空间感，营造出某种位置的感觉，说明要把Web导航做好。

被忽视了的导航用途

导航的用处：

• 它给了我们一些固定的感觉。
• 他告诉我们当前的位置。
• 它告诉我们如何使用网站。
• 它给了我们对网站建造者的信心。规划得当的导航是网站给人留下好印象的最好机会。

Web导航习惯用法

Ch7 · 首先要承认，主页不由你控制——设计主页

主页要完成的任务：

• 站点的标识和使命

• 站点层次

• 搜索

• 导读

• 内容更新

• 友情链接

• 快捷方式

• 注册

• 让我看到自己正在寻找的东西

• ……还有我没有寻找的 （也许会感兴趣但没有寻找的内容）

• 告诉我从哪里开始

• 建立可信度和信任感

没有什么比得上一个好口号

口号是一条精炼的短句，刻画了整个企业，总结它是什么，什么让它如此卓越。

口号是非常有效的信息传达方式，因为它们是用户最希望能找到关于网站目标具体描述的地方。在选择口号时，有几点要考虑：

• 好的口号要清楚、言之有物
• 不好的口号含混不清
• 好的口号长度适中，6-8个单词足以表达思想，而且容易让人领会。
• 好的口号能表述出网站的特点和显而易见的好处。
• 不好的口号听起来太笼统。不要把口号和宗旨混淆起来。
• 好的口号应该有个性、生动，有时候还很俏皮。俏皮很好，但应该有助于传达，而非混淆好处。

Ch8 · 农场主和牧牛人应该是朋友——为什么Web设计团队讨论可用性是在浪费时间，如何避免这种情况

Ch9 · 一天10美分的可用性测试——让测试简单，这样你能进行充分的测试

焦点小组不是可用性测试

焦点小组和可用性测试的区别如下：

• 在一次焦点小组研究中，以小组人（通常是5~8人）围坐在桌子旁边，对展示给他们的想法和设计做出反应。这是一个小组过程，主要价值来自参与人员彼此的反应。焦点小组是快速得到用户的意见和感觉的一种不错的方法。
• 在一次可用性测试中，一次一个用户展示一些内容（不管是网站，还是网站原型，或是一些单个页面的草图），并且要求用户说出：①这是什么；②试着用它来完成一项典型的任务。

从焦点小组了解到的是在设计网站之前就应该了解的，但不能告诉我们人们是否确实能使用我们的网站。

关于测试的几个事实

• 如果想建立一个优秀的网站，一定要测试
• 测试一个用户比不做测试好一倍
• 在项目中，早点测试一位用户好过最后测试50位用户。
• 人们对招募用户代表的重要性估计过高。（重要的是尽早和经常进行测试）
• 测试的关键不是要证明什么或者反驳什么，而是了解我们的判断力。
• 测试是一个迭代的过程。
• 没什么比现场用户的反应更重要。

“跳楼大减价”的可用性测试

简易可用性测试

应该测试多少用户

很多情况下，每轮测试的理想用户数量应该是三个，最多四个。

这样不仅有助于保证我们很快进入下一轮测试，发现新的问题，也便于在同一天完成测试和总结，这样我们就能马上利用刚刚得到的这些结果。如果一次测试更多用户，我们会得到更多的笔记，没有时间处理，而且这些笔记中有很多都是一些琐碎的内容，这会让人更容易只见树木，不见森林。

对于大多数Web团队来说，他们发现问题的能力很强，但是手上往往没有足够的资源来修正这些问题，因此重要的是重点关注最严重的问题。

作者几乎完全不再为参与的专家评审和可用性测试给出文字报告，而是用每次持续1~2个小时的电话会议向整个开发团队汇报他的发现，在电话会议结束时，他们已经对哪些是最严重的问题，以及如何修正它们达成了一致。

宽松招募，曲线上升

关于可用性测试最大的秘密就是，测试对象是谁并不重要。

对大部分网站来说，我么只需要懂得基本上网知识的用户就可以了。

如果没有能力请人来招募测试对象，可以利用我们能够寻找到的任何人（满足最低要求），然后曲线上升。

换句话说，要寻找能反映我们目标群体的测试用户，但别因此裹足不前。我们的测试用户和目标群体之间可以存在差别，理由如下：

• 实际上，我们都是初学者。
• 设计出的网站只有我们的目标群体能使用，这通常并不是一个好主意。
• 专家通常不会介意对初学者来说很清楚的界面。（每个人都喜欢简洁）

但也有一些例外：

• 如果你的网站几乎只由某一类用户使用，而且招募这一类测试用户并不困难，那么就去招募。（如：如果目标用户是女性，那么务必只测试女性用户就好了）
• 如果使用我们的网站需要专门的领域知识，那么至少要在一个回合的测试中招募具有该领域知识的用户。

在进行招募时，应该注意几个问题：

• 提供合理的激励
• 邀请要简单
• 避免对网站（或网站背后的组织结构）进行预先讨论。我们希望从他们的第一眼看出他们是否能从一次标准的开始得出网站的宗旨。
• 别不好意思请朋友和邻居帮忙。他们也很喜欢这种体验。

Ch10 · 可用性是基本礼貌——为什么你的网站应该让人尊敬

不要降低用户的好感，以用户不期望的方式工作。

Ch11 · 可访问性、级联样式表和你——正当你已经完成了的时候，一只猫掉了下来，背上捆着涂了奶油的面包

可访问性（面向残障人士的良好设计）是非常正确而且必要的。

Ch12 · 救命！老板想要我…… ——当好人遇到不好的设计决策

那就用理由说服他们（作者提供了两封电子邮件模板）。