「Don‘t Make Me Think」 读后感

Posted 2022-05-05 GoldenaArcher

「Don’t Make Me Think」 读后感

「Don’t Make Me Think」 这本书应该算是一本……非常有意思的书，其评分也很高：

Goodreads 上的评分：

土澳分区亚麻评分：

漂亮国分区亚麻评分：

可以说评分稳定的都在 4.0 以上，并且作为一本出版于 2014 年的书，在 amazon 上还能有大概 4000 本销售(只算了 AU 和 US)，也能算是不错的成绩了。

就我个人来说，这本书还是一本不错的书，它页数少，内容虽然浅显，又是常识(common sense)，但是在看完了之后确实也有一种捅破了窗户纸的感觉。准确的说这不是一本工具书，更像是一本参考书，能够让人思考在现代网页开发中最重要的核心部分究竟是什么。

有意思的事情在于，这本书的原始出版日期在 2000 年，其内容与 2014 年的虽有出入，核心内容却始终没有变。而且我个人觉得，除非 web3.0 普及后能够带来翻天覆地的变化，这本出版于 2014 年的书，在很长的一段时间内或许也是没有再次重新出版的意义。

以下就简单的记录一下每一章的核心内容。

ch1

Don’t Make Me Think!

这是被作者 Krug 称之为 Krug’s 可用性第一法则。

在 UI/UX 设计中经常有这样那样的规定，或许是说点击鼠标多少次内必须要能够导航到读者想要的内容，又或者说导航栏的配色使用 A 色搭配 B 色会更好诸如此类的规定，但是对于作者 Krug 来说，第一条法则就是：

别让读者在使用时思考！

作者使用了漂亮国的机场作为参考，这里也同样可以使用机场/高铁站作为参考。

本来想用熟悉的上海作为参考，但是……上海什么票都没有

其实对于我来说，这样的使用感是有那么一点问题的，例如说我曾经订票，就因为时间方便不小心订错地点了……后来也是因为地点方面没有沟通好，随后导致接车的人跑错了地方……

还有就是命名的问题，上海一共有 6 个高铁站，靠近市区的有三个：虹桥、新客站、西站，高铁常跑的是虹桥。某次买高铁票的时候买到了上海站，然后我就和我妈这个老上海确认上海站到底是不是虹桥。最终还是百度之后才知道上海站是新客站……

虽然这是我杠了，新客站改名好多年，但我还是觉得上海站后面跟个新客站能够避免不少的问题，毕竟……高铁吞吐量最大的还是虹桥，我妈刚开始也以为是虹桥。

大概是因为票少，所以携程就没有添加是哪个站的筛选，不过我也觉得，如果能有一个针对东南西北中发白站的筛选，也能够减少很多问题……

ch2

本篇重点有三：

• 扫一眼就当看过

  一点的内容和之前在折腾的简历核心要点一致，那就是大部分人在看网页/简历的时候，是处于扫视关键词这一状态。真的没有必要将所有的东西巨细无遗地全都放在网页/简历上，这样只会增加读者寻找重点的时间。

  以我本人而言，之前在找一些 paper 的时候，我肯定是不会看完整篇 paper，毕竟有些真的……很长，先扫一眼 abstract 确认这是我要的内容，随后 ctrl + f 直接查找关键字才是我写短篇 paper 的方式。

  同样，在浏览网页时，我也是先扫一眼大概内容，十有八九直接跳到代码处，如果代码不工作我才会去仔细看前后文。

• 不求最优解

• 不求甚解

  我也看到好多写博客/教程的人说，先知道怎么会用，有空的时候再折腾为什么这么用，我到现在 React 源码学习的进度还处在 1/∞，这也很真实了。

ch3

面向扫视设计，而非阅读。

假设所有的读者都只是扫视页面(scan)，而非阅读(read)，并且遵从常识，别做点奇怪的事情，这其中就包含比较常见的布局、功能，包含不限于：

• 使用合适的 title 方便读者扫视内容
• 多用 headings
• 使用合适的布局使结构清晰
• 每段话保持简短
• 使用 ol 和 li
• 高亮关键字

这些 concepts 部分其实已经是 html 语义化的核心内容了。

ch4

让用户进行无脑选择，以及提供必要的帮助。

这点要好好学习抖音

