導(dǎo)語：眼動實驗在官方網(wǎng)站網(wǎng)頁設(shè)計的應(yīng)用一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

摘要：為了研究用戶的網(wǎng)頁瀏覽習(xí)慣及效率。論文借助眼動實驗，并結(jié)合問卷調(diào)查，將主觀評估和客觀數(shù)據(jù)相結(jié)合，以高校官方網(wǎng)站為例，對用戶瀏覽網(wǎng)頁行為和效率進行研究，獲得用戶眼動數(shù)據(jù)及對網(wǎng)頁喜好度數(shù)據(jù)。用戶瀏覽高校網(wǎng)站時第一注視點及最關(guān)注的區(qū)域在網(wǎng)頁中上方；搜索信息效率越低，用戶喜好度越低；信息放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高。從信息內(nèi)容、用戶服務(wù)、網(wǎng)站結(jié)構(gòu)及網(wǎng)頁風(fēng)格四個方面對高校官方網(wǎng)站設(shè)計提出建議。研究結(jié)果為高校官方網(wǎng)站網(wǎng)頁設(shè)計提供參考依據(jù)。

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

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

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

眼睛是人類獲得外界信息的主要途徑，視覺是加工處理信息的重要方式，用戶瀏覽網(wǎng)頁時主要是通過眼睛獲取搜索信息。眼動儀是用來記錄處理眼動數(shù)據(jù)的設(shè)備，是心理學(xué)研究的重要儀器，眼動測試是內(nèi)隱測量方法的一種，其實驗數(shù)據(jù)可以直接反映用戶行為，近些年被廣泛應(yīng)用于網(wǎng)站的設(shè)計與評估中，用于分析用戶對網(wǎng)站的視覺瀏覽習(xí)慣。眼動實驗?zāi)軌蛴涗浻脩粼跒g覽網(wǎng)頁時眼睛的運動數(shù)據(jù)，包括總注視時間（TotalFixationTime，TFT）、注視次數(shù)（FixationCount，F(xiàn)C）、平均注視時間（AverageFixationTime，AFT）。眼動實驗的主觀性圖表在網(wǎng)頁設(shè)計研究中被使用最多的是熱點圖和軌跡圖。近些年，眼動追蹤被廣泛應(yīng)用于網(wǎng)頁設(shè)計研究之中。許鑫等人利用眼動追蹤實驗研究用戶在瀏覽高校圖書館門戶網(wǎng)站主頁時的瀏覽習(xí)慣，提出了高校圖書館門戶網(wǎng)站網(wǎng)頁設(shè)計時應(yīng)考慮的重要因素[1]；王詩傲將眼動分析法引入到工業(yè)設(shè)計服務(wù)網(wǎng)站的界面設(shè)計評估上，通過眼動指標完善工業(yè)設(shè)計服務(wù)網(wǎng)站評價體系內(nèi)容[2]；劉瑋琳等人通過眼動實驗探究網(wǎng)頁界面中的分類信息設(shè)計對用戶認知效果的影響規(guī)律[3]；吳安波等人對某高校教務(wù)網(wǎng)站的可用性進行了分析，在一定程度上為教務(wù)網(wǎng)站的設(shè)計及改進提供參考[4]。由此可見，利用眼動實驗對網(wǎng)頁設(shè)計進行研究已經(jīng)較為成熟，為高校官方網(wǎng)站網(wǎng)頁設(shè)計的研究提供了理論基礎(chǔ)。高校官方網(wǎng)站是依托于高等學(xué)府，以服務(wù)教育、服務(wù)科研、服務(wù)師生為目的，肩負對內(nèi)交流、對外宣傳的使命，從事教育資源整合、高校信息、輔助教學(xué)管理的綜合性網(wǎng)站[5]。高校官方網(wǎng)站既是學(xué)校信息傳播的重要載體，也是校內(nèi)師生管理系統(tǒng)的重要入口。針對高校官方網(wǎng)站設(shè)計研究方面，李嘉瑜以國內(nèi)“985”高校為研究對象，以美學(xué)視角為出發(fā)點，對高校官網(wǎng)的版式界面進行了詳細的分析[5]；萬立軍等人通過國內(nèi)外學(xué)者對目前高校網(wǎng)站信息服務(wù)質(zhì)量評價相關(guān)研究內(nèi)容的分析，構(gòu)建我國高校網(wǎng)站信息服務(wù)質(zhì)量評價指標體系[6]；孔寧通過詢問技術(shù)，從用戶的主觀傾向性出發(fā)，對高校門戶網(wǎng)站可用性進行了進一步的探索與研究[7]；王傳松應(yīng)用文獻分析法、用戶訪談和問卷調(diào)查法、層次分析法以及模糊綜合評判法等方法，構(gòu)建了基于用戶體驗的高校網(wǎng)站評價模型[8]。通過對搜索的文獻進行整理發(fā)現(xiàn)目前針對高校官方網(wǎng)站網(wǎng)頁設(shè)計的研究并不多，眼動實驗在這一研究領(lǐng)域中還有待探索。

二、實驗設(shè)計

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

（一）實驗材料

