指导原则

别让我思考

“别让我思考！”

一些例子，不应该让用户思考的事情：

• 我在什么位置？
• 我该从哪里开始？
• 他们把XXX放在什么地方了？
• 这个页面上最重要的是什么？
• 为什么他们给它取这个名字？

如果无法做到页面内容不言而喻，至少让它能自我解释。

我们实际上是如何使用web的

不是仔细阅读，而是快速扫描
不做最佳选择，满意即可（satisfice）
不是追根究底，而是勉强应付

广告牌设计101法则

为扫描设计，不为阅读设计

• 在每个页面上建立清楚的视觉层次
• 尽量利用习惯用法
• 把页面划分成明确定义的区域
• 明显标识可以点击的地方
• 最大限度降低干扰（先假设所有视觉元素都是噪声，除非得到证明它们不是）

动物、植物、无机物

“点击多少次都没关系，只要每次点击都是无需思考、明确无误的选择。”

省略不必要的文字

不要再web上写作的艺术

“去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。”

必须正确处理的几个方面

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

网络导航101法则

• 你通常是为了寻找某个目标。
• 你会决定先询问（搜索）还是先浏览。
• 如果选择浏览，你将通过标志的引导在层次结构中穿行。
• 最后，如果找不到想要的东西，你会离开。

导航的用途

• 给了我们一些固定的感觉
• 告诉我们当前的位置
• 告诉我们如何使用网站
• 给了我们对网站建造者的信心

全局导航/持久导航，在每一页以一致的外观出现在同样的位置，让你立即确认自己仍然待在这个网站上。
但有两个例外：主页可以不使用持久导航。在需要专注完成一个任务时（例如表单页），持久导航可能成为不必要的干扰。
持久导航的元素：
站点ID（通常在上方，左上角），栏目（主导航条，primary navigation），实用工具（utility）。
通常，持久导航上只能放4~5个实用工具。不常用到的工具可以进行分组，放在主页上。

始终提供返回主页的按钮或链接，例如在栏目或实用工具清单中包含首页，或点击站点ID回到主页。

需要自上而下地进行导航设计，以保障可扩展性和一致性。拥有显示网站所有潜在级别的导航的样例页面非常重要。

每个页面都需要一个名称。
页面名称要出现在合适的位置。
名称要引人注目。
名称要和点击的链接一致。

“你在这里”的指示器要足够明显，采用多种视觉区别。（例如，使用不同颜色、加粗）

面包屑对于层次复杂的网站更加有用，作为导航机制的补充。

标签

• 正确绘制：激活的标签要位于其他标签页之前
• 颜色编码
• 当你进入网站时，有一个标签已经被选中，让人注意到它的存在

后备箱测试
把你放在某个网站内容的某个网页上，站远点观察，如果页面设计良好，你应该能毫不犹豫地回答以下问题：

• 这是什么网站？（站点ID）
• 我在哪个网页上？（网页名称）
• 这个网站的主要栏目有哪些（栏目清单）
• 在这个层次上我有哪些选择？（本页导航）
• 我在导航系统的什么位置？（“你在这里”的指示器）
• 我怎么搜索？

设计主页

首先要承认，主页不由你控制

主页需要：展现站点的标识和使命；展现站点层次；搜索；导读；内容更新；友情链接；快捷方式；注册。
主页还需要：让我看到自己正在寻找的东西；推荐我没有在寻找的；告诉我从哪里开始；建立可信度和信任感。

主页需要传达整体形象。
如何传达？
口号、欢迎广告（清楚，言之有物）

主页导航可以和持久导航不一样。例如：
详细地展现栏目描述；
使用不同方向的导航布局（例如垂直）；
用于识别的空间更多（站点ID更大）。

但是也需要保持一定程度上的一致性，这样用户才能马上反应过来这是同一导航的两个不同版本。最重要的是，让栏目的名称保持不变：同样的顺序、文字、分组，尽可能相同的视觉提示：同样的字体和颜色。

判断主页做得如何：
这个网站是做什么的？
该从哪里开始？

确定你没有做错的几件事

web设计团队讨论可用性是在浪费时间？

很多对设计细节的讨论无休无止，由大量无法验证的个人信仰组成，且讨论很少能让人改变他们原来的看法。

