眼動儀在網頁優化中的實驗研究*——以廈門大學網絡課程為例

□ 安 璐 李子運

眼動儀在網頁優化中的實驗研究*
——以廈門大學網絡課程為例

□ 安 璐 李子運

隨著計算機技術的飛速發展和網絡的逐步普及，網絡課程被越來越多的學習者所接受。如何對網絡課程首頁進行有效的設計是一個很值得探討的問題。本文以廈門大學網絡課程為例，通過Smarteye5.4眼動儀設備的使用，以20名大學生為被試，記錄他們對不同網絡課程首頁設計的觀察和學習的眼動情況，整理大量數據，分析評價頁面的特點。根據學習者的網絡瀏覽特點，發現不同學習進度的學習者對界面的需求有所不同。

眼動儀；網頁優化；實驗研究

隨著網絡的越發普及，網絡學習在各大高校悄然興起，人們對其熱愛程度也逐漸增加，越來越多的學習者接受了這種學習方式。然而對于網絡課程首頁的設計除了傳統的問卷法、訪談法等評價方式以外，定量的評價方式很少見到。視線追蹤技術可以從學習者的角度定量的來評價頁面的設計，通過學習者的視線軌跡來量化的分析頁面的設計情況。視線追蹤是近幾年專家學者研究的熱點，但其和網絡課程首頁設計相聯系起來進行研究的資料還不是很多，筆者希望通過本文拋磚引玉，可以有更多的專家學者進行研究。

一、概念介紹

（一）眼動儀概述

早在19世紀已有學者通過人的眼球運動來分析人的心理活動，當時使用肉眼直接觀察被試的眼動情況。這種方法簡單易行，較為方便。但它受主觀因素影響較大，結果不夠精確。隨著技術的發展，眼動記錄技術也在不斷完善，出現了機械記錄法、光學記錄法、電流記錄法等一系列眼動記錄方法。專家學者一直致力于改進眼動記錄技術，20世紀60年代以來，隨著攝像技術、紅外技術（infrared technique） 和微電子技術在當今社會的迅猛發展，再加上計算機技術的普及，極大的推進了研究人員對高精度眼動儀的研發，從而促進了眼動研究在國際心理學及相關學科中的應用。眼動心理學的研究已經成為當代心理學研究的一種有用范型，在各個專業領域也越來越重要。

眼動技術就是通過從眼動軌跡的記錄中提取諸如注視點、注視時間、注視次數、眼跳距離、瞳孔大小等數據，從而研究個體的內在認知過程。現代眼動儀的結構一般包括四個系統，即光學系統、瞳孔中心坐標提取系統、視景與瞳孔坐標迭加系統和圖像與數據的記錄分析系統。眼動有三種基本方式：注視（fixation）、眼跳 （saccades） 和追隨運動 （pursuit movement）。

在對學習者的心理過程進行分析時，可以有以下主要參數：

（1）注視時間是指關注一個注視點所停留的時間。注視時間反映被試者對材料加工的仔細程度，也受材料的長短，難易，布局等因素影響。

（2）注視次數是指注視的多少。注視次數多少反映被試者對材料的熟悉程度，與注視時間密切相關。

（3）第一次到達目標區域的時間是指在區域內搜索所需要的目標時，第一次到達目標區域的時間。其是衡量學習者學習效率的重要指標。

（4）眼動軌跡圖是將眼動信息用數據和圖形的方式呈現出軌跡視圖，能最具體、最直觀和最全面地反映眼動的時空特征。

（5）瞳孔大小。瞳孔直徑與人的情緒和認知加工有密切關系。如看到厭惡的東西瞳孔會縮小，看到感興趣的東西瞳孔會增大。閱讀時文字理解難度越高，記憶負荷量越大，則瞳孔會放得越大。

（6）眼跳距離是指一次注視完成后，從一個注視點轉移到下一次注視點之間的距離。距離的大小與加工的內容有關。

（7）丟失時間是指在注視過程中，被試者并沒有注視到被試材料的時間。導致的原因可以是被試材料的難度和被試者的疲勞等多種原因。

（二）“米達斯接觸”概述

所謂“米達斯接觸”（midas touch），原意為無論你接觸什么東西，它都會變成金子（whatever you touch，turns to gold）。在基于視線追蹤的人機交互中指的是，在利用視覺進行目標選擇和操作時，操作者當前的注視位置往往反映其感興趣的目標對象，因此系統可根據這一特征作出適當反應。眼動信號以主動方式作用于網絡課程的主界面，通過眼動儀可以觀察到被試者的眼動軌跡。通過頁面的有效設計，可以讓使用者對有用的信息進行“米達斯接觸”，盡量避免“米達斯接觸”不必要的信息。

二、研究實驗設計

（一） 被試

