在可用性测试中,我们经常观察到用户忽略了屏幕上的变化,而设计师认为这些变化是显而易见的。在可用性方面,如果你做过设计,你就会知道什么寻找,在哪里去寻找它,它会出现,会发生什么意味着.是的,它是明显的对你而且在检查自己的设计时,不会错过重要消息或数据对象的外观。但用户通常会这么做。为什么?因为变化失明,这是人类(和原始人类)感知的一个100万年的事实,而且不太可能在短期内消失。

什么是变化盲视?阿尔弗雷德·希区柯克的《惊魂记》这部电影是有史以来最著名的电影之一,阿博加斯特探长看着诺曼·贝茨的房子投射在万里无云的黑暗天空上。摄像机移回到侦探的脸上,跟着他朝房子走去。眼前的景象依旧黑暗,但天空突然变得乌云密布。

不管天空纹理的变化是有意为之(也许是希区柯克对即将发生的事情的微妙警告)还是连续性错误,大多数观众可能都不会注意到它。电影经常会有这样的小不一致,从一个场景到下一个场景-背景的变化,演员的服装,化妆,或位置,但这些被忽略时,在镜头之间的切换。

这种现象被称为“变化盲视”(change blindness),它不仅适用于电影,还适用于人们如何感知一般场景,无论是投影在屏幕上还是在现实生活中。变化盲目性是非常强大的:即使人们被警告可能会发生变化,场景中的变化也可能不被察觉。

定义变化盲指的是当场景中的变化发生在远离他们关注焦点的地区时,人们倾向于忽略这些变化。

在心理学上,变化盲视或许最好的例证是20世纪90年代中期进行的一系列实验。在这些实验中,参与者被展示一幅复杂场景的图片约半秒;然后,屏幕上出现了短暂的空白,最后,同样的图片再次显示出来。然而,第二次展示场景时,一些细节被修改了——例如,一个物体改变了大小、颜色,或者添加或删除了一个元素。实验参与者被要求识别这两张图片的变化。在其中一些研究中,人们反复使用两个版本,直到他们能够检测到变化。对许多人来说,要改变20或40次才能找到它。

显示屏的闪烁质量(一个场景,接着是空白屏幕,接着似乎是同一个场景)是变化盲视的一个重要组成部分。在电影中,过场动画起到了闪烁的作用;在与计算机交互时,闪烁是由于用户按下按钮后加载新页面(或UI元素)而引起的。但事实证明,闪烁并不一定是字面意义上的——当用户眨眼或扫视(当她的眼睛移动到屏幕的另一个区域)时发生的场景修改也非常容易发生变化失明。

魔术师利用人类在眼睛移动时改变盲点的倾向:他们使用吸引注意力的装置来引起眼球在那个点的运动,同时,进行对他们的魔术至关重要的未被观察到的动作。

为什么变化盲视会发生?

变化盲视发生的根本原因是我们注意力能力的限制。任何复杂的场景都有大量的细节,人们很难同时关注所有的细节。我们通常会走捷径。

变化对人类来说一直都很重要——它可以传达有关我们环境的基本信息。自然界的大多数变化都是由运动调节的(除了少数例外,如变色龙,一个物理物体在没有运动的情况下不能立即变化),而运动很容易被人类的周边视觉检测到。一旦人类的眼睛探测到周围的运动,他们就会观察运动的来源——中央视觉介入并提供补充的、详细的信息。这种行为是我们在野外生活的残余,在野外,任何动作都可能预示着有捕食者在等着捕食我们。

当作为变化线索的运动很弱或完全没有时,就会发生变化盲视.当屏幕闪烁时,移动被移出——我们看到场景的两个静态版本。找出更改内容的唯一方法是检查前后版本中的所有对应元素并进行比较。这个任务是非常困难的——不仅是检查场景中无数的小细节是乏味的,而且是我们的内存之前版本的场景可能会很差。事实上,我们很有可能根本没有注意到那一幕中的许多元素。

但是变化盲也会在眼球运动中发生。换句话说,如果两种变化(可能是由运动引起的变化)相互竞争——就像在魔术表演中一样,一种变化通常会胜出并吸引眼球,但这种眼球运动阻碍了对第二个变化的察觉。这个原因在界面设计中尤为重要。

界面设计中的变更盲目性

