181121_点石成金第三版(Steve Krug)

《点石成金》第三版，主要讲Web设计可用性。

《点石成金》读书笔记

1 Krug第一定律——别让我思考

Web设计中的可用性原则：当用户看到页面时，它应该是一目了然，不需要花费精力去思考就知道如何使用。因为大多数人会花比我们想象中少得多的时间来浏览网页，一目了然可以让用户更容易达到目标，从而更好留存用户。

注意点：

• 明确位置和导航：使用意义明确的名称
• 突出层级和交互动作触发点：使用外观突出的控件作为按钮或链接暗示可点击
• 简单明了的操作：告诉用户怎么做而不是背后的原理
• 如果不能做到页面一目了然，至少要做到“自我解释”

2 用户如何使用Web——扫描、满意即可、勉强应付

用户使用Web的3个事实：

• 不是阅读而是扫描： 用户通常在网页上看到的只是自己感兴趣的一小部分内容；
• 大多数时间用户会选择第一个合理的选项：花费时间和精力衡量做出最佳选择不如查看第一个合理的页面，不行再回退，且猜测可能带给用户惊喜；
• 不会深究运作原理而是勉强应付：工作机制对大多数用户并不重要，用户发现某个事物能用会一直使用，很少会主动寻找更好的方法。

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

对扫描用户的5个设计要点：

• 建立清楚的视觉层次：重点-突出、相关性-分组、包含性-嵌套；
• 利用习惯用法：用户学习成本低且有效，打破习惯用法时要注意创新的方法要注意较低的学习成本且能带来较高价值；
• 把页面划分成明确定义的区域：用户根据区域从页面中筛选关注的区域和跳过的区域；
• 明显标识可点击的地方：在点击链接或控件上提供明显的视觉暗示；
• 降低视觉噪声：限制视觉上突出的重点内容，降低背景和装饰的视觉效果。

4 Krug第二定律——用户喜欢无需思考、明确无误的选择，不介意点击多少次

用户不介意多少次点击，只要每次点击是不用思考的。

三次无需思考、明确无误的点击相当于一次需要思考的点击。让选择变得无需思考是让网站易用的主要因素。

必要的帮助具备

5 Krug第三定律——去掉多余文字

去掉多余文字的好处：降低页面噪声；突出有用内容；让页面更简短，让用户在页面上查看更多内容不必滚动屏幕。

要点：

• 尽量减少欢迎词
• 通过让内容不言而喻来消除指示说明，去掉不必要的指示说明

方法：去掉每个页面上一半的文字，再把剩下的文字去掉一半。

6 怎样设计“明确”、“简单”、“一致”的导航

用户使用网站导航的习惯

• 用户对导航的依赖程度取决于对该网站/事物的熟悉度、信任度以及自身的性格和环境因素（时间、地点等）
• 用户使用网站导航的一般流程：确定目标➡选择浏览/搜索➡操作导航浏览页面➡找不到目标离开页面

网站导航与现实导航的区别

• 感觉不到网站内容的多少，是否涵盖目标内容
• 感觉不到方向 - 网站层级结构
• 感觉不到位置，不知道如何找到目标 - 主页给用户提供起始位置，这也是书签、回退常被使用的原因

导航用途

• 帮助用户到达目的链接
• 告诉用户当前位置
• 告诉用户网站内容
• 告诉用户如何使用网站，从哪里开始，能去哪里
• 好的导航可以让用户建立网站的整体印象

持久导航的4个元素

持久导航一般会出现在网站的所有页面，除表单页面外。

• 站点ID/站点LOGO
• 实用工具
• 搜索栏
• 主导航

表单页面只需要站点ID、回到主页的链接及有助于填写表单的实用工具即可，减少不必要的干扰

站点ID

站点ID代表整个网站，占有最高的层级，需要突出显示。

方法：

• 使用独特字体和可识别图形
• 放在页面上方涵盖整个页面元素
• 通常点击站点LOGO可以回到主页

主导航（栏目）

主导航是到达站点主要栏目的链接，是站点层次结构的最顶层。

方法：

• 大部分情况会包括二级导航
• 可以放置主页按钮方便用户回到主页

实用工具

实用工具是网站中不属于网站内容的工具链接。帮助用户使用站点，提供网站发布者信息。

方法：

• 通常没有主导航显眼
• 一般持久导航只能放用户常用的4-5个实用工具，其他不常用的工具分组后放在主页上，如主页底部链接

搜索栏

大多数用户进入新站点首先查看并使用搜索功能。它包括输入框、搜索按钮、“搜索”标签。

