眼動實(shí)驗在高校官方網(wǎng)站網(wǎng)頁設(shè)計中的應(yīng)用

武曉燕 張阿維

關(guān)鍵詞：眼動實(shí)驗 網(wǎng)頁設(shè)計 高校官網(wǎng) 瀏覽習(xí)慣 搜索效率

引言

互聯(lián)網(wǎng)的時代，高校官方網(wǎng)站是高校宣傳的重要平臺與載體，網(wǎng)站設(shè)計的好壞直接影響用戶使用高校官方網(wǎng)站的積極性，然而對于高校官方網(wǎng)頁設(shè)計的研究方法多以問卷調(diào)查、專家打分等方式進(jìn)行，評估具有主觀隨意性。而眼動儀可以實(shí)時捕捉用戶的行為習(xí)慣，通過被試者的眼動軌跡、熱點(diǎn)圖以及相關(guān)數(shù)據(jù)可對網(wǎng)頁的設(shè)計情況進(jìn)行直觀、準(zhǔn)確地分析評價。本文以國內(nèi)部分知名高校官方網(wǎng)站首頁為研究對象，采用眼動實(shí)驗對被試者瀏覽高校官方網(wǎng)頁過程進(jìn)行研究，并在實(shí)驗結(jié)束后立即填寫調(diào)查問卷，獲取用戶的主觀信息，將主觀評估和客觀數(shù)據(jù)相結(jié)合，對用戶瀏覽高校官方網(wǎng)站的習(xí)慣及用戶的視覺搜索因素進(jìn)行分析探討，使結(jié)論更加全面具體，為高校官方網(wǎng)站的網(wǎng)頁設(shè)計提供參考依據(jù)。

一、眼動實(shí)驗與高校官方網(wǎng)站設(shè)計

眼睛是人類獲得外界信息的主要途徑，視覺是加工處理信息的重要方式，用戶瀏覽網(wǎng)頁時主要是通過眼睛獲取搜索信息。眼動儀是用來記錄處理眼動數(shù)據(jù)的設(shè)備，是心理學(xué)研究的重要儀器，眼動測試是內(nèi)隱測量方法的一種，其實(shí)驗數(shù)據(jù)可以直接反映用戶行為，近些年被廣泛應(yīng)用于網(wǎng)站的設(shè)計與評估中，用于分析用戶對網(wǎng)站的視覺瀏覽習(xí)慣。眼動實(shí)驗?zāi)軌蛴涗浻脩粼跒g覽網(wǎng)頁時眼睛的運(yùn)動數(shù)據(jù)，包括總注視時間（Total Fixation Time，TFT）、注視次數(shù)（Fixation Count，F(xiàn)C）、平均注視時間（Average Fixation Time，AFT）。眼動實(shí)驗的主觀性圖表在網(wǎng)頁設(shè)計研究中被使用最多的是熱點(diǎn)圖和軌跡圖。

近些年，眼動追蹤被廣泛應(yīng)用于網(wǎng)頁設(shè)計研究之中。許鑫等人利用眼動追蹤實(shí)驗研究用戶在瀏覽高校圖書館門戶網(wǎng)站主頁時的瀏覽習(xí)慣，提出了高校圖書館門戶網(wǎng)站網(wǎng)頁設(shè)計時應(yīng)考慮的重要因素[1];王詩傲將眼動分析法引入到工業(yè)設(shè)計服務(wù)網(wǎng)站的界面設(shè)計評估上，通過眼動指標(biāo)完善工業(yè)設(shè)計服務(wù)網(wǎng)站評價體系內(nèi)容[2];劉瑋琳等人通過眼動實(shí)驗探究網(wǎng)頁界面中的分類信息設(shè)計對用戶認(rèn)知效果的影響規(guī)律[3];吳安波等人對某高校教務(wù)網(wǎng)站的可用性進(jìn)行了分析，在一定程度上為教務(wù)網(wǎng)站的設(shè)計及改進(jìn)提供參考[4]。由此可見，利用眼動實(shí)驗對網(wǎng)頁設(shè)計進(jìn)行研究已經(jīng)較為成熟，為高校官方網(wǎng)站網(wǎng)頁設(shè)計的研究提供了理論基礎(chǔ)。

