《Don`t make me think》-访客至上的 Web 和移动可用性设计秘笈

让我们来面对现实,它已经是一本老书了。

如前言语,这本在 2000 第一版发行的书如今看来已经很老了,当“互联网时代”不再是一个新词的时候,书中的一些范例看起来的确觉得老土,但这绝不代表在此书中我们获取不到任何可用的信息,
随着技术的进一步发展,网络本身也在不断改善,网站的易用,可用成了当下人人关注的焦点。对书中一些放置现在仍有巨大影响的观点记在笔记中已供随时查看,是写此篇笔记的主要目的。

别让我思考,可用性的第一定律

这意味着,设计者应该尽量做到,当看到一个页面时,它应该是一目了然,至少能“明白它”,而不是在看到的时候,先在脑子里浮现一个问号。
页面上很多内容都迫使我们停下来,进行不必要的思考,如不能直接引导的命名,如一些看起来并不明显的链接和按钮。每个问号都会加重认知负担,把注意力转移,这些轻微的干扰累积起来,就非常影响体验。

浏览网页时可能产生的疑问

1
2
3
4
5
6
1.我在什么位置?
2.我该从哪里开始?
3.他们把XX放在什么地方了?
4.这个页面最重要的是什么?
5.为什么他们要它叫这个?
6.这是广告还是网站的内容?

做到一个页面对不言而喻,就算不能,也至少应该让它自我解释。

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

第一个事实:我们不是阅读,而是扫描。
实际上,大部分访问时在每个页面上瞥一眼,页面上的很多不部,他们看都不看。我们不是在阅读,而是扫描。
因为我们访问 Web 是要完成某项任务,通常要尽快完成,因此不必阅读所有内容。
第二个事实:我们不作最佳选择,而是满意即可
我们总是处于忙碌中,如果犯错了,也可以进行回退。
第三个事实:我们不是追根究底,而是勉强应对
无论面对哪种技术,很少有人会花时间阅读说明书,相反会贸然前进,勉强应付。甚至很多人连浏览器是什么都不知道,
因为这些对我们来说并不重要,如果发现某个东西能用,我们就会一直使用它。
如果访问者的表现让你觉得你似乎在设计广告牌,那就设计出了不起的广告牌吧。

广告牌设计 101 法则

如果用户只是粗略的看你的网站,尽可能让他们看到并理解你的网站。

  • 尽量利用习惯用户
  • 建立有效的视觉层次
  • 把页面划分成明确定义的区域
  • 明显标识可以点击的地方
  • 最小化干扰
  • 为内容创建清楚的格式,以便扫描

习惯用法
最好的方法是遵循习惯和惯例,即那些广为采纳和标准化的设计模式,如公路上的警告牌设计,车内的控制装置,页面上的基本内容在什么位置(如阅读方向从左到右的国家,网站的 Logo 都在左上角),服务如何运作(购物网站的购买流程),分享,搜索
这类的标准化外观。
但这类标准化的东西与设计师的灵感可能会起冲突,如果准备创新,那么必须理解想要取代的设计的价值,清楚自己有一个更好的想法时再进行创新,如若不然,应当尽量使用习惯用法。
另外,关于一致性,如果能通过在某种程度上打破一致性,而得到调试简洁清楚的效果,那么果断选择简洁。

建立有效的视觉层次
视觉层次清楚的页面有三个特点

  1. 越重要的部分越突出;
  2. 逻辑上相关的部分也在视觉上相关;
  3. 逻辑上包含的部分在视觉上进行嵌套。
    没有一个清楚的视觉层次,会降低扫描页面的速度。

把页面划分成明确定义的区域
这可以让用户很快决定关注页面的哪些区域,放心的跳过哪些区域。

明显标识可以点击的地方
人们在使用网络时大多数事情就是找一以一个地方点击。
如果能坚持只用一种字体颜色来表示文字链接,或者能确定他它们的外观和位置可以识别是它他是可以点击的,就没事,不应该犯使用同一种颜色表示文字链接和不可击的标题。

降低视觉噪声
有三类视觉噪声

  • 眼花缭乱
    页面信息太乱,每一部分都在强调自己的重要,反而会显得都不重要。
  • 组织不当
    某些页面看起来乱七八糟,应当使用网格来排列页面元素
  • 太过密集
    如 hao123.com 这类的网页,内容太多,太密集。

设计页面时候,有一个好办法,就是假定所有的内容都是视觉噪声,把无谓的部分通通去掉。

为文本设置格式,以便扫描
充分使用标题,且使用正确的标题,有两点准则,1,不同标题之前有明显的视觉差异,不会混淆;2,标题要靠近与之相关的内容。
保持段落的简洁,没人喜欢看臭长臭长的一整段
使用符号列表,如使用无序列表之类的,能够优化可读性,在列表的不同项目之间,孵出一点额外的空白。
突出关键词语,关键词加粗,高亮等方式,让他尽快被找到。