点石成金(Don't Make Me Think)

Web 开发人员,尤其是前端开发,对用户体验直接负责,《点石成金》这本书介绍了 Web 可用性设计的各个方面及设计原则。

变化

可交互设计变得越来越重要,因为:

  1. 随着技术的不断进步、发展。人们使用的产品的交互方式、媒介都在发生变化,从 PC 到移动,现在又有了 VR、AR 等。
  2. 网络本身也在不断完善。越来越多的功能搬到了互联网上,人们对互联网产品的期待也变得更高了。
  3. UX 的重要性成为共识,人们越来越意识到可交互设计对产品带来的影响。

也因此,Web 产品越来越重视可交互设计。

可用性的几个方面

那么可交互设计包含哪些内容呢?一个可用性好的产品,应该有以下特性:有用、可学习、可记忆、有效、高效、合乎期望、令人愉悦

人们实际上是如何使用 Web 的

在讨论如何进行可用性设计之前,需要先弄清楚人们在 Web 上的行为,这其中有三个事实:

  1. 不是阅读,而是扫描。浏览 Web 内容跟看书不一样,人们很少会从头到尾把内容都看一遍。这是因为人们通常:总是任务在身;知道自己不必阅读所有内容;善于扫描。
  2. 不做最佳选择,而是满意即可。人们很少会深思熟虑选择一个最佳的行为,只要能满足自己所要做的事情即可。因为:人们总是处于忙碌之中;如果猜错了,也不会有什么严重后果;对选择进行权衡并不会改善我们的机会;猜测更有意思。
  3. 不是追根究底,而是勉强应付。能用就行了,不会去了解具体原理。背后机制对大多数人来说不重要。一旦一个东西可以用,人们习惯一直使用它。

基于以上行为,可用性设计有以下定律,且适合广告牌法则。

指导原则

Krug 可用性定律

  1. 别让我思考。让每一个页面或屏幕都不言而喻。(原因:大多数人会花上比我们想象中少得多的时间来浏览我们设计的网页)。 如果做不到这一点怎么办呢?至少应该让 Web 页面能够自我解释。
  2. 点击多少次都没关系,只要每次点击都是无需思考、明确无误的选择
  3. 去掉页面上一半的文字,然后把剩下的文字再去掉一半:欢迎词必须消灭;指示文字必须消灭。

广告牌设计101法则

  1. 习惯用法是你的好帮手。可用性设计需要符合人们的习惯性用法。
  2. 建立有效的视觉层次:越重要的部分越突出;逻辑上的相关部分也在视觉上相关;逻辑上包含的部分在视觉上进行嵌套。
  3. 把页面划分成明确定义的区域
  4. 明显标识可以点击的地方:坚持只用一种字体颜色;通过它们的外观和位置来区分。
  5. 降低视觉噪声:眼花缭乱;组织不当;太过密集。
  6. 为文本设置格式,以便浏览:充分使用标题;保持段落简短;使用符号列表;突出关键词语。

必须正确处理的导航与主页

设计导航

使用导航的行为:

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

网络导航与现实导航的区别:感觉不到大小、方向和位置。

导航的用处:

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

如何做:

  • 导航部分应在每一页以一致的外观出现在同样的位置。
  • 页面的左上方有站点 ID。
  • 提供主导航条、实用工具。
  • 提供返回主页的按钮或链接。
  • 提供搜索。
  • 给予低层次导航足够的重视。
  • 提供页面名称。
  • 告诉用户当前所处的位置。
    • 面包屑
    • 标签 Tab

后备箱测试

想象你被蒙上双眼,锁在车子的后备箱里,车开了一会儿以后,把你放在某个网站的某个页面上。

设计主页

主页要完成的任务:站点标识和使命、站点层次、搜索、导读、内容推介、功能推介、实时更新的内容、交换链接、快捷方式、注册。

主页的一些抽象目标:让我看到自己正在寻找的东西、……没有寻找的东西、告诉我从哪里开始、建立可信度和信任感。

设计主页的难点:

  • 每个人都想占一席之地。
  • 想要参与的人太多。
  • 一个尺寸要适合所有人。

主页容易被人遗忘的任务:传达整体形象

  • 如何传达:口号、欢迎广告、了解更多。
  • 指导原则:需要多大空间就使用多大空间。
  • 注意点:不要使用过多的空间;不要把使命陈述当作欢迎广告;最重要的是进行测试。

容易做错的两件事

大部分关于可用性的争论是在浪费时间

“信仰大战”得不到结论,浪费时间,破坏团队成员间的关系。

开发人员也是使用者,有自己的喜好,且容易把喜好投射到整个 Web 用户身上。

专家的意见、发布的研究成果、调查问卷、焦点小组等也不一定是对的,没有什么普通用户:

  • 每个 Web 用户都是独一无二的。
  • 所有的 Web 使用都是不一样的。

对于大部分 Web 设计问题来说,没有简单的“正确”答案。经过仔细考虑、实现和测试的设计就是好的。

“大部分人喜欢下拉框吗?” ⇒ “在这个页面,这样的上下文中,这个下拉框以及这些下拉项目和措辞会让可能使用这个网站的大部分人产生一种良好的体验吗?”

争论不如实际测试。

可用性测试

容易出现的问题:太少了,太迟了,为了一些错误的理由(问题本身不重要、只是为了解决争论分歧)。

焦点小组不是可用性测试:可用性测试能看到人们真正的使用情形,而不是只听到想法。

  • 焦点小组:快速得到部分用户的意见和感觉。最适合用在早期阶段。
  • 可用性测试:检测到让用户混淆和倍感挫折的地方,并修复它们。应该贯穿在整个开发和设计的过程中。

几个事实:

  • 如果想建立一个优秀的网站,一定要测试。
  • 测试一位用户比不做测试好一倍。
  • 在项目中,早点测试一位用户好过最后测试 50 位用户。

可用性测试是可以低成本高频率的进行的,如何做可用性测试可见作者的另一本书《妙手回春:网站可用性测试及优化指南》