Notes of designing with the mind in mind

21 Nov 2019

一本糅合了认知科学，脑神经科学以及编程的关于设计的书。

• frontend as 人机交互 序，

• 工程学 x 设计学 x 科技 序，

• 如果你不知道为甚出现差异，做A-B测试的作用也会大打折扣 序，

• 说到底，用户界面设计准则是以人类心理学为基础的 引言3，

Chapter 1

• 感知目的（你的期待）影响感知内容，并形成单向路径 2，
  • 引导与过滤 9，11，
  • 儿童更容易排除观察时的偏差 9，

• 心智框架与控件摆放一致 4，

• 注意瞬脱与页面事件间隔设计 5，

• 惯例与标准，一致性，理解用户到来的目标 11，12，

Chapter 2

• 视觉格式塔原理 13，
  • As used in Gestalt psychology, the German word gestalt is interpreted as “pattern” or “configuration”.
• 格式塔原理中影响分组（类）感知的关系：接近，相似 15，16
• 格式塔原理中对自动脑补的描述：连续性，封闭性 17，18，19
• 格式塔原理中对对称化解析的描述 19，
• 格式塔原理中对同步运动元素被解析为同组或同类的描述 23，

Chapter 3

• 结构化呈现信息容易被理解 27，
  • 对长串数字分组 29，
  • 苹果的例子 32，

Chapter 4

• 视觉是为边缘反差而不是为亮度优化的 35，

• 色块如何更易区分 36，

• 影响色彩感知的外部因素 40，

• 色彩使用准则 40，

Chapter 5

• 视觉中央区域占用更多大脑资源，边缘视觉只对运动物体敏感 43，

• blind spot 4，

• 边缘视觉提供视觉线索 46，

• 低亮度条件下如果你不直接看物体（如流星）， 反而能看得更清楚 47，

• 让信息可见的常用方法 50，

• 弹窗应小心使用 51，
  • 弹窗的模式级别（对当前操作的影响程度，从完全不影响到完全阻断所有操作） 51，
  • 用户可能因厌烦禁用所有弹窗（可能只针对特定网站）。习惯化屏蔽 52，
• 使用提示声 53，

• 使用闪烁或抖动 53，

• 视觉跳入 55，
• 设计出与众不同的图标集非常困难 59，

Chapter 6

• 大脑是为语言(speaking/speech)而不是为阅读(reading)而设计的 62，

• 阅读是需要训练的 62，

• 基于语境的阅读是对阅读能力不足的补偿 66，

• 初级和高级阅读者使用的大脑区域不同 68，

• 糟糕的信息设计 68，
  • 不常见的词
  • 不好的字体
  • 信息被重复的内容淹没
  • 居中对齐
• 如何支持用户的阅读 73，
  • 避免前面提到的糟糕设计点
  • 结构化信息呈现方式
  • 不要给太多文字 74，
  • 尽量减少用户阅读量
  • 测试设计效果

Chapter 7

• 睡眠与间隔学习 80，

• 去学习过程更多的是使记忆模糊化的过程 81，

• 长期记忆是工作记忆的潜在输入内容 81，
  • 工作记忆是“此刻的记忆”，它整合了所有我们的感知形式和长期记忆 82，
  • 工作记忆的定义 82，

• 对 记忆是什么 的类比定义 82，

• 注意力容易被什么事物吸引 84，
  • 视觉边缘移动或朝向我们移动的物体
  • 威胁，危险
  • 人脸
  • 性和食物

• 用户界面应该帮助用户从一个时刻到下一个时刻记住核心信息 87，

• 要么避免模式，要么提供强烈的反馈告知当前所在的模式 87，
  • 如ps在相同界面选择不同模式时，同样的操作比如鼠标点击拖拽执行的操作是不同的
  • 模式的缺点是一旦串台，操作就乱了，这也是为什么需要强烈反馈。想象你在踩油门之前忘了现在是前进挡还是后退挡的情景

• 提供搜索结果时应该用某种方式让用户能随时注意到最初的搜索关键词 88，

• 不同的话题或请求单独写在不同邮件里 89，

• 每个页面应该只有一个 Call to action 元素， 避免分心的元素 89，

• 指令或操作步骤需要保持随时可见，或至少当前步骤可见 90，

• 长期记忆是分布式存储的 90，

• 长期记忆的特点 91，
  • 易产生错误
    • 高压缩比
    • 不同记忆以不同细节层次记录
  • 受情绪影响
  • 记忆可以改变
• 长期记忆特点对用户界面设计的影响 92，
  • 设计者应该避免开发出给用户造成长期记忆负担的系统。比如对密码特征的过多要求，安全提示问题等
  • 用户界面的一致性有助于学习和长期记忆

