【DDC译文】聊一聊交互中的“大家来找茬”

前言:由于人们的注意力有限,如果你的交互路径衔接的不够顺畅或缺乏足够的线索引导,也许你精心设计的交互反馈并没有进入用户的视线。

 

在做可用性测试的时候,我们经常会发现,用户总会忽视一些在设计者眼中很明显且很容易被发现的变化。作为体验设计师,你当然知道每一步应该去哪里、什么时候去做什么操作,以及这些操作意味着什么。所以,当你回顾自己的设计时,自然不会错过什么重要环节。但用户却总是在不停地“错过”,为什么?就因为这个已有百万年历史,且短时间内不太会被进化掉的,人类身上固有的感知现象 →【变化盲视】(change blindness)。

 

那么什么是变化盲视?在Alfred Hitchcock的著名电影Psycho中,当Arbogast侦探看向Norman Bates的房子时,黑暗的夜空是无云的。但当镜头转向侦探的脸,随着他开始走向房子,虽然场景还是黑夜,但天空中却突然乌云密布。

 

无论天空的变化是导演巧心安排还是拍摄承接上的失误,重要的是其实大部分观影者并不会发现。在电影的拍摄中时常会出现这种前后不一致的小漏洞,如背景的变化,演员的着装、妆容或者站位,但这些变化在剪辑后通常会被忽视掉。

 

这个现象就叫做变化盲视,它反映了人们是如何感知眼前的画面或场景;变化盲视不止出现在电影中,也体现在日常生活中。变化盲视常难以避免:某种场景里一旦真的出现了变化,即使人们已被提前告知、他们也可能毫无察觉。

 

定义:变化盲视是指人们会忽略那些远离视觉焦点区域发生的变化

Definition: Change blindness refers to people’s tendency to ignore changes in a scene when they occur in a region that is far away from their focus of attention.)

 

在心理学界,90年代中期的一些实验结果可能是变化盲视最好的印证。在那些实验中,被实验者需要观察一张只出现半秒钟的图片,图片消失之后停顿几秒钟,再次出现;但是在第二次出现时,会有些细节上的改变,例如:物体的大小、颜色变化,或者有些元素的添加或删除。当时人们以为这些被实验者会发现这两张图片的区别。在某些重复的实验中,被实验者会在两张图片中不断循环观看,直到他们发现了变化之处。这其中大多数人都要经过20到40个轮回才能找到变化。

 

屏幕的切换(一个画面之后有短暂的空白,接着再次显示看起来一致的画面)是造成视觉盲视可能的原因。在影片中,画面的切换也同理;并且,在与电脑交互时,当用户点击按钮后,由于页面加载才会导致闪屏。不过也有可能是用户眨眼或转移视线的时候错过了变化。

 

魔术师很会利用我们的变化盲视:他们通常会拿道具去吸引我们的注意力并控制我们的焦点集中在一点,同时在不被留意的地方进行暗中操作来完成他的骗局。

 

(译者注:下方视频1也是一项非常有名的有关变化盲视的实验,想立马亲身体验的同学千万不要错过;或者对更多实验感兴趣的同学可以去YouTube上搜索“change blindness”就可以看到很多有趣的实验录像。)

视频1. 变化盲视的经典实验

 

为什么我们身上会出现变化盲视?

变化盲视的根本原因其实就是我们的注意力有限。每一个复杂的画面其实都包含了巨大的信息量,人们很难高效地注意到每一处细节。

 

然而“变化”其实对我们来说很重要 — 它传递着环境中的关键信息。多数自然界中的变化都伴随着“移动”(除了变色龙这个特例,在没有任何“移动”的情况下,物体不会产生即刻的变化),而且“移动”很容易被我们的余光所捕获。每当我们的余光发现了任何“移动”,我们的中央视觉就会迅速介入去捕获更“清晰”的信息。这种行为是从远古时代人类还在野外生存时遗传下来的,因为那时任何一处动静都可能是来自于视我们为猎物的捕食者。

 

当变化是动态的,而这个动作又非常细微的时候,变化盲视就产生了。在两个屏幕切换的时候,变化被切断了,所以人们只看到两张静态图片。找到到底什么变了的唯一方法是两张图前后对比着“大家来找茬”。这是一件很心累的事,不仅因为要一处一处地抠细节,而且我们的记忆可能也没那么好。所以,大部分情况下,我们不会注意到屏幕上那么多的信息。

 

但是呢,变化盲视还会发生在视觉移动的时候。换句话说,如果(通常指有位移的变化)同时发生两个动作,就像刚才提到的魔术,其中一个会强烈的吸引人们的视觉关注,但就是这主观的视觉移动导致人们没有发现另一个动作。在界面设计中,这种现象很需要我们留意。

 

