美文网首页产品经理与用户体验设计@产品
认知心理学与交互设计(4)--边界视觉

认知心理学与交互设计(4)--边界视觉

作者: 7win7 | 来源:发表于2016-08-18 16:53 被阅读283次

    有边界视觉,自然也就有中央视觉。两者的区别是,中央视觉的分辨率,获取信息量、处理速度都高于边界视觉。高到什么程度呢,中央视觉的分辨率比一般相机都高,就是我们平时看东西的感觉,但是边界视觉相当于你透过有水雾的玻璃看东西,甚至于根据有关定义,边界视觉的视力相当于盲人的级别。获取信息量的话,中央是直接无损传递给大脑的,边界是经过压缩的。处理速度上,中央区域占整个视网膜面积的1%,但是用了大脑视觉皮层的50%来处理。相应的,99%的边界区域只能使用剩下的50%。

    那么第一个问题就是,为什么我们平常感觉不到这种区别。原因很简单,我们的眼睛是以大约每秒三次的速度在不断快速移动,将焦点投射到周围空间,同时大脑会基于我们的认知和期待做出适当的补充。
    有一个实验可以很直观地说明这个原因:当你在看一个网页时,电脑通过追踪你的眼球知道你现在中央区域所看的位置,于是在相应的区域显示有意义的内容,其他区域则显示随机的无意义的文字,随着眼球的运动,中央视觉关注的区域不断更新保证有意义,其他地方则仍然是随机的。结果表明,人们并不会注意到这些变化,他们会觉得阅读的是一整页有意义的信息。

    第二问题就是,边界视觉的作用是什么,既然存在,那肯定是有原因的。边界视觉有三个功能:引导中央视觉、察觉运动、以及让我们在黑暗中看得更清楚。黑暗中的视觉涉及到视锥细胞和视杆细胞,而且对界面设计没什么参考作用,这里就不做介绍了。下面就来介绍边界视觉的前两个功能及其在界面设计中的作用。

    引导中央视觉

    前面提到眼球是以每秒3次的速度移动,移动的位置主要就是根据边界视觉提供的线索。比如你想去市场买草莓,边界视觉一旦注意到有红色的物体,就会引导我们的眼球去关注,虽然有时并不是草莓,而是其他红色的东西。

    察觉运动

    这个可以追溯到我们的祖先,猎物的速度是很快地,所以我们需要边界视觉去察觉,然后快速调动眼球去关注,或者做出其他反应。

    这两个功能其实是有点重叠的,总的来说,虽然我们可以有意识、有目的地移动眼球,但是控制它们往哪里看的机制是潜意识的、自动的、快速的。

    在界面中一个相关的例子就是提示信息的显示,有时候你点了一个按钮,然后等了好一会都没有反应,试了几次之后还是不行。最后你重新查看前面的信息,发现原来是出现了一个错误,只是你一直没注意到。一个原因是距离太远了,另一个原因是虽然近,但是不够明显,后者往往被忽视。

    下面的例子中,虽然错误信息的位置离输入框很近,但是由于中央视觉的区域确实太小,大概只有一到两个厘米,所以还是不能注意到,而在边界视觉中,错误信息会和上面的红色字体混在一起,不够突出,所以不会引起注意。


    所以在设计提示信息的时候,要么就离用户注意的地方足够近,比如显示在鼠标点击的区域,要么就使用明显的标志,比如与周围区别较大的颜色或者符号。这里也可以解释为什么尽量不在除了错误信息之外使用红色。下面这些例子是做得比较好的。


    边界视觉在界面设计中的另外一个应用就是运动。比如在电脑上工作时,每次右下角弹出窗口,你都会第一时间下意识地去看,还有就是图标的抖动,比如QQ的消息提醒,都会引起你的注意。但是心理学上还有一个“习惯化”的现象,就是如果这些运动频繁地出现,我们会对这些刺激越来越习惯,最后不会对此做出反应。就像“狼来了”的故事。
    所以我们不能滥用这些方法,以致于真正重要的东西会被习惯性屏蔽。

    最后是两个有趣的例子。

    一是多个目标的设计。比如开始菜单,每个应用都有可能是用户需要的,你不能每次都预测到用户需要哪个并将其突出显示(或许之后可以),那么用户只能每次一个个地找了吗?不一定,我们可以把每个对象做得与众不同,这样用户在搜索的时候,就可以借助边界视觉快速锁定相应的目标。但是当对象过多时,设计独一无二的图标是非常困难的。有一个技巧,图标的设计不用太华丽,不用带太多的细节,只要有独特的颜色和轮廓即可。

    另一个是文字的设计,相比于图像,文字的视觉引导几乎没有作用,你也不可能在每个不同的文本上使用不同的字体和颜色。这时候就只能经过多次训练了,但是训练的前提是,内容是不变的。这就是为什么很多软件,在改版的时候不会轻易地改变功能或者选项的位置,因为这样用户之前所记忆的信息就是错误的了。这里作者提到了一个观点,“动态菜单”被认为是用户界面设计中一个巨大的错误。不过也不是绝对,还是需要根据具体情况分析。

    以上。

    相关文章

      网友评论

        本文标题:认知心理学与交互设计(4)--边界视觉

        本文链接:https://www.haomeiwen.com/subject/iqymsttx.html