基于眼動跟蹤的教育網頁“優勢區域”論證研究

徐衛衛

（寧波經貿學校，寧波315000）

0 引言

國內部分關于“網頁設計”的論著往往是憑借經驗泛泛論述較多；設計的理論依據較為空洞，說服力不強[1]；針對具體問題（功能模塊）研究較少；采用心理實驗研究法進行嚴謹科學實證研究更少。梳理文獻資料后可得知“眼動追蹤研究”和“網頁設計”之間沒有形成有機的互聯，往往只是針對于某一小模塊的探討，將兩者統一起來研究的并不多見，并且呈現出研究的不系統性[2]。所以基于系統的國內外眼動研究成果的網頁設計應運而生，力求給出一套系統、有科學依據的方法。在此背景下利用“眼動追蹤”技術對網頁設計進行定定量分析，對網頁結構、內容等的設計具有很強現實指導意義。本研究針對學生瀏覽教育網頁的“視覺偏好區域”進行論證研究，為教育網頁優化設計提供數據支撐。同時也可以給中小學教師進行信息化教學實施過程，提供一個全新的審視視角[3]，論證設計的有效性、科學性。

1 實驗假設（目的）

驗證教育網頁頁面的“中上部”位置是其視覺的“優勢區域”。

2 實驗被試

實驗對象為寧波大學本科生，涉及的學科有教育學、理學、工學、管理學、文學、經濟學、法學、醫學等。隨機選取34 人（男16，女18），分為兩組，兩組男女人數分別相同。要求裸眼視力或矯正視力正常，不是色盲、色弱、閃光者，無眼動實驗經驗。

3 實驗設計

采用被試內實驗設計，利用AB、BA 交互平衡法，先讓第一組（17 人）中每人先瀏覽教育網頁A，接著瀏覽教育網頁B；然后，讓第二組（17 人）中每人先瀏覽教育網頁B，再瀏覽教育網頁A。瀏覽時間被試自己控制。其中教育網頁的微觀結構（“版塊”填充的信息內容）為自變量，因變量為注視次數、注視時間。

4 實驗材料、儀器

實驗材料為兩張教育新聞網頁（如圖1 和圖2）。兩張網頁的宏觀結構（布局方式）相同，但是微觀結構不同（每個“版塊”填充的信息內容不同）。為模擬真實操作環境，超鏈接均設為空鏈接。

實驗采用瑞典Tobii T120 型眼動儀（雙眼追蹤），采樣頻率為120Hz，屏幕分辨率為1280×1024 像素，被試眼睛距顯示器中心的距離為60-70cm，不需要佩戴頭盔。實驗材料的呈現和數據的記錄、加工由其自帶的Tobii Studio 軟件完成。

5 實驗過程

實驗在寧波大學教師教育學院“眼動與生物反饋實驗室”中進行。該實驗室有單獨的被試等候室，具有良好隔音功能，光線、溫度條件良好，并且被試無需帶頭盔，最大限度的模擬真實的操作環境，確保實驗結果的可信度。實驗由一名主試引領一名被試進行個別測試，一名輔助人員在等候室接待被試及排序。

6 數據采集與處理

興趣區（AOI）劃分。本研究將每個實驗材料分別劃分為五個興趣區（Area Of Interest，AOI），五個興趣區的面積相當[1]。如圖1-圖2 所示：

圖1 教育新聞網A（五個興趣區）

圖2 教育新聞網B（五個興趣區）

根據上面劃分的興趣區，Tobii Studio 軟件會自動生成相關眼動數據，然后用Spss17.0 軟件對數據進行統計分析[2]。

●教育新聞網A 五個興趣區在注視時間（fixation duration）維度上的分析

表1 教育新聞網A 五個興趣區注視時間的平均值和標準差

從表1 可以得出，AOI 1 的注視總時間明顯多于其他四個區域，AOI 1 注視時間的平均值除了較AOI 2 差別明顯外和其他三個的差異并不明顯。

表2 教育新聞網A 五個興趣區注視時間上的單因素方差分析

通過單因素方差分析可見，在注視時間上，F（4，34）=10.335，p<0.001，說明網頁中區域的位置會對讀者在其區域內的注視時間產生異常顯著影響。

為了能夠分析清楚五個興趣區它們兩兩之間差異的具體情況，進一步進行了事后多重比較研究（LSD），如表3。

表3 教育新聞網A 五個興趣區在注視時間上的事后多重比較（LSD）

從表3 可以看出，當進行興趣區在注視時間上兩兩比較時，AOI 1 和AOI 2 存在異常顯著的差異、AOI 1和AOI 3 是存在顯著差異，但是AOI 1 和AOI 4、AOI 5存在的差異沒有達到顯著水平；AOI 2 和其他各區的差異都達到了極其顯著水平；AOI 3 和其他各區差異都顯著；AOI 4 與 AOI 1、AOI 5 沒有顯著差異，與其他區域差異顯著；AOI 5 與 AOI 2、AOI 3 差異顯著，與其他區域差異不顯著。