選取江蘇師范大學20名本科生隨機分成兩組進行實驗。被試者年齡在20～22歲之間，所有被試者視力或矯正視力正常，均無色盲且為自愿參加。實驗完成后被試可獲得一份禮物。

（二）實驗儀器

瑞典公司生產的Smarteye5.4眼動儀。測量原理：角膜反射，采樣頻率60/120H。眼動儀耦合到分辨率為128Ox1024像素的17寸顯示器，作相應調整，保證呈現圖像尺寸準確。顯示器的亮度與對比度均調節到較為舒適的水平，色溫 58000°K。顯示器前85cm處放置舒適穩固的高背皮椅，被試坐姿的觀視距離為70cm左右。

（三）實驗設計與實驗材料

本個案選取廈門大學網絡課程系統首頁，將頁面各個板塊重新設計后進行組合，由50名在校本科生就設計后的系統首頁以五點量表進行評價，1分為頁面設計最差，5分為頁面設計最優。然后從中選取主觀評分最高的兩個系統首頁，讓其通過目標搜索任務進行視線跟蹤，從中篩選出最合理的頁面設置。

筆者將廈門大學網絡課程首頁的六個板塊分成四個AOI區域（the area of interest），通過被試者的視線規律從中發現總結出頁面設計規律。其中個人信息為AOI（1），我的課程為AOI（2），我的問題為AOI（3），最新公告為AOI（4），下圖為兩個主觀評分最高的首頁面，頁面一為圖1，頁面二為圖2。

圖1

圖2

（四）實驗過程

為了保證實驗的信度，整個實驗過程分為練習和正式實驗兩個階段。

練習過程：練習開始前對被試者進行眼校準，校準后告訴被試者身體要保持目前的姿勢。向被試說明這種方式閱讀下應注意的內容，然后呈現指導語：“請以正常的速度瀏覽網頁。理解內容后按空格鍵結束閱讀。閱讀過程中盡量保持頭部不動。清楚了嗎?清楚后請按空格鍵開始”。提供給被試者一張網頁進行練習。經過練習被試者熟悉后，進入正式實驗。

正式實驗過程：① 被試者按照練習過程中的注意點進行調整。② 呈現指導語并告訴被試者將要依次完成一次瀏覽和三個任務。③ 被試者清楚要求后自己按鍵開始測試。④ 找到答案后按空格鍵結束，主試者記錄被試者眼動信息。

任務：1.在所給的網絡課程頁面，依據平時的瀏覽習慣，了解首頁的內容。按空格鍵實驗結束。

2.分別完成以下三個任務。

（1）找出課程金融工程的學習入口；

（2）找出“畢業申請”圖表并點擊；

（3）查看課程論壇。

三、實驗分析

（一）瀏覽頁面進行分析

設置此項任務主要是分析被試者進行頁面瀏覽時的眼動順序，分析出一般規律，并根據規律設計頁面，從而有效地避免“米達斯接觸”。同時，也是讓被試者了解并熟悉首頁面的布局，為下一步實驗做準備。

從兩者的3D圖可以看出，視線在每個興趣區所占的比例是：AOI（2） ＞ AOI（1） ＞ AOI（4） ＞AOI（3）。說明不管頁面怎樣設計，被試者重點關心的是”我的課程”版塊。頁面二的調整使被試者投入更多的精力放到”我的課程”版塊，如圖4。由此看來，當學習者是初次學習時，頁面一可以更好的幫助其了解頁面的布置，當學習者已經熟知整個頁面布局時，可以轉而應用頁面二的布置。

圖3

（二）任務驅動數據分析

1.找出課程金融工程的學習入口

這個任務的設計是為了觀察哪種設計可以更快的引導學習者找到學習的圖標。頁面一與頁面二完成任務的實驗數據整理如下。

表1 頁面一與頁面二完成任務1的參數表

從參數表中可以看出，兩個頁面中被試者都可以成功的完成任務，視線軌跡在目標AOI中出現的比例是100%，說明兩者都很好地避免了“米達斯接觸”，課程學習的圖標放置很顯著。然而在兩者的比較中發現，頁面二中視線首次進入目標AOI所用的時間比較短，可以很快地進入搜索狀態。在目標AOI中頁面二的注視點數相對較少，可以很容易地找到圖標，不需要進行過多繁瑣的思考。但從完成任務的時間來看，頁面一卻略勝一籌。筆者分析，在對頁面不是很熟悉的情況下，頁面一雖然在加工的過程中有所繁瑣，但所用時間比較少，有利于初學者。在學習者使用一段時間后，頁面二將是更適合的頁面。

頁面一與頁面二的熱點圖如下：

圖5

圖6

從熱點圖可以發現，頁面二形成了兩個比較大的熱點區域，而在頁面一中則只有一個。這是對頁面不熟悉，在一進頁面后進行思考，視線停滯不前。頁面一因為個人信息在左邊，而網絡學習中人們的視線也是遵循從左到右，從上到下原則，有效地避免了視線混亂。對于初學者有指導意義。

