武曉燕 張阿維

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

引言

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

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

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

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

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

二、實驗設計

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

（一）實驗材料

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

（二）實驗設備

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

（三）被試

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

（四）實驗流程

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

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

三、實驗結果及問卷分析

（一）熱點圖分析

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

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

（二）軌跡圖分析

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

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

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

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

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

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

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分析可知：TCT全部均會對PV產(chǎn)生顯著的負向影響關系。

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

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

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

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

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

（四）討論

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

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

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

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

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

結語

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