視覺搜索中圖標布局的影響機理

金 濤, 明成業, 周淑芳, 何家敏

(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寬度比值越低,橫向排列搜索速度快于縱向排列,但二者速度差距越小,趨于一致.未來將從眼動角度對操作者的注視點數量及注視時間進行分析,尋找橫向排列與縱向排列搜索速度差異的生理依據.