高校官方網(wǎng)站是依托于高等學(xué)府，以服務(wù)教育、服務(wù)科研、服務(wù)師生為目的，肩負(fù)對內(nèi)交流、對外宣傳的使命，從事教育資源整合、高校信息發(fā)布、輔助教學(xué)管理的綜合性網(wǎng)站[5]。高校官方網(wǎng)站既是學(xué)校信息傳播的重要載體，也是校內(nèi)師生管理系統(tǒng)的重要入口。針對高校官方網(wǎng)站設(shè)計研究方面，李嘉瑜以國內(nèi)“985”高校為研究對象，以美學(xué)視角為出發(fā)點(diǎn)，對高校官網(wǎng)的版式界面進(jìn)行了詳細(xì)的分析[5];萬立軍等人通過國內(nèi)外學(xué)者對目前高校網(wǎng)站信息服務(wù)質(zhì)量評價相關(guān)研究內(nèi)容的分析，構(gòu)建我國高校網(wǎng)站信息服務(wù)質(zhì)量評價指標(biāo)體系[6];孔寧通過詢問技術(shù)，從用戶的主觀傾向性出發(fā)，對高校門戶網(wǎng)站可用性進(jìn)行了進(jìn)一步的探索與研究[7];王傳松應(yīng)用文獻(xiàn)分析法、用戶訪談和問卷調(diào)查法、層次分析法以及模糊綜合評判法等方法，構(gòu)建了基于用戶體驗的高校網(wǎng)站評價模型[8]。通過對搜索的文獻(xiàn)進(jìn)行整理發(fā)現(xiàn)目前針對高校官方網(wǎng)站網(wǎng)頁設(shè)計的研究并不多，眼動實(shí)驗在這一研究領(lǐng)域中還有待探索。

二、實(shí)驗設(shè)計

眼動實(shí)驗的方法主要有兩種，一種是無目標(biāo)瀏覽，另一種是典型目標(biāo)搜索任務(wù)。本次實(shí)驗分為兩組（實(shí)驗A和實(shí)驗B），實(shí)驗A：無目標(biāo)瀏覽，在規(guī)定的時間內(nèi)被試按照自身習(xí)慣對十張刺激材料進(jìn)行瀏覽，研究被試在正常情況下瀏覽高校官方網(wǎng)站主頁的習(xí)慣。實(shí)驗B：典型目標(biāo)搜索任務(wù)，要求被試以通知公告欄作為搜索目標(biāo)，在瀏覽結(jié)束后對實(shí)驗材料進(jìn)行打分，研究通知公告欄在不同位置的搜索效率。

（一）實(shí)驗材料

流量是衡量網(wǎng)站是否受歡迎的一個重要指標(biāo)，本次實(shí)驗刺激材料采用站長之家根據(jù)Alexa排名、百度權(quán)重、PR值以及反鏈數(shù)四種因素綜合排名的高等院校網(wǎng)站排行榜的前十名高校官方網(wǎng)站主頁，分別編號為A、B、C、D、E、F、G、H、I、J，十所高校均為雙一流高校，查詢時間為2020年11月29日。并選取西安工程大學(xué)官方網(wǎng)站主頁作為演示材料進(jìn)行規(guī)則講解。

（二）實(shí)驗設(shè)備

實(shí)驗設(shè)備為由瑞典公司所生產(chǎn)的Tobii眼動儀，型號為：Tobii X2-30，采樣頻率30Hz。實(shí)驗材料通過分析處理軟件Ergolab2.0顯示在戴爾電腦顯示屏，分辨率為1920*1080，被試眼睛與顯示屏的距離保持在60cm左右。

（三）被試

