網絡課程的網頁布局與導航樣式對學習影響的眼動實驗研究

賴麗花，王咸偉

（1.深圳職業技術學院 動畫學院，廣東 深圳 518055；2.華南師范大學 教育信息技術學院，廣東 廣州510631）

網絡課程的網頁布局與導航樣式對學習影響的眼動實驗研究

賴麗花1，王咸偉2

（1.深圳職業技術學院 動畫學院，廣東 深圳 518055；2.華南師范大學 教育信息技術學院，廣東 廣州510631）

Web網頁是網絡課程重要的人機界面，其布局和設計直接影響學習者的學習效果．本文從眼動心理學角度，利用眼動實驗研究學習者利用網絡課程學習的視覺搜索行為，測量學習者在3種常見的網頁布局及其導航樣式下學習時的眼動數據，探討網頁布局對網絡學習的影響．通過記錄注視次數、注視持續時間等6項眼動指標，并結合態度測量，試圖揭示學習者學習時的眼動心理生理基本特征，以期找出適宜的網頁布局形式和導航樣式，為網絡課程的設計和開發提出有效建議．實驗研究表明：（1）T字型布局有利于學習者進行視覺搜索；（2）國字型布局更有利于學習者對知識的認知加工；（3）學習者進行視覺搜索時興趣區集中在導航區，進行知識學習時興趣區集中在主體內容區；（4）學習者在國字型布局下能取得更高的正確率．

網絡課程；網頁布局；導航樣式；視覺搜索；眼動實驗；EyeLink II

隨著網絡和多媒體技術的高速發展及廣泛應用，網絡課程已經發展成為網絡學習和遠程教育的重要數字化學習資源．雖然目前有一些精品網絡課程，但大部分網絡課程離教育部的網絡課程認證標準還有一定的差距[1]．在網絡教學中，由于師生在時空上的隔離，學習者主要通過網絡課程支撐平臺來學習．網絡課程資源潛的豐富性一方面給學習者提供了較大的選擇余地，同時也要求學習者能夠快速準確地捕捉課程的基本信息，才能做出正確的選擇．有關研究表明，網頁布局在一定條件下可以提高視覺搜索績效[2]，適宜的網頁布局形式有利于促進網絡課程的學習．因此，加強對網絡課程界面設計和學習效果的研究有助于促進我國網絡課程以及遠程教育實踐的發展．

當前我國教育技術領域對網絡課程的研究大都偏重于文獻和理論研究，缺乏深入的實證研究．大多數研究采用定性研究，使用主觀測量等方法研究學習者的網絡學習行為；而定量的研究更傾向于使用問卷和量表測量等．近年來，網絡課程中的網頁設計理念開始從“以機器為本”轉向了“以人為本”，強調機器能夠適應人的心理和生理特征．與主觀測量等方法相比，直接的生理測量技術——眼動技術能實時記錄用戶上網時的眼動數據，例如注視次數、注視持續時間等，這些數據不僅能直接、動態和連續地反映學習者的網上行為，而且能揭示其背后的心理加工過程和規律．目前，眼動技術已逐漸應用到人機交互中界面評價、網頁設計等研究領域．

以往對網絡課程的眼動研究大多從基本元素構成、單一元素著手，研究網頁的字體、顏色、文字排版樣式、圖片位置等因素對視覺搜索的影響．而探索網絡課程整體布局和導航樣式對學習者網絡學習影響的研究則較少，已有的一些研究也很少將信息內容的理解納入布局效應的考察范圍．

目前網絡課程的布局形式有T字型、口字型、對稱型、國字型、正文標題型[3]、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型[4]等多種類型，通過對我國大多數精品課程網站的布局形式和導航樣式進行分析，本著常用和實用等原則，我們篩選了3種常見布局：T字型、國字型和正文標題型作為樣本進行研究，試圖從網頁整體布局和導航樣式出發，利用 EyeLink II型眼動儀測量學習者在這3種常見的網頁布局及其相應的導航樣式下進行學習時的眼動數據，研究不同導航樣式對視覺搜索的影響，并考察不同網頁布局形式對學習效果的影響．