綜合以上三個表格，AOI 1 明顯優于AOI 2 和AOI 3，AOI 1 與 AOI 4、AOI 5 的差異不大，但是從總的注視時間上看，AOI 1 較AOI 4 和AOI 5 還是要具有相當的優勢。總之被試在不同的網頁區域可能會有不同長度的注視時間，讀者對網頁的中上部區域（AOI 1）呈現出注視時間上特定的“區域偏好性”。

●教育新聞網A 五個興趣區的注視點個數（fixa?tion count）維度上的分析

表4 教育新聞網A 五個興趣區注視點個數的平均值和標準差

通過表4 可以得出，注視點個數的平均數和總數在AOI 1 里面是最多的，明顯多于其他四個區域，存在明顯的差異。

表5 教育新聞網A 五個興趣區在注視點個數上的卡方檢驗

由表 5 可以看出，X2=68.993，p<0.001，所以 AOI 1和其他區域相比存在的差異極其顯著。說明，網頁中的區域位置會對讀者在其區域內的注視點個數產生很大影響。

根據以上的兩個表可以得出：AOI 1 中的注視點的平均數和總數明顯多于其他幾個區域，并且與其他區域在注視點個數上存在極其顯著的差異。

為了排除因為網頁內容造成的教育新聞網A 中上部區域為“優勢區域”，所以打亂A 網頁的內容排列，但是網頁宏觀結構不變，然后對教育新聞網B 進行試驗。

●教育新聞網B 五個興趣區注在“注視時間”（fix?ation duration）維度上的分析

表6 教育新聞網B 五個興趣區注視時間的平均值和標準差

從表6 可以看出，AOI 1 的注視總時間遠遠地超越了其他四個區，尤其是AOI 2。但是從平均數上看，五個區域的差異不明顯。

通過單因素方差分析可見，在注視時間上，F（4，34）=10.260，p<0.001，說明，網頁中的不同區域會對讀者在其區域內的注視時間的長短產生異常顯著影響。

為了能夠分析清楚五個興趣區它們兩兩之間在注視時間上差異的具體情況，進一步進行了事后多重比較研究（LSD），如表 8。

表8 教育新聞網B 五個興趣區在注視時間上的事后多重比較LSD

從圖表8 中可以看出，當進行不同區域注視時間兩兩比較時，AOI 1 和AOI 2 存在極其顯著差異、AOI 1和AOI 3 是存在顯著差異，但是AOI 1 和AOI 4、AOI 5存在的差異沒有達到顯著水平；AOI 2 和其他各區的差異都達到極其顯著水平；AOI 3 和其他各區差異都顯著；AOI 4 與 AOI 1、AOI 5 沒有顯著差異，與其他區域差異顯著；AOI 5 與 AOI 2、AOI 3 差異顯著，與其他區域差異不顯著。

綜合以上三個表，對注視時間的影響上，AOI 1 明顯優于 AOI 2 和 AOI 3，AOI 1 與 AOI 4、AOI 5 的差異不大，但是從注視總時間上看，AOI 1 較AOI 4 和AOI 5還具有相當的優勢?？傊辉囋诓煌木W頁區域可能會有不同長度的注視時間，在注視時間上，讀者在網頁的中上部區域（AOI 1）呈現出特定的“區域偏好性”。

●教育新聞網B 五個興趣區注視點個數（fixation count）維度上的分析

表9 五個興趣區在注視點個數上的平均值和標準差

從圖表9 中可以看出，AOI 1 平均注視點個數最多，注視點總個數最多，AOI 2 最少，AOI 3、AOI 4、AOI 5 差異不大。

表10 教育新聞網B 五個興趣區在注視點個數上的卡方檢驗

由表 10 可知，X2=68.993，p<0.001，所以 AOI 1 和其他區域在注視點個數上相比存在的差異極其顯著。說明，網頁中的不同區域會對讀者的在其區域內的注視點個數產生很大影響。

綜合以上兩個表得出，在注視點的個數上，AOI 1相對于其他區域占有明顯的優勢，是注視點個數最多的區域。

7 研究討論

網頁的“中上部”區域是被試的頁面“興趣區”（視覺偏好區），表現在不論是在注視時間上，還是在注視點的個數上，相對于其他區域來說AOI 1 都占有明顯優勢，并且表現出與其他區域存在較大的差異性。

通過教育網頁A 與教育網頁B 比對還可以得出：被試在網頁上的視覺偏好區域跟頁面的空間位置存在必然聯系，跟網頁空間位置放置的“信息內容”關聯很小[3]。

該結論對網頁設計的科學性和商業價值具有較強指導作用。教學能力大賽、優質課比賽信息化教學設計模塊，以此結論為指導進行有效設計，爭取在效果和理論職支撐上分別取得理想成績。