注意：

• 避免花哨用词
• 避免多余的指示说明，如“输入关键字”
• 避免在导航搜索工具中提供多个范围选项让用户思考

页面导航

页面导航设计不良的原因：

• 良好的多级导航在有限页面空间中较难设计
• 较高层级的导航设计费时
• 大部分认为低层级导航看起来不重要

注意：用户在底层页面与顶层页面使用时间相同，在具体设计导航样式前要先从上至下设计导航整体结构，否则后期较难更改

页面名称

页面名称是网站上的路牌。

注意：

• 每个页面都有一个页面名称
• 页面名称应出现在合适位置，体现页面内容的嵌套关系
• 页面名称要在视觉上强调
• 名称要和点击进入页面的链接名称匹配或相近

位置指示器

体现用户当前位置。位置指示器设计的5种方法：

面包屑

面包屑也是告诉用户当前位置的一种设计模式。

方法：

• 放在页面顶层
• 使用>对层级进行间隔
• 加粗突出最后一个元素，暗示当前位置

Tab标签

标签是大型网站导航的上佳选择，因为：

• 标签使用物理隐喻效应，让用户不用学习就能知道其含义
• 在视觉上与页面内容区分，难以忽略
• 能给页面增加修饰作用，且能通过灵活配置不同视觉效果标识页面的不同情况

要点：激活的标签页位于其他标签之前，用不同颜色或外形突出，并且与底部空间相连

案例

7 主页设计

主页目标

• 传达网站的整体形象
• 帮助用户寻找目标内容
• 推荐用户感兴趣内容
• 告诉用户从哪开始
• 建立可信度和信任感

主页应包含的内容

• 站点标识和使命：LOGO、功能
• 站点层次：内容、功能、导航
• 搜索
• 导读：暗示精彩内容吸引用户
• 内容推介：热门新闻或产品内容片段
• 功能推介：网站个性功能推荐等
• 适时更新的内容：排行榜、最新文章列表等
• 交换链接：友链、合作方等
• 快捷方式：软件方式、历史记录等
• 注册

设计主页要搞清楚的5个问题

• 这是什么网站
• 我能在这里做什么
• 网站上有什么内容
• 为什么在这个网站而不是别的网站
• 从哪里开始（搜索/浏览/查看板块）

如何传达网站的整体形象

• 使用口号：有效的信息传达方式，通常在靠近站点ID的地方，当网站或品牌有知名度时可不使用
• 欢迎广告：网站简要描述，显示在主页首要位置，通常在页面上端的左边或中间
• “了解更多”：介绍性视频或跳转介绍页面按钮

选择口号时要注意：

• 清楚、准确
• 简短，容易让人领会（6-8个英文单词即可）
• 表述网站特点和优势
• 避免笼统、模糊不清的描述
• 个性、生动、俏皮

传达信息的指导原则

• 使用有限但必要的空间：保持简短，突出网站的最重要功能
• 不要把公司使命当作欢迎广告
• 对主页进行测试，让非内部人员使用测试首页是否达到目标

8 避免网站可用性争论的方法——测试

争论在大多数时候是无效的：处于不同职位的人员，在生理上（内啡肽分泌）追求不同的工作目标，设计师追求视觉，程序员追求逻辑，且很少能改变原有看法。

没有普通用户，设计没有唯一的正确答案：大部分Web用户是弹性的，可以随意变化；每个用户使用Web的情况都是不一样的，用简单的喜好形容用户琐碎且无用；对于大部分Web设计来说，没有简单的正确答案，经过仔细考虑、实现和测试的设计就是好的。

不要问：“大部分人是否喜欢这个设计？”，而是问：“在这个界面中这样的设计和措施会让大部分用户产生良好体验吗？”

9 可用性测试

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

• 过程不同：焦点小组用来倾听收集用户对产品的看法和使用经验，可用性测试观察用户使用产品完成特定任务的过程，观察用户行为，检测并修复产品中让用户感到挫折的部分
• 时间不同：焦点小组适用于产品设计早期阶段，可用性测试贯穿开发和设计过程
• 作用不同：焦点小组可以在调查竞品，搜集用户建议，调查网站背后的理念和价值主张是否吸引人有所帮助，可用性测试可以用来了解网站运行情况，如何改进网站

关于测试的几个事实：

• 建立优秀的网站一定要测试
• 测试一个用户比不测试好一倍
• 项目中早点测试1位用户好过最后测试50位用户

简易可用性测试