高校的師生是高校官網(wǎng)吸引的絕大部分訪問對象，因此被試為隨機(jī)招募的西安工程大學(xué)在校本科生、研究生及教師，被試的年齡在18～34歲，男女比例1：1，其中本科生16名，研究生12名，教師2名，共30名。所有被試身體狀況良好，無色盲癥狀，視力或矯正視力均在1.0以上，均有使用電腦上網(wǎng)的經(jīng)驗，能熟練操作計算機(jī)。根據(jù)實(shí)驗任務(wù)30人隨機(jī)分為2組，無目標(biāo)瀏覽15人，典型目標(biāo)搜索任務(wù)15人。測試完成后每人將會獲得一份小禮物。

（四）實(shí)驗流程

整個實(shí)驗在采光良好、安靜的交互體驗與可用性測試實(shí)驗室進(jìn)行。實(shí)驗員向被試簡單介紹實(shí)驗設(shè)備、實(shí)驗流程及注意事項，待被試適應(yīng)環(huán)境后，坐在實(shí)驗位置上并在實(shí)驗知情書上簽字。

打開軟件，輸入實(shí)驗名稱，將實(shí)驗刺激材料導(dǎo)入，設(shè)置相應(yīng)參數(shù);被試坐在距離電腦顯示屏60cm左右的位置，調(diào)整坐姿，目光保持平行;采用五點(diǎn)校準(zhǔn)法對被試進(jìn)行眼動數(shù)據(jù)校準(zhǔn);被試瀏覽指導(dǎo)語;瀏覽屏幕上的實(shí)驗刺激材料;參與實(shí)驗B的被試填寫紙質(zhì)版喜好度問卷;實(shí)驗結(jié)束，整理數(shù)據(jù)。

三、實(shí)驗結(jié)果及問卷分析

（一）熱點(diǎn)圖分析

熱點(diǎn)圖是被試瀏覽網(wǎng)頁時圖形化表示的數(shù)據(jù)，用不同顏色來表示被試對界面各處的不同關(guān)注度，主要通過綠色、橙色和紅色三種顏色表示。被試在一區(qū)域的注視時間越長，注視點(diǎn)越多，顏色越深;注視時間短、注視點(diǎn)少則顏色淺，可以直觀地看到被試視線集中的區(qū)域，從而知道最關(guān)注和最容易忽略的區(qū)域。

通過實(shí)驗A所得到的熱點(diǎn)圖（15組數(shù)據(jù)疊加之后的熱點(diǎn)圖，隨機(jī)選擇展示，如圖1所示）。從圖中可以看到，網(wǎng)頁中學(xué)校logo及導(dǎo)航欄顏色多為紅色，輪播圖區(qū)域為綠色和橙色，信息欄中的標(biāo)題及圖片新聞區(qū)域多為橙色。網(wǎng)頁右下角的文章標(biāo)題鏈接區(qū)域顏色為綠色，網(wǎng)頁右側(cè)區(qū)域顏色較淡。從熱點(diǎn)圖中可以看到，被試在瀏覽的過程中，最關(guān)注的區(qū)域在上方的位置，也就是學(xué)校標(biāo)識及導(dǎo)航欄;輪播圖傳達(dá)信息更加直觀，能夠吸引人的眼球;加大加粗的標(biāo)題比大段文字更吸引用戶的注意力;圖片比文字更加吸引人的注意力;重要的信息不宜放在網(wǎng)頁的最右側(cè)區(qū)域。

（二）軌跡圖分析

注視軌跡圖用于記錄被試在瀏覽網(wǎng)頁的注視軌跡，數(shù)值1、2、3……代表注視點(diǎn)的順序，注視停留時間越長，注視點(diǎn)的半徑越大。通過注視點(diǎn)軌跡圖可知被試首先注視的區(qū)域、注視的先后順序、注視停留時間的長短以及視覺是否流暢。

