《认知与设计》--理解UI设计准则

这是一个关于《认知与设计》--理解UI设计准则的思维导图。 《认知与设计:理解UI设计准则》一书由UIWizards公司董事长兼首席顾问、斯坦福大学心理学博士杰夫·约翰逊(JeffJohnson)所著,

《认知与设计》 Jeff Johnson

• 1.我们感知自己的期望
  • 1.过去：经验影响感知
  • 2.现在：环境影响我们的感知
  • 3.将来：目标影响我们的感知
  • 同理感知期望对未来意味着什么
    • 1.避免歧义
    • 2.保持一致
    • 3.理解目标
• 2.为观察结构优化我们的视觉
  • 格式塔原理
    • a. 接近性
    • b. 相似性
    • 界面元素分组
    • c.连续性
    • d. 封闭性
    • e.对称性
    • 单个界面元素设计
    • f.主题和背景
    • g. 共同命运
• 3.我们寻找和使用视觉结构
  • 1.结构提高了用户浏览长数字的能力
  • 2.数据专用控件提供了更多的结构
  • 3.视觉层次让人专注于相关的信息
• 4.阅读不是自然的
  • 1.我们的大脑不是为阅读而设计的
  • 2.阅读是特征驱动而不是语境驱动
  • 3.熟练阅读和不熟练阅读使用大脑的不同特征
  • 4.糟糕的信息设计会影响阅读
    • 1.不常见和不熟悉的词汇
    • 2.难以辨认的书写和字形
    • 3.微小的字体
    • 4.嘈杂背景下的文字
    • 5.信息被重复的内容淹没
    • 6.妨碍阅读的设计缺陷的组合
    • 对设计的启示：支持，而不是干扰阅读
      • 保证文字基于特征的阅读
      • 使用简单的语言
      • 将文字格式设计出视觉层次
    • 7.软件里要求的阅读很多都不是必要的
      • 尽量让人少阅读
• 5.色觉是有限的
  • 1.色觉是如何工作的
    • 视网膜内的感光细胞
      • 1.视杆细胞
        • 1.感觉光线强弱但是不感觉颜色
        • 2.只在低亮度下工作，几乎无用
      • 2.视锥细胞
        • 1.低频细胞
          • 黄色和红色敏感
        • 2.中频细胞
          • 蓝色、黄色、橙色
        • 3.高频细胞
          • 蓝色、紫色
        • 对光线的吸收率:黄-->绿-->红-->蓝
  • 2.视觉是为边缘反差而不是为亮度优化的
  • 3.区别颜色的能力取决于颜色是如何呈现的
    • 1.两个颜色越浅越难区分
      • 界面中使用两个浅色来区分元素
    • 2.对象越小或者越细越难区分颜色
      • 图例使用的色块太小
    • 色块之间距离越远越难区分颜色
  • 4.色盲
    • 转换为灰度图来确保色盲也能区分颜色
  • 5.影响色彩区分能力的外部因素
    • 1.彩色显示屏的差异
    • 2.灰度显示器
    • 3.显示器角度
    • 4.环境光线
  • 6.使用色彩的准则
    • 1.用饱和度、亮度以及色相区分颜色，避免轻微差别
    • 2.使用独特的颜色
      • 在三个颜色通道中的一个通道触发强信号，在另外两个触发空信号
        • 红--绿
        • 黄--蓝
        • 黑--白（亮度）
    • 3.避免使用色盲无法区分的颜色对
    • 4.在颜色之外使用其他提示
    • 5.将强烈的对抗色分开
• 6.我们的边界视力很糟糕
  • 1.中央凹的分辨率与边界视野分辨率的比较
    • 600万食椎细胞
      • 中央1%
      • 边缘99%
    • 大脑的视觉皮层
      • 中央50%
      • 边缘50%
    • 眼睛在视神经出口的盲区
  • 2.边界视觉的作用
    • 提供低分辨率线索，引导眼球运动
    • 能够很好的察觉运动
  • 3.电脑用户界面中的例子
    • 当某人点击了一个连接或者按钮，屏幕上任何不在惦记位置1~2厘米距离内的东西很难注意到
    • 出错消息出现在视觉边界
  • 4.让信息可见的常用方法
    • 放在用户所看见的位置上
    • 显著的标记出错误
    • 使用错误符号
    • 保留红色以呈现错误信息
  • 5.让用户注意到信息的重武器：请小心使用
    • 弹出对话框中的信息
    • 使用声音
    • 闪烁或者短暂的晃动
    • 小心使用：频繁使用会出现心理学上的“习惯化”
