点石成金

别让我思考

可用性第一定律：别让我思考；当用户看到一个页面时，它应该是不言而喻、一目了然、自我解释的；

• 页面上的每项内容都有可能迫使用户停下来进行不必要的思考；当用户困惑的地方很多时，就会加重他们的认知负担，把注意力从要完成的任务上转移开；
• 对于全新的东西，如果一个页面做不到不言而喻，则至少应该让它自我解释；
• 点击多少次都没有关系，只要每次点击都是无须思考、明确无误的选择；
• 当需要让用户进行过多思考的时候，他的注意力会从本来决定要选择什么，变成怀疑自己的兴趣到底有多大，质疑自己还是还有必要继续；

用户使用页面的真正方式

扫描、满意即可、勉强应付；

事实1：我们不是阅读，而是扫描；

原因：

• 我们总是任务在身，想要尽快完成任务；
• 我们知道自己只对一小部分内容感兴趣，所以不用阅读所有内容；
• 我们善于扫描；

用户的注意力一般放在以下文字或短语上面：

• 与手头任务有关的；
• 当前或接下来的个人兴趣；
• 脑海里一些根深蒂固触发器那样的词；

事实2：我们不做最佳选择，而是满意即可；

用户不会花时间仔细权衡出最优的选择，而是会快速去尝试那个看起来过得去的选择；因为即使错了也没什么大不了的后果；

事实3：我们不是追根究底，而是勉强应付；

• 对于大多数人来说，只要能够正常使用，是否明白事物背后的运行机制并没有什么关系，人们并不关心；
• 一旦发现一个东西能用（不管有多难用），我们就会一直使用它，我们就不太会主动去找一种更好的方法，除非偶然被动的发现一种更好的方法；
• 一个易用的软件会让用户觉得自己很聪明，能够掌控全局，然后自我感觉良好；

为扫描而设计

几个注意事项：

尽量利用习惯用法；

• 遵循习惯和惯例，即那些已经广为采纳或者已经标准化的设计模式；
• 如果想要创新，必须先理解想要取代的设计的价值；并确保新的设计同样清楚、同样不言而喻，没有学习曲线；能够带来很大的价值，因此值得用户付出一点努力来学习；
• 保持一致性往往是件好事；但简洁胜过一切，如果通过破坏一致性可以得到高度简洁的结果，而应果然选择简洁；

建立有效的视觉层次；

确保页面所有内容的外观，能准确表述内容之间的关系；
有效视层次的三个特点：

• 越重要的部分越突出；（突出）
• 逻辑上相关的部分，视觉上也相关；（分组）
• 逻辑上包含的部分，视觉上有嵌套；（嵌套）

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

明确定义的区域，可以让用户很快决定关注页面的哪些区域；

明显标识可以点击的地方；

人们在页面上所做的大多数事情就是找到下一个地方进行点击；

最小化干扰，降低视觉噪声

视觉噪声

• 眼花缭乱；所有的东西都在争夺用户的注意力；
• 组织不当：东西摆放的乱七八糟；
• 太过密集：内容太多；

应对方法

有罪推定，先假定所有内容都是视觉噪声，并去除任何对页面没有帮助的内容；

为内容创建清楚的格式，以便扫描；

充分使用标题

原因：精心制作的标题可以起到页面大纲的作用或内容列表的作用，可以帮助用户决定哪些地方需要阅读、扫描或者直接跳过去；

保持段落简短

原因：人们不喜欢阅读长篇的文字；如果段落太长，就找到合适的地方，把它裁成两段或多段；

使用符号列表

列表的不同项目之间应该留出一点点额外的空白；

突出关键词语

原因：大部分的页面扫描动作是在寻找关键字和关键短语；

有效的表单指引：

• 简短：只需提供最少的信息来帮忙我
• 及时：放在我正好需要它的地方；
• 不会错过：设置合适的格式，保证我一定会注意到它；

省略多余的文字

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

好处：

• 降低页面噪声；
• 让有用的内容更加突出；
• 让页面更简短

方法：

• 消灭欢迎词；
• 消灭使用说明；

设计导航

网站的特点

• 虚拟的网站缺少像物理空间感，因此我们只能通过概念层次上的位置，来定位某种东西；缺少空间感导致了主页、书签和后退按钮的重要性，同时也很容易让人注意不到时间的流逝，因为缺少了参照物；
• 主页就像是北极星，像一个固定的坐标，为用户提供了一次重新开始的机会；

导航的用途

• 帮助我们找到想要的东西；
• 告诉我们现在在哪；
• 告诉我们这里有什么；
• 告诉我们如何使用网站；
• 给了我们网站建造者的信心；

导航习惯用法

持久导航

它们在每个页面都处于相同的位置、相同的外观，除了表单页外；

四个组成要素：

• 站点ID：它应该出现在页面可视层次的首要位置；要么是本页最显眼的内容，要么让它涵盖页面所有其他元素；
• 栏目：主导航条，有时候它们也会包括下一级栏目清单（即二级导航）；
• 实用工具：例如注册、登录、站点地图、购物车、帮助等；不同的网站，实用工具会有所不同；
• 返回主页的链接；
• 搜索：一个输入框 + 一个按钮 + 一个单词（搜索）；应避免使用：花哨的用词、指示说明、选项（放在结果页去）；

页面名称

• 每个页面都需要一个名称；
• 页面名称需要出现在合适的位置；
• 名称要引人注目（正常它是页面中最大的文字）；
• 名称要和点击的链接一致，或者尽可能匹配；

你在这里

告诉人们当前所在的位置；

面包屑导航的最佳实践：

• 把它放在顶层；
• 使用大于号 > 对层级进行分隔；
• 加粗最后一个元素；

标签导航的最佳实践：