通過實(shí)驗A所得到的注視點(diǎn)軌跡圖（隨機(jī)選擇展示，如圖2所示）。從軌跡圖中可以看到，第一注視點(diǎn)往往在網(wǎng)頁的中上區(qū)域，即輪播圖的位置，第二注視點(diǎn)一般在導(dǎo)航欄，然后根據(jù)從上自下的瀏覽習(xí)慣進(jìn)行瀏覽，圖片右側(cè)偏下的位置幾乎沒有注視點(diǎn)。通過注視點(diǎn)軌跡圖可以看出，注視點(diǎn)的位置多落在導(dǎo)航區(qū)、標(biāo)題以及圖片區(qū)域。在進(jìn)行高校官方網(wǎng)站網(wǎng)頁設(shè)計時，好的輪播圖能夠讓人眼前一亮，吸引人的視線，也是對整個網(wǎng)頁的第一印象;導(dǎo)航區(qū)的設(shè)計尤為重要，清晰明了的導(dǎo)航能夠準(zhǔn)確高效地引導(dǎo)用戶查找信息，減少因為盲目尋找信息而浪費(fèi)的時間;信息欄中標(biāo)題與大段文字之間應(yīng)形成對比，為用戶提供簡潔明了的信息層級，讓用戶以最短的時間找到想要的信息;圖片比文字更加吸引人，在高校官方網(wǎng)站網(wǎng)頁設(shè)計中合理地加入圖片，不僅可以提高用戶視覺體驗，還可提高信息的獲取率。

（三）數(shù)據(jù)分析

在實(shí)驗B中，采集了總注視時間（TFT）、注視點(diǎn)個數(shù)（FC）及平均注視時間（ATF）三種眼動指標(biāo)數(shù)據(jù)。TFT是被試對網(wǎng)頁所有注視時間的總和，反映了被試在進(jìn)行搜索任務(wù)時注視的時間，是比較不同網(wǎng)頁搜索效率的重要指標(biāo);FC是被試在瀏覽網(wǎng)頁的過程中產(chǎn)生的注視點(diǎn)的個數(shù)，在信息搜索中，注視點(diǎn)個數(shù)越多，信息搜索越困難;AFT是每個注視點(diǎn)平均所用的時間。通過眼動實(shí)驗分析處理軟件Ergolab2.0相關(guān)數(shù)據(jù)得出被試完成搜索任務(wù)所用的時間TCT，得出搜索任務(wù)放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高。被試在完成實(shí)驗后，立即對十所高校官方網(wǎng)站網(wǎng)頁進(jìn)行喜好度打分，對喜好度數(shù)據(jù)進(jìn)行統(tǒng)計，得出網(wǎng)站喜好度均值PV，數(shù)據(jù)表明用戶更喜愛風(fēng)格簡潔、有條理，并且信息搜索效率高的網(wǎng)站。相關(guān)眼動數(shù)據(jù)、完成搜索任務(wù)所用時間及喜好度值如表1所示：

從上表可知，利用相關(guān)分析去研究TFT， FC， AFT， PV和TCT之間的相關(guān)關(guān)系，使用Pearson相關(guān)系數(shù)去表示相關(guān)關(guān)系的強(qiáng)弱情況。具體分析可知：

TCT和TFT之間的相關(guān)系數(shù)值為0.998，并且呈現(xiàn)出0.01水平的顯著性，說明TCT和TFT之間有著顯著的正相關(guān)關(guān)系。TCT和FC之間的相關(guān)系數(shù)值為0.990，并且呈現(xiàn)出0.01水平的顯著性，說明TCT和FC之間有著顯著的正相關(guān)關(guān)系。TCT和AF T之間的相關(guān)系數(shù)值為-0.330，接近于0，并且p值為0.351>0.05，說明TCT和AFT之間并沒有相關(guān)關(guān)系。TCT和PV之間的相關(guān)系數(shù)值為-0.648，并且呈現(xiàn)出0.05水平的顯著性，說明TCT和PV之間有著顯著的負(fù)相關(guān)關(guān)系。

2.將TFT、FC、PV與TCT，輸入至SPSSAU中進(jìn)行線性回歸分析，如表3、4、5所示：

