DON'T MAKE ME THINK

概述

Don’t Make Me Think,中文译名,点石成金 - 访客至上的 Web 和移动可用性设计秘笈。全书围绕了“别让我思考”这一主题,提出了网页的可用性设计需要注意的地方。

知识点

  • 作为一个用户,永远不应该让我花费时间去思考某个东西是否能点击 —— 能点击的东西需要特殊标记,可能是一个按钮的形状、有可能是区别于正文的颜色背景,而不仅仅是鼠标移动过去之后会变成小手的形状,至少后者需要你先移动过去,而不能直接一眼看出来
  • 让一切不言而喻 —— 通过页面元素的外观(尺寸、颜色、布局等)、精心选择的明明、少量仔细斟酌的文字,综合在一起将创造出一种接近瞬间的识别效果。如果前面的方式也不能做到,那至少需要做到自我解释。
  • 用户的阅读是扫描式的,从上到下从左到右(ltr的场景下)
  • 满意策略(stisfice):绝大多数时间里,我们不会选择最好的,而是选择第一个过得去的。为什么不选择最佳选择?
    • 用户总是处于忙碌中
    • 如果猜错了,也不会产生什么严重的后果
    • 对选择进行权衡并不会改善用户的机会
    • 猜测更有意思
  • 用户不会追根究底,而是勉强应付
    • 这对用户来说并不重要,他们只要能使用就行了,至于怎么实现的,机制是什么,他们并不关心
    • 如果发现某个东西能用,就会一直使用它
  • 设计法则
    • 尽量利用习惯用法 —— 站点图标可点击、页面导航在站点顶部或左边,如果准备创新,那必须要理解你准备取代的设计的价值
    • 简洁胜过一致
    • 建立有效的视觉层次 —— 确保内容的外观能准确地表述内容之间的关系
      • 越重要的部分越突出
      • 逻辑上相关的部分,在视觉上也相关,如相近的内容可以分为一组
      • 逻辑上包含的部分,在视觉上进行嵌套
    • 把页面划分成明确定义的区域 —— 方便用户快速确定聚焦点以及可以跳过的区域
    • 明显标识可以点击的地方 —— 大多数情况下,用户行为是基于点击进行的
    • 最小化干扰,降低视觉噪声 —— 它会让页面变得不易理解,分散用户的注意力,有以下几种噪声类型:
      • 眼花缭乱 —— 影响合适的视觉层次结构的创建
      • 组织不当
      • 太过密集 —— 过多的噪声淹没了原本有价值的信息
    • 为内容创建清楚的格式,以便(用户)扫描,可参阅书籍《消除文字》(Letting Go of the Words)
      • 充分使用标题 —— 不要让标题浮在空中,确保它们更靠近由它们引导的内容
      • 保持段落简短
      • 使用符号列表
      • 突出关键词语
  • 用户不介意有多少次点击,只要每次点击都是毫不费力的
  • 表单的填写 —— 《有效的表单:为可用性设计 Web 表单》(Forms that Work: Designing Web Forms for Usability)
  • 信息指引:
    • 简短:只需要提供最少的信息来帮助用户
    • 及时:放在用户正好需要它的地方
    • 不会错过:设置合适的格式,保证用户一定能够注意到它
  • 去掉多余的文字 —— 有力的文字都很简练
    • 降低页面的噪声
    • 让有用的内容更加突出
    • 让页面更加简短,用户在每个页面上一眼就能看到更多的内容
  • 网络导航101法则
    • 你通常是为了寻找某个目标
    • 你会决定先询问还是先浏览 —— 如果选择浏览,将会通过标志的引导,在层次结构中穿行
  • 导航的用途:帮助我们找到想要的东西,以及告诉我们现在在哪里
    • 告诉我们这里有什么
    • 告诉我们应该如何使用网站
    • 给了我们对网站建设者的信心
  • 习惯用法
    • 左上角 logo (网站 ID ),右上角实用工具(注册登录等)、搜索
    • 下方为一级栏目
    • 左侧页内导航
    • 右侧顶部为标题
  • 持久导航(Persistent Navigation),应该包含四个元素:
    • 热点ID
    • 栏目(Section) —— 主导航条(Primary Navigation),到达该站点主要栏目的链接,即站点层次结构的最顶层
    • 实用工具(Utility):最多放置 4 - 5 个
    • 搜索
    • 表单场景下可能会例外
  • 页面名称
    • 每个页面都需要一个名称
    • 页面名称需要出现在合适的位置
    • 名称要引人注目(视觉层面)
    • 名称要和点击的链接进入的页面标题一致
  • 面包屑导航
    • 把它们放在最顶层
    • 使用 “>” 对层级进行间隔
    • 加粗最后一个元素
  • 标签页
    • 它们不言而喻
    • 它们很难错过
    • 它们很灵活
    • 激活的标签页要突出,并且与下方内容在视觉上连接起来
  • 访问一个新网站的时候,最初的那几秒特别重要
  • 共有区域悲剧(The Tragedy of the Commons):任何共享的资源(共有区域)都会因为过度使用而遭到破坏
  • 可访问性

收获

最大的收获在于站在用户角度去思考问题,什么样的设计能最大化地获得用户的认可、节省用户的时间、提高用户的使用效率?作为与用户距离最近的开发人员,这些都是我们需要考虑的。也许仅仅是因为我们在开发时的一点偷工减料或者随心而为的一些想法,就会让我们的用户在使用我们的产品时痛苦万分,最后或者切换到别人的产品,或者继续忍痛使用 —— 然而这些都是在扼杀用户对我们的认可。所以,在开发中甚至开发前的时候,我们就需要去理解用户行为背后的逻辑,他真正的目的是什么,为了达到这个目的,现有的方式就是最优的吗?有没有更好的方式能够让用户更高效更便捷地实现相同的目的?所以归根结底,作为前端开发,我们需要站在用户的角度去思考问题。