網(wǎng)址導(dǎo)航界面鏈接按鈕形式對視覺搜索的影響

李　玨，薛澄岐，王海燕，彭寧玥

(東南大學(xué)機械工程學(xué)院，　江蘇 南京 211189)

引　言

在互聯(lián)網(wǎng)信息的數(shù)量與類別急速增長的時代，為方便網(wǎng)友快速進入所需網(wǎng)站，網(wǎng)址導(dǎo)航類網(wǎng)頁應(yīng)運而生。網(wǎng)址導(dǎo)航是一種緊密集合較多網(wǎng)址，并按照一定條件分類的網(wǎng)址站，可以為用戶提供分類信息，并實現(xiàn)簡單的搜索及網(wǎng)站地圖等功能，具有在網(wǎng)頁設(shè)計上規(guī)范、簡潔，網(wǎng)站穩(wěn)定，訪問速度快，收錄性好的特點，是互聯(lián)網(wǎng)最早的網(wǎng)站形式之一。網(wǎng)址導(dǎo)航經(jīng)過網(wǎng)址歸類、更新網(wǎng)站收錄、垂直化導(dǎo)航等不同階段的發(fā)展[1]其頁面中的功能重點、視覺重點依然是集合的網(wǎng)址鏈接按鈕區(qū)域。用戶通過瀏覽網(wǎng)址導(dǎo)航頁面中的該區(qū)域，可以點擊特定的鏈接按鈕進入外鏈，因此，網(wǎng)址鏈接按鈕的形式對網(wǎng)站的訪問量、點擊量和瀏覽量起著決定性作用[2]。在網(wǎng)址導(dǎo)航界面中，鏈接按鈕設(shè)計的視覺元素包括文字、標(biāo)識、色彩、底紋等，通過對這些元素的組合和設(shè)計，鏈接按鈕之間會形成“顯眼”程度上的差異，從認知加工的角度解釋，這屬于刺激驅(qū)動的一種加工方式。

為了讓界面信息，如圖標(biāo)、按鈕、文本等快速獲得用戶的視覺注意和目標(biāo)定位，界面研究者對界面元素的形式做了大量研究。文獻[3]的研究表明，在用戶與網(wǎng)頁界面進行交互時，傳統(tǒng)的文本按鈕和標(biāo)識型按鈕將導(dǎo)致不同的操作績效和使用體驗，文本的內(nèi)容以及標(biāo)識的可識別性、交互性、通用性都影響著用戶與網(wǎng)站的溝通。顏色作為界面元素的重要物理屬性，引起了眾多研究者的關(guān)注，文獻[4-5]的研究表明，界面元素的顏色或顏色對比對視覺有引導(dǎo)作用，可以通過顏色來增強界面元素設(shè)計的可視性，突顯界面目標(biāo)。文獻[6-7]指出采用顏色及顏色對比度、明度等編碼方式可以顯著促進界面視覺元素的視覺搜索績效。

除有無標(biāo)識、顏色編碼外，良好的網(wǎng)頁界面布局也能夠使用戶快速定位所需信息并準確識別鏈接按鈕傳遞的信息，因此，鏈接按鈕在界面布局中所處的位置也是影響網(wǎng)站突顯效果的因素之一[8]。在這方面，文獻[9]歸納了網(wǎng)頁布局的研究方法，并指出在傳統(tǒng)布局模板中拐角以內(nèi)區(qū)域適合放置重要的信息，“國”字型頁面的中心區(qū)域最適合排布界面中最重要的信息。文獻[10]的研究表明被試對位于界面頂部信息的關(guān)注度高于位于界面底部的關(guān)注度，對位于頁面中心部位的信息的關(guān)注度高于位于界面周邊的關(guān)注度。文獻[11-12]的研究表明當(dāng)搜索目標(biāo)位于頁面的不同位置時，被試的反應(yīng)時有顯著差異，用戶首先注意到界面的左邊和上方的信息，而界面下方或右方的信息會導(dǎo)致用戶更低的認知績效。此外，界面元素的的視角、對比度、清晰度和閃爍度都會顯著影響其視覺搜索效率[13-14]。