Chapter 8

注意力对思考以及行动的限制–人的思考行为模式

• 1 我们专注于目标而很少注意到使用的工具 95，
  • 工作记忆的特点决定
  • 注意力转向工具就会丢失任务执行的细节
    • This is why mastery-based learning is important.
    • 熟悉工具的重要性，熟悉程度越接近无意识状态，给予任务的关注就越多
  • 《Don’t make me think》96，
    • 网站本身应该隐入背景，而让用户专注于要完成的任务或达成的目标
    • “如果你让我思考怎么用你的软件或网站，而不是做我要做的事，那你就失去我这个用户了”
• 2 我们能注意到更多与目标相关的东西 96，
  • 非注意盲视：大猩猩实验
  • 变化盲视：指路时工人抬玻璃从两人中间穿过，求助者被替换但指路人并未注意到
• 3 我们使用外部帮助来记忆正在做的事 98，
  • 做记录，标记，归类等
  • 用户执行任务时应该标记处那些是完成的，提示当前进度，以及提供区分操作对象的辅助显示功能（如颜色，透明度）
• 4 我们跟着信息“气味”靠近目标 100，
  • 注意力的目标导向倾向
• 5 我们偏好熟悉的路径 102，
  • 探索新的路径就是解决问题，注意力和短期记忆就要承受巨大的压力 102，
  • 不需要动脑子
  • 为了节能
• 6 我们的思考周期：目标，执行，评估 103，
  • 每一项大任务的子任务或子步骤也是这样的周期，类似recursion
  • 对应到设计原则就是：
    • 提供清晰的目标
    • 提供清晰的操作指导而不是实现细节
    • 提供完成情况的明确反馈
• 7 完成任务的主要目标后，我们常常忘记首尾 106，
  • 注意力是十分稀缺的资源，容易瞬间滑落或松懈
  • 设计中应该提示用户完成首尾工作或自动帮助用户完成首尾工作

Chapter 9

长期记忆的两个功能， 识别和回忆

• 识别容易，回忆很难 110，

• 识别瞬间的神经模式激发，只要这个模式是之前被激发过的，识别随即产生。如果是陌生的事物，会激发新的神经模式，也就无法引起识别。当然还有处于中间状态的识别，比如类似的事物或部分熟悉的特征 111，

• 回忆是在没有感觉输入的情况下，长期记忆对神经模式的重新激活，所以更难 112，
• 人脑在进化中并没有进化出回忆事实的能力 112，

识别与回忆对用户界面设计的影响 113，

• GUI 的设计基础
  • 看到和选择比回忆和输入容易
  • 尽可能用图像来表示功能
  • 文字指令也有其自身优势
• 缩略图帮助识别和寻找对象
• 使用频率越高的功能，可见性应该越高
• 用视觉提示让用户意识到当前所处的位置或步骤
• 让认证信息容易回忆
  • 让用户可以自定义密码找回问题等
  • 在保证信息安全的前提下考虑使用生物识别

Chapter 10

• 系统二很少占主导地位，系统一（无意识的，习惯的，情绪化思维）比系统二的运行速度快10到100倍 120，
• 系统一容易被误导
  • 用简化的问题替代需要思考的问题
  • 倾向于认为没有感知到的就不存在
  • 基于目标和经验过滤（损失）信息

• 系统二比较懒

• 什么情况下需要系统二介入 121，
  • 我们的目标是把事情做得绝对正确而不是大概正确
  • 系统一无法自动识别对象的时候
  • 系统一给出多个矛盾的解决方式的时候

• 归纳法的缺点也是他的优点 123，

• 从经验中学习并不一定 要大脑皮层的参与， 旧脑和中脑就可以从经验中学习

• 训练，训练，还是训练 124，

• 现实中的大部分任务由无意识的和受控的两部分组合而成 125，

• 大脑皮层对应的功能 126，
  • 推理和分析即时情况
  • 计划或者寻找策略和步骤去应对这些情况
  • 执行策略和步骤并且监控进展

• 用计算机术语表达就是：大脑皮层给了我们为自己即时创造程序的能力 126，

• 人脑不可能是为计算而优化的 127，

• 否定句式会创造更多的信息块（造成更大的记忆负担）128，

• 一些问题和计算需要平常人所没有的训练 129，

• 电脑和计算器在计算和问题求解上，至少在定义清晰的问题上，比我们擅长得多 130，