從表3可以看出，模型R方值為0.420，意味著TCT可以解釋PV的42.0%變化原因。對模型進(jìn)行F檢驗時發(fā)現(xiàn)模型通過F檢驗（F=5.793，p=0.043<0.05），模型公式為：PV=8.154-0.009*TCT?？偨Y(jié)分析可知：TCT全部均會對PV產(chǎn)生顯著的負(fù)向影響關(guān)系。

從表4可以看出，模型R方值為0. 9 9 6，意味著TC T可以解釋TFT的99.6%變化原因。對模型進(jìn)行F檢驗時發(fā)現(xiàn)模型通過F檢驗（F=1882.932，p=0.000<0.05），模型公式為：TFT=0.057 + 0.922*TCT。

總結(jié)分析可知：TCT全部均會對TFT產(chǎn)生顯著的正向影響關(guān)系。

從表5可以看出，模型R方值為0. 9 8 0，意味著TC T可以解釋FC的98.0%變化原因。對模型進(jìn)行F檢驗時發(fā)現(xiàn)模型通過F檢驗（F=386.337，p=0.000<0.05），模型公式為：FC=-1.018 + 1.974*TCT。

總結(jié)分析可知：TCT全部均會對FC產(chǎn)生顯著的正向影響關(guān)系。

通過眼動數(shù)據(jù)及網(wǎng)頁喜好度值處理分析之后的結(jié)果可知：網(wǎng)頁喜好度與完成所搜任務(wù)所用時間之間有著負(fù)相關(guān)關(guān)系，所用時間越長，搜索效率越低，喜好度越低，搜索任務(wù)放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高;總注視時間與完成搜索任務(wù)所用時間共1項之間有著正相關(guān)關(guān)系，完成搜任務(wù)所用時間越久，總注視時間越長;注視點(diǎn)個數(shù)與完成所搜任務(wù)所用時間之間有著正相關(guān)關(guān)系，完成所搜任務(wù)所用時間越長，注視點(diǎn)個數(shù)越多。

（四）討論

結(jié)合高校官方網(wǎng)站的作用及眼動實(shí)驗與問卷調(diào)查數(shù)據(jù)處理分析的結(jié)果，對高校官方網(wǎng)站設(shè)計提出以下建議：

1.信息內(nèi)容：高校網(wǎng)站與其他網(wǎng)站不同，它是教育性質(zhì)而非盈利性質(zhì)的網(wǎng)站，使用價值是使學(xué)校教職工、學(xué)生以及社會人員獲得有用的信息，其內(nèi)容主要是與學(xué)校相關(guān)新聞動態(tài)、教學(xué)科研、招生等管理服務(wù)信息這些方面，高校官網(wǎng)發(fā)布的信息內(nèi)容需具有準(zhǔn)確性、權(quán)威性及新穎性。實(shí)驗表明，圖片比大段文字更具有吸引力，用戶瀏覽高校網(wǎng)站時第一注視點(diǎn)及最關(guān)注的區(qū)域在網(wǎng)頁中上方，信息放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高。因此，在進(jìn)行高校官方網(wǎng)站網(wǎng)頁設(shè)計時，信息內(nèi)容可以結(jié)合圖片進(jìn)行展示，增加對用戶的吸引力，提高用戶的關(guān)注度，并且應(yīng)將重要的信息放在網(wǎng)站第一屏的中上方。

2.用戶服務(wù)：高校官方網(wǎng)站的基本功能是滿足用戶群體的需求，所以合理、科學(xué)地劃分用戶群體，從而確定目標(biāo)用戶，并滿足目標(biāo)用戶的需求，這是提升高校網(wǎng)站用戶體驗的一個重要方面[9]。高校官方網(wǎng)站網(wǎng)頁在設(shè)計時，應(yīng)考慮其界面如何便于用戶操作，例如導(dǎo)航欄及搜索框的設(shè)計，網(wǎng)站導(dǎo)航欄是引導(dǎo)用戶進(jìn)行網(wǎng)站瀏覽并快速地回到網(wǎng)站的首頁及其他內(nèi)容頁面欄目的一個版塊，它決定了用戶能否通過導(dǎo)航系統(tǒng)快速進(jìn)入到相關(guān)頁面;搜索框在網(wǎng)站的設(shè)計中是至關(guān)重要的，通過搜索框用戶可以快速地查找到自己想要的內(nèi)容。實(shí)驗結(jié)果表明：搜索信息花費(fèi)的時間越短，用戶對網(wǎng)站的喜好度越高，因此應(yīng)將導(dǎo)航欄和搜索框有關(guān)的內(nèi)容放于官網(wǎng)首頁的中上部，使用戶在最短的時間獲得最有用的信息，提高用戶對網(wǎng)站的喜好度。