網(wǎng)址導(dǎo)航中的網(wǎng)站鏈接按鈕作為網(wǎng)頁界面的重要元素有其特殊性，它受制于網(wǎng)站導(dǎo)航網(wǎng)頁界面的呈現(xiàn)尺寸、布局和顯示形式，為提高某些或某個鏈接按鈕在網(wǎng)頁界面的突顯程度，需要對鏈接進行更為合理的布局排列和顯示編碼，界面中信息布局的組織映射不僅能夠讓用戶容易掌握整體視覺界面,也更有利于信息的認知和導(dǎo)航[15-16]。從上述研究可以發(fā)現(xiàn)，研究者主要針對不同結(jié)構(gòu)的界面布局進行相對突顯區(qū)域的視覺追蹤和可用性評估進行研究，而界面眼動熱區(qū)以及將界面信息的布局位置作為編碼進行績效考慮則較少，結(jié)合顏色、標(biāo)識等其他編碼元素進行深入探討的更為缺乏。本研究通過眼動追蹤技術(shù)探討網(wǎng)站導(dǎo)航網(wǎng)頁界面中視覺搜索時的眼動數(shù)據(jù)，并將其劃分水平，連同有無圖標(biāo)、顏色一起作為鏈接按鈕的編碼元素，設(shè)計實驗探究鏈接按鈕形式對于用戶視覺搜索績效的影響。

1　研究方法

1.1　預(yù)實驗

1.1.1被試

16名在校研究生參與了預(yù)實驗，其中男性8名，女性8名(平均年齡為24.5歲，標(biāo)準差SD為1.03)。所有被試視力或矯正視力正常，無色盲色弱，此前從未觀看或閱讀過實驗內(nèi)容。

1.1.2實驗流程

設(shè)計如圖1所示網(wǎng)址導(dǎo)航界面，為減少對實驗績效的影響，其中文字內(nèi)容已消除。被試簡單瀏覽預(yù)實驗材料網(wǎng)址導(dǎo)航界面10 s，綜合被試實驗數(shù)據(jù)獲得網(wǎng)站導(dǎo)航界面眼動熱區(qū)圖。將集合的網(wǎng)址鏈接按鈕區(qū)域的面積進行等分得到48個鏈接按鈕區(qū)域，結(jié)合眼動熱區(qū)圖中紅-黃-綠的顏色變化，將該區(qū)域按注視次數(shù)與注視時間分成紅橙、橙黃、黃綠、綠白區(qū)域，分別對應(yīng)鏈接按鈕所處位置注視程度的4個水平：高注視水平、中高注視水平、中低注視水平和低注視水平。

1.1.3實驗設(shè)備

實驗使用Lenovo E450c筆記本，分辨率為1366 px ×768 px，配合X2-30Compact型便攜式眼動儀獲取界面眼動熱區(qū)圖。

1.2　正式實驗

1.2.1被試

22名在校研究生與本科生參與了預(yù)實驗，其中男性12名，女性10名(平均年齡為23.1歲，SD為1.042)。所有被試視力或矯正視力正常，無色盲色弱，不認識韓文字體，此前從未觀看或閱讀過實驗內(nèi)容。

1.2.2實驗材料

以預(yù)實驗界面為基礎(chǔ)，設(shè)計如圖3所示的網(wǎng)站導(dǎo)航網(wǎng)頁界面。界面中集合的網(wǎng)址鏈接按鈕區(qū)域大小為740 px × 220 px，含6×8個鏈接按鈕，字體采用與漢字結(jié)構(gòu)有相似性的韓文以消除文字內(nèi)容的影響，字體大小為15 px × 15 px，圖標(biāo)為中等明度無彩色的圓環(huán)，直徑為15 px，有圖標(biāo)/無圖標(biāo)的鏈接按鈕數(shù)量均等，綠色/橙色/黑色的鏈接按鈕數(shù)量均等，3個因素的所有水平排列組合數(shù)量均等，每種組合的鏈接按鈕為2個，所有鏈接按鈕的位置以及在實驗中的呈現(xiàn)順序隨機。

圖2　網(wǎng)站導(dǎo)航網(wǎng)頁界面示例

1.2.3實驗變量

實驗為4(鏈接按鈕所處位置的注視程度：高注視水平，中高注視水平，中低注視水平，低注視水平)×3(鏈接按鈕的顏色：綠色，橙色，黑色)×2(鏈接按鈕是否有圖標(biāo)：有圖標(biāo)，無圖標(biāo))被試內(nèi)設(shè)計。因變量為鏈接按鈕搜索任務(wù)的正確率和反應(yīng)時。