界面设计中的视觉盲视

通常,在UI界面交互中,当用户的操作使得一个新的元素(比如说轮播的图片或下拉菜单)出现的同时屏幕中其它区域也发生了变化,这时变化盲视就会出现。原因一般会是,用户操作后的视觉反馈会使用户的视觉聚焦在操作附近,然而变化却出现在屏幕中的其它角落。

 

例如,当用户点了这个安卓应用Aldiko(见图1)的汉堡包按钮(左上角),他们会预期屏幕中的变化内容会跟这个操作有关,或者内容变化会在目录出现的区域。所以他们的目光会锁定在目录展开的区域,而不会发现右上角突然冒出来的搜索按钮(还替代了之前的“更多操作”按钮)。

 

图1.Aldiko Andriod App: 当目录展开,右上角原本的操作按钮被搜索icon替换了。但是这个搜索按钮可能不会被发现,因为:1.用户只会关注到跟他操作的直接结果也就是展开的目录;2.他们会习惯于这个页面的其它元素不会发生变化

 

在另外一篇文章中,我们讨论过为什么PC界面中的搜索框不应该被一个简单的搜索icon代替;然而在手机屏幕中,图标的做法是合理的,因为我们调研过这个放大镜的图形很容易被人们识别到即使没有输入框。但是,如果输入框本不是默认可见,当用户点击搜索图标时,输入区域应该就在图标周围(而不是在远离图标的别处),以确保用户不会找不到(请看图2图3)。

 

图2.Texas A & M University的网站不仅把搜索框换成了搜索icon,还把点击搜索icon后出现的搜索框放置在远离icon的地方;且首页的动画还很容易转移用户的注意力

 

图3.John Hopkins University同样用了动画背景,还把搜索做成按钮;但还好点击后的搜索框出现在icon附近,且背景是被罩层暗化了,以避免打扰用户当前的注意力

 

不固定的导航或悬浮按钮也很容易被忽视,因为“整个页面的滚动”会掩盖掉它们的存在。比如,不固定的导航栏只有在用户回滚页面的时候才出现在页面顶部;我们以为用户会注意到并及时点击了他们想要的操作而避免滚回页面顶部才能操作。不幸的是,这种时有时无的栏位是很容易淹没在整个屏幕的滚动中的,尤其那些突然出现的栏位颜色还跟页面背景相近,就像下方的New York Times的例子(见图4)。

 

图4.NYTimes iOS App:当人们向上回滚页面时,悬浮在页面顶部的导航栏很容易被忽视,因为用户的注意力不在那个位置;况且这个导航栏的视觉效果也并不突出

 

图5.Chicago Tribune的mobile web也用了同样的回滚悬浮导航,但是她们对导航栏的视觉处理就显眼多了

 

(我们的余光除了负责发现“移动”情况还会捕捉“阴影”。当一个页面出现部分明暗区域的变化时,例如一块与页面对比强烈的色块出现在屏幕角落时,比起那些无声无息混在页面中的,我们其实很容易发现)

 

还有很多其它会被变化盲视影响的设计,如报错提示亦或其它类型的通知,或是出现且消失迅速的结果通知(原文link: https://www.nngroup.com/articles/too-fast-ux/),不停变化的导航栏都可能会造成这一现象。我的同事在他的文章中有更多讨论 (原文link: https://www.nngroup.com/articles/change-blindness/)。

 

如何在界面设计时避免变化盲视

避免变化盲视发生,请谨慎安排同一时间出现在界面中互相干扰的变化,这里给出一些排查的方法:

  • 一次只做一个“动作”:在上文Aldiko的例子中,搜索按钮可以默认放置于导航栏,而不是藏在某个操作下面。
  • 将变化的元素集中:确保所有变化的点出现在页面同一区域。例如针对Aldiko的优化方案还可以是将搜索功能放置在展开的目录区域(同时注意搜索功能的隐藏与否影响很大,可能只有偏浏览型或搜索场景小的网站适合)。
  • 利用动效引导:但是也要适当,不要再因为动效而分散了用户的注意
  • 将没有变化的区域变暗(译者注:比如增加蒙层),让用户集中注意力于变化区域
  • 如果要使用页面滚动才出现的浮动元素:尽量将它们至于用户的视觉焦点附近(例如,将“返回顶部”按钮放在页面底部)并使用与页面对比较强的颜色

 

英文原文:Change Blindness in UX: Definition
原文地址:https://www.nngroup.com/articles/change-blindness-definition/
原文作者:Raluca Budiu
本文为原创译文,转载/引用皆请标明译者和出处,本译文版权归点融设计中心DDC所有。