这也很简单，就是要缩短用户思考的时间，一来提高了用户使用，二来也没给用户很多时间后悔。

这也是很多网站大量使用第三方验证的缘故吧，都可以一键使用微信/支付宝/QQ 登陆，不用花费大量时间在注册、填写用户信息上，那么用户就更有可能去注册，从而使用这个网站。

毕竟很多时候，在用户还不确定是否投资时间在这个网站的时候，他们不太可能会花费很多精力在上面。

提供必要帮助这一点，作者使用了大嘤帝国作为案例：

作为世上少见的右行国家，大嘤帝国贴心的在十字路口上标注了 LOOK RIGHT ➡ 这种标识，这就是为用户提供必要帮助的典例。

ch5

省去无用的话。

ch6

导航设计

举例：

如果你在实体店中想要找 chainsaw，你会选择：

• 工具
• 家用五金
• 花园

中那一项？

这就是导航栏设计的不合理，如果用户无法一下子找到东西，那么就会降低用户体验感，也没有办法留住用户。

呼应上一章的内容，本章也说要合理运用层级结构，作者并提供了一个简单的模板：

This site
    Sections of this site
        Subsections
            Sub-subsections, etc.
                This page
                    Areas of this page
                        Items on this page

ch7

首页所需要的最核心内容：

这个结构其实现在还在用，当然，UI 会进行更新。以 CSDN 为例：

再看看豆瓣：

这个结构，是不是有异曲同工之妙。

本书也意识到了图中列举的 UI 有些年代感，因此也建议需要简化，并且单个组件使用更多空间，这样的建议也能在 豆瓣首页看到应用——豆瓣的 banner 占据整个页面宽度的 100%，的确是将所有可利用空间全用上了。

ch8

不同的角色(设计师，开发，商业开发等)可以共存，网页的 target audience 不可能为平均用户，如果有争论，那么重点不应该是

「大家喜欢这个风格吗」

而是

「有多少我们的潜在用户会使用这种风格」

前者是一个难以量化的问题——有人喜欢自然就会有人讨厌，而后者是可以通过调研进行量化，从而得出结果的问题。

ch9

每天花费 10 分钱去进行用户测试。

不要在已经完成项目，或项目进行到一半的时候进行用户测试，每周只需要找到用户(不一定是潜在用户)进行一两个小时的用户测试即可。

常见的几个问题包含：

• 用户搞不清楚情况
• 用户找不到他们想找的关键字
• 页面上内容太多

经常进行测试就能有效根据用户反馈对页面内容进行调整。

ch10

移动端开发与 PC 端开发的取舍——PC 端合适的内容对移动端而言可能太多，移动端比起 PC 端而言更需要具备快速上手、易于学习，并且让用户能够经常访问的特性。

经常访问这点真的尤其重要……尤其苹果现在会建议删除长久不用的内容。

很难想象这本书出版的时间是 2014 年，几乎书中覆盖的所有内容，现在都有提到。

ch11

时刻考虑可用性，用户刚开始点进页面都是充满期待的，当找不到需要的内容，期待值就会降低，并且决定离开页面。当用户能更容易地找到他们想找的内容时，期待值就会上升。

这个「容易找到想找的内容」部分就是 usability，即可用性。

ch12

这部分是 Accessibility，也是目前很大的另外一个 Topic，Google 的 SEO 也有对 ARIA 的需求，ARIA 评分过低将会直接影响 SEO 的成绩。

这其中也谈到了作者看到的其他文献，其中有一个学习(也是 Google 的小组做的)就提到视觉受限的用户并不会像常人认知的一样听完所有的内容，他们也会选择性的听取 alt 中的内容，如果前几个关键字中没有他们想要获取的内容，那么他们就会跳到下一个链接。

文中也提到了几个比较常见的 ARIA 优化：

• 每个图片都添加对应的 alt
• 使用合适的 headings
• 表单应在屏幕阅读器上也能工作(label, type 都用上吧)
• 在每个页面上都增加一个 跳到主要内容 的链接
• 所有的内容都能使用键盘直接访问
• 文字与背景的对比应明显
• 使用 accessible 模板

ch13

一些其他的问题

这里作者提到了如何向上沟通的问题，并且提出要「了解对方的语言」，这部分应该会搭配其他向上沟通之类的书去完成笔记会比较完整。