视觉搜索中图标布局的影响机理

金 涛, 明成业, 周淑芳, 何家敏

(1. 中国石油大学(华东) 机电工程学院, 山东 青岛 266580; 2. 青岛黄海学院 智能制造学院, 山东 青岛 266427)

人类视觉系统信息处理能力有限,显示布局对操作者视觉搜索绩效影响巨大[1].视觉系统的生理结构限制了单次注视可视角度,操作者需持续调整注意偏向以搜寻显示布局中的目标信息.图标是人机界面最常用的信息传达方式,因此,通过图标布局的优化设计使其符合人类的视认知心理,降低操作者的认知载荷量,已成为复杂交互系统提高操作绩效和降低错误率的有效途径之一.

众多学者研究了图标布局对视觉搜索效率的影响机制[2-4].早期图标布局研究[5-6]表明纵向面板比横向面板的操作效率更高,但Vanderdonckt等[7]基于图标获取时间累加模型证明横向面板认知绩效优于纵向面板,两者结论完全相反.基于上述研究[2-7],Chen等[8]通过对横向排列、纵向排列、圆形排列3种布局方式反应时的分析,证明3种布局方式的反应时无显著差异.Simonin等[9]研究图片的显示布局对视觉搜索效率的影响,研究结果表明认知绩效与显示布局无关.然而,Shih等[10]研究汉语及英语两种语言下垂直和水平菜单中识别计算机按钮的效率,发现水平菜单的操作绩效始终高于垂直菜单,这与文献[7]的面板操作效率实验的结论一致.综上所述,关于显示布局的研究并未得到一致结论,为进一步研究显示布局对视认知加工产生的自下而上的影响,Ball等[11]建立起假设注意力模型,此模型将视觉信息处理分为预先注意和注意两个阶段:预先注意会自动以并行方式收集有关视觉元素信息,注意阶段用于将注意力引导至具有自上而下激活的元素,即与任务相关的视觉特征.该模型证明了信息元素的视觉特征是影响认知加工的重要因素,图标的视觉特征对注视频率及注视时间确有显著影响,合理的图标视觉特征可优先捕捉用户注意力、缩短搜索时间、减轻认知负担.文献[12-13]利用不同图标视觉特征进行注意捕获实验,结果表明填充形图标认知绩效显著高于轮廓形图标.可见,在研究图标布局对视觉搜索的影响时,应同时考虑元素的视觉特征显著性及其引发的自下而上的注意预处理.还有部分学者从数量角度展开研究,Lindberg等[14]在正方形矩阵中研究图标数量的变化对认知绩效的影响,结果表明图标数量对认知绩效影响显著,数量越多,操作者耗时越长.Fleetwood等[15-16]分析了图标数量与图标边框类型对搜索速度的影响,研究发现仅图标数量对操作者平均搜索时间有显著影响,图标边框类型对操作者平均搜索时间无显著影响,Byrne重复了此实验,通过眼动记录系统获取数据,从生理实验角度验证了先前的结果[16].以上研究证明视觉元素数量是影响认知加工的另一重要因素.

综上所述,前人在图标布局研究中忽略了视觉特征和数量对认知绩效的共同影响,尤其缺少图标的连续性数量变化研究,因此导致前人研究结果不一致.本文采用视觉搜索实验范式,在图标数量动态变化的基础上,将图标布局方式及视觉特征纳入研究范围.从行为层出发,实验a将3种视觉特征的4种布局方式的图标作为实验材料,在高、中、低3种图标数量下,探究视觉特征及图标数量对布局方式认知绩效的影响.实验b基于图标数量的连续性变化,探究不同的图标布局方式对认知绩效的影响.

1 实验a:图标视觉特征与显示布局实验

1.1 被 试

实验在中国石油大学(华东)实验室中进行,实验程序由E-prime 2.0编写,刺激呈现在27寸的显示器中央,屏幕分辨率为1 920×1 080,室内照明条件正常(40 W日光灯).计算机屏幕背景为白色,被试与屏幕中心的距离为500 mm.被试为20名在校本科生和硕士生,10男10女,年龄22～26岁,视力或矫正视力正常,无色盲或色弱.所有被试实验前不知道实验意图, 且未参加过类似实验, 实验后获得相应报酬.

1.2 材料设计

实验刺激根据图标数量N=6/10/15[17]分为低/中/高3个等级,共3种图标类型:图形图标、带边框图标、反色图标[12],如图1所示.带边框图标由外部方框(线宽0.75磅)和内部无负面或愉悦感的图形组成,反色图标是具有黑色背景的图形图标,所有图形都是含义明确的中性黑白图标.如图2所示,图标采用横向、纵向、斜向、圆弧形的单行/列布局方式,刺激阵列包括1个目标刺激和多个干扰刺激.每个试验中的目标均不可更改,目标图标为图标阵列的任意位置.刺激阵列中的图标大小为1.03°,图标间距为0.5°[18].