1 實驗研究

本實驗為單因素完全隨機實驗，實驗分為 3個階段進行：

第一階段：選擇被試，了解學習者的視力、計算機操作能力以及網絡課程的使用情況等，然后挑選符合要求的學生作為被試進行實驗．

第二階段：被試進行本研究的眼動實驗，分為資源搜索和內容學習2部分進行．第一部分要求學習者針對網頁不同的導航樣式，搜索所需的資源；第二部分要求學習者針對3種不同的網頁布局學習相關課程內容，并回答問題．

第三階段：被試完成眼動實驗后，填寫一份態度測量問卷，測量被試對學習材料和3種布局的評價態度．

1.1 研究目標

1）探討T字型、國字型和正文標題型3種不同網頁布局對應的導航樣式對學習者視覺搜索的影響．

2）探討T字型、國字型和正文標題型3種不同網頁布局對學習者學習效果的影響．

3）結合問卷調查，考察學習者對本實驗的態度以及對網絡課程3種布局的喜好和評價，為網絡課程的網頁布局設計，提供參考建議．

1.2 實驗對象

本研究選擇華南師范大學教育技術學、攝影、傳播學3個專業的28名大學生作為被試進行實驗，其中，14名男生，14名女生，男女比例各占50%，年齡為18～25歲（平均值x=23.0，標準差s=1.3），母語均為漢語，所有被試無行為缺陷，右利手．所有被試來自同一學院，具有相似的學習背景，對學習內容不了解或不知情．同時要求被試均能熟練操作計算機，并具有網絡課程學習的經驗，無類似的眼動實驗經驗，均沒有智力異常或閱讀障礙，所有被試裸眼或矯正視力達到5.1或以上，色覺正常，沒有斜視或散光問題．

1.3 變量的操作性定義

1.3.1 自變量

本實驗的自變量有2個：網絡課程頁面的布局形式及其對應的導航樣式．網頁布局形式選擇的是網絡課程中最常用采用的3種布局形式．其中，T字型布局是指頁面最上方的頁眉區是網站標識以及橫幅廣告條，頁眉下方是內容主體區，左邊是導航菜單，右邊顯示主體內容，其造型在整體上類似于字母“T”的布局．T字型布局是一種常見的網頁布局形式，整體布局條理清晰，主次分明．國字型布局也稱為同字型布局，頁面最上方是網站標識以及橫幅廣告條，接下來就是網頁的主要內容區域，左右兩邊分列導航，中間是主要內容區，與左右兩邊導航一起羅列到底，而頁面最下方是網站的一些基本信息、聯系方式以及版權聲明等．國字型布局常見于一些信息量大的網站．正文標題型布局是指頁面最上面是標題或類似元素，下面就是正文內容區域．正文標題型的布局結構相對簡單，常見于文章頁面、注冊頁面和說明頁面等．這3種布局對應的導航樣式樣例分別如圖1～3所示．

1.3.2 因變量

1）注視次數（Number of Fixation）．人們在閱讀的過程中，眼球的運動不是連續的，而是跳躍式的．2次跳躍之間眼球存在一個相對靜止的狀態，稱為注視（Fixation）．注視位置的多少，即被試閱讀時注視點的數量，稱為注視的次數，它反映被試的閱讀熟練程度、閱讀的策略以及材料的難易程度．在保證快速找到所需要資源的基礎上，本研究認為注視次數越少越好；在閱讀材料時，在保持較高正確率的基礎上，注視次數越少越好．

2）注視持續時間（Duration）．注視持續時間也稱為持續時間，是指對整張圖片的所有注視點的持續時間的總和，與被試對信息的提取和編碼有關，注視持續時間的長短反映被試對材料的加工程度．就一個被試而言，持續時間越長，則對信息加工越深，而對不同被試而言，持續時間越長，則加工速度越慢．

3）平均注視時間（Average Fixation Duration）．平均注視時間也稱為平均注視持續時間，是指一個注視點的平均注視停留時間，平均注視時間的長短反映被試對材料加工的程度．