• 主要目标：找到最严重的问题，并承诺下一次测试前修复
• 测试时间：每月1次固定时间，贯穿整个开发过程
• 测试人员：主持人1个，参与测试者3个，观察者尽量多
• 参与者招募来源：不限目标用户
• 测试场所：参与者与主持人-配有设备不被打扰的房间；观察者：另一间房间屏幕共享
• 测试总结：开发团队和利益相关者（观察者）总结出的需要修复的重要问题和优先级列表，包括解决方法构想

测试时间

为什么要每个月1次固定时间？

• 节省时间，保持测试简单，能够坚持进行
• 固定时间容易执行，预防开发计划偏离导致测试计划偏离
• 1个月时间足够修复3个测试过程中发现的重要问题
• 可以让团队成员预留出时间，增加参与机会

测试人员

为什么每轮测试理想用户数是3个人？

• 测试的目的是为了发现和修复可用性问题，不是采用大量样本证明结论，属于定性而不是定量测试
• 不用发现所有问题，也没有足够资源去修复所有问题，需要把注意力集中在必须修复的严重问题上
• 多做几次测试比一次测试中发现所有问题更实际靠谱

主持人需要什么人担任？如何做？

主持人需要耐心、冷静、有同理心、善于倾听，在测试中的主要工作是鼓励测试用户尝试操作，并把心理活动说出来，让观察者理解产品让使用者感到挫折的关键所在。

观察者是哪些人？如何做？

团队成员、利益相关人、各级经理、决策管理人员，尽可能多的观察者。在每场测试之间的间隔，让观察者写下自己认为的三个最重要的可用性问题，以便总结时找出需要首先修复的问题

测试场所

准备安静的不被打扰的空间，一张桌子和两把椅子，以及联网的电脑设备和微型麦克风，录制用户在界面上的操作、参与者与主持人的对话作为后期演示汇报的数据来源。
同时可以通过屏幕共享，允许团队成员、利益相关人和有兴趣的人从另一个房间观看测试。

测试流程

• 欢迎介绍：让参与者有心理准备
• 提问：帮助参与者放松，同时了解参与者背景与使用经验
• 主页观光：让参与者简单浏览并描述看到的网页，了解主页认知难度和参与者的专业知识
• 任务测试：观看参与者执行不超过45分钟的任务清单，同步说出想法，执行过程中不要询问用户引导性问题
• 问题探查：任务完成后，就测试中的问题或观察者提出的问题向参与者提问
• 结束部分：感谢参与者并提供相应报酬

怎样选择测试任务：

• 草图：让参与者告诉你草图含义
• 原型界面：准备足够多的任务清单，如创建账户/用已有用户名和密码登录/找回密码/找回用户名/为密保问题更改答案
• 设置任务时用准确措辞描述任务，允许参与者自身决定一部分细节，尝试让参与者引入自身情感

测试过程中遇到的典型问题：

• 用户不清楚概念
• 用户找不到关键词-原因：用户预测错误，或产品用词不当
• 内容过多用户找不到重点内容-减少页面整体干扰，把重要内容在层次结构中突出

测试脚本：http://rocketsurgerymadeeasy.com

总结会

目标：找出最严重的可用性问题，最严重的问题最先修复。

如何确定需要修复的问题？

• 提出问题：让每个观察者在每个测试过程中列举出3个最严重的问题
• 筛选问题：通过非正式投票筛选问题
• 问题评级：将筛选出来的问题按严重程度从1-10进行评级，按严重程度从上至下逐级递减，1为最严重的
• 总结问题列表：从最严重问题开始，对每个问题提出如何修复，负责人，需要的资源等，建立总结问题列表

哪些问题可以降低优先级？

• 对简单能够单人短时间独立修复的问题另列一份清单
• 抵制添加功能或元素，解决用户认知问题通常是删除让人混淆的东西而不是新增注释或其他干扰元素
• 忽略用户在不需帮助下能够自身解决的问题，如用户进入错误页面可以自己回到原有界面

其他两种测试方法：远程屏幕共享；无人主持远程测试链接。

10 移动设计

任何类别的设计本质是处理各种约束和妥协，达到良好的移动可用性的大多数挑战是作出良好的设计妥协。

移动端与桌面端产品设计的区别及注意点