图1 实验a图标视觉特征示例

图2 横、纵、斜、弧4种图标布局方式示例

1.3 流程

实验利用3(图标数量:6/10/15)× 4(布局方式:横/竖/斜/弧)× 3(视觉特征类型:图形图标/带边框图标/反色图标)被试内设计.实验流程图如图3所示,实验刺激呈现在白色背景上,首先灰色的注视点“+”在屏幕中央出现1 500 ms.随后搜索目标出现在显示屏上并保持800 ms,后全屏黑色保持1 000 ms以消除视觉残差,要求被试在图标集中搜索目标图标,在尽量准确的前提下尽快做出反应,目标随机出现于图标集的任意位置,出现概率与不出现概率均为50%,若目标图标出现按D键,若不出现按K键.被试按键反应后或3 000 ms后无反应,进入下一个试次的注视点画面.正式实验包括3个组,每组有48个试次,其中4种布局方式混合均等出现.正式实验之前,各位被试要进行20个试次的练习.每组测试结束后被试休息1 min,整个实验过程耗时约10 min.

图3 实验a流程

1.4 结 果

利用传统知觉载荷的数据排除方法,剔除大于3 s和小于0.2 s的反应时数据,结果剔除3.4%的数据[19-21].基于正确数据,将平均反应时进行4(布局方式:横/竖/斜/弧)×3(视觉特征类型:图形图标/带边框图标/反色图标)重复测量方差分析.结果表明:图标数量N=6时,视觉特征主效应显著,F= 8.513,P<0.05.图标布局方式及二者交互项无统计学意义(P> 0.05).对视觉特征类型多重比较结果表明:反色图标平均反应时间(868 ms)显著低于图形图标(942 ms)和带边框图标(1 059 ms),P< 0.05,结果如图4所示.

图4 N=6图标集合平均反应时间

图标数量N=10时,图标视觉特征主效应显著,F=21.38,P<0.01;布局方式主效应显著,F=19.20,P<0.01;二者交互项主效应不显著.布局方式事后多重比较表明:横向排列(1 142 ms)与纵向排列(1 230 ms)平均反应时间显著低于弧形排列(1 440 ms)及斜向排列(1 371 ms),P<0.05;图标视觉特征事后多重比较的结果表明:反色图标的平均反应时间(1 205 ms)显著低于带边框图标(1 417 ms)和图形图标(1 265 ms),P<0.05.结果如图5所示.

图5 N=10图标集合平均反应时间

图标数量N=15时,视觉特征主效应不显著,P>0.05;布局方式主效应显著,F=9.42,P<0.01;二者交互项主效应不显著,P>0.05.图标布局方式事后多重比较表明:横向排列平均反应时间(1 844 ms)显著低于弧形排列(2 238 ms)斜向排列(2 321 ms)及纵向排列(2 063 ms),P<0.05,结果如图6所示.

图6 N=15图标集合平均反应时间

当N=6/10/15,分别对错误率进行4(布局方式:横/竖/斜/弧)×3(视觉特征类型:图形图标/带边框图形图标/反色图标)重复测量方差分析,结果表明:布局方式、图标视觉特征及两者交互作用的主效应均不显著(P>0.05),因此不存在反应时间与正确率的权衡.

2 实验b:图标数量连续性变化实验

2.1 材料设计

为研究在图标数量连续性变化下布局方式对认知绩效影响的规律性,实验b仅保留认知绩效最高的反色图标,排除反应时间较长的弧形排列与斜向排列.实验刺激共3组,N为单行/单列内的图标数量,第1组为单行或单列布局(1×N),第2组为两行或两列布局(2×N),第3组为3行或3列布局(3×N),N取值范围为4～18.图标类型为实验a中的反色图标.图标布局方式为横向排列和纵向排列,部分实验材料如图7所示,其余条件与实验a相同.

图7 实验b布局示例

2.2 流 程

实验利用3(行/列数:1/2/3)× 2(布局方式:横/竖)× 15(图标数量N:4～18)被试内设计.实验流程图如图8所示.实验所用图标素材为实验a中的反色图标,实验刺激呈现在白色背景上,首先灰色的注视点“+”在屏幕中央出现1 500 ms.随后搜索目标出现在显示屏上并保持800 ms,后出现全屏黑色界面并保持1 000 ms以消除视觉残差,要求被试在图标阵列集合中搜索目标图标,在尽量准确的前提下尽快做出反应,目标随机出现于图标集合的任意位置,且出现概率与不出现概率均为50%,若目标图标出现按D键,若不出现按K键.被试按键反应后或3 000 ms后无反应,进入下一个试次的注视点画面.正式实验包括3个组,每组有36个试次,其中两种布局方式混合均等出现.正式实验之前,各位被试要进行20个试次的练习.每组测试结束后被试休息1 min,整个实验过程耗时约15 min.

