阅读 29

Don't make me think 「读书笔记」

这本书是去年六月份(准备)和前端GG撕逼前连夜读的。今天整理了当时的读书笔记。

第1章 别让我思考

  • 倾向于“显而易见”,而不是需要额外的思考
  • 按钮、链接都应该明显
  • 不要侥幸觉得“用户把鼠标移过去,光标由箭头变成小手意味着可点击”
  • 不要把搜索或筛选功能搞得复杂
  • web设计检查清单
  • 如果做不到让页面不言而喻,至少要做到让它自我解释
  • 大多数人会花比我们想象少的时间来浏览网页

第2章 我们是如何使用web的

  • 关于网页使用情况的三个事实:
    • 不是阅读,而是扫描
    • 不作最佳选择,而是满意即可
    • 不追根问底,而是勉强应付

第3章 广告牌设计101法则

  • 在每个页面建立清楚的视觉层次
    • 越重要的部分越突出(加粗、加大、颜色改变、更接近顶部
    • 逻辑上相关的部分在视觉上也相关(相近的内容采用相似的显示样式
  • 尽量使用习惯用法
  • 页面划分成明确定义的区域
  • 明显标识可以点击的地方
  • 最大限度降低干扰
    • 眼花缭乱
    • 背景噪声,如间隔线等

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

  • 点击多少次都没关系,只要每次点击都是无需思考,明确无误的选择
  • 用户不介意有多少次点击,只要每次点击都是毫不费力的

第5章 省略不必要的文字

  • 省略多余的文字。可以降低页面的噪声
    • 省略欢迎词
    • 省略指示文字

第6章 设计导航

  • 持久导航(全局导航)包括5个元素:
    • 站点ID(logo)左上角:要看起来像一个站点ID,比如使用特殊的字体,使用图形等等
    • 主导航条(Primary navigation)
    • 实用工具(最多4-5个):到达网站中不属于内容层次的重要元素的链接。要么帮助我们使用站点,要么提供网站发布者的信息“关于我们”
    • 搜索方式
    • 回主页的方式
  • 每个页面都要有名称,放在合适的位置。名称要和点击的链接一致
  • 突出“你在这里”。指示器、改变颜色、按钮反白等等途径
  • 面包屑(层级菜单)也告诉你当前位置。而且只告诉你从主页到当前位置的路径。多数用于庞大数据库且具有复杂层次结构的网站。
    • 把面包屑放在最顶端(暗示作为一种补充机制
    • 用“ > ”分割(暗示一种沿着层级向前移动的动作
    • 使用小字体
    • 使用文字“你在这里”
    • 将最后一个元素(当前页)加粗
    • eg:“You are here: Home > Hobbies > Bock Collecting > Welcome”
  • 标签导航是大型网站导航的上佳选择:不言而喻、暗示了一个物理空间、与众不同
    • 激活的标签页必须有一种不同的颜色或外形作为对比,并且必须与它下面的空间在物理上连接起来
    • 未激活标签与激活标签颜色对比强烈
    • 颜色编码:每个页面的主导航条使用一种不同的标签颜色,并把这种颜色用于页面其他导航元素上,浑然一体
    • 进入网站时,有一个标签已经选中
  • 显示视觉层次时,左对齐或右对齐比居中更有效

第7章 设计主页

  • 主页要完成的任务
    • 告诉用户这是什么网站、网站上有什么、为什么我应该在这里,不在其他地方——站点标识和使命
    • “我能在这里做什么”——站点层次
    • 搜索
    • 导读
    • 内容更新
  • 如何传达
    • 口号
    • 欢迎广告(不要把使命陈述当做欢迎广告
    • 局外人测试
  • 下拉框的问题
    • 下拉框对组织按字母顺序排列的项目来说最有效
  • 判断主页设计好坏
    • 这个网站是做什么的
    • 该从哪里开始(搜索/扫描

第8章 确定你没有做错的几件事

  • 所有web用户都是独一无二的,使用web都是不一样的
  • 正确的问题:“在这个页面,这个上下文关系中,这个部件的设计/功能会让使用这个 网站的大部分人产生一种良好的体验吗”
  • 或者建造一些很粗糙的版本,观察人们对它的看法和使用的方法

第9章 可用性测试

  • 焦点小组测试:
    • 方法:一组人,对展示给他们的想法和设计做出反应。
    • 功能:确定目标受众想要什么、需要什么、喜欢什么,确定用户对竞品的看法等等
  • 可用性测试:
    • 方法:一次一个用户展示一些内容(网站、网站原型、单个页面设计图),要求用户说出这是什么、试着用它完成一项典型的任务。
    • 功能:了解网站运行情况,了解人们是否确实能使用你的网站
  • 测试的关键不是为了证明什么,而是了解你的判断力
  • 测试是一个迭代的过程。
  • 没什么比现场观看用户的反映更重要。
  • 测试人员选择
    • 每轮测试的理想用户数量应该是3-4个。有助于保证你很快进行下一轮测试
    • 宽松招募
      • 如果目标用户群体可以明显分为几个阵营,而且这些阵营有完全不同的兴趣和需要,则需要至少从每个阵营中选择用户进行一次测试【matrix可用性测试
      • 提供合理的激励
      • 避免对网站或网站背后的组织结构进行预先讨论
  • 由谁来引导测试:公正、耐心、冷静、善于倾听
  • 测试什么
    • “理解测试”:用户是否能理解网站的目标、价值主张等
    • 关键任务测试:让用户执行一些他们有权参与选择的任务 eg:找到一本最近买过的书
  • 测试实例:
解释为什么今天让你来这里。我们正在测试一个开发中的网站,因此想看看真正有人使用它的时候会是什么样子
我们在测试这个网站,不是你本人,所以在这里你不会犯错误,没必要担心自己会出错
想知道你是怎么想的,所以别担心会伤害我们的感情
我们会要求你把心理的想法说出来
如果你有问题,就尽管问,我们或许不会马上回答你这个问题,因为我们想知道没有别人在你身边的时候,人们会怎么做,但是测试结束后,我们会设法回答你的所有问题
豁免和保密协议?
你可以(先)点击哪里?
它是什么?
执行一个任务
复制代码
  • 常见问题及分类
    • 用户不清楚概念
    • 他们找不到自己要找的字眼:组织内容的分类不符合用户习惯 or 分类符合习惯,但没有使用他们期望的名字
    • 内容太多:需要减少整体干扰 or 把他们需要看到的内容设置得更加醒目
  • 问题指南
    • 忽略“皮划艇”问题:用户暂时出现错误,又在不需要任何帮助的情况下回到正确的轨道
    • 抵制添加的冲动:当看到人们没有理解清楚某些内容时,不应该增加一些注释或指导,而是应该去除某些让人混淆的内容
    • 不要太看重人们对新功能的要求
    • 能抓住的果子:主要目标是寻找不费力的收获。
    • 不太在意用户对于颜色的评论,除非有三、四位用户使用了“令人作呕”这样的形容词

第10章 可用性是基本礼貌

  • 败坏好感的原因
    • 隐藏用户需要的信息
    • 因为没有按照你们要求的方式行事而受到了惩罚(多见于填写数据时的格式
    • 向我询问不必要的信息(用户个人信息
  • 提高好感的方式
    • 了解人们到你的网站上做什么。使这些事变得明白简易
    • 尽量减少步骤
    • 知道我可能有哪些疑问,并且给予解答 Q&A

第11章 可访问性、级联样式表和你

  • 考虑到一些残障人士的使用(盲人)。考虑到屏幕阅读器对你网页的读取。

第12章 当好人遇到不好的设计决策

  • 询问不必要信息可能产生的三个严重后果
    • 一旦用户发现你要求的信息过多,就会有意的填写虚假信息
    • 得到的完整表单更少
    • 你的网站形象下降
  • 网站的保险形式更加丰富、花哨的后果
    • 用户想要一个网站——拥有自己想要的重要信息
    • 在此基础上,通过设计界面,使体验更加良好
关注下面的标签,发现更多相似文章
评论