• 小屏幕上人们跳转移动速度更快，屏幕阅读量更小
• 对内容的优先级排序更重视。用户经常重复的操作放在首要位置，其他操作有清晰路径到达且点击次数有限（可以先把对用户重要的功能和内容放到移动版本，再添加新内容创建桌面端）
• 对网页进行可伸缩的设计（包括动态布局、流式设计、自适应设计、响应式设计）。移动端网页允许缩放，且跳转链接能够直达目标内容，提供浏览全内容web网站的链接
• 移动端交互元素的视觉指示器更容易被隐藏。需要用明显的可视化暗示界面上用户可操作的元素
• 用户交互的方式不同。对于网页中悬停鼠标控制样式变化或链接跳转的元素，需要找到别的方式取代
• 移动端扁平化设计可以带来干净整洁的外观，但是要保留一定的可视化元素提供可操作提示
• 需要考虑移动网络带来的大量图片无法载入的问题。移动端屏幕较小，用户等待时间忍耐程度变低

移动应用的可用性属性

• 核心问题：可学习（初始打开时的帮助指导或帮助支持跳转链接）、有效的、高效的
• 市场问题：有用的、合乎期望的
• 可记忆：用户一般只在初始使用产品时会花时间去学习，但每次使用需要学习会让用户失去耐心
• 让人快乐：在有用的基础上，让用户感到惊喜，开心

移动端可用性测试

测试过程过程与网页端类似，但使用的设备和观察手段不一致：

• 移动端可用性测试需要同时观察屏幕内容和用户手势-使用摄像头
• 把摄像头连接到移动设备上，用户能够自然手持，让用户在放松情况下使用
• 不拍人脸，防止用户分散注意力
• 摄像头连接电脑，主持人从电脑屏幕观察录制内容（屏幕变化和操作手势），并共享给观察者

11 提升用户好感

Web可用性的重要组成部分是为用户考虑。

好感存储器

用户对网站的好感程度。

用户好感存储器的特点：因人而异、可逆转、依情况而定、容易被清空。

降低好感的方式

• 隐藏用户想要的信息，如客服电话、运费、价格
• 强制用户按系统原理操作
• 向用户询问不必要的隐私信息
• 敷衍和欺骗用户
• 增加多余元素加大用户操作复杂度
• 网站布局不好不专业

提升好感的方式

• 了解用户，用户操作简单容易
• 坦诚，告诉用户关心的信息
• 减少不必要的步骤
• 用心设计：保证网站准确有用，提供用户关心信息，表达清楚，组织良好
• 能解答用户的疑问：坦率、清晰且保持更新的FAQ列表
• 为用户提供帮助
• 容易从错误中恢复
• 技术资源不能实现或不确定的，需告知用户并道歉

12 可访问性

可访问性是可用性的一部分

• 可访问性可以让残障人士访问网络，让每个人有同等机会和权利访问信息
• 可访问性可以让每个用户得到好的访问体验
• 在设计过程开始就应该考虑可访问性

提升网站可访问性

• 经常测试，去掉容易让人混淆的可用性问题
• 为每张图片增加合适的alt文本（图片无法显示时的替代文本，参考webaim.org）
• 使用合适的页面标题和内容标题
• 使表单的标签、文本框、提示文本关联起来
• 在每页最前面增加“跳转到主要内容”的链接，直达目的内容而不用滚动屏幕
• 所有内容提供键盘访问方式
• 在文本和背景间设置明显对比
• 确保使用的模版主题进行了可访问性设计

可访问性推荐阅读：

• Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers; Mary Theofanos, Janice Redish.
• A Web for Everyone: Designing Accessible User Experience; Sarah Horton, Whitney Quesenbery.
• Web Accessibility: Web Standards and Regulatory Compliance; Jim Thatcher.

13 工作中的可用性

可用性测试就是通过建造更好的产品服务用户。

如何说服管理层为可用性工作提供支持

• 演示ROI
• 从业务痛点、触电、KPI、CSI出发讨论可行性

工作中如何更好进行可用性测试

• 让老板观看可用性测试：参与观察或在演示报告/邮件中增加视频片段和描述
• 开始时个人进行非正式的可用性测试
• 测试竞品
• 用同理心理解管理层的关注点
• 谦虚谨慎，弄清自身角色：主要任务是分享知识，而不是告诉别人应该怎么做

产品可用性的实际建议

• 不要使用小而对比不强的字体
• 不要把标签放到表单字段
• 通过URL跟踪保留访问过的链接
• 不要让标题漂浮在段落之间，注意亲密性

推荐阅读：

• 关于ROI：Cost-justifying Usability: An Update for the Internet Age; Randolph Bias, Deborah Mayhew.
• 关于用户体验：It’s our research: Getting Stakeholder Buy-In for User Experience Research Projects; Tomer Sharon.
• 单人用户体验：The User Experience Team of One: A Research and Design Survival Guide; Leah Buley.
• 影响力; Robert Cialdini