[笔记] Don’t Make Me Think 点石成金:访客至上的Web和移动可用性设计秘笈

前言

  • 局势变化
    • 技术已经进一步发展。
    • 网络本身也在不断改善。
    • 可用性成为主流。
  • 本书宗旨:讲述如何让网站设计得卓越、有用;关于设计方法,只要是设计需要人与之交互的产品都可以适用。
  • 基本的设计原则永远经典,哪怕世事变迁,沧海桑田。因为可用性是关于人,关于人们如何理解和使用产品的,它和技术没有关系。同时,尽管技术的发展日新月异,人本身的变化却非常缓慢。
    或者就像 Jakob Nielson 所述:

    人类大脑的容量不会马上发生变化,所以研究这些人类行为所得到的成果在很长时间内都不会失效。对于用户来说,20年前他们遇到的困难,现在同样如此。
  • Medieval Helpdesk
    (Notes. 最搞笑/最痛的点:user guide 也是本“新型” book(经典死锁

 

导读

  • Advanced Common Sense/本书作者大部分工作都是常识性的“咨询业务”
  • “It’s not rocket surgery.”(rocket surgery 是 “rocket science” 和 “brain surgery” 两个词拼凑出来的,意思是“某种不存在的超级复杂的高精尖技术”)是我公司的座右铭。
  • 本书的特点及原因
    • 如果它很薄,就更有可能用得到——这里有一条很好的可用性原则:某个东西越需要投入大量时间,或者看起来会这样,将来就会越少被使用。
    • 你不需要面面俱到。(《血字的研究》福尔摩斯的“大脑阁楼”理论)
  • 可用性的定义——“让一个有着平均能力和经验的人(甚至稍低于平均水平)能明白如何使用它——不必付出过度的努力,或者遇到不必要的麻烦。”
    • 有用
    • 可学习
    • 可记忆
    • 有效
    • 高效
    • 合乎期望
    • 令人愉悦

 

指导原则——

第1章 别让我思考

  • 别让我思考—— Krug 可用性第一定律
  • 在每个可用性问题的背后,通常都有一个貌似合理的根据,以及一个良好的但是错误的意图。

 

第2章 我们实际上是如何使用 Web 的

  • 为什么东西总是在你找的最后一个地方找到?因为你找到以后就不会再找。——儿童谜语
  • 第一个事实:我们不是阅读,而是扫描
    • 我们为什么扫描?
      • 我们总是任务在身。
      • 我们知道自己不必阅读所有内容。
      • 我们善于扫描。
    • 就像 Ginger 一样,我们一般会把注意力放在这样的文字和短语上:1)与手头任务有关的;2)我们当前或接下来的个人兴趣;3)我们脑海里一些根深蒂固像触发器那样的词,例如“免费” “大减价” “美女”,还有我们的名字。
  • 第二个事实:我们不做最佳选择,而是满意即可
    • 《力量之泉:人们如何决策 (Source of Power: How People Make Decisions)》by Gary Klein
    • stisfice – satisfying & sufficing
    • 《人的模型:社会化和理性 (Models of Man: Social and Rational)》by Herbert Simon
    • 火灾指挥官:非理性决策模型
      • “他们采用了头脑中想到的第一个合理计划,然后在心里快速检查了一下可能的问题。如果发现没有什么问题,就开始行动。”
      • Notes. 即从来没有选择之间的权衡,永远基于想到的第一个选择。
    • 为什么 Web 用户不寻找最佳选择?
      • 我们总是处于忙碌中。
      • 如果猜错了,也不会产生什么严重的后果。
      • 对选择进行权衡并不会改善我们的机会。
      • 猜测更有意思。猜测不会像仔细衡量那么累;猜对了速度会更快;机会因素:意外但不错的内容令人开心
  • 第三个事实:我们不是追根究底,而是勉强应付
    • Notes. 不需要穷尽,也不可能穷尽
    • Notes. 人们带着偏见进入并使用,并且继续保持偏见
    • 《乞丐王子》结尾
    • 为什么会这样?
      • 这(事物背后的运行机制)对我们来说并不重要。
      • 如果发现某个东西能用,我们会一直使用它。Notes. 只有聪明且勤劳的人会一直思考!一直反省!
    • (既然人们勉强应付的时候这么多)他们有没有弄明白真的那么重要吗?
      很重要,因为有时候可以勉强应付,但通常效率不高,而且容易出错。
      另一方面,如果用户明白了:

      • 他们更容易找到自己需要的东西,无论对用户还是对你都好。
      • 他们会更容易理解网站的服务范围——不只是他们自己偶然看到的那些。
      • 你更可能引导他们到网站上你更希望他们看到的地方。Notes. knowledge base 越充足,沟通越顺畅。
      • 在你的网站上,他们会觉得自己更聪明,更能把握全局,这会让他们成为老用户。只要有了一个让人们感觉更好的网站,他们就会离开这种让人勉强应付的站点:鲤鱼脱却金钩去,摇头摆尾再不来。Notes. 如果你不努力做到这件事,总有人努力做到。然后他们做出更好用的产品,然后带走你的用户。

 