4）眼跳次數（Number of Saccade）．人們在閱讀的過程中，眼球的運動是跳躍式的，當對注視的內容加工結束時，會出現眼跳，通常情況下，2次注視之間會出現一次眼跳．在保證快速找到所需要資源以及保證較高正確率的基礎上，本研究認為眼跳次數越少越好．

5）平均眼跳幅度（Average Saccade Amplitude）．當學習者對注視的內容加工結束后，會出現眼跳．在本研究中平均眼跳幅度是反映學習者對學習材料認知加工的重要指標．

6）興趣區（Region of Interest，ROI）．眼動分析軟件可以根據注視點移動軌跡、不同位置的注視時間、注視點停留的區域分布來勾畫出興趣區．興趣區域可以是靜態的也可以是動態的，各種幾何形狀都可以用于興趣區外觀匹配．興趣區域可以與視點變化過程重現視圖或者熱區圖疊加顯示[5]．本研究主要通過注視點的分布情況來研究興趣區．

7）正確數．正確數是指被試學習完相關學習材料后，回答問題的正確數量．本研究一共有T字型、國字型和正文標題型3種網頁布局，每種布局的學習材料對應3個問題，共有9個問題，對被試進行保持測驗和遷移測驗，問題主要為識記類，以保持測驗為主，均以單選題形式出現．一般來說，回答問題正確數越高，說明被試對閱讀材料的內容理解程度越深．在本研究中，正確數是衡量學習者學習成績的重要指標．

8）學習態度．本研究編制了一份態度問卷，測量被試對網絡課程學習以及眼動實驗過程的態度，學習態度的測量是在被試完成眼動實驗之后進行的，測量學生對實驗材料難易程度的評價以及對布局的喜愛態度．

圖1 T字型導航圖

圖2 國字型導航圖

圖3 正文標題型導航圖

1.4 實驗材料的選擇與確定

本研究選取了華南師范大學3門不同布局的精品課程網站作為實驗材料，分別是《教育心理學》（網址：http://202.116.45.198/pe/web1/ps/Console. htm?part=courseinfo）、《中國古代史》（網址：http://jpkc.scnu.edu.cn/zggds/wlkc/index.htm）、《植物生理學》（網址：http://sky.scnu.edu.cn/jpkc /zwslx/kcjj.htm），它們分別采用了 3種網頁布局形式：T字型、國字型和正文標題型，其中《教育心理學》和《植物生理學》是國家級精品課程，《中國古代史》是廣東省省級精品課程．而學習材料選擇的是《教育心理學》①張大均．教育心理學[M]．人民教育出版社，2005．的內容，針對每種布局的學習材料分別設計了針對于“學習策略及其培養”、“主要的心理發展理論”和“多媒體計算機教學的特點”的問題，一共有9個問題，對學習者進行保持和遷移測驗，以保持測驗為主．

1.5 實驗環境和實驗儀器

本實驗在華南師范大學教育科學學院的眼動儀實驗II室進行，該實驗室是華南師范大學的重點實驗室，經過隔光隔音設計并通過了嚴格的檢測，被試進行實驗時與外界有兩層物理隔離，有效保證了實驗可以在安靜、良好、無干擾的環境中進行．實驗采用加拿大SR Research Ltd公司生產的EyeLink II 型眼動儀，該儀器是一款頭戴式雙眼跟蹤設備，程序版本為EyeLink.204，系統所使用的操作系統為 Windowns XP，實驗程序用E-prime1.0進行編寫和編譯．屏幕為17寸液晶，分辨率為1024×768，實驗時，被試眼睛與顯示器中心齊平，被試與屏幕的距離約為70 cm．實驗使用的系統參數見表1．

1.6 實驗過程

實驗過程包括如下幾個環節：

1）選擇被試，挑選符合要求的被試，進行單因素完全隨機眼動實驗．

2）被試提前五分鐘進入眼動實驗室，熟悉整個實驗室的環境．

3）主試向被試介紹本實驗的目的和意義，以及提出合作的要求．

4）進行實驗．