流量是衡量網(wǎng)站是否受歡迎的一個重要指標，本次實驗刺激材料采用站長之家根據(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)站主頁作為演示材料進行規(guī)則講解。

（二）實驗設(shè)備

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

（三）被試

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

（四）實驗流程

整個實驗在采光良好、安靜的交互體驗與可用性測試實驗室進行。實驗員向被試簡單介紹實驗設(shè)備、實驗流程及注意事項，待被試適應(yīng)環(huán)境后，坐在實驗位置上并在實驗知情書上簽字。打開軟件，輸入實驗名稱，將實驗刺激材料導(dǎo)入，設(shè)置相應(yīng)參數(shù)；被試坐在距離電腦顯示屏60cm左右的位置，調(diào)整坐姿，目光保持平行；采用五點校準法對被試進行眼動數(shù)據(jù)校準；被試瀏覽指導(dǎo)語；瀏覽屏幕上的實驗刺激材料；參與實驗B的被試填寫紙質(zhì)版喜好度問卷；實驗結(jié)束，整理數(shù)據(jù)。

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

（一）熱點圖分析

熱點圖是被試瀏覽網(wǎng)頁時圖形化表示的數(shù)據(jù)，用不同顏色來表示被試對界面各處的不同關(guān)注度，主要通過綠色、橙色和紅色三種顏色表示。被試在一區(qū)域的注視時間越長，注視點越多，顏色越深；注視時間短、注視點少則顏色淺，可以直觀地看到被試視線集中的區(qū)域，從而知道最關(guān)注和最容易忽略的區(qū)域。通過實驗A所得到的熱點圖（15組數(shù)據(jù)疊加之后的熱點圖，隨機選擇展示，如圖1所示）。從圖中可以看到，網(wǎng)頁中學(xué)校logo及導(dǎo)航欄顏色多為紅色，輪播圖區(qū)域為綠色和橙色，信息欄中的標題及圖片新聞區(qū)域多為橙色。網(wǎng)頁右下角的文章標題鏈接區(qū)域顏色為綠色，網(wǎng)頁右側(cè)區(qū)域顏色較淡。從熱點圖中可以看到，被試在瀏覽的過程中，最關(guān)注的區(qū)域在上方的位置，也就是學(xué)校標識及導(dǎo)航欄；輪播圖傳達信息更加直觀，能夠吸引人的眼球；加大加粗的標題比大段文字更吸引用戶的注意力；圖片比文字更加吸引人的注意力；重要的信息不宜放在網(wǎng)頁的最右側(cè)區(qū)域。

（二）軌跡圖分析

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

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

在實驗B中，采集了總注視時間（TFT）、注視點個數(shù)(FC)及平均注視時間(ATF)三種眼動指標數(shù)據(jù)。TFT是被試對網(wǎng)頁所有注視時間的總和，反映了被試在進行搜索任務(wù)時注視的時間，是比較不同網(wǎng)頁搜索效率的重要指標；FC是被試在瀏覽網(wǎng)頁的過程中產(chǎn)生的注視點的個數(shù)，在信息搜索中，注視點個數(shù)越多，信息搜索越困難；AFT是每個注視點平均所用的時間。通過眼動實驗分析處理軟件Ergolab2.0相關(guān)數(shù)據(jù)得出被試完成搜索任務(wù)所用的時間TCT，得出搜索任務(wù)放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高。被試在完成實驗后，立即對十所高校官方網(wǎng)站網(wǎng)頁進行喜好度打分，對喜好度數(shù)據(jù)進行統(tǒng)計，得出網(wǎng)站喜好度均值PV，數(shù)據(jù)表明用戶更喜愛風(fēng)格簡潔、有條理，并且信息搜索效率高的息搜索效率高的網(wǎng)站。相關(guān)眼動數(shù)據(jù)、完成搜索任務(wù)所用時間及喜好度值如表1所示：1.將各網(wǎng)頁眼動數(shù)據(jù)與TCT、PV值分別輸入SPSSAU進行相關(guān)性分析，得到網(wǎng)頁眼動數(shù)據(jù)、PV與TCT的相關(guān)性數(shù)值，如表2所示：的相關(guān)關(guān)系，使用Pearson相關(guān)系數(shù)去表示相關(guān)關(guān)系的強弱情況。體分析可知：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水平的顯著性，說明TC和FC之間有著顯著的正相關(guān)關(guān)系。TCT和AFT之間的相關(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.水平的顯著性，說明TCT和PV之間有著顯著的負相關(guān)關(guān)系。2.將TFT、FC、PV與TCT，輸入至SPSSAU中進行線性回歸分析如表3、4、5所示：從表3可以看出，模型R方值為0.420，意味著TCT可以解釋PV的42.0%變化原因。對模型進行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)生顯著的負向影響關(guān)系。從表4可以看出，模型R方值為0.996，意味著TCT可以解釋TFT的99.6%變化原因。對模型進行F檢驗時發(fā)現(xiàn)模型通過F檢驗(F=1882.932，p=0.000<0.05)，模型公式為：TFT=0.057+0.922*TCT?？偨Y(jié)分析可知：TCT全部均會對TFT產(chǎn)生顯著的正向影響關(guān)系。從表5可以看出，模型R方值為0.980，意味著TCT可以解釋FC的98.0%變化原因。對模型進行F檢驗時發(fā)現(xiàn)模型通過F檢驗(F=386.337，p=0.000<0.05)，模型公式為：FC=-1.018+1.974*TCT?？偨Y(jié)分析可知：TCT全部均會對FC產(chǎn)生顯著的正向影響關(guān)系。通過眼動數(shù)據(jù)及網(wǎng)頁喜好度值處理分析之后的結(jié)果可知：網(wǎng)頁喜好度與完成所搜任務(wù)所用時間之間有著負相關(guān)關(guān)系，所用時間越長，搜索效率越低，喜好度越低，搜索任務(wù)放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高；總注視時間與完成搜索任務(wù)所用時間共1項之間有著正相關(guān)關(guān)系，完成搜任務(wù)所用時間越久，總注視時間越長；注視點個數(shù)與完成所搜任務(wù)所用時間之間有著正相關(guān)關(guān)系，完成所搜任務(wù)所用時間越長，注視點個數(shù)越多。