3.網(wǎng)站結(jié)構(gòu)：明確高校官方網(wǎng)站的定位及信息內(nèi)容之后，高校網(wǎng)站的網(wǎng)頁結(jié)構(gòu)設(shè)計應(yīng)分清主次關(guān)系，科學(xué)地進(jìn)行信息分類，組織信息方式多樣化，使各部分所含信息平衡。網(wǎng)站的結(jié)構(gòu)層次不宜過多，網(wǎng)站目錄結(jié)構(gòu)與層次框架應(yīng)當(dāng)清晰有序、線索明確、主次合理[10]。在進(jìn)行高校官方網(wǎng)站網(wǎng)頁設(shè)計時標(biāo)題與內(nèi)容之間可通過字體大小顏色進(jìn)行區(qū)分，加大加粗的標(biāo)題更能引起用戶的注意力。應(yīng)合理地使用圖片，采用圖文結(jié)合的方式進(jìn)行排版布局，使視覺效果增強(qiáng)對信息資源的顯示，而不是一味地大面積使用圖片，信息內(nèi)容變得松散，使得用戶的視覺搜索效率降低，反而適得其反。

4.網(wǎng)頁風(fēng)格：用戶獲取信息最主要的方式是視覺，“視覺吸引”是影響用戶體驗的第一步，用戶打開網(wǎng)站之后的網(wǎng)頁視覺效果給用戶留下第一印象，網(wǎng)頁整體風(fēng)格決定網(wǎng)頁視覺效果，因此，網(wǎng)頁整體風(fēng)格的好壞對用戶視覺印象起到關(guān)鍵性的作用。通過眼動實(shí)驗及問卷調(diào)查發(fā)現(xiàn)，被試對于網(wǎng)頁整體風(fēng)格簡潔、有條理的高校官方網(wǎng)站頁面的注視點(diǎn)更為集中，用戶能很快地找到重要信息。對于頁面風(fēng)格結(jié)構(gòu)相對復(fù)雜的網(wǎng)頁，被試的注視點(diǎn)更為松散，視覺搜索效率也相對較低。因此，高校官方網(wǎng)站的設(shè)計不應(yīng)該一味地追求風(fēng)格復(fù)雜化而忽視了功能的重要性，在進(jìn)行高校官方網(wǎng)站設(shè)計時，應(yīng)將視覺和功能相結(jié)合，網(wǎng)頁結(jié)構(gòu)功能清晰、風(fēng)格鮮明，使用戶能夠便捷且順利地完成操作。

結(jié)語

通過眼動實(shí)驗研究了用戶在正常瀏覽情況下瀏覽高校官方網(wǎng)站主頁的瀏覽行為習(xí)慣，找到高校官方網(wǎng)站中信息搜索效率最高的位置，發(fā)現(xiàn)與信息搜索效率相關(guān)的眼動指標(biāo)，得出搜索目標(biāo)時間越久，搜索效率越低，用戶的喜好度越低。并結(jié)合高校官方網(wǎng)站的定位，為高校官方網(wǎng)站網(wǎng)頁的設(shè)計提供了參考建議。本次實(shí)驗仍有不足之處，比如眼動儀精度不夠高，實(shí)驗樣本較小，實(shí)驗設(shè)計的較為簡單等，未來研究可以針對這幾個方面的不足之處進(jìn)行完善和深入。