（1）被試坐在顯示器前的椅子上，與屏幕的距離約為70cm．

（2）被試明白了實驗的要求以后，為其安置頭盔式眼動儀，并設置好頭部相機和眼部相機，視角大約28×32度．

表1 EyeLink II系統的產品規格①

① EyeLink II系統的產品規格[DB/OL]．http://www.souvr.com/Shop/200806/244.hTml，2012-03-10．

（3）對被試進注視點校準、確認和漂移修正．

（4）隨后開始宣讀實驗指導語．

（5）在被試計算機屏幕上呈現實驗材料，按照既定程序完成與眼動儀的連接，眼動儀會根據被試的按鍵自動開始或停止記錄眼動數據．

（6）實驗過程中主試記錄被試實驗問題答案．

（7）眼動實驗結束后發放態度問卷，對被試進行態度測量．

每一名被試重復上述步驟，直到全部被試完成實驗．在實驗過程中，要求被試盡量保持身體和頭部沒有大幅度的移動，被試在每一個刺激的呈現過程中，如果出現注視點漂移，均可以暫停來進行九點校準，待校準完畢后再接著實驗．如果被試因為頭部疲勞或者眼睛不舒適需要中斷實驗，主試將及時做好調整，以排除被試因為生理狀態對實驗引起的影響．整個實驗過程中只有一名主試、一名助手，以及一名被試在實驗室內，避免了因為實驗環境對被試產生影響．

2 實驗結果

本研究的數據處理主要有兩方面，首先使用The EyeLink Data Viewer眼動分析軟件對系統導出的EDF文件進行分析，將眼動數據導出生成Excel或JPG文件，然后再利用SPSS 17.0和MS Excel 2010對所有數據進行處理、統計分析，包括t檢驗和F檢驗．表2、表3為實驗第一、第二部分數據的平均值和標準差，其中M表示平均值，SD表示標準差．

2.1 不同導航樣式對持續時間、注視次數、眼跳次數的影響

表4給出了實驗第一部分各變量的方差分析的結果．

由表4可知，不同導航樣式對持續時間的影響，F=3.308，P=0.042<0.05；對注視次數的影響，F=3.571，P=0.033<0.05；對眼跳次數的影響，F=3.402，P=0.038<0.05，表明不同導航樣式對資源搜索的持續時間、注視次數、眼跳次數均有顯著差異．結合表2可以看出，學習者在T字型布局對應的導航樣式下進行資源的搜索，在持續時間、注視次數和眼跳次數上均為最少，其次是正文標題型布局，而國字型布局最多．在資源搜索的過程中，持續時間是指找到資源所花費的總時間，注視次數和眼跳次數反映的是被試的瀏覽習慣和瀏覽策略．在相同情況下，被試找到所需資源所花的時間越短、注視次數和眼跳次數越少，表明T字型布局的導航樣式更有利于資源搜索．

2.2 不同布局形式對平均注視時間、平均眼跳幅度、持續時間、注視次數、眼跳次數的影響

表5給出實驗第二部分各變量的方差分析的結果．

由表5可知，不同布局形式對平均注視時間的影響，F=1.522，P=0.223>0.05；對持續時間的影響，F=1.403，P=0.252>0.05；對注視次數的影響，F=1.286，P=0.282>0.05；對眼跳次數的影響，F=1.027，P=0.363>0.05，表明不同布局形式對學習者學習時的平均注視時間、持續時間、注視次數、眼跳次數均沒有顯著差異．在進行知識的學習過程中，平均注視時間與持續時間一樣能反映被試的加工程度，持續時間越長表明對材料的加工程度越深；注視次數和眼跳次數則反映被試對閱讀材料的理解情況以及感興趣程度，一定程度上也反映材料的難易程度；不同布局形式對學習者學習時的平均注視時間、持續時間、注視次數、眼跳次數均沒有顯著差異，一方面表明材料的難易程度相當，另一方面也表明被試對材料的加工程度、閱讀策略、瀏覽習慣以及感興趣程度并沒有多大差異．

