带你读《点石成金:访客至上的Web和移动可用性设计秘笈》之一:别让我思考

简介: 本书是一本关于Web设计原则而不是Web设计技术的书。本书作者是Web设计专家,具有丰富的实践经验,他用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题,只需几个小时,你便能对照书中讲授的设计原则找到网站设计的症结所在,令你的网站焕然一新。

点击查看第二章
点击查看第三章
点石成金:访客至上的Web和移动可用性设计秘笈
(原书第3版)
Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, Third Edition

image.png

[美] 史蒂夫·克鲁格(Steve Krug) 著
蒋芳 译

第1章

别让我思考
Krug可用性第一定律
Michael,窗帘怎么打开了?
——Kay Corleone,《教父Ⅱ》
人们经常问我:“如果我想保证网站或应用容易使用,那么最重要的是什么?”
答案很简单,既不是“重要的内容要放在两次点击之内”,也不是“采用用户的语言”,甚至不是“保持一致”。
而是……

别让我思考

多年以来,我一直在跟人们说,这是我的可用性第一定律。
这是最重要的原则——它是在设计中判别什么有用什么没用的终极法则。如果你只能记住一条可用性原则,那么请记住这一条。
它意味着,设计者应该尽量做到,当我看一个页面时,它应该是不言而喻、一目了然、自我解释的。
我应该能“明白它”——它是什么意思,怎样用它——而不需要进行额外的思考。
不过,我们说的到底有多不言而喻?
呃,充分的不言而喻,就好像你隔壁的邻居,她对你的网站主题毫无兴趣,也几乎不知道使用后退按钮,但她仍然可以看一眼你的主页,然后说,“噢,这是   。”(如果运气好的话,她会说:“噢,这是   。真是太好了!”当然,这是另外一回事了。)
这样来看:
当我看到一个不需要思考的网页时,脑袋里面浮现的会是:“嗯,这是   ,那是   ,我想要的东西在这里。”

image.png

当我看到一个需要思考的网页时,脑海中浮现的东西都会加上一个问号:

image.png

创建一个网站的时候,你要做的就是去掉这些问号。

强迫我们思考的地方

网页上每项内容都有可能迫使我们停下来进行不必要的思考。例如,命名。典型的罪魁祸首是那些很酷或者自以为很聪明的名字、带有营销倾向的名字、和具体公司有关的名字以及生僻的技术名词。
例如,假设一位朋友告诉我XYZ公司正在招聘,我刚好符合要求,因此我直奔该公司的网站。当我扫描页面,准备点击相关内容时,该公司选择的公布职位部分所用的名称不同将产生不同的效果。

image.png

注意,类似这样的情况一般介于“对每个人都显而易见”和“完全模糊不清”之间,往往需要权衡。
例如,“Jobs”(职位招聘)可能对XYZ公司来说显得太不正式,或者之所以采用了“Job-o-Rama”,是因为一些复杂的国际化策略,又或者那是公司电子简报中常用的名词。我的观点是,权衡应该更倾向于“显而易见”而不是需要额外的思考。
另一个不必要的问号来源是那些看起来不太明显的链接和按钮。作为一个用户,永远不该让我花时间去思考某个东西是否能点击。

image.png

你可能会这么想,“其实,也没有这么麻烦,如果点击或者触碰了它之后没什么反应(不就知道了),这样做有多大问题?”
问题是,当我们访问Web的时候,每个问号都会加重我们的认知负担,把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微,但它们会累积起来,尤其是总把时间花在决定什么地方能点什么地方不能点时。
况且,通常人们不喜欢苦苦思索背后的原理。有些时候,他们喜欢动脑筋——在他们娱乐的时候、释放压力的时候,或者想要挑战自己的时候——但不是在想弄明白干洗店什么时候打烊的时候。是那些建造网站的人没有让它们明白易懂(而且容易使用),这会让我们对这个网站以及网站的发布者失去信心。
再来看一个常见的任务:航班预订。

image.png

当然,大部分这类心理活动发生在一瞬间,但是你也看到了,这个过程实在很烦人,产生了很多问号。而且最后还产生了一个令人迷惑不解的错误。
另一个网站没有这么花哨,只是采纳了我的输入,然后给出一些有意义的选择,因此在这里很难出错。

image.png

这次,没有产生问号,没有心理活动,没有出错。
我能列出一大堆访问者在网站不应该多花时间思考的事,例如:

  • 我在什么位置?
  • 我该从哪里开始?
  • 它们把××放在什么地方了?
  • 这个页面上最重要的是什么?
  • 为什么它们把它叫这个?
  • 这是广告还是网站的内容?