• 激活的标签页位于其他标签页之前；
• 激活的标签页与底下的空间在物理上连接起来；

好的导航应该能够回答以下问题：

• 这是什么网站？（网站ID）
• 我在哪个网页上？（当前网页名称）
• 这个网站的主要栏目是什么？（一级导航）
• 在这个层次上我有哪些选择？（本页导航）
• 我在导航系统的什么位置？（当前位置）
• 我怎么搜索？（搜索框）

设计主页

主页的常见任务

• 站点标识和使命：这是什么网站、它是做什么的、为什么我应该在这里而不是别的网站；
• 站点层次：给出网站服务的内容和功能；
• 搜索
• 导读：暗示用户里面有精彩的内容；
• 内容推介：突出最新、最好、最流行的内容片段；
• 功能推介：邀请用户去探索更多的栏目或试和一些功能；
• 适时更新的内容：让用户觉得它不是一潭死水；
• 交换链接：放置广告、交叉推广、合作品牌的友情链接等；
• 快捷方式：最常访问的内容片段；
• 注册：提供注册链接，或者让用户知道自己已经处于登录状态；

主页的第一使命

传达整体形象是主页的第一使命，因此要能够快速回答以下用户的四个问题

• 这是什么网站？
• 网站有些什么？
• 我能在这里做什么？
• 为什么我应该在这里，而不是别的什么地方？

大爆炸理论：最初的几秒最重要

如何传达信息

放置陈述的三个重要位置

• 靠近网站 ID 处的口号；
• 欢迎广告；
• 了解更多；例如放上一段视频

传送信息的几条指导原则

• 需要多大空间就使用多大空间；
• 但是不要使用过多的空间；
• 不要把使命陈述当作欢迎广告；
• 最重要的是进行测试；

好口号的特点

• 清楚，言之有物；
• 长度合适，6~8个英文单词；
• 表述了网站的特点和显而易见的好处；
• 不好的口号听起来太笼统；别混淆口号和宗旨；
• 尽量有个性、生动；

第五个问题

当用户明白网站的用途后，接下后的第五个问题是：从哪里开始？
但问题常不在于让用户知道从哪里开始，而是开始的地点太多，即公共资源悲剧；
避免公共资源悲剧的办法：

• 让所有的人都知道这个悲剧；
• 提供其他办法来缓解需求；例如热闹页面的推介，或者轮流使用主页上的同一空间

团队信仰冲突

信仰问题的解决方式

• 问正确的问题：此情此景，某物是否让用户感觉更良好？
• 用正确的方式回答问题：测试；

测试方法

• 固定每月一次；
• 每次一个上午；
• 每次三人；
• 宽松的招募条件；不一定必须是目标用户；
• 鼓励测试者尽可能的“说出心里话”；
• 越多人观察越好；
• 每场测试的间隔，观察者写下其注意到的三个最重要的可用性问题；
• 测试越早越好；
• 测试类型越多越好：草图、线框图、原型、成品等；
• 拟定要测试的任务清单；
• 准备措辞，让测试者知道希望他们做什么；
• 若测试者出现停顿，先等待，然后问对方在想什么、找什么、做什么？
• 测试任务结束后，可以就测试中的事情，或者一些准备好的问题，向测试者提问；

修复问题

• 最严重的问题最先修复
• 抵制添加功能的冲动；
• 不要太看重人们对新功能的需求；
• 忽略皮划艇问题；

移动化设计

• 不要把提示隐藏在背后；
• 移动的网络可能不稳定，避免一次加载太多东西；
• 尽量避免需要让用户进行学习；
• 如果一定需要，务必让学习的内容容易记忆；避免下次进来再次学习；

赢得用户的尊敬

为用户考虑，赢得用户的尊敬；

一些反面的做法：

• 隐藏用户想要的信息；例如客户电话、运费、价格等；
• 因没有按照既定的方式操作而惩罚用户，例如特定格式的输入；
• 向我询问不必要的信息；
• 敷衍我，欺骗我；
• 给用户设置障碍；例如不得不等待的长长的 Flash 介绍；
• 网站看上去不专业；例如看起来很凌乱，缺少组织；

一些正面的做法：

• 知道用户在你的网站上想做什么，并让它们简单且容易；
• 告诉用户想知道的；
• 尽量减少步骤；
• 花点心思；
• 知道用户可能会有哪些疑问，并且给予解答；例如保持更新的常见问题列表；
• 为用户提供协助；
• 容易从错误中恢复；
• 如有不确定，记得道歉；

可访问性

改进可访问性的方法

• 改进让所有人感到混淆的可用性问题；
• 读一篇文章；Mary 和 Janice 的 《Guidelines for Accessible and Usable Web Sites》;
• 读一本书；Sarah 和 Whitney 的 《A Web for Everyone》
• 摘够得着的果子；
  • 为每张图片添加合适的 alt 文本；
  • 使用合适的标题；
  • 让表单能够配合屏幕阅读器；
  • 在每页的最前面添加一个“跳转到主要内容”的链接；
  • 让所有的内容都可以通过键盘访问；
  • 在文本和背景之间设置明显的对比；
  • 采用一份可访问性良好的模板；

说服团队或老板

有效的方法：

• 让老板或者他的老板来观看可用性测试；
• 在自己的个人时间进行第一次测试；找到一个容易修复的且严重的可用性问题；修复它，然后再进行公开和宣传；
• 对竞争对手进行测试；
• 理解管理层；理解他们的处境，给予情感上的关注；
• 弄清楚自己在整个公司大局中的位置
• 抵制黑暗行为；

一些禁忌

• 不要使用小而对比不强的字体；
• 不要把标签放到表单的字段里面；
• 保留访问过的链接和未访问的链接之间的区别；
• 不要让标题漂浮在段落之间