2.找出“畢業申請”圖表并點擊

這個任務的設計是為了觀察首頁面的“個人信息”的呈現位置是否合理，是否能直接的找到所需要的服務。

表2 頁面一與頁面二完成任務2的參數表

從參數表中可以看出，被試者在成功完成任務2的同時，頁面一的目標AOI中平均注視次數百分比為86.80%，遠遠高于頁面二，說明頁面一在避免“米達斯接觸”中有一定的優勢。頁面一在首次進入目標AOI注視點的平均時間也明顯少于頁面二，說明在實驗的前階段，頁面一版塊的設計更有利于學習者進入學習狀態。然而在筆者繼續進行分析時，結果有點出乎意料。頁面一的目標AOI中平均注視點數竟然比頁面二高出四倍，頁面一的完成任務平均時間比頁面二的要長。這讓所有研究人員倍感吃驚。后經筆者及研究人員分析，雖然頁面一可以有效地避免“米達斯接觸”，這也得益于視線瀏覽規律，但頁面二也占有一定的優勢。因為當學習者熟悉首頁面后，每次登陸學習頁面的目的是很明確的，大部分時間是用來學習的，對于個人信息的關注只是小部分和短時間，把個人信息版塊放到最右邊可以有效地避免“米達斯接觸”。

頁面一與頁面二的熱點圖如下：

圖7

圖8

頁面一的熱點區較為集中，但其涉及3個AOI,雖然頁面二的熱點區比較分散，但其涉及2個AOI，且在目標AOI中可以很快地找到目標。

3.查看課程論壇

這個任務的設計是為了了解頁面上部的導航是否清晰，使學習者可以方便的使用。

表3 頁面一與頁面二完成任務2的參數表

從數據分析可以看出，頁面二可以有效地避免“米達斯接觸”，涉及版塊只有兩個，然而頁面一的視線在四個版塊中都有所涉及。與上個任務的結果類似，頁面一雖然首次進入目標AOI注視點的時間比頁面二少得多，但其在目標AOI中的注視點數和完成任務的時間卻比頁面二多得多，說明頁面一可以很快地進入目標AOI，卻在目標AOI中迷失方向，然而頁面二只要找到目標AOI就可以在最短的時間找到目標，只要學習者對頁面二多加熟悉，學習效果必定高于頁面二。

頁面一與頁面二的立體圖如下：

圖9

圖10

此立體圖可以很形象的對比出兩者的區別，圖中突出的部分代表視線經過的地方，突出的越高，說明視線停留的時間越長。從圖9可以看出，頁面一中的山谷較分散，目標不明確。從圖10可以看出，頁面二中的山谷較集中，目標較明確。

4.結論

從頁面瀏覽到三個任務的眼動軌跡和各種軌跡圖可以發現：頁面一在首次瀏覽時，各種指標都優于頁面二，在任務的完成過程中可以有效地避免“米達斯接觸”，但其導航的位置卻不是很明確，容易導致學習者迷航。而對于頁面二，雖然在瀏覽和任務前期的各項指標沒有頁面一出色，但其在任務后期和任務完成的時間上都略勝一籌。

由此可見，頁面一適合初次接觸網絡課程的學習者，可以使學習者對整體版塊都可以盡快地進行了解，但其導航部分需要做進一步的改進；頁面二適合對于網絡課程界面有一定熟悉程度的學習者，這樣可以避免頁面二不利于學習者快速進入學習狀態的缺陷。如果條件成熟，可對網絡課程首頁面進行改版，對于初學者使用頁面一，經過一段時間學習后，可以使用頁面二進行學習。

四、研究啟示

在網絡課程學習中，學習者通過學習首頁了解學習內容和個人學習進度，設計一個完善的首頁面是保證學習有效進行的前提。比較完善的評價體系，如QUIS(用戶界面滿意度調查問卷)、PUEU(易用性及有用性調查問卷)，大都是從設計者的角度來審視，主觀色彩比較濃重。然而將眼動追蹤技術應用到界面評估中就避免了這一缺陷，其可以直接反應學習者的眼動數據，從而分析發現心理變化特征；其可以更加自然的收集到數據，避免了因為主觀因素亂加評定；其可以更加高效，有效地縮短了測試時間。本研究對于網絡課程首頁設計和課程設計有啟示作用：

（一）以學習者為主體設計網絡課程頁面

眼動人機交互可以從學習者的角度出發，真正做到以學習者為主體，設計人員以學習者為中心，設計符合學習者需求的頁面。學習者在不同的進度中會有不同的頁面需求，這從傳統的界面評價體系是了解不到的。應用先進的眼動人機交互可以從數據中分析，進而得出科學的結論

（二）簡潔的頁面更容易引導學習者

