眼動實驗在高校官方網站網頁設計中的應用

武曉燕 張阿維

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

引言

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

一、眼動實驗與高校官方網站設計

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

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

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

二、實驗設計

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

（一）實驗材料

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

（二）實驗設備

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

（三）被試

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

（四）實驗流程

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

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

三、實驗結果及問卷分析

（一）熱點圖分析

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

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

（二）軌跡圖分析

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

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

（三）數據分析

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

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

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

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

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

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

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

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

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

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

（四）討論

結合高校官方網站的作用及眼動實驗與問卷調查數據處理分析的結果，對高校官方網站設計提出以下建議：

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

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

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

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

結語

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