在与UI的正常交互中,当出现新元素(例如产品图像中的不同图像)时,经常会出现更改盲视旋转木马的内容下拉菜单)显示在屏幕上的结果,用户的操作和屏幕的其他区域也改变。改变的轨迹应该是直接响应用户动作的可见设计元素,用户的眼睛会朝那个方向移动——但事实上,改变是分散在屏幕的多个区域。

例如,当用户点击汉堡菜单在Aldiko的Android应用程序中,他们希望屏幕上的变化与那个动作相关——也就是说,新元素将被本地化到包含菜单内容的区域。他们的眼睛会停留在那个区域,他们不太可能注意到屏幕右上角的动作溢出按钮已经被搜索图标取代了。

Aldiko适用于Android:当菜单打开时,屏幕右上方的控制被一个放大镜取代。搜索工具将不会被注意到,因为(1)人们会查看扩展的菜单,这将是他们行动的直接结果;(2)他们期望屏幕的其他元素保持不变(就像他们在与大多数ui的交互中通常做的那样)。

在其他地方,我们讨论了搜索框不应该被桌面上的搜索图标取代;然而,在移动屏幕上,这种模式比在桌面上更有用,因为我们的研究表明,即使没有搜索框,放大镜工具也相当容易被发现。然而,如果搜索框默认不可见,当用户点击搜索图标时,文本框应该出现在它旁边(而不是在屏幕上离得更远),以确保人们不会错过它。

德克萨斯农工大学不仅用搜索图标替换了搜索字段,而且还显示了远离搜索图标的搜索文本框。英雄形象的动画与搜索框的显示相竞争。
约翰霍普金斯大学也使用了动画英雄,并将搜索隐藏在图标下。但至少它将搜索框显示在搜索图标附近,并调暗了移动背景,以减少一些相互竞争的动画。

出现在页面顶部的半持久导航条或浮动按钮也有不被发现的危险,因为页面滚动通常会掩盖它们。例如,当用户向上滚动时,半持久导航条会出现在屏幕的顶部。我们希望人们能够注意到这些栏,并选择其中的一个选项,而不是一路滑到页面的最顶部。不幸的是,页面的移动很容易阻止由栏的出现引起的移动,特别是当栏的颜色与页面的颜色混合在一起时,就像下面纽约时报的例子一样。

iPhone版的《纽约时报》:当用户开始向上滚动时,他们可能会错过出现在屏幕顶部的半持久导航条,因为他们专注于页面的滚动。一个令人恼火的因素是,导航栏的视觉效果与页面内容没有足够的区别。
《芝加哥论坛报》的手机网站也使用了半持久导航条,当人们开始向上滚动时,导航条就会出现在页面顶部。然而,在这种情况下,酒吧的视觉设计使它更加突出。

(我们的周边视觉负责识别运动和阴影。当一个页面的“影子”配置文件更改,例如因为一块大的对比色出现在一个角落里,这是容易发现的外观比同一块巧妙地融入到了页面的其余部分并没有重大的改变页面的影子轮廓)。

还有许多其他的设计方面也会受到变化盲目性的影响——错误消息或其他通知,结果出现过快,或者改变导航条也可能因为这种现象而被忽略,正如我们在同一主题的配套文章

如何防止界面设计中的变化盲目性

为了避免变化盲目性,分析你的设计中可能同时发生的、可能会分散注意力的任何竞争变化。以下是一些技巧:

  • 使一次只做一个改变.在上面的Aldiko示例中,搜索可以放置在右上角,并且始终可见。
  • 将所有将要改变的元素分组同时在屏幕的同一区域,以确保运动将注意力吸引到所有人。例如,对Aldiko设计的另一个简单的修复是将搜索移动到菜单中。(不过要注意的是,将搜索隐藏在菜单下会严重影响其发现性,而且可能只在浏览量较大的网站上可以接受。)
  • 使用动画信号的变化,但要避免屏幕上有太多相互竞争的动画,以免分散注意力。
  • 把屏幕上的区域调暗即不改变,是为了引起人们对改变的注意。
  • 如果您正在添加浮动元素到用户滚动时的页面,将它们显示在用户关注的焦点旁边(例如,在页面的底部返回顶部按钮),并使用与页面其余部分形成对比的颜色。

参考文献

罗纳德·雷斯尼克。2002。变化检测。心理学年刊现年53岁的p / 245 - 277。

罗纳德·Rensnick》2005。改变失明。在麦格劳-希尔科技年鉴.44-46页。