, 明成业1, 周淑芳2, 何家敏1 1. 中国石油大学(华东) 机电工程学院, 山东 青岛 266580;
2. 青岛黄海学院 智能制造学院, 山东 青岛 266427
收稿日期：2021-04-28
基金项目：国家自然科学基金资助项目(52075547)。
作者简介：金涛(1980-)，男，山东青岛人，中国石油大学(华东)副教授，硕士生导师。
摘要：采用视觉搜索范式, 研究图标视觉特征及数量变化对图标布局认知绩效的影响.实验表明, 当图标数量N=6时, 仅图标视觉特征主效应显著, 布局方式对搜索速度无显著影响, 图标视觉特征是认知绩效的主要影响因素; 当图标数量N=15时, 仅图标布局方式主效应显著, 横向排列搜索速度最快.通过图标数量的连续性变化实验发现, 图标数量超过10个, 横向排列反应时显著低于纵向排列, 两者错误率无显著差异; 随着图形面板L长度/S宽度比值的降低, 两者平均反应时差距逐渐缩小, 趋于一致.研究表明, 图标数量的变化对布局方式和视觉特征的认知绩效产生显著影响.
关键词：图标布局视觉特征图标数量认知绩效
Impact Mechanism of Icon Layout on Visual Search Performance
JIN Tao1
, MING Cheng-ye1, ZHOU Shu-fang2, HE Jia-min1 1. College of Mechanical & Electrical Engineering, China University of Petroleum, Qingdao 266580, China;
2. School of Intelligence and Manufacture, Qingdao Huanghai University, Qingdao 266427, China
Corresponding author: JIN Tao, Email: 52592736@qq.com.
Abstract: The classic search paradigm was used to study the impact of icon visual features and number changes on the cognitive performance of icon layout. Experiments showed when the number of icons was 6, only the main effect of icon visual features was significant, the icon layout had no significant effect on the search speed, and the icon visual features were the main influencing factor of cognitive performance; when the number of icons was 15, only the main effect of icon layout was significant, and the search speed of horizontal arrangement was the fastest. When the number of icons was more than 10, the reaction time of horizontal arrangement was significantly lower than that of vertical arrangement, and there was no significant difference in the error rate between them; with the decrease of L长度/S宽度 ratio of graphic panel, the average reaction time difference between the two was gradually reduced and tended to be the same. Research showed that the number of icons has a significant impact on the cognitive performance of icon layout and visual features.
Key words: icon layoutvisual featureicon numbercognitive performance
人类视觉系统信息处理能力有限, 显示布局对操作者视觉搜索绩效影响巨大[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-prime2.0编写, 刺激呈现在27寸的显示器中央, 屏幕分辨率为1920×1080, 室内照明条件正常(40W日光灯).计算机屏幕背景为白色, 被试与屏幕中心的距离为500mm.被试为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(Fig. 1)
 | 图 1 实验a图标视觉特征示例Fig.1 Examples of icon visual features used for experiment a |
图 2(Fig. 2)
 | 图 2 横、纵、斜、弧4种图标布局方式示例Fig.2 Examples of the four icon layouts used for the experiments |
1.3 流程实验利用3(图标数量: 6/10/15)× 4(布局方式: 横/竖/斜/弧)× 3(视觉特征类型: 图形图标/带边框图标/反色图标)被试内设计.实验流程图如图 3所示, 实验刺激呈现在白色背景上, 首先灰色的注视点“+”在屏幕中央出现1500ms.随后搜索目标出现在显示屏上并保持800ms, 后全屏黑色保持1000ms以消除视觉残差, 要求被试在图标集中搜索目标图标, 在尽量准确的前提下尽快做出反应, 目标随机出现于图标集的任意位置, 出现概率与不出现概率均为50 %, 若目标图标出现按D键, 若不出现按K键.被试按键反应后或3000ms后无反应, 进入下一个试次的注视点画面.正式实验包括3个组, 每组有48个试次, 其中4种布局方式混合均等出现.正式实验之前, 各位被试要进行20个试次的练习.每组测试结束后被试休息1min, 整个实验过程耗时约10min.
图 3(Fig. 3)
 | 图 3 实验a流程Fig.3 Procedure of experiment a |
1.4 结果利用传统知觉载荷的数据排除方法, 剔除大于3s和小于0.2s的反应时数据, 结果剔除3.4 % 的数据[19-21].基于正确数据, 将平均反应时进行4(布局方式: 横/竖/斜/弧)×3(视觉特征类型: 图形图标/带边框图标/反色图标)重复测量方差分析.结果表明: 图标数量N=6时, 视觉特征主效应显著, F= 8.513, P < 0.05.图标布局方式及二者交互项无统计学意义(P > 0.05).对视觉特征类型多重比较结果表明: 反色图标平均反应时间(868ms)显著低于图形图标(942ms)和带边框图标(1059ms), P < 0.05, 结果如图 4所示.
图 4(Fig. 4)
 | 图 4 N=6图标集合平均反应时间Fig.4 Average reaction time for the icon sets when N=6 |
图标数量N=10时, 图标视觉特征主效应显著, F=21.38, P < 0.01;布局方式主效应显著, F=19.20, P < 0.01;二者交互项主效应不显著.布局方式事后多重比较表明: 横向排列(1142ms)与纵向排列(1230ms)平均反应时间显著低于弧形排列(1440ms)及斜向排列(1371ms), P < 0.05;图标视觉特征事后多重比较的结果表明: 反色图标的平均反应时间(1205ms)显著低于带边框图标(1417ms)和图形图标(1265ms), P < 0.05.结果如图 5所示.
图 5(Fig. 5)
 | 图 5 N=10图标集合平均反应时间Fig.5 Average reaction time for the icon sets when N=10 |
图标数量N=15时, 视觉特征主效应不显著, P>0.05;布局方式主效应显著, F=9.42, P < 0.01;二者交互项主效应不显著, P>0.05.图标布局方式事后多重比较表明: 横向排列平均反应时间(1844ms)显著低于弧形排列(2238ms)斜向排列(2321ms)及纵向排列(2063ms), P < 0.05, 结果如图 6所示.
图 6(Fig. 6)
 | 图 6 N=15图标集合平均反应时间Fig.6 Average reaction time for the icon sets when 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(Fig. 7)
 | 图 7 实验b布局示例Fig.7 Examples of the layouts used for experiment b |
2.2 流程实验利用3(行/列数: 1/2/3)× 2(布局方式: 横/竖)× 15(图标数量N: 4~18)被试内设计.实验流程图如图 8所示.实验所用图标素材为实验a中的反色图标, 实验刺激呈现在白色背景上, 首先灰色的注视点“+”在屏幕中央出现1500ms.随后搜索目标出现在显示屏上并保持800ms, 后出现全屏黑色界面并保持1000ms以消除视觉残差, 要求被试在图标阵列集合中搜索目标图标, 在尽量准确的前提下尽快做出反应, 目标随机出现于图标集合的任意位置, 且出现概率与不出现概率均为50 %, 若目标图标出现按D键, 若不出现按K键.被试按键反应后或3000ms后无反应, 进入下一个试次的注视点画面.正式实验包括3个组, 每组有36个试次, 其中两种布局方式混合均等出现.正式实验之前, 各位被试要进行20个试次的练习.每组测试结束后被试休息1min, 整个实验过程耗时约15min.
图 8(Fig. 8)
 | 图 8 实验b流程Fig.8 Procedure of experiment 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;对横向排列及纵向排列进行两两比较, 横向排列的平均反应时间(1328ms)显著低于纵向排列(1541ms), P < 0.05.结果如图 9所示, 横向排列与纵向排列在图标数量小于10个的情况下反应时较为接近, 大于10个情况下横向排列反应时间显著低于纵向排列.
图 9(Fig. 9)
 | 图 9 1×N横向排列及纵向排列反应时间Fig.9 Reaction time for horizontal and vertical arrangements under 1×N |
第2组2×N排列的实验结果表明: 图标数量主效应显著, F=112.15, P < 0.05, 图标数量对操作绩效有显著影响; 布局方式主效应显著, F=129.81, P < 0.01;图标数量和布局方式交互效应不显著, P>0.05;对横向排列及纵向排列的平均反应时间进行两两比较, 横向排列平均反应时间(2112ms)显著低于纵向排列(2287ms), P < 0.05;结果如图 10所示.
图 10(Fig. 10)
 | 图 10 2×N横向排列及纵向排列反应时间Fig.10 Reaction time for horizontal and vertical arrangements under 2×N |
第3组3×N排列的实验结果表明: 图标数量主效应显著, F=60.65, P < 0.05;布局方式主效应显著, F=15.72, P < 0.01;图标数量和布局方式交互效应不显著, P>0.05;对横向排列及纵向排列平均反应时间进行两两比较, 横向排列的平均反应时间(2517ms)显著地低于纵向排列(2826ms), P < 0.05;结果如图 11所示.
图 11(Fig. 11)
 | 图 11 3×N横向排列及纵向排列反应时间Fig.11 Reaction time for horizontal and vertical arrangements under 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宽度比值越低, 横向排列搜索速度快于纵向排列, 但二者速度差距越小, 趋于一致.未来将从眼动角度对操作者的注视点数量及注视时间进行分析, 寻找横向排列与纵向排列搜索速度差异的生理依据.
参考文献
| [1] | Wolfe J M, Horowitz T S. Five factors that guide attention in visual search[J]. Nature Human Behaviour, 2017, 1(3): 597-607. |
| [2] | Durugbo C M. Eye tracking for work-related visual search: a cognitive task analysis[J]. Ergonomics, 2021, 2(64): 225-240. |
| [3] | Shen Z F, Zhang L H, Li R, et al. The effects of icon internal characteristics on complex cognition[J]. International Journal of Industrial Ergonomics, 2020, 79: 121-146. |
| [4] | Thorpe S, Fize D, Marlot C. Speed of processing in the human visual system[J]. Nature, 1996, 381(6582): 520-525. DOI:10.1038/381520a0 |
| [5] | 刘青, 薛澄岐, Falk Hoehn. 基于眼动跟踪技术的界面可用性评估[J]. 东南大学学报(自然科学版), 2010, 40(2): 331-334. (Liu Qing, Xue Cheng-qi, Falk Hoehn. Interface usability evaluation based on eye tracking technology[J]. Journal of Southeast University(Natural Science Edition), 2010, 40(2): 331-334. DOI:10.3969/j.issn.1001-0505.2010.02.022) |
| [6] | 宫勇, 杨颖, 张三元, 等. 图形面板布局特征对人机交互效率的影响[J]. 计算机辅助设计与图形学学报, 2012, 24(9): 1145-1150. (Gong Yong, Yang Ying, Zhang San-yuan, et al. The influence of graphic panel layout characteristics on the efficiency of human-computer interaction[J]. Journal of Computer Aided Design and Graphics, 2012, 24(9): 1145-1150. DOI:10.3969/j.issn.1003-9775.2012.09.005) |
| [7] | Vanderdonckt J, Bouzit S, Calvary G, et al. Exploring a design space of graphical adaptive menus: normal vs.small screens[J]. The ACM Transactions on Interactive Intelligent Systems, 2019, 10(1): 1-40. |
| [8] | Chen C, Chiang S. The effects of panel arrangement on search performance[J]. Displays, 2011, 32(5): 254-260. DOI:10.1016/j.displa.2011.05.003 |
| [9] | Simonin M. Effects of display layout on gaze activity during visual search[M]. Berlin: Heidelberg, 2015: 1-42. |
| [10] | Shih H, Goonetilleke R. Effectiveness of menu orientation in Chinese[J]. Human Factors, 1998, 40(4): 569-576. DOI:10.1518/001872098779649373 |
| [11] | Ball F, Busch N. Change detection on a hunch: pre-attentive vision allows "sensing" of unique feature changes[J]. Atten Percept Psychophys, 2015, 77(8): 2570-2588. DOI:10.3758/s13414-015-0963-9 |
| [12] | Lin H, Hsieh Y, Wu F. A study on the relationships between different presentation modes of graphical icons and users′ attention[J]. Computers in Human Behavior, 2016, 63: 218-228. DOI:10.1016/j.chb.2016.05.008 |
| [13] | Mcgrath L, Bresciani S, Eppler M J. We walk the line: icons provisional appearances on virtual whiteboards trigger elaborative dialogue and creativity[J]. Computers in Human Behavior, 2016, 63: 717-726. DOI:10.1016/j.chb.2016.05.086 |
| [14] | Lindberg T, Naesaenen R. The effect of icon spacing and size on the speed of icon processing in the human visual system[J]. Displays, 2003, 24(3): 111-120. DOI:10.1016/S0141-9382(03)00035-0 |
| [15] | Fleetwood M D, Byrne M D. Modeling icon search in ACT-R/PM[J]. Cognitive Systems Research, 2018, 3(1): 25-33. |
| [16] | Fleetwood M D, Byrne M D. Modeling the visual search of displays: a revised ACT-R model of icon search based on eye-tracking data[J]. Lawrence Erlbaum Associates, 2009, 21(2): 153-197. |
| [17] | Albert B, Tullis T. Measuring the user experience(interactive technologies): collecting, analyzing, and presenting usability metrics[M]. Netherlands: Morgan Kaufmann, 2013: 654-658. |
| [18] | Cheng Y C, Chen H J, Hung W H. The effect of different icon shape and width on touch behavior[C]// International Conference on Engineering Psychology & Cognitive Ergonomics. Cham: Springer, 2020: 32-44. |
| [19] | Susana G, Gutiérrez J M, Herrera S, et al. Sensitivity analysis of driver′s behavior and psychophysical conditions[J]. Safety Science, 2020, 125: 23-30. |
| [20] | Guo F, Qu Q, Nagamachi M, et al. A proposal of the event-related potential method to effectively identify Kansei words for assessing product design features in kansei engineering research[J]. International Journal of Industrial Ergonomics, 2020, 76: 358-362. |
| [21] | Forster S, Lavie N. Attentional capture by entirely irrelevant distractors[J]. Visual Cognition, 2008, 16(2/3): 200-214. |
| [22] | Ales M. FIART: adaptive resonance model of feature integration, proto-objects formation and coherence theory of visual attention[J]. Biologically Inspired Cognitive Architectures, 2017, 21: 13-25. DOI:10.1016/j.bica.2017.07.001 |
| [23] | Michalski R, Grobelny J, Karwowski W. The effects of graphical interface design characteristics on human-computer interaction task efficiency[J]. International Journal of Industrial Ergonomics, 2006, 36(11): 959-977. DOI:10.1016/j.ergon.2006.06.013 |