1.2.4實驗流程

屏幕首先呈現(xiàn)實驗指導(dǎo)語，并通過選擇題確認被試是否色盲色弱，是否認識韓文，隨后進行5個練習(xí)和48個正式實驗。每個正式實驗中，先呈現(xiàn)十字注視點，時間為1 000 ms；接著呈現(xiàn)搜索鏈接按鈕，被試按任意鍵結(jié)束；然后呈現(xiàn)網(wǎng)站導(dǎo)航網(wǎng)頁界面，被試需在該界面中搜索上一頁呈現(xiàn)的鏈接按鈕并點擊，進入下一個實驗流程如圖3所示。

圖3　實驗流程

2　結(jié)果

采用 SPSS22.0軟件對收集到的3個因素各個水平下的的視覺搜索正確率和反應(yīng)時數(shù)據(jù)進行方差分析，數(shù)據(jù)見表1，F(xiàn)為效應(yīng)項與誤差項的比值，P為當(dāng)前該項的顯著性，該實驗中設(shè)定的顯著性水平值為0.05。

表1　實驗績效方差分析數(shù)據(jù)

2.1　鏈接所處位置的注視水平效應(yīng)分析

分析被試在鏈接按鈕所處位置的不同注視程度下的任務(wù)績效的方差，結(jié)果表明，鏈接按鈕所處位置的各注視程度水平下正確率差異顯著(F(3,1031)=4.519，P<0.05)，事后檢驗分析表明僅高水平注視程度與低水平注視程度存在顯著差異，高水平注視程度下任務(wù)正確率最高，低水平注視程度則最低，其余水平下無顯著差異。任務(wù)反應(yīng)時方面也存在顯著差異(F(3,1031)=20.994，P<0.05)，隨著鏈接按鈕所處位置注視程度的增加而減小。

2.2　鏈接顏色效應(yīng)分析

對被試在不同鏈接按鈕顏色下的任務(wù)績效進行方差分析，結(jié)果表明，不同顏色條件下正確率(F(2,1031)=5.047，P>0.05)與反應(yīng)時(F(2,1031)=2.766，P>0.05)均無顯著差異。若將被試按性別分組輸出績效數(shù)據(jù)，發(fā)現(xiàn)在反應(yīng)時方面，男性的顏色主效應(yīng)不顯著(F(2,504)=0.746，P>0.05)，而女性的顏色主效應(yīng)比較顯著(F(2,504)=4.381，P<0.05)，這表明女性在鏈接按鈕呈現(xiàn)不同顏色的情況下的反應(yīng)時差異較大，而男性差異較小。

2.3　鏈接有無圖標(biāo)效應(yīng)分析

對被試在鏈接按鈕有圖標(biāo)和無圖標(biāo)兩種情況下的任務(wù)績效進行方差分析，結(jié)果表明，鏈接按鈕有無圖標(biāo)的任務(wù)正確率差異顯著(F(1,1031)=11.680，P<0.05)，被試的任務(wù)正確率在鏈接按鈕有圖標(biāo)時較高，無圖標(biāo)時較低。鏈接按鈕有無圖標(biāo)的任務(wù)反應(yīng)時也存在顯著差異(F(1,1031)=13.138，P<0.05)，在鏈接按鈕有圖標(biāo)時反應(yīng)時較短，無圖標(biāo)時較長。

2.4　交叉效應(yīng)分析

任務(wù)正確率這一因變量中僅有鏈接按鈕有無圖標(biāo)和鏈接按鈕顏色的交互作用顯著(F(2,1031)=6.358，P<0.05)，無圖標(biāo)的主效應(yīng)顯著，說明顏色的變化對無圖標(biāo)的鏈接按鈕的正確率有顯著影響，隨著顏色從綠色變化到橙色，再到黑色，無圖標(biāo)的鏈接按鈕的任務(wù)正確率增加，而有圖標(biāo)的主效應(yīng)不顯著，其任務(wù)正確率不隨著顏色變化而增加或減少，如圖4所示。

圖4　不同顏色下有無圖標(biāo)鏈接按鈕的任務(wù)正確率