• 交互系统应该减少用户在操作上消耗的注意力，避免把稀缺的认知资源从主要任务中抽离 131，
  • 显著标示系统和任务状态，以便用户能一直轻松地查看到他们的状态
  • 引导用户完成目标，聚焦
  • 提示信息应该明确简洁
  • 不要让用户诊断系统问题
  • 尽量减少设置的数量和复杂度，比如各种组合参数
  • 让系统令人感到熟悉
    • 遵循业界标准或惯例，convention
    • 改版操作需谨慎
  • 计算工作交给电脑

Chapter 11

• 当实践经常，有规律和精确时，我们学得更快 136，

• 实践的精度越高，学得越快 137，
  • 未经组织的神经元会发出噪声
  • 不精确的实践强化不精确，因为控制它的神经网络仍充满噪音
• 软件设计的三步 138,
  • 任务分析 task, user story
  • 概念模型（对象/操作分析） Model, Controller
  • 实现 View, implementation

• 当操作任务聚焦，简单，一致时，我们学得更快 137，

• 将任务转化为工具所能提高的操作 137，

• 执行的鸿沟 138，

• 系统不同功能操作越可预期，一致性就越高 141，

• 一致性的两个层级 141，
  • 概念层：由对象，操作，和概念模型属性之间的映射决定
  • 按键层（具体操作）

• 不论惯例和约定是如何被封装起来的，目标都是在概念和任务层面上创新而在按键层面上坚持惯例 143，

• 当词汇专注于任务，且词汇熟悉和一致时，我们学得更快 144，
  • 说用户能听懂的话
  • 词汇使用要有一致性 147，
    • 反例： ps中对 Fuzziness 和 Tolerance 的同时使用 148，

• 编写产品词典来规定用户所能接触到的每个对象，动作和属性 150，

• （尝试）风险低的时候我们学得更快 150，
  • 用户修正错误的（时间和操作等）成本低
  • 鼓励用户探索

Chapter 12

• 损失厌恶 154，

• 措辞（数字和语言的使用）影响我们的选择 155，

• 生动的想象和记忆影响我们的选择 156，

• 实际上，支持复杂决策的软件十分重要 159，

• 说服和引导： 诱导系统一，绕开系统二 164，

  • 专业人士跳过统计数据，用强烈的故事来设计宣传，从而唤起恐惧，希望，满足，享受，性，金钱，民声，食物和更多的恐惧 164，

Chapter 13

• 菲茨定律：在屏幕上，目标越大，且越靠近起始位置，你就能越快地指向（定位、点击）它 167，

• 粗调与精调 170，

• 图标增大的边际效应递减 171，

• 如何应用菲茨定律 171，
  • 目标要足够大
  • 实际可点区域要和对象可见区域同样大
  • 扩大选中操作的可点区域
  • 点击对象之间留出足够空间
  • 重要目标放在屏幕边缘更易于定位
  • 尽量使用弹出菜单
• 右键层级菜单的单个选项应该足够宽 174，

Chapter 14

• 相应时间是影响用户满意度的最重要因素，没有之一 177，

• 高响应度的系统即使无法立刻完成用户请求，也能让用户了解情况（及时反馈） 178，

• 糟糕响应度的例子 178，
  • 进行点击等操作后的反应迟缓
  • 某项操作耗时长，会中断其他任务，还不能取消
  • 长耗时的任务不提示总时长或剩余时长
  • 断断续续难以理解的动画效果

• 人脑中的时间常量 179，

• 以数量级差异来考量时间 184，

• 人机交互的时间底线列表 186，

• 如果一个系统有延迟，应该把延迟放在单个任务之间，而不是之内 191，

• 先显示重要的东西 191，
  • 多页文档打开时迅速显示第一页，然后再加载后面的页面
  • 显示图片时如果速度较慢首先显示低分辨率的压缩版，不要逐行缓慢加载清晰图片 192，
  • 提前处理请求或可能的请求 193，
  • 在用户有频繁操作的时候考虑任务优先级，那些当前或队列中的任务可以搁置或中断 193，
  • 必要时降低质量来保障时间
    • 比如看视频卡顿就切换到低分辨率
    • 建模软件在缩放或移动旋转模型时将模型显示为大的无细节方块
• 网页设计中如何提高响应度 195，
  • 减少图片数量或大小
  • 优先显示概览，只在需要时显示细节
  • 下载代码到用户本地，以减少流量消耗
• 高响应度不是单方面提高硬件性能就可以实现的，这涉及到设计问题

后记 197，

• 技术发展很快
• 但人类如何感知，学习，和思考的基本知识变化不快
• 人类对自身的认识在不断提高
• 本书内容可能很快就过时了

著名的用户界面设计准则 199