数字产品设计与心理学05 - 人们总是视而不见

数字产品设计与心理学

人类的视觉很神奇,能够用较少的认知资源来感知周围的环境,并安全、准确地与之互动。数字产品也应该适应并支持视觉感知的特点,提供良好的视觉体验。在接下来的10+篇文章,我们将了解人们是如何观察世界的,视觉系统为什么要以这样的方式运作,以及可以怎么改善产品的视觉体验。

现在,先来做一个热身的小游戏。

请在下面的扑克牌中,选择一张并记住。

2.1.1cards1

选好了吗?请在心里默念一遍这张牌的花色。然后,往下翻。

-

2.1.1cards2

在这些扑克牌里,并没有你选的那一张。我说对了吗?

我怎么就能事先知道你会选哪一张,然后把它换掉呢?那你可能要问问自己:除了你挑选的那一张,还能记起来其他几张扑克牌的花色吗?现在,你可以翻回到上一张图片看看。

🤹‍♂️

没错,这五张扑克牌全部都换掉了,不知道你之前有没有注意到。与其说这是个鳖足的小魔术,不如说它是个无伤大雅的恶作剧。但这的确揭示了一个重要的现象:我们真正留意到的信息,比想象中要少很多。

每天早上当你醒来,一睁开眼,周围的世界好像一张张全景照片,由眼睛捕捉下来。但这种印象只是错觉。我们以为自己对所处环境一目了然,只有在走神的时候才会忽略一些信息。实际上,被忽略掉的信息永远是绝大多数,只有少量信息成功引起了我们的注意。你可能会疑惑:这没有道理啊,我明明都看见了。别着急,我们会慢慢了解这个过程背后都发生了什么。在开始之前,我们再来看一些数字产品的例子。

下面这个实验很简单,只需要几秒钟。你可以请身边的人试一下。

准备好了吗?那我们开始吧。

请在下面这个商品分类页面中,找到「炒货」:

淘宝商品分类

找到以后,请往下看——

🤹‍♂️

现在,你可以回想起来炒货在哪一个分类下面吗?它属于左侧罗列的哪个大类呢?你还有留意到其他品类叫什么吗?它们是怎么排列的呢?

这些问题大部分人都回答不上来。我们确实都在认真的看,但是只看到了很少的一部分。这就是选择性注意的结果。

当我们带着明确目标去搜索信息的时候,通常会过滤掉不相关的事物。一方面,我们主观地认为自己洞悉周围发生的每一件事情;另一方面,我们并没有真正「看见」多少。这真是矛盾啊!一览无遗的感觉是怎么来的呢?心理学家解释说,人在某个特定时刻能看到的东西很少,但是大脑会指挥眼睛反复快速运动,以便抽取视觉环境的任何一部分,再叠加整合到一起(O’regan,1992)。这个过程如此迅速,我们会以为自己一下子就看到了整体。关于这个问题,在后面文章还会详细介绍。

我们很少会留意自己在看什么、怎么看。比如,你正在阅读这段文字,似乎一眼就能看到一个屏幕的内容。实际上,视觉真正起到关键作用的部分,只有眼睛视网膜中央的一小块区域。至于视野的其他部分,并不能真正看清所感知到的内容。如果你把目光集中在当前这一行,稍加注意,会发现靠近屏幕顶部或底部的文字,其实是模糊的。你在「看」那些位于边缘的文字,但你没有「看见」它们。

视而不见,大多数时候并不是因为走神,也不是阅读能力不足,它是人类视觉的基本特征。

在使用数字产品的界面时,人们也常常看不见那些近在咫尺的信息,这令设计师很头疼。例如,在填写网页表单时,错误提示(例如登录密码错误)一般出现在两个位置:表单的顶部,或是输入框的行间。哪个位置的信息容易被忽视呢?

2.1.1webform

没错,在表单顶部的信息容易被忽视,在输入框附近显示错误提示会更好。这是因为填写表单时,人们的注意力高度集中,视觉焦点会停留在当前输入框,那些远离视觉焦点的位置,就容易看不见。而且屏幕越大,越容易视而不见。

你可能会想,在电脑网页上容易看不见,但是在手机上应该不至于吧?毕竟手机屏幕就只有这么大。

前几天,我妈妈拿着手机过来问我:“我怎么找不到签到了?你帮我看看。”我一看,那是一个运营商 App 的首页。我问:“你平时都去哪里签到呀?” 她点了点首页中部的「会员中心」图标,说:“就是从这里进去,然后就可以签到了。”

2.1.1check-in

“这两天 App 变了。现在我怎么都找不到了。这里我看了好几遍,还是没看到签到在哪里。“ 妈妈在会员中心页面上下滑动,没有找到她熟悉的签到。这时我点返回按钮,回到 App 首页,指着首页左上角的「签到有礼」告诉她:“签到移到这里了”。

2.1.1check-in-2

妈妈恍然大悟:“哦,原来在这里,我就是没看到。”

确实就是没看到。签到离会员中心只有几厘米的距离,依然被无视了。这就是选择性注意的力量,也是习惯的力量:用户已经习以为常地在某个地方做一件事情,一旦改变,他们可能会不知所措。

视而不见,可能是无心之失,也可能是有意而为之。也许你没有听说过广告盲区(Banner Blindness)现象,但是你一定多少习得了这种能力:在浏览网页时,能够自觉地忽视网页顶部或右侧那些长得像广告的区域,不论它们实际是不是广告。早在十多年前,眼动研究(用仪器记录使用者视线的轨迹和停留情况)就发现了这一现象。

2.1.1banner-blindness-examples

眼动研究中的广告盲区现象。图片来源:https://www.nngroup.com/articles/banner-blindness-original-eyetracking/

上图是用户在浏览网页时的视觉热点图。视觉聚焦和停留最多的区域用红色表示,黄色次之,蓝色更少,灰色地带则说明没有吸引任何注意力。图上还有一些特意标记出的绿色方框,它们是网页上的广告区域,如你所见,那上面根本没有视线停留。这就是广告盲区现象:用户已经习惯性忽视那些网页中经常出现广告的区域。

经过十多年的进化,现在更受广告主青睐的是社交媒体信息流广告,也就是那些插入到信息列表中的广告,展现形式与用户所浏览的普通内容一样。这样一来,用户就不得不重新学习如何忽略广告了。

s-微博广告

微博 App 的信息流广告

下一篇文章,我们会说说人们在屏幕上阅读的方式。

Ref

O’regan, J. K. (1992). Solving the” real” mysteries of visual perception: The world as an outside memory. Canadian Journal of Psychology/Revue Canadienne de Psychologie, 46(3), 461.

kidult00 wechat
扫码关注 00 的公众号
如果文章帮您节省时间或者解答疑问,不妨打个赏 :)