Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

《Don't Make Me Think》读书笔记 #2

Open
srtian opened this issue Sep 28, 2019 · 0 comments
Open

《Don't Make Me Think》读书笔记 #2

srtian opened this issue Sep 28, 2019 · 0 comments
Labels
FE Front-end development Notes Reading notes Web About Browser, HTTP ... ...

Comments

@srtian
Copy link
Owner

srtian commented Sep 28, 2019

一、别让我思考

网页的易用性最重要的一点就是无需用户去思考。这也代表着交互一般劲量趋向于简单化,平整化,以减少用户的认知负担,减少对用户的干扰。

示例:亚马逊搜索没有提及一定要去搜索什么内容,只会对你所输入的进行分析,这样就会减少用户的思考的成本(淘宝也是如此,通过自然语言处理来对用户的输入进行分析)

比较典型的地方:

  • 按钮是否明显
  • 相同的信息是否集中
  • 搜索是否便捷
  • 关键功能的位置是否显眼、是否易用

二、扫描,满意即可,勉强应付

根据我自身使用web的时候,突然觉得这个很有道理。往往当我们在web上进行浏览的时候,只会对我们所关注的信息进行仔细的观察。也就是说,我们在访问一个网页时,会首先对整个网页进行一次扫描,在这个扫描的过程中,我们会对我们感兴趣的知识进行提取,而那些我们在扫描过程中不是很在意的东西就会进行忽略。

为什么扫描:

  • 我们总是处于忙碌中
  • 我们知道自己不必阅读所有内容
  • 我们善于扫描

也真是由于用户只是扫描页面,因此其实用户并不会去真正的寻找最佳结构,而是满意即可,即选择第一个合理的选项。(我们在作出决策也是如此,只会寻找第一个合理的决策就可能去执行)

三、 广告牌设计101法则(为扫描设计,不为阅读设计)

正是由于我们是扫描页面的,因此要采取以下五个原则:

  1. 在每个页面上建立清楚的视觉层次
  2. 尽量利用习惯用法
  3. 把页面划分成明确定义的区域
  4. 明显表示可以点击的地方
  5. 最大限度降低干扰

3.1 建立清楚的视觉层次

一个视觉层次清楚的页面有三个特点:

  1. 越重要的部分越突出(h1-h6/p1-p6)
  2. 逻辑上相关的部分在视觉上也相关
  3. 逻辑上包含的部分在视觉上进行嵌套

3.2 关于习惯用法

首先他们很重要,正是由于习惯、所以符合用户的习惯。但由于设计师们需要造轮子来证明自己(其实工程师也是这样),所以他们一般不想直接使用习惯用法,而是设计出属于自己的一套方法论。

3.3 把页面划分为明确定义的区域

这可以让用户快速决定关注页面的那些位置(即重点扫描的区域)

3.4 明显表示可以点击的地方

颜色不同、质感不同等方式。别让用户到处去找

3.5 降低视觉噪声

页面的难以理解最大的原因就在于视觉噪声,视觉噪声大致分为两大类:

  • 眼花缭乱:满眼惊叹号,毫无层次等
  • 背景噪声

第四章 为什么用户喜欢无需思考的选择

一般来说用户在达到目标前所需要的点击次数不应过多(很多网站规定点击次数不应该超过5次)(通常来说网页越平整化越好)

注:三次无需思考,明确无误的点击相当与一次需要思考的地点击

第五章 省略不必要的文字

去掉每个页面上一半的文字,然后把剩下的文字再去掉一般 —— krug可用性第三定律

去掉多余文字的好处:

  • 可以降低页面的噪声
  • 让有用的内容更突出
  • 让页面更尖端,让用户在浏览时可以扫描的内容更多,无需滚屏

那么我们可以做下面一些事情:

  1. 欢迎词必须消灭
  2. 知识说明必须要消灭

第六章 设计导航

如果网页上让大家找不到方向,人们就不会使用你的网站。

那么重要的事情首先要做的事就是让相关的事物集中在一块,这样当用户在浏览网页的时候,就能快速定位自己所需要找的内容的大体位置。

6.1 网络导航101法则

我们浏览一个网页的过程:

  • 你通常是为了寻找某个目标
  • 如果选择浏览,你将通过标志的引导在层次结构中穿行
  • 找不到我们就会跑路

导航的作用:

  1. 他给了我们一些固定的感觉
  2. 他告诉我们当前的位置
  3. 他告诉我们如何使用网站
  4. 他给了我们对网站建造者的信心

重要的是由这两者元素:主页和表单

  • 主页:我们可以直接通过主页来确定我们当前的位置
  • 表单:可以将栏目、工具都汇聚在这里,但依然要注意相关性的原则,且层级不应该过深(尽量少于3次)

此外要注意的是要保证,无论用户到哪都给他一个可以直接返回主页的按钮,这可以给用户安全感,不会迷失方向。

此外我们还有以下几点需要避免的:

  • 花哨的用词
  • 指示说明
  • 选项

页面名称需要注意的:

  • 大小应该要大于其他的文字
  • 应该出现在合适的位置
  • 每个页面都需要一个名称
  • 名称要引人注意
  • 名称要和点击的链接一致

6.2 层级导航

除了主页面的导航外,还有就是使用层级导航来帮助用户导航。关于层级导航有以下几点最佳实践:

  • 把他们放在最顶端
  • 使用>对层级进行分隔
  • 使用小字体
  • 使用了文字“你在这里”
  • 将最后一个元素加粗
  • 没有把他们用作页面的名称

6.3 标签

标签的好处:

  1. 它们不言而喻
  2. 它们很难错过
  3. 它们很灵活
  4. 它们暗示了一个物理空间

标签的绘制方法:

  1. 正确绘制
  2. 颜色编码(选中的与没选中的不一样)
  3. 当你进入网站时,有一个标签已经选中

6.4 后备箱测试

所谓的后备箱测试指的是页面设计良好,我们就能快速的答出以下的一些问题:

  • 这是什么网站
  • 我在哪个网页上
  • 这个网站的主要栏目是哪些
  • 在这个层次上我有哪些选择
  • 我在导航系统的什么位置
  • 我怎么搜索

降低用户好感的方式:

  • 隐藏我想要的信息
  • 因为没有按照你们的方式行事而惩罚我
  • 向我询问不必要的信息
  • 敷衍我,欺骗我
  • 给我设置障碍
  • 你的网站看起来不专业

提高好感的几种方式:

  • 知道人们在你网站上像做什么,并让他们明白简易
  • 告诉我我想知道的
  • 尽量减少步骤
  • 花点心思
  • 知道我可能有哪些疑问,并且给予解答
  • 为我提供协助
  • 容易从错误中恢复
  • 如有不确定,记得道歉
@srtian srtian added Notes Reading notes FE Front-end development Web About Browser, HTTP ... ... labels Sep 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE Front-end development Notes Reading notes Web About Browser, HTTP ... ...
Projects
None yet
Development

No branches or pull requests

1 participant