學習網站的導航要很明顯，這樣可以使學習者盡快進入狀態。劃分板塊和設置子標題可以讓學習者節約時間，快速的找到學習內容。必要時可以使用小圖標進行引導。將學習者必須閱讀或重要的內容放到優勢區域，其尺寸可以在有限的范圍內擴大。

（三）增加有效“米達斯接觸”，避免無效接觸

讓學習者的視線最快最多的關注所需用的信息是傳統的評價體系所不能評估出來的。如何提高有效的“米達斯接觸”是眼動人機交互根據圖表數據科學的分析得出的結論。對于無效的接觸可以修改頁面的布置，從而提高學習者的學習效率。

五、研究不足與展望

本研究利用科學的手段對網頁優化做了一系列的研究，但也存在一些不足。本實驗選取了一個網絡課程的首頁面進行研究，對于其他各高校相類似的頁面有一定的普適性，對于差異性較大的首頁面要繼續進行研究。另外，由于被試者是在實驗的環境下進行學習，或多或少對實驗結果有些影響。為了盡量消除這種影響，正式實驗開始前準備了練習階段；實驗結束后對被試者進行訪談以了解其心理活動。

學習網頁的設計不能單單從技術和美觀上來考慮，也要從學習者的角度出發。本文利用眼動儀對學習者的心理活動進行了科學化的分析，以期用科學的手段發現規律。通過本研究筆者希望可以有更多的研究者利用科學化的手段分析學習者的需求。

[1]Jacob R.J.K.,1991.The use of eye movements in human-computer interaction techniques:what you look at is what you get.ACM transaction on information systems,9:152-169

[2]王葵，翁旭初.句子學習過程中的眼動特征[J].人類工效學，2006，（1）.

[3]閻國利.眼動分析法在心理學研究中的應用[M].天津：天津教育出版社，2004.

[4]趙新燦，左洪福，任勇軍.眼動儀與實現跟蹤技術綜述[J].計算機工程與應用，2006，（12）：118～120

[5]馮志成.眼動人機交互[M].蘇州：蘇州大學出版社，2010.

[6]白學軍.眼動研究在中國[M].天津：天津教育出版社，2008.

[7]李旺先，張電扇，王媛媛，王菲.閱讀中的眼動方法述評[J].吉林省教育學院學報，2011，（1）：129～131.

[8]劉名卓.視線跟蹤技術在網絡教育資源界面設計中的應用個案及啟示[J].中國電化教育，2011，（4）：71～76.

[9]胡風培，韓建立，葛列眾.眼部跟蹤和可用性測試研究綜述[J].人類工效學，2005，11（2）：52-54.

[10]程利，楊治良.大學生閱讀插圖文章的眼動研究[J].心理科學,2006，29（3）：593-596.

[11]馮成志，沈模衛.視線跟蹤技術及其在人機交互中的應用[J].浙江大學學報，2002，29（2）：225-232.

[12]燕保珠.眼動研究在網站可用性測試中的應用[D].北京郵電大學，碩士學位論文，2011.

[13]李樂山.人機界面設計[M].北京：科學出版社，2004.

[14]張光強，沈模衛，陶嶸.可用性測試中的視線追蹤技術[J].人類工效學，2001，7（4）：9-13.

[15]閆國利，白學軍，陳向陽.閱讀過程的眼動理論綜述[J].心理與行為研究，2003，1（2）：156-160.

[16]沈模衛，張光強，符德江，陶嶸.閱讀過程眼動控制理論模型：E-Z Reader[J].心理科學，2002，25（2）：129-133.

[17]沈德立.學生漢語閱讀過程的眼動研究[M].北京：教育科學出版社，2001.

An Experimental Study of the Use of Eye Tracker in Website Optimization

An Lu and Li Ziyun

With rapid development of computer technology and increasing access to the Internet,online courses are getting more and more popular.The homepage design of online courses is therefore worthy of examination.The homepage screen is often designed and evaluated from its designer’s perspective,hence reflecting the designer’s preferences which may not be in line with users’expectations.Eye tracking technology can minimize designers’subjectivity by collecting data about learners’eye movements in browsing the homepage and hence providing evidence to support user-friendly Web design.This article reports on an experiment of 20 university students,using Smarteye 5.4 to study the subjects’eye movementsin hopesof formulating principlesfor scientific homepage design.Findingsfrom the experiment show that clear navigation,proper layout with the use of subtitles and icons,and presentation of course highlights in the most eye-catching position can help learners find what they need more quickly and effectively.

eye tracker;online course;homepage design

G423

A

1009—458x（2012）05—0087—05

教育部人文社會科學研究青年基金項目“大學生數字化閱讀的眼動研究”（編號：12YJC880050）。

2011－12－30

安璐；李子運。江蘇師范大學信息傳播學院（221009）。

責任編輯 平 果