不同布局形式對平均眼跳幅度的影響，F=10.196，P=0.000<0.05，表明不同布局形式對平均眼跳幅度的影響有顯著差異．平均眼跳幅度是對材料的認知加工廣度的重要指標，平均眼跳幅度越大，對材料的認知加工越深．結合表3可以看出，學習者在進行知識的學習過程中，國字型布局的眼跳幅度最大，該布局更有利于學習者對知識和內容的認知加工．

2.3 興趣區分析

興趣區可以根據注視點移動軌跡、注視點分布的區域進行勾畫，本研究主要通過注視點的分布情況來分析興趣區．在進行資源的搜索過程中，學習者主要關注的是網頁導航區，注視點、注視軌跡主要集中在導航區的按鈕或鏈接位置．T字型、國字型、正文標題型3種導航樣式的興趣區與其各自的形狀相似．圖4～6分別給出了被試在3種導航樣式下進行資源搜索時的注視點和興趣區圖．從圖4（見圖中的虛線矩形框）可以看出其興趣區的形狀與 T字型導航樣式形狀一致，呈現出“T”字形狀；從圖5中虛線框可以看出其興趣區的形狀與國字型導航樣式形狀一致，呈現出“門”字形狀；從圖 6中虛線框可以看出被試興趣區的形狀與正文標題型導航樣式形狀一致，呈現出“一”字形狀．3種導航樣式的興趣區主要與導航的位置有關，主要差異在于其導航本身位置的差異．

表2 實驗第一部分相關數據

表3 實驗第二部分相關數據

表4 實驗第一部分方差分析結果

表5 實驗第二部分的方差分析結果

圖4 T字型導航樣式的興趣區圖

學習者在進行知識的學習過程與資源搜索的過程不同，主要關注的是網頁主體內容區，注視點、注視軌跡主要集中在網頁顯示內容的區域，對導航區的注意力有所減少．圖7～9給出了被試在3種布局形式下進行學習時的注視點和興趣區圖．從圖 7（見圖中的虛線矩形框）可看出其興趣區主要在網頁右下方的內容區，在此區域范圍中注視點的分布均勻有序；圖8中虛線框可看出被試的興趣區主要在網頁中間的內容區，分布也較為密集；從圖9中虛線框可以發現被試的興趣區位于導航下方的內容區域，正文標題處注視點較為密集，說明被試會重點關注每個段落的標題．通過上述分析，發現學習者在進行課程學習時，興趣區均集中在頁面內容顯示區域中．

2.4 回答正確數分析

被試每學習完一種布局對應的學習材料之后，將回答3個問題，問題是針對材料設計的，主要為保持測驗．通過統計和分析，T字型布局的平均正確率為79.7619%，國字型為86.9048%，正文標題型為67.8571%，國字型布局的平均正確率是3種布局中最高的，說明學習者在國字型布局下能取得較好成績．

2.5 學習態度問卷分析

被試完成所有眼動實驗后，將填寫一份學習態度問卷，測量其對本實驗材料的評價和布局形式的態度．通過問卷調查發現28名被試中82%學生認為本實驗的問題難易程度合適，14%學生認為難度小，只有4%學生認為難度大．對不同布局對應的導航樣式，被試中54%認為T字型導航樣式更有利于快速找到所需資源，有28%認為國字型導航樣式有利，有18%認為正文標題型有利，如圖10所示．調查發現，被試在進行網絡課程學習時，對T字型和國字型布局均有較高評價，喜歡T字型和國字型布局的學生各有39.3%，如圖11所示．

圖5 國字型導航樣式的興趣區圖

圖6 正文標題型導航樣式的興趣區圖

圖7 T字型布局的興趣區圖

圖8 國字型布局的興趣區圖

圖9 正文標題型布局的興趣區圖

圖10 被試對3種導航樣式的評價圖

圖11 被試對3種布局的喜好

3 結論與建議

3.1 結論

1）學習者在進行資源的搜索時，網頁布局及其對應的導航樣式對資源搜索的持續時間、注視次數和眼跳次數有顯著影響．其中，T字型布局的持續時間、注視次數和眼跳次數均為最少；其次是正文標題型布局，而國字型布局最多．T字型導航樣式更有利于學習者進行視覺搜索．