（四）討論

結(jié)合高校官方網(wǎng)站的作用及眼動實驗與問卷調(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)的信息內(nèi)容需具有準確性、權(quán)威性及新穎性。實驗表明，圖片比大段文字更具有吸引力，用戶瀏覽高校網(wǎng)站時第一注視點及最關(guān)注的區(qū)域在網(wǎng)頁中上方，信息放在打開網(wǎng)站的第一屏?xí)r，搜索效率最高。因此，在進行高校官方網(wǎng)站網(wǎng)頁設(shè)計時，信息內(nèi)容可以結(jié)合圖片進行展示，增加對用戶的吸引力，提高用戶的關(guān)注度，并且應(yīng)將重要的信息放在網(wǎng)站第一屏的中上方。2.用戶服務(wù)：高校官方網(wǎng)站的基本功能是滿足用戶群體的需求，所以合理、科學(xué)地劃分用戶群體，從而確定目標用戶，并滿足目標用戶的需求，這是提升高校網(wǎng)站用戶體驗的一個重要方面[9]。高校官方網(wǎng)站網(wǎng)頁在設(shè)計時，應(yīng)考慮其界面如何便于用戶操作，例如導(dǎo)航欄及搜索框的設(shè)計，網(wǎng)站導(dǎo)航欄是引導(dǎo)用戶進行網(wǎng)站瀏覽并快速地回到網(wǎng)站的首頁及其他內(nèi)容頁面欄目的一個版塊，它決定了用戶能否通過導(dǎo)航系統(tǒng)快速進入到相關(guān)頁面；搜索框在網(wǎng)站的設(shè)計中是至關(guān)重要的，通過搜索框用戶可以快速地查找到自己想要的內(nèi)容。實驗結(jié)果表明：搜索信息花費的時間越短，用戶對網(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é)地進行信息分類，組織信息方式多樣化，使各部分所含信息平衡。網(wǎng)站的結(jié)構(gòu)層次不宜過多，網(wǎng)站目錄結(jié)構(gòu)與層次框架應(yīng)當清晰有序、線索明確、主次合理[10]。在進行高校官方網(wǎng)站網(wǎng)頁設(shè)計時標題與內(nèi)容之間可通過字體大小顏色進行區(qū)分，加大加粗的標題更能引起用戶的注意力。應(yīng)合理地使用圖片，采用圖文結(jié)合的方式進行排版布局，使視覺效果增強對信息資源的顯示，而不是一味地大面積使用圖片，信息內(nèi)容變得松散，使得用戶的視覺搜索效率降低，反而適得其反。4.網(wǎng)頁風(fēng)格：用戶獲取信息最主要的方式是視覺，“視覺吸引”是影響用戶體驗的第一步，用戶打開網(wǎng)站之后的網(wǎng)頁視覺效果給用戶留下第一印象，網(wǎng)頁整體風(fēng)格決定網(wǎng)頁視覺效果，因此，網(wǎng)頁整體風(fēng)格的好壞對用戶視覺印象起到關(guān)鍵性的作用。通過眼動實驗及問卷調(diào)查發(fā)現(xiàn)，被試對于網(wǎng)頁整體風(fēng)格簡潔、有條理的高校官方網(wǎng)站頁面的注視點更為集中，用戶能很快地找到重要信息。對于頁面風(fēng)格結(jié)構(gòu)相對復(fù)雜的網(wǎng)頁，被試的注視點更為松散，視覺搜索效率也相對較低。因此，高校官方網(wǎng)站的設(shè)計不應(yīng)該一味地追求風(fēng)格復(fù)雜化而忽視了功能的重要性，在進行高校官方網(wǎng)站設(shè)計時，應(yīng)將視覺和功能相結(jié)合，網(wǎng)頁結(jié)構(gòu)功能清晰、風(fēng)格鮮明，使用戶能夠便捷且順利地完成操作。

結(jié)語

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

作者：武曉燕 張阿維 單位：西安工程大學(xué)服裝與藝術(shù)設(shè)計學(xué)院