任務(wù)反應(yīng)時方面，鏈接按鈕所處位置的注視水平和鏈接按鈕有無圖標(biāo)(F(3,1031)=6.628，P<0.05)以及鏈接按鈕所處位置的注視水平和鏈接按鈕顏色的交互作用均顯著(F(6,1031)=3.786，P<0.05)，隨著所處位置的注視水平增加，無圖標(biāo)主效應(yīng)和綠色主效應(yīng)顯著，反應(yīng)時都呈現(xiàn)減少趨勢，其中注視程度高水平與有圖標(biāo)的組合以及鏈接按鈕所處位置的注視程度高水平與綠色鏈接按鈕的組合在任務(wù)反應(yīng)時一項中取得最低，鏈接按鈕所處位置的注視程度低水平與無圖標(biāo)以及注視程度低水平與綠色鏈按鈕的組合取得最高，如圖5、圖6所示。

圖5　所處位置的不同注視水平下有無圖標(biāo)鏈接按鈕的反應(yīng)時

圖6　所處位置的不同注視水平下同顏色鏈接按鈕的反應(yīng)時

3　討論

基于上述結(jié)果可知，鏈接按鈕處在高注視水平的位置上時，具有較高的搜索正確率和較低的搜索反應(yīng)時，這表明隨著鏈接按鈕所在的位置的注視水平的提高搜索績效也會越高，這一點印證了網(wǎng)頁界面中閱讀熱區(qū)“F”狀樣式原理[17]，當(dāng)目標(biāo)處于用戶的熱點觀察位置時，在搜索任務(wù)中也能表現(xiàn)出更高的突顯效果。網(wǎng)站鏈接按鈕是否有圖標(biāo)的結(jié)論也與此類似，當(dāng)鏈接有圖標(biāo)時，被試在正確率和反應(yīng)時方面都表現(xiàn)出了更高的任務(wù)績效，這表明圖標(biāo)的設(shè)計能有效提高鏈接按鈕在網(wǎng)址導(dǎo)航網(wǎng)頁界面中的突顯程度，有利于用戶更快、更準確地定位鏈接目標(biāo)。另外，實驗結(jié)果表明鏈接按鈕的顏色對任務(wù)操作績效沒有顯著影響，但將被試的績效數(shù)據(jù)按性別分組輸出后發(fā)現(xiàn)，在反應(yīng)時方面，女性的顏色主效應(yīng)是顯著的。女性在實驗中對黑色的鏈接按鈕表現(xiàn)出了更高的搜索績效，對綠色則表現(xiàn)出了較低的搜索績效，這表明女性在界面的視覺搜索中，對顏色尤為敏感。

本研究所設(shè)計的網(wǎng)站導(dǎo)航原型界面代表了現(xiàn)有普遍的綜合搜索類網(wǎng)址導(dǎo)航，通過眼動追蹤和行為實驗對界面中的網(wǎng)站鏈接按鈕進行編碼設(shè)計和實驗績效考核，是為探究網(wǎng)站鏈接按鈕呈現(xiàn)在網(wǎng)址導(dǎo)航網(wǎng)頁界面中的最佳形式。研究通過眼動數(shù)據(jù)綜合的熱區(qū)圖在集合的網(wǎng)站鏈接按鈕區(qū)域進行了注視程度的水平劃分，這是一種較為新穎的因素水平劃分方法，不僅能夠平均劃分實驗區(qū)域，更能反應(yīng)隨意瀏覽中注視點及注視時間和搜索任務(wù)中搜索績效之間的關(guān)系。鏈接按鈕有無圖標(biāo)和鏈接顏色則是現(xiàn)有常見的鏈接按鈕編碼元素，實驗將此3個因素作為因子進行視覺搜索實驗，能夠根據(jù)實際情況得出最具有實踐意義的網(wǎng)址導(dǎo)航設(shè)計意見。以該界面為例，當(dāng)黑色有圖標(biāo)的鏈接按鈕處于高注視水平位置上時，被試表現(xiàn)出了最高的績效，表明鏈接按鈕的該形式在網(wǎng)址導(dǎo)航網(wǎng)頁界面中具有最佳的視覺形式和突顯效果。

4　結(jié)束語