• 7.我们的注意力有限，记忆力也不完美
  • 1.短期记忆与长期记忆
  • 2.对记忆的一种现代观点
    • 长期记忆：参与某神经活动模式的神经元长期甚至永久的变化组成
    • 短期记忆：感觉和注意现象的组合
  • 3.短期记忆的特点
    • 低容量
    • 高度不稳定性
    • 短期记忆的特点对用户界面设计的影响：
      • 帮助用户记住核心信息
      • 模式：
        • 用户操作根据系统所在的模式有不同的效果
        • 要么避免使用模式
        • 要么提供足够的模式反馈信息
      • 搜索结果：显示搜索词
      • 指令：允许查阅
  • 4.长期记忆的特点
    • 易产生错误
    • 受情绪影响
    • 追忆时可改变
    • 对用户界面设计的影响
      • 避免造成长期记忆负担
        • 要求使用复杂的密码：记忆负担
        • 安全问题答案：记忆负担
        • 界面一致性：减轻记忆负担
• 8.注意力对思考以及行动的限制
  • 模式一：我们专注于目标而很少注意使用的工具
    • 不应唤起用户对软件或者网站本身的注意
  • 模式二：我们使用外部帮助来记录正在做的事情
    • 交互系统应该表示出哪些是用户已完成的哪些是用户未完成的
  • 模式三：我们跟着信息“气味”靠近目标
    • 交互系统应设计的具有强烈的信息气味，并且真正能引导用户实现目标
  • 模式四：我们偏好熟悉的路径
    • 有时不动脑子胜过按键
    • 引导用户到最佳路径
    • 帮助有经验的用户提高效率
  • 模式五：我们的思考周期
    • 目标：提供完成软件为用户所设计的目标需要的清晰路径，包括起始步骤
    • 执行：软件中的概念应该基于任务而不是如何实现
    • 评估：向用户提供进度反馈和状态信息
  • 模式六：完成任务的主要目标后，我们经常忘记做收尾工作
    • 对还没彻底的事情做出提醒
    • 系统自己完成扫尾工作
• 9.识别容易，回忆很难
  • 识别容易
  • 回忆很难
  • 识别与回忆对用户界面设计的影响
    • 看到和选择比回忆和输入要容易
    • 尽可能使用图像来表达功能
      • 使用略缩图来紧凑地描绘全尺寸的图像
      • 越多人使用的功能，应该越可见
      • 使用视觉提示让用户知道他们所处的位置
      • 让认证信息容易回忆
• 10.从经验中学习与学后付诸实践容易，解决问题和计算很难
  • 1.我们有三个大脑
    • 旧脑
      • 调节身体的自动功能
    • 中脑
      • 控制情绪
    • 新脑
      • 控制有意识，有目的的活动
  • 2.从经验中学习是容易的：三种脑都能够进行
  • 3.操作已经学会的动作是容易的
    • 学会之后操作可无意识进行
    • 不占用大脑，节省脑力
  • 4.解决问题和计算是困难的
    • 使用新脑（大脑皮层）
    • 占用注意力，不能并行，较慢
    • 计算消耗注意力和短期记忆力
  • 在用户界面设计上的影响
    • 显著地表示系统状态和用户当前进度
    • 引导用户完成他们的目标
    • 不要让用户诊断系统问题
    • 尽可能减小设置的数量和复杂度
    • 让用户使用感觉而不是计算
    • 让系统令人感到熟悉
      • 遵循业界标准和习惯
      • 让新的应用软件像用户习惯了的旧软件那样工作
      • 用比喻作为设计基础
    • 让电脑去计算
• 11.许多因素影响学习
  • 1.当操作专注于任务、简单和一致时，我们学习更快
    • 任务分析
    • 对象-动作分析
    • 尽可能简单
    • 一致性
    • 对象-操作矩阵
    • 按键的一致性
  • 2.当词汇专注于人物、熟悉和一致时，我们学习更快
    • 词汇应是专注于任务的
    • 词汇应该是熟悉的
    • 专用词汇应保持一致
    • 有一个好的概念模型能够方便开发一套专注于任务、熟悉和一致的专用词汇
    • 风险低的时候我们学习快
      • 尽可能防止出错
      • 停用不合理的命令
      • 向用户清晰地展示他们做了什么
      • 让用户能够轻松地撤销、反转或者修正错误
• 12.我们有时间要求
  • 1.高响应度
    • 1.立刻告知已经接收到你的输入
    • 2.对操作需要多长时间完成提供一定的指示
    • 3.在等待时允许你去做其他事情
    • 4.能够理智的管理事件队列
    • 5.将系统内部管理和低优先级的任务放在后台运行
    • 6.对最常见的用户请求做出预期
  • 2.人类大脑的许多时间常量
  • 3.时间常数的工程近似法：数量级
  • 4.为满足实时交互的设计
  • 5.达到高响应度交互系统的另外一些指导原则
    • 1.使用忙碌标识
    • 2.使用用户进度指示
    • 3.先显示重要信息
    • 4.在手眼协调的人物中伪装重量级计算
    • 5.提前处理
    • 6.根据用户输入的优先级而不是输入的顺序来处理
    • 7.监控时间承诺，降低工作质量来保证不落后
    • 8.提供反馈，网页也要如此
  • 6.实现高响应度是重要的