“大部分web用户和我们一样”？不存在这种弹性变化的“普通用户”，每一个用户的使用习惯都独一无二。争论A或B好不好是没有意义的，能满足需要的，经过仔细考虑、实现和测试的设计就是好的。

对于信仰争论的解药
不要问“大部分人喜欢下拉框吗？”，正确的问题应该是：“在这个页面，这样的上下文中，这个下拉框以及这些下拉项目和措辞会让可能使用这个网站的大部分人产生一种良好的体验吗？”
只有一种方式来回答这种问题：测试。

让测试简单

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

跳楼大减价的简易可用性测试

应该测试多少用户？
每轮3个，最多4个。前三个用户很可能会遇到几乎所有最明显的问题，且更重要的是多做几轮测试。
测试、总结、修改、测试、总结、修改。

宽松招募，曲线上升
如果目标用户群体可以分成几个明显的阵营，且这些阵营有着完全不同的兴趣和需要，那么至少从每个阵营里选择用户进行一次测试。

测试什么，什么时候测试
甚至在开始设计网站之前，就应该测试一下同类网站。可以进行两种测试：

• 理解测试：测试用户能否理解这个网站，理解网站的目标、价值主张、组织方法、运行方式等
• 关键任务测试：让用户完成一些任务，然后观察他们是怎么做的。

每轮测试之后，尽快让开发团队回顾每个人的观察，决定接下来如何处理。
总结时，需要给问题分类，然后找出修正这些问题的方法。

常见问题：

• 用户不清楚概念
• 他们找不到自己要遭的字眼
• 内容太多了

一些问题分类指南：

• 忽略“皮划艇”问题：如果出现问题的人马上发现自己偏离了原来的主题，回来原来的方向不需要帮助，且这种情况看起来并没有扰乱他们的活动，你就可以忽略这些问题。
• 抵制添加的冲动：正确的解决方案往往是去除某些让人混淆的内容，而不是增加注释、指导说明。
• 不要太看重人们对新功能的要求：他们只是在告诉你他们的喜好而已。
• 抓住够得着的果子：恍然大悟型的问题；毫不费力能改正，或者需要费一些力气但效果非常明显的问题。

推荐每个web开发团队在每个月花一个上午的时间进行可用性测试。一个上午，测试3~4位用户，在午餐时间进行总结，就是这样。

大的方面和外界影响

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

降低好感的几种方式

• 隐藏我想要的信息（例如客户服务电话)
• 因为没有按照你们的方式行事而惩罚我（例如表单录入时）
• 向我询问不必要的信息
• 敷衍我，欺骗我
• 给我设置障碍（超长的flash介绍，多个页面的自我感觉良好的市场图片）
• 你的网站看上去不专业（凌乱，组织得不好）

提高好感的几种方式

• 知道人们在你的网站上想做什么，并让它们明白简易。
• 告诉我我想知道的。
• 尽量减少步骤。
• 花点心思。（产生解决我的问题所需要的信息；保证它准确而且有用；用清楚的方式来表达；组织良好，我可以轻松找到）
• 知道我可能有哪些疑问，并且给予解答。（是真正的常见问题列表；保持更新；保持坦率）
• 为我提供协助，例如打印友好页面。
• 容易从错误中恢复。
• 如果不确定，记得道歉。

可访问性、级联样式表和你

改正让所有人感到混淆的可用性问题
读一篇文章（Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers by Mary Theofanos and Janice Redish ）
看一本书
开始使用CSS
去摘够得着的果子（为每张图片增加alt文本，让表单配合屏幕阅读器，让所有内容都可以通过键盘放文，使用客户端的影像地图）

“救命 老板想要我……”当好人遇到不好的设计决策

老板在坚持一个糟糕设计想法的背后，几乎总是有一个良好的意图，试着去理解这种好的意图常常可以找到另一种方法来达到目的。

推荐读物

Information Architecture for the WWW
Sources of Power: How People Make Decisions
The Practice of Creativity: A Manual for Dynamic Group Problem Solving
Homepage Usability: 50 Websites Deconstructed
Web Application Design Handbook: Best Practices for Web-Based Software
Defensive Design for the Web
The Design of Everyday Things
A Practical Guide to Usability Testing