本研究采用眼動追蹤的方法獲取網(wǎng)站導(dǎo)航網(wǎng)頁界面中的眼動數(shù)據(jù)和眼動熱區(qū)圖，并將其劃分水平，探究不同注視程度位置、有無圖標(biāo)和不同顏色的網(wǎng)站鏈接按鈕對用戶操作績效的影響，結(jié)論如下：1)用戶通過隨意瀏覽網(wǎng)址導(dǎo)航界面得到的眼動分析表明高注視程度集中在界面中央偏左上位置，該位置注視點和注視時間較其他位置都要更高。2)當(dāng)鏈接按鈕所處位置注視程度不同時，用戶的搜索正確率和反應(yīng)時都將受到影響，更高的注視程度對應(yīng)的績效較高，需要的認知負荷較少。3)鏈接按鈕的顏色對用戶的認知和績效整體沒有顯著影響，但對女性用戶，該因素的影響程度較大，黑色的鏈接按鈕對應(yīng)的績效較高，綠色對應(yīng)的較低。4)鏈接按鈕有無圖標(biāo)這一因素影響用戶的績效，有圖標(biāo)的鏈接按鈕比無圖標(biāo)的鏈接按鈕的績效更高，認知負荷更低。5)當(dāng)黑色有圖標(biāo)的鏈接按鈕處于高注視水平位置上時，用戶表現(xiàn)出了最高的績效；當(dāng)綠色無圖標(biāo)的鏈接按鈕處于低注視水平位置上時，用戶表現(xiàn)出了最低績效。

參考文獻

[1]曲炳臻, 孫穎昊, 張慶耀. 網(wǎng)址導(dǎo)航的發(fā)展歷程及發(fā)展前景[J]. 計算機光盤軟件與應(yīng)用, 2014, 17(14): 145, 147.

[2]郝紅星, 吳玲達, 宋漢辰. 網(wǎng)絡(luò)社區(qū)及其鏈接可視化研究[J]. 計算機工程與應(yīng)用, 2010, 46(13): 8-10.

[3]吳杰. 圖標(biāo)在網(wǎng)頁設(shè)計中的應(yīng)用與設(shè)計研究[D]. 西安: 西安美術(shù)學(xué)院, 2007.

[4]MICHALSKI R. The influence of color grouping on users′ visual search behavior and preferences[J]. Displays, 2014, 35(4): 176-195.

[5]HUANG K C. Effects of computer icons and figure/background area ratios and color combinations on visual search performance on an LCD monitor[J]. Displays, 2008, 29(3): 237-242.

[6]蔣文明, 楊志新, 蔣敏, 等. 智能手機應(yīng)用程序圖標(biāo)設(shè)計的可用性研究[J]. 人類工效學(xué), 2015, 21(3): 21-24.

[7]AHLSTROM U, AREND L. Color usability on air traffic control displays[J]. Human Factors & Ergonomics Society Annual Meeting Proceedings, 2005, 49(49): 389-394.

[8]石金富, 曹曉華, 王鋼, 等. 網(wǎng)頁布局對視覺搜索影響的眼動研究[J]. 人類工效學(xué), 2008, 14(4): 1-3.

[9]劉珊珊. 關(guān)于網(wǎng)站頁面布局的最新方法研究[J]. 信息與電腦: 理論版, 2011(2): 77.

[10]GRAHAM D J, JEFFERY R W. Location, location, location: eye-tracking evidence that consumers preferentially view prominently positioned nutrition information[J]. Journal of the American Dietetic Association, 2011, 111(11): 1704-11.

[11]任延濤. 視覺搜索中的空間位置效應(yīng)[D]. 大連: 遼寧師范大學(xué), 2006.

[12]NAKATANI M, OHNO T, KATAGIRI Y, et al. The layout for the user-friendly manual: case study on an internet set-up manual[C]// International Conference of Design, User Experience, and Usability. Springer, Berlin, Heidelberg, 2011: 40-45.

[13]BARTRAM L, WARE C, CALVERT T. Moticons: detection, distraction and task[J]. International Journal of Human-Computer Studies, 2003, 58(5): 515-545.

[14]李宏汀, 江康翔, 王琦君, 等. 基于視線追蹤交互式突顯技術(shù)對視覺搜索的影響研究[J]. 心理科學(xué), 2017(2): 269-276.

[15]李晶, 郁舒蘭, 劉瑋. 基于眼動追蹤的數(shù)控界面布局認知特性評價[J]. 計算機輔助設(shè)計與圖形學(xué)學(xué)報, 2017(7): 1334-1342.

[16]WANG M H. Study on design of visual information interface based on visual cognition[J]. Packaging Engineering, 2011, 32(8): 49-51, 55.

[17]NIELSEN J, PERNICE K. Eyetracking web usability[M]. San Francisco: New Riders Press, 2009.