但是,其实你并不需要再列一份检查清单,附加到你的Web设计检查清单里。最重要的是理解去掉问号的基本原则,如果你理解了这一点,就会开始注意到网页和移动应用上所有让你思考的东西,最后,你将学会如何识别并在你自己建立网站或移动应用的时候避免它们。

如果你做不到让一切不言而喻

你的目标应该是让每一个页面或屏幕都不言而喻,这样的话,普通用户只要看它一眼就知道是什么内容,知道怎么用它。换句话说,他们不需要思考就能明白。
不过,有时候,特别是你在进行一些崭新的、开拓性的或者非常复杂的页面设计时,也许只能做到“自我解释”。在一个自我解释的页面,需要花一点点时间去理解——但只需要一点点时间。页面元素的外观(例如尺寸、颜色和布局),精心选择的命名,少量仔细斟酌的文字,它们综合在一起将创造出一种接近瞬间的识别效果。
这里有一条原则:如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释。

为什么它这么重要

说来也奇怪,并不是因为你通常听到的理由:

image.png

确实,市场竞争非常激烈,特别是在移动应用之间,我们已经有了那么多现成的(同时也富有吸引力的)候选应用,而换一种选择的代价实在微不足道(只需要99美分,甚至完全“免费”)。
但是,其实用户也不总是这么浮躁,例如:

  • 如果没有其他选择,他们可能没有办法,只能坚持用下去(例如,公司的内部网、银行的移动客户端,或者只有这家网站出售他们想要的某种特定商品)。
  • 你可能会很惊讶地看到,有些人会在一个折磨他们的网站坚持很久。有很多人在网站遇到问题时,会认为是他们自己的错,而不会责怪网站。就像这种现象:“为了这辆车我已经等了十分钟,所以也许应该再多等一会儿。”
  • 还有,谁能说竞争对手又会好多少呢?

那么,到底是为什么

让页面或屏幕不言而喻就像把商店布置得光线良好:这样会让所有商品看起来更美好。访问一个不需思考的网站让人觉得毫不费劲,相反,为我们不关心的事多花心思会浪费我们的精力、热情,还有时间。
不过,正如你在下一章将要看到的那样,当我们审视我们实际上如何使用网络时,不要让用户思考的重要理由是,大多数人会花上比我们想象中少得多的时间来浏览我们设计的网页。
结果,如果要使网页有效,它们必须在用户第一眼看到时将自己展示出来,而要做到这一点,最好的方法是创建不言而喻的网页,或者至少也要做到自我解释。

相关文章
|
存储 缓存 编解码
Web端短视频编辑器的设计与实现 - 像做PPT一样做视频
对于视频的生产,一般的方案是交由专业机构去创作,但这将花费很多预算,如果我们能提供一个工具,基于知识的通用结构沉淀一些视频模版,让用户快速创作出视频知识内容岂不美哉?让想法再奔放些,如果我们能直接从知识库中抽取结构化的知识内容直接生成视频或是半成品视频,用户只需要稍作调整就能发布,这想想就很酷吧?是的,小蜜视频创作工具我就是想做这样一件事情。本篇分享来自阿里巴巴前端工程师李志成(敦固)在第十六届D2前端技术论坛的分享。
3271 0
Web端短视频编辑器的设计与实现 - 像做PPT一样做视频
|
前端开发
|
存储 编解码 前端开发
移动web(看这一篇就够了)
移动web(看这一篇就够了)
687 0
移动web(看这一篇就够了)
|
移动开发 前端开发 Android开发
移动 web 开发现状|学习笔记
快速学习 移动 web 开发现状
138 0
移动 web 开发现状|学习笔记
|
Web App开发 JavaScript 前端开发
【译】2019年,如何设计Web页面
【译】2019年,如何设计Web页面
144 0
【译】2019年,如何设计Web页面
|
存储 监控 负载均衡
阿里云上云方案:Web与移动App云上部署解决方案及服务指南
对于绝大部分的上云用户来说,部署Web与移动App是最常见的,很多新手用户不知道上云时该如何选择阿里云产品与配置,为此,阿里云专门针对这部分用户的需求推出了Web与移动App云上部署解决方案,下面是方案详情介绍。
896 0
阿里云上云方案:Web与移动App云上部署解决方案及服务指南
|
存储 前端开发 Java
一文概览设计Web API 中的细节
一文概览设计Web API 中的细节
191 0
|
前端开发 开发者
移动 web 问题 &amp ;测试 |学习笔记
快速学习 移动 web 问题 &amp ;测试
111 0
|
移动开发 开发框架 前端开发
移动 web 介绍|学习笔记
快速学习 移动 web 介绍
138 0