第3章 广告牌设计 101 法则

  • 尽量利用习惯用法
    • 如果准备创新,必须理解你想要取代的设计的价值(参考迪伦说过的,“如果不要法律,你就必须诚实”);人们也很容易低估习惯用法的价值
    • 如果不满足:
      • 1)同样清楚,同样不言而喻,没有学习曲线的方法
      • 2)带来很大的价值,因此值得用户付出一点努力来学习的方法
      • 尽可能地富有创造性;尽可能进行美化,让设计富有吸引力(另外,确定它仍然可用)(Notes. 在用户体验上的鲁棒性)
    • 那么请尽量利用习惯用法
    • 一个原创的、有新意的 Web 设计例子:Harlem.org
    • 简洁胜过一致
  • 建立有效的视觉层次
    • 越重要的部分越突出
    • 逻辑上相关的部分也在视觉上相关
    • 逻辑上包含的部分在视觉上进行嵌套
  • 把页面划分成明确定义的区域
    • 广告盲点 (Banner Blindness)
  • 明显标识可以点击的地方
    • 《日常事物设计心理学 (The Design of Everyday Things)》by Don Norman
    • 人们有时会依赖网页上的鼠标光标遇到链接会从箭头变成小手这个特点(Notes. 注意这个伏笔!)
  • 最小化干扰/降低视觉噪声
    • 三类视觉噪声
      • 眼花缭乱(——太多)
      • 组织不当(——太乱)
      • 太过密集(——太密)
      • Notes. 这适用于一切视觉艺术!如果你没有能力驾驭你所堆出来的这些东西/使之形成美感,那么就尽量避免多、乱、密这三点!穿衣搭配、平面设计、室内设计…
      • 避免低信噪比状态
    • 一个好方法:先假定所有内容都是视觉噪声(也就是“有罪推定”的方法),并去除任何对页面没有帮助的内容。(Notes. 只有“极度关键”的信息我们才勉强宽赦它!)
  • 为内容创建清楚的格式,以便扫描
    • 充分使用标题
      • 确保它们更靠近由它们引导的内容
    • 保持段落简短
    • 使用符号列表
      • 列表的不同项目之间应该留出一点点额外的空白
    • 突出关键词语
    • 《消除文字 (Letting Go of the Words)》by Ginny Redish

 

第4章 动物,植物,无机物

  • 点击多少次都没关系,只要每次点击都是无须思考、明确无误的选择。—— Krug 可用性第二定律
  • 《有效的表单:为可用性设计 Web 表单 (Forms that Work: Designing Web Forms for Usability)》by Caroline Jarrett
  • 指引和帮助
    • 简短
    • 及时
    • 不会错过
    • e.g. 伦敦街边的 LOOK RIGHT ->

 

第5章 省略多余的文字

  • 不要在 Web 上写作的艺术(Notes. 哈哈哈!Web 页面上的文字是为了传达信息,而不是文学创作)
  • 去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。—— Krug 可用性第三定律
  • 《风格的要素 (The Elements of Style)》by E. B. White
  • 欢迎词必须消灭
    • 没有包括有用的信息,只在那里一个劲地说自己有多好,而不是描述什么东西能让我们感觉更好。(Notes. 只是论点,没有论据)
  • 指示文字必须消灭
    • Notes. 意思不是消灭指示,而是不要用啰嗦的文字来指示:“给我一个链接让我现在就能跳转过去”,Ling讲过的,用最直接的方法解决问题!)

 