2）學習者在進行知識的學習過程中，不同布局形式對學習者的眼動數據的影響表現出不同差異情況．T字型布局、國字型布局和正文標題型布局的平均注視時間、持續時間、注視次數和眼跳次數均沒有顯著差異，但3種布局的平均眼跳幅度存在顯著差異，國字型布局更有利于學習者對知識和內容的認知加工．

3）當學習者進行視覺搜索時，興趣區集中在網頁的導航區，而當學習者進行知識學習時，興趣區集中在網頁的主體內容區．

4）學習者在國字型布局下能夠取得更高的正確率，大部分被試更喜歡T字型和國字型這2種布局．

3.2 建議

1）在網絡課程學習的過程中，如果要提高學習者的資源搜索績效，可采用T字型的導航樣式，T字型導航樣式比國字型和正文標題型布局對應的導航樣式的資源搜索績效更高．

2）要獲得較好的網絡課程學習效果，網頁設計者可采用國字型布局形式來安排網頁元素，因為學習者在國字型布局形式下能獲得更高準確率，且學習者更喜歡T字型和國字型布局形式．

3）設計者在進行網絡課程布局設計時，主頁可采取 T字型布局便于學習者搜索欄目和資源，而內頁可采用國字型布局便于學習者對知識內容進行深加工．

本研究只針對3種常用的布局形式：T字型、國字型和正文標題布局及其對應的 3種導航樣式進行了眼動實驗，而其它的一些網頁布局類型如對稱型、海報型、拐角型、框架型、Flash型、變化型等對網絡課程學習效果的影響，以及其它的導航樣式如隱喻式導航、沉浸式導航等交互式導航對學習者資源搜索的影響，還有待于進一步研究．

[1] 謝幼如，劉鐵英，高瑞利，等．網絡課程的內容分析與評價研究[J]．電話教育研究，2003（11）：45-49．

[2] 鄧勇．淺淡網頁設計的布局及原理[J]．渝西學院學報（自然科學版），2004（3）：32-34．

[3] 王華英．淺談網頁布局[J]．電子信息，2010（21）：297．

[4] 洪亞玲．淺談網頁的布局[J]．電腦知識與技術（學術交流），2007（7）：91，102．

[5] iViewX眼動儀[ED/OL]．http://www.verTinfo.com /verTnew/showpro.asp?cpid=7804，2012-04-02．

Impact of Webpage Layout and Navigation Style of Network Courses on Learning: An Eye Movement Experiment

LAI Lihua1, WANG Xianwei2

（1.School of Animation, Shenzhen Polytechnic, Shenzhen, Guangdong 518055; 2.College of Educational Information Technology, South China Normal University, Guangzhou, Guangdong 510631, China）

The webpage of a network course is an important human-computer interface. Its layout and design has a direct impact on students’ learning effect. Based on the eye movement psychology, this research conducts an eye movement experiment to study the learners’ visual behavior when they are learning from a network course, and measure the student’s eye movement data in three different webpage layouts and navigation styles, and examine the influences of webpage layout on network learning. Six eye movement data are examined including the amount of fixation and duration. Based on an attitude questionnaire, the physiological and psychological characteristics of the learners are studied to find a more appropriate webpage layout and navigation style, and offer some advice for network curriculum design and development. The results show that: (1) The T-shaped layout is conducive to learners in visual search; (2) The Guo-shaped layout is more conducive to learners' cognitive processing of knowledge; (3) When the learner is doing visual search, the interest region is in the navigation area, when the learner moves on to the content, the interest region is in the content area; (4) The learner can achieve higher accuracy rate in the Guo-shaped layout.

network course; webpage layout; navigation style; visual search; eye tracking experiment; eyeLink II

TP393；G43

A

1672-0318（2014）05-0037-08

10.13899/j.cnki.szptxb.2014·05, 008

2014-06-06

賴麗花（1986-），廣東人，碩士，研究方向為視覺心理、平面設計、實訓平臺建設等．