图8 实验b流程

2.3 结 果

同实验a,基于保留的正确数据,将平均反应时进行2(布局方式:横/竖)× 15(图标数量N:4～18)重复测量方差分析.第一组为1×N排列的实验结果表明:集合内图标数量主效应显著,F=67.05,P<0.01,图标数量对操作绩效有明显影响,这与特征整合理论[22-23]一致.布局方式的主效应显著,F=27.80,P<0.01;图标数量和布局方式交互效应不显著,P>0.05;对横向排列及纵向排列进行两两比较,横向排列的平均反应时间(1 328 ms)显著低于纵向排列(1 541 ms),P<0.05.结果如图9所示,横向排列与纵向排列在图标数量小于10个的情况下反应时较为接近,大于10个情况下横向排列反应时间显著低于纵向排列.

图9 1×N横向排列及纵向排列反应时间

第2组2×N排列的实验结果表明:图标数量主效应显著,F=112.15,P<0.05,图标数量对操作绩效有显著影响;布局方式主效应显著,F=129.81,P<0.01;图标数量和布局方式交互效应不显著,P>0.05;对横向排列及纵向排列的平均反应时间进行两两比较,横向排列平均反应时间(2 112 ms)显著低于纵向排列(2 287 ms),P<0.05;结果如图10所示.

图10 2×N横向排列及纵向排列反应时间

第3组3×N排列的实验结果表明:图标数量主效应显著,F=60.65,P<0.05;布局方式主效应显著,F=15.72,P<0.01;图标数量和布局方式交互效应不显著,P>0.05;对横向排列及纵向排列平均反应时间进行两两比较,横向排列的平均反应时间(2 517 ms)显著地低于纵向排列(2 826 ms),P<0.05;结果如图11所示.

图11 3×N横向排列及纵向排列反应时间

当(1×N),(2×N)和(3×N),分别对错误率进行2(布局方式:横/竖)× 15(图标数量N:4～18)重复测量方差分析,结果表明:布局方式的主效应不显著(P>0.05),图标数量主效应不显著(P>0.05),两者交互作用不显著(P> 0.05),因此不存在反应时间与正确率的权衡.

3 讨 论

实验a优化了前人研究方法[19-21],将不同数量的图标布局方式混合出现而非聚类呈现,降低被试对知觉负载情况的预期.结果显示,在N=6时,反色图标的认知绩效显著高于其他图标类型,4种布局方式的认知绩效无显著性差异;在N=10时,反色图标的认知绩效显著高于其他图标类型,横向排列和纵向排列的反应时间显著低于弧形排列及斜向排列,而横向与纵向排列之间无显著性差异;在N=15时,3种图标视觉特征的认知绩效无显著差异,横向排列反应时间显著低于其他3种布局方式.由此推测,在中、低数量下,反色图标更容易获取认知加工;在高数量下,横向排列更容易获取认知加工.

实验b采用连续的动态变化的图标数量,弥补前人研究空白,结果发现:①单行或单列(1×N)情况下,N=10为反应时间的明显转折点:当图标小于10个,横向排列与纵向排列之间的反应时间无显著差异(P>0.05);当图标大于10个,横向排列的搜索速度显著快于纵向排列(P<0.05).②双行或双列(2×N)情况下,N=9为反应时间的明显转折点(P<0.05).③三行或三列(3×N)情况下,N=7为反应时间的明显转折点(P<0.05).总之,面板L长度/S宽度比值越高,横向排列的搜索速度比纵向排列越快.

4 结 语

研究表明,图标数量的变化对图标布局方式和视觉特征的认知绩效产生显著影响:图形面板内图标数量较少时(小于6个),图标视觉特征对认知绩效影响显著,界面设计的重点应是图标本身的视觉特征.单行排列信息元素数量较多时(大于10个),图标布局方式对认知绩效影响显著,横向排列可以有效提高目标信息搜索速度.图形面板L长度/S宽度比值越高,横向排列搜索速度快于纵向排列,二者速度差距越大；图形面板L长度/S宽度比值越低,横向排列搜索速度快于纵向排列,但二者速度差距越小,趋于一致.未来将从眼动角度对操作者的注视点数量及注视时间进行分析,寻找横向排列与纵向排列搜索速度差异的生理依据.