必须正确处理的几个方面——

第6章 街头指示牌和面包屑

  • 如果在网站上找不到方向,人们不会使用你的网站。
  • 网络导航 101 法则
    • 你通常是为了寻找某个目标。
    • 你会决定先询问还是先浏览。
      • 搜索狂用户 (Search-dominant user)
      • 链接狂用户 (Link-dominant user)
    • 如果选择浏览,你将会通过标志的引导在层次结构中穿行。
    • 最后,如果找不到想要的东西,你会离开。
  • 无法承受的浏览之轻(哈哈哈
    • 感受不到大小(Notes. 我们对网站的 full scope 没有概念!)
    • 感受不到方向
    • 感受不到位置
    • 书签(存储的个人捷径)非常重要;后退按钮是浏览器上用得最多的按钮
    • 主页就像北极星
    • 人们容易在 Web 上忘记时间的流逝
  • 被忽视了的导航用途
    • 帮助我们找到想要的东西 & 告诉我们现在身在何处
    • 告诉我们这里有些什么
    • 告诉我们如何使用网站
    • 给了我们对网站建造者的信心
  • Web 导航习惯用法
    • 持久导航/Persistent Navigation;全局导航/Global Navigation
      • 站点ID/Logo:通常在左上角/至少靠近左上角(Notes. 视线最开始的地方),在当前站点结构上层次最高;同时作为回到主页的按钮
      • 实用工具/Utility/常用链接:通常4-5个,用户用得最多的几个;“你在这里”指示器(采用多种视觉区别);返回主页/Home
      • 搜索框/Search:避免花哨的用词、指示说明;如搜索范围可变时,则提供搜索选项(注意!谨慎地提供选项;在它有用的时候再提供——当我到达搜索结果页面,发现搜索全部内容得到了太多结果的时候,此时我需要缩小搜索范围)
      • 栏目/Section/菜单/Menu/主导航条/Primary Navigation
    • 页面名称
      • 每个页面都需要一个名称
      • 页面名称需要出现在合适的位置
      • 名称要引人注目
      • 名称要和点击的链接一致(或存在多数人默认/常识性的关联)
    • 页内导航
      • 实在很难找到良好的三级导航例子
        • 良好的多级导航本来就很难设计——页面空间有限
        • 设计师即使只设计前两个层次也常常感到时间不够
        • 它看起来并不重要(有一种倾向认为,当人们深入到网站的这一个层次后,他们自然会明白如何操作)
        • 除非从一开始就从顶往下进行导航设计,否则以后很难再添加,也很难保持一致性
    •  小字体版的底端导航
  • 表单是个例外:只需要站点ID,一个回到主页的链接,以及任何可能有助于填写表单的实用工具作为最小规模的持久导航就够了。
  • 面包屑
    • 把它们放在最顶层
    • 使用 “>” 对层级进行间隔
    • 加粗最后一个元素
  • 标签/Tab
    • 是极少几个物理隐喻有效应用到用户界面中的例子之一
    • 它们不言而喻
    • 它们很难错过
    • 它们很灵活
    • 激活的标签页位于其他标签页之前(优先级的前后)
  • 后备箱测试/Trunk Test
    • 在网络上的体验更像是被绑架而不是一路鸟语花香地走过去(Notes. 我们是迷失的!
    • 标准答案应该是这些元素清楚无误地出现在页面上,而不管你是不是凑近观看。你只能依赖页面的整体外观,而不是细节
    • 执行过程
      • 在网站上任意选择一个网页,把它打印出来。
      • 拿到一手开外,或者斜过一个角度,让你不能仔细观察。
      • 尽快找到下面清单中的项目并画上圆圈:
        • 站点ID
        • 页面名称
        • 栏目(主导航)
        • 页内导航
        • “你在这里” 指示器
        • 搜索

 

第7章 Web 设计中的大爆炸理论

  • 主页要完成的任务
    • 站点标识和使命
    • 站点层次
    • 搜索
    • 导读
    • 内容推介
    • 功能推介
    • 适时更新的内容
    • 交换链接
    • 快捷方式
    • 注册
    • 一些抽象的目标:
      • 让我看到自己正在寻找的东西
      • … …还有我没有寻找的
      • 告诉我从哪里开始
        • 让每个起点看起来像起点
        • 清楚地给它们加上文字描述
      • 建立可信度和信任感
  • “首要位置”——页面上不用滚屏就能看到的部分
  • 传达整体形象
    • 生产者与使用者/创作者与观众之间的gap
    • 很少有人仅仅因为他们每次看到同样的解释说明而不再访问这个网站
    • 目标/常用用户也不懂
    • 即使是被广告吸引来的,当他们到达你的网站时,还会清楚地记得是什么引起了他们的兴趣了吗?
  • 最初的那几秒特别重要
  • 网站的每个页面都应该尽量给用户提供指引和参考:(点击链接进入你的网站后)人们会瞬移到网站的深处,看到链接过来的页面。然后,往往他们所做的第二件事就是去主页,看看周围环境。
  • 如何传达(整体形象)
    • 口号/Tagline
    • 欢迎广告
    • “了解更多”
  • 传达信息的指导原则
    • 需要多大空间就使用多大空间
    • 但是不要使用过多的空间
    • 不要把使命陈述当作欢迎广告(Notes. 号召性/煽动性)
    • 最重要的是进行测试
  • 没有什么比得上一个好口号
    • 清楚,言之有物
    • 长度合适(6-8个英文单词)
    • 表述了网站的特点和显而易见的好处(全世界只有你自己适用,其他网站/公司都用不了)(Notes. 找到自身的唯一性/不可替代性)
    • 不要太笼统(别把口号和宗旨/motto混淆起来。宗旨表达某种指导原则、某个目标或某种理想,但是口号传达了某种价值主张)(Notes. 卖点!)
    • 有个性、生动,有时候还很俏皮
    • 就算网站来自著名的离线品牌,它在网络上的使命也一定跟原来不同,那么解释这种区别很重要
  • 共有区域悲剧/The Tragedy of The Commons
    • 任何共享的资源(共有区域)都会因为过度使用而遭到破坏
    • 由于主页变得更混乱所引起的有效性总体损失是由所有的栏目一同承担
    • 缓解方法:从其他热门页面进行推介;轮流使用主页上的同一块空间

 

确定你没有做错的几件事——

第8章 农场主和牧牛人应该是朋友

  • “信仰大战”
    • 它们由大量无法验证的个人信仰组成——大体上是为了在某些重要问题的最好做法上取得一致。
    • 很少能让人改变他们原来的看法。
    • 浪费时间;产生紧张气氛,破坏团队成员之间的关系。
  • 而且,由于这些主张的力量——还有人的天性——自然有一种把这些喜欢或不喜欢投射到整个 Web 用户身上的倾向,认为绝大多数用户喜欢我们所喜欢的。我们通常认为大部分用户跟我们一样。
  • 职位情绪 vs. 他们各自不相同
  • 市场文化和工程文化 ( The Culture of Hype and Craft) / 艺术和商业 / 农场主和牧牛人 vs. 铁路大亨
    • 做出有助于吸引风险投资、用户、战略合作伙伴和盈利的承诺
    • 实现这些承诺
  • 《 strategy + business 》杂志
  • 普通用户的神话
    • 还有另一个隐藏得更深的信仰:相信大部分 Web 用户是弹性的,可以随意变化。
    • 寻找某种方式(不管是专家的意见、发布的研究成果、调查问卷,还是焦点小组)来确定绝大部分用户喜欢或不喜欢什么——找出所谓的普通用户。
    • 以上:把用户当数据
    • 所有 Web 用户都是独一无二的。
    • 所有的 Web 使用都是不一样的。
    • 以上:把用户当人
    • “认为好的 Web 设计主要是找出人们的喜好” vs. “经过仔细考虑、实现和测试的设计就是好的(没有简单的‘正确’答案)”
  • “大部分人喜欢下拉框吗?” vs. “使用下拉框会让使用网站的大部分人产生一种良好的体验吗?”
  • 也只有一种方式来回答这种问题:测试。(Notes. 实践是检验真理的唯一标准。)
  • 测试会让我们看到用户的动机、理解、反应的差异。

 

第9章 一天10美分的可用性测试

  • “为什么我们没有早一点这么做?”——太少了,太迟了
  • 焦点小组不是可用性测试
    • http://someslightlyirregular.com/blog/2011/08/12/you-say-potato/
    • 焦点小组研究中,一小组人(通常是 5-10人)围坐在桌子旁边,侃侃而谈,谈的是他们对产品的看法,产品的过往使用经验,或者他们对一些新概念的反应等。如果是想要快速得到部分用户的意见和感觉,焦点小组是一种不错的方法。(Notes. = perception)
    • 可用性测试中,一次一个用户,我们观看用户试用一些东西(不管是网站、网站原型,还是一些关于新设计方案的草图),去完成一些典型的任务,通过观察用户的行动,你可以检测到那些让用户混淆和倍感挫折的地方,并修复它们。(Notes. = action)
    • 两者之间最主要的区别是,在可用性测试里,你会看到人们真正的使用情形,而不是只听到他们的说法。
    • 焦点小组在抽象地确定你的目标受众想要什么,需要什么,喜欢什么的时候,可能会很有用。它们也在测试网站背后的理念是否有意义、价值主张是否吸引人等方面起到了很好的作用,同时,它们在了解当前用户在怎样利用你的网站帮助解决他们的问题方面、发现用户对你和你的竞争对手看法如何等方面,也很有帮助。
      但它们不适合用来了解网站的运行情况,以及怎样改进网站。
    • 能从焦点小组学到的知识,是你们在任何开发和设计之前就应该了解的,例如你们是否在建造对的产品,所以焦点小组最适合用在这个过程的早期阶段。而可用性测试,在另一方面,应该贯穿在整个开发和设计过程中。
  • 关于测试的几个事实
    • 如果想建立一个优秀的网站,一定要测试。
      • 把测试看作旅行:一种开阔性的体验
      • 测试实际上更像邀请外地的朋友过来参观
    • 测试一位用户比不做测试好一倍。
      • 测试总是会有效果
      • 测试很容易进行,而且经常能产生许多有价值的看法
    • 在项目中,早点测试一位用户好过最后测试50位用户。
      • 早点做一次简单的测试
      • 任何在开始时就有助于防止你犯错误的方法都很划算
  • 跳楼大减价的简易可用性测试
    • 《妙手回春:网站可用性测试及优化指南 (Rocket Surgery Made Easy: The Do-it-Yourself Guide to Finding and Fixing Usability Problems)》
    • 每个月一上午(每个月一次)
      • 保持测试简单,因此能坚持进行
      • 满足需要
      • 不需要决定什么时候测试
      • 人们更可能参与进来
    • 持续进行,贯穿整个开发过程(而不是网站快要开发完成的时候)
      • 开始设计网站之前,就测试一下同类的网站
      • 从最开始勾勒的草图,到线框图、页面排版、界面原型,还有最后的实际网页
      • 怎样选择测试任务
        • (如果只有一些勾画的草图)简单地让他们看看,并请他们告诉你他们认为这些图表达的是什么
        • (如果比草图更详细)列出一个人们应该能够在上面进行的活动清单
        • 准备足够的任务(有些人总是会完成得比你预计的要快一些)
        • 为这些任务选择合适的措辞,让参与者们能准确理解你希望他们做什么
        • 可以允许测试参与者自己决定一部分细节:这样会引入他们自己的情感,并且可以让他们更多地用上他们自己对这些内容的理解
    • 每次测试3个参与者(而不是8个或更多)
      • 这类测试的目的不是为了证明任何东西(要进行证明,就需要定量测试)
      • 你不用发现所有的问题:一个半天的测试,就能让你发现太多的问题,一个月都修复不完
      • 前三个用户足以暴露最严重、最明显的问题
    • 随便找一些人,如果必要,经常进行测试比测试“真实用户”更重要
      • 宽松招募,曲线上升
      • 允许你的测试用户和目标群体之间存在差别。如果其中一个人遇到某个问题,问问你自己:“我们的用户也会遇到这个问题吗,还是因为测试参与者不知道一些专业知识所以导致了这个问题?”(Notes. 给到了一个思考 why 的角度)
      • 我常常喜欢使用一些并不是目标用户的测试参与者,因为下面的三个理由:
        • 设计出的网站只有你的目标群体能使用,这通常并不是一个好主意。在很多情況下,不管怎样,你需要满足专家也同样需要满足新手。
          Notes. 以及 Jason 讲的工作环境中常有的:我们要接手他人的 handover,我们也会交接工作给他人;如何更快更好地看懂、会使用一个充满 legacy 的网站?(学习成本、认知差距、…)
        • 在内心深处,我们都是初学者。找来一位专家,你会发现他也在勉强应付——只不过在高一点的层次上。
        • 专家通常不会介意对初学者来说很清楚的界面。每个人都喜欢简洁(是说真正的简洁,不是把一大堆内容藏到下面的那种)。因此如果“几乎任何人”都能使用,专家也能使用。
          Notes. 真正的“别让我思考”——新手看得懂学的会,专家不介意
      • 怎样找到测试参与者
    • 在开发现场进行(而不是租用的场地)
      • 屏幕共享软件,例如 GoToMeeting 或WebEx
      • 屏幕录制软件,例如 Camtasia
      • 主持人/facilitator:鼓励测试用户去尝试;比较有耐心、冷静、有同理心、善于倾听;让测试参与人觉得舒服自在,并把注意力集中在测试任务上,并鼓励他们尽可能地“说出心里话”:把心理活动说出来
      • Notes. 突然明白了,埋点实际上是在做可用性测试啊!
    • 更多的人看到测试“实况”(而不是录像)
      • 进行可用性测试,其中最有价值的一件事就是它能在观察者身上起到的效果。
      • 重要的教训都很明显。
    • 一份1-2页的邮件,列出团队在总结会上的决定/bullet points(而不是花一星期准备的大部头报告)
    • 整个开发团队,加上任何感兴趣的利益相关者,在测试结束之后的午饭时间一起核对笔记,并决定修复哪些问题(由群众而不是专家决定)
    • 找到最严重的那些问题,并承诺在下一次测试之前修复它们(和消防队员想方法是一致的;而不是尽可能地标识出更多的问题、分类、进行优先级排序)
    • 每次几百美元或者更少(而不是5000-15000美元)
    • 测试过程(可参考示例:http://www.sensible.com/rocket-surgery-made-easy/Demo test video
      • 欢迎部分(约4分钟)
      • 提问部分(约2分钟)
        • 记得大致评估一下测试参与者是那种客户(Notes. 确定 ta 的 Web 使用风格、表达/认知风格)
      • 主页“观光”(约3分钟)
      • 任务测试(约35分钟)
        • 如果测试参与者开始停下来,不再说话的时候,可以这样:先等一会儿——然后提醒一句:“你在想什么?”(为了不至于太单调,你也可以这么说:“你在找什么?”或者“你在做什么?”)。
        • 在测试的这个部分里,让测试参与者自己进行这些测试任务很重要,不要做任何事或者说任何话去影响他们。不要询问他们引导性的问题,也不要为他们提供任何线索和协助,除非他们已经完全被困住了或者已经绝望了。如果他们向你寻求帮助,可以这么说:“如果我不在这儿,你会怎么办?”
        • 只要有可能,尽量让用户在选择任务的时候说点什么。
      • 问题探查(约5分钟)
        • 为了知道到底发生了些什么,是些什么原因
      • 结束部分(约5分钟)
    • 典型问题
      • 用户不清楚概念
      • 他们找不到自己要找的字眼
        • 对用户要找什么的预测是错误的
        • 所用的词汇和他们所用的不同/说法或表达不同
      • 内容太多了
        • 减少干扰
        • 突出目的内容
    • 总结会:决定修复哪些问题
      • 最严重的问题最先修复
      • 对那些“够得着的果子”,建立另一份清单
      • 抵制添加的冲动
      • 不要太看重人们对新功能的要求
      • 忽略“Kayak(皮划艇)”问题
        • 马上发现
        • 回到原本方向而不需要帮助
        • 不扰乱任务进行
        • 总的来说,如果用户的第二次猜测总是对的,就已经可以了
    • 其他选择

 

大的方面和外界影响——

第10章 移动:不再只是亚拉巴马州的一个城市了

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注