剛春明

基于視覺認知特征的網(wǎng)課界面布局設計研究

剛春明

（運城學院，山西 運城 044000）

探究網(wǎng)絡課程教育的教學效果。以大學思政網(wǎng)課為研究對象，結合個體視覺認知特征歸納出三種典型網(wǎng)課界面布局，通過實驗采集被試者在不同網(wǎng)課界面布局中的眼動數(shù)據(jù)、績效數(shù)據(jù)及問卷數(shù)據(jù)。網(wǎng)課界面布局中文字的左右分布更能吸引被試者的視覺注意力，從而產(chǎn)生更好的學習效果；網(wǎng)課界面布局中教師人像因素會對被試者的凝視時間、凝視次數(shù)等眼動數(shù)據(jù)產(chǎn)生顯著影響（<0.05）；教師的眼神與肢體動作會有效吸引被試者的注意力，形成更多的凝視時長與凝視次數(shù)，從而達到更好的學習效果；問卷數(shù)據(jù)也進一步表明，被試者對有教師存在的網(wǎng)課界面布局評價更高。該設計為網(wǎng)課教育教學的發(fā)展提供了科學的理論參考。

界面布局；視覺認知特征；眼動數(shù)據(jù)；思政網(wǎng)課

在新冠疫情持續(xù)的這幾年內(nèi)，各類線上教育課程層出不窮，清華大學研究生工作部主任劉鑫鑫[1]在《人民論壇》中表示：要充分總結線上教育的成功經(jīng)驗，發(fā)展和鞏固線上教育“新常態(tài)”。可見，線上教育將會是教育行業(yè)未來發(fā)展的重要力量，而線上教育的效果如何，怎么進行量化分析，將會是線上教育未來發(fā)展的關鍵問題。

對在線教育課程的研究，國內(nèi)外學者主要集中于在線平臺系統(tǒng)搭建[2]、個體能力對在線學習的影響[3]、在線虛擬現(xiàn)實課程[4]、在線課程的發(fā)展路徑等[5]。也有少部分學者對在線課程的效果進行了研究，如張文麗等[6]基于學習者的視角，采用量表問卷的方法對在線外語課程質(zhì)量進行了評價，結果發(fā)現(xiàn)學習者更傾向于利用自身感知到的學習效果對課程進行評價。張詠鷗等[7]通過問卷調(diào)查的方式對某高校的在線課程進行了研究，發(fā)現(xiàn)作業(yè)與考試依然是影響學生對課程評價的主要因素。King等[8]的研究表明，建立在線教學團隊可以從計劃、實施、行動及改進一整套流程來改進在線教學質(zhì)量。Han等[9]通過對私人在線課程的設計，采用授課前的詳細講解與制作預覽視頻等方式來提高學生對課程內(nèi)容的感興趣程度。

在線教育課程也稱為網(wǎng)課，用戶進行網(wǎng)課學習的過程屬于一個典型的人機交互過程。在開展網(wǎng)課教育時，用戶需要學習到的內(nèi)容大都來自界面顯示，因此探究用戶對界面信息的加工過程，是研究線上教育效果最直接的方法。關于人機交互的研究有很多，本研究結合線上教育的人機交互特點對相關文獻進行了總結。Doris等[10]在對222名教師與教學設計人員的研究中發(fā)現(xiàn)，網(wǎng)絡視頻課程中的設計元素會顯著影響學生的表現(xiàn)與參與度，當網(wǎng)絡課程中存在較多與學生進行互動交流的內(nèi)容時，該課程的評分與學生的滿意度較高。Penny等[11]指出網(wǎng)絡課程的結構與界面設計因素對學習者和教育者都存在顯著影響，界面的更新或改進會對成人繼續(xù)教育課程起到優(yōu)化作用。Emily[12]對在線課程的教學、設計、開發(fā)、交付和維護等環(huán)節(jié)進行了研究，結果表明：課程中包容性的材料、圖像和其他資源，可以滿足不同學習者的學習需求，同時用戶界面體驗也是提升課程質(zhì)量的重要因素。個體視覺認識特征表明，個體的注意力會自動地被吸引到視頻界面中的人臉區(qū)域[13-14]，類似人類面孔也同樣會吸引個體的注意力，例如動畫教學中的仿人面孔[15-16]。

目前，在線教育行業(yè)的網(wǎng)絡視頻課程中主要分為有教師講解和無教師講解兩類，學習者對網(wǎng)絡視頻課程內(nèi)容的注意程度將會直接影響教學效果，研究表明教師的存在可能會導致一種“注意力分散效應”[17]，由于學習者必須將他們的注意力分散在教師和演示之間，這可能會阻礙學習，并可能導致更高水平的認知負荷[18]。然而也有研究認為在網(wǎng)絡視頻課程中，教師的存在可能會激發(fā)學習者更強的社會反應，導致更深層次的認知過程和更好的學習效果[19]。凝視是指個體眼睛對注視區(qū)域的停留，它是反映視覺認知特征的重要眼動指標[20]，Van等[21]通過分析被試者對視頻畫面中的眼動指標數(shù)據(jù)，來評估個體對視頻中任務信息掌握情況，結果發(fā)現(xiàn)個體對凝視較多的區(qū)域記憶效果更好。利用眼動追蹤技術來評估個體對界面信息認知及注意力分配情況的研究有很多，除了界面顯示內(nèi)容，界面布局、顏色、字體大小等都會影響個體的視覺認知[22-24]，而網(wǎng)課中有無教師講解、文字布局等因素對教學效果的影響卻鮮有研究。因此，本研究結合個體視覺認知特征，歸納出了影響網(wǎng)課界面布局的因素，并設計了三種典型的網(wǎng)課界面。利用實驗研究的方法，通過眼動追蹤技術來獲取被試者進行網(wǎng)課教育時的視覺認知情況，以績效與問卷等主、客觀數(shù)據(jù)結合的方式，對網(wǎng)課界面布局進行評價，提升網(wǎng)課教育效果。

1 網(wǎng)課界面布局分析

根據(jù)教育技術標準委員會發(fā)布的《教育信息化技術標準網(wǎng)絡課程評價規(guī)范》，明確了網(wǎng)課界面設計是網(wǎng)絡教育質(zhì)量的重要部分。合理、科學、有效的網(wǎng)課界面布局設計可以幫助學習者更高效地接收、加工、處理學習信息，進而提高學習效能。

1.1 影響網(wǎng)課界面布局的因素

據(jù)數(shù)據(jù)統(tǒng)計，“中國高校慕課”在2022年的學習人數(shù)達到了9.79億人次[25]。因此，本研究通過中國高校慕課平臺來對某高校思政教育網(wǎng)絡課程的界面布局進行分析，初步篩選出了圖標大小、文字排布、教師人像、色彩4個視覺布局因素。

1.2 網(wǎng)課界面布局設計

在進行網(wǎng)課學習的過程中，系統(tǒng)會對顯示界面的圖標進行隱藏，從而減少學習者的視覺認知。因此，顯示界面中文字排布、教師人像及色彩的視覺布局因素將會是影響網(wǎng)課學習效果的主要因素。本研究選取某高校思政網(wǎng)課作為研究對象，由于思政主題的網(wǎng)課在背景色彩選擇中多以紅色為主，因此本研究對色彩統(tǒng)一化處理，只探究文字排布與教師人像兩種視覺布局因素對網(wǎng)課效果的影響，3種不同布局方式的網(wǎng)課界面如圖1所示。

圖1 網(wǎng)課界面布局方式

2 實驗研究

2.1 實驗設計

本次實驗采用2×2的變量設計來評估不同網(wǎng)課界面布局的效果，選取播放次數(shù)較高的一段視頻內(nèi)容進行分析，通過對網(wǎng)課進行剪輯與設計，實驗共分為3組，見表1。

表1 實驗分組信息

Tab.1 Experimental grouping information

所有被試者需要按實驗要求來完成相對應的課程，為了減少其他因素對被試者學習效果的影響，三組課程的受教內(nèi)容完全一致。每組被試者在完成實驗后需要進行10 min的問卷答題，本次實驗的問卷內(nèi)容全都來自實驗中的網(wǎng)課視頻，共設置10項問題，以此來評估被試者的學習效果，同時設有訪談環(huán)節(jié)來獲取被試者對實驗中網(wǎng)課視頻畫面的主觀感受。

2.2 設備與環(huán)境

研究采用Tobii Pro Fusion眼動儀來收集被試者眼動數(shù)據(jù)，該款眼動儀的優(yōu)點在于可以無接觸地對被試者眼動數(shù)據(jù)進行采集，不僅采樣率可達250 Hz，而且雙眼動追蹤傳感器和明暗瞳追蹤模式可以使眼動數(shù)據(jù)更加真實可靠。實驗前，將眼動儀固定在顯示器下方，所有被試者均需進行注視點校準，Tobii眼動儀配有Tobii Prolab實驗設計與分析軟件，可直接對采集到的數(shù)據(jù)進行分析。

為了盡可能模擬真實的海上航行情況，并去除其他因素對實驗的干擾，本次實驗在隔音房間中進行，室內(nèi)光線明亮，通風良好，溫度為15～20 ℃，實驗時顯示器的亮度均采用900 lx。

2.3 被試者選擇

通過招募在校大學生共36名（被試者），其中男女按1∶1的比例進行篩選，所有被試者的視力正常（或矯正后正常），無其他眼部疾病史，右利手且平均年齡為22歲。將所有被試者隨機分為3組，從而進行眼動實驗，每位參與實驗的被試者將會獲得一定的獎勵。

2.4 實驗過程

實驗前，對所有被試者的身體狀況進行評估，以保證實驗數(shù)據(jù)的有效性。引導被試者進入實驗室，就坐于屏幕前的可調(diào)節(jié)座椅上，要求被試者的眼睛與屏幕中心處于同一高度，所有被試者在實驗前自愿簽署知情同意書。主試詳細闡述本次實驗目的及注意事項，所有被試者首先進行培訓，以完成設置的預實驗方式來熟悉任務。正式實驗開始前，被試者需要完成注視點的矯正，整個實驗過程保持安靜并由被試者一人完成，在實驗結束后對所有被試者進行問卷作答與訪談，實驗的流程圖如圖2所示。

圖2 實驗流程

3 數(shù)據(jù)分析

3.1 眼動數(shù)據(jù)分析

3.1.1 眼動軌跡分析

對所有被試者的眼動數(shù)據(jù)結果進行統(tǒng)計，通過疊加每組10名被試者的眼動軌跡，并利用軟件生成疊加后的軌跡圖與熱區(qū)圖，從而觀察不同組被試者在進行實驗任務時的視覺認知情況，三組實驗的網(wǎng)課視頻畫面截圖如圖3所示，隨機選取視頻中的15 s片段進行分析，且三組視頻片段內(nèi)容一致。

由圖3可以看出，在不同的網(wǎng)課界面布局中，被試者的搜索軌跡存在差異。其中網(wǎng)課界面布局中有教師存在時，被試者會將更多的視覺軌跡停留在教師站立的區(qū)域，其中教師的臉部與手部區(qū)域注視點較多，這說明在網(wǎng)課界面布局中，有教師存在會對被試者的視覺注意力產(chǎn)生顯著影響。觀察組2與組3的眼動軌跡圖發(fā)現(xiàn)，在網(wǎng)課界面布局中無教師存在時，被試者對畫面中的文字注視時間更長，而且文字的布局方式不同也會影響被試者的視覺注意力程度，其中屏幕的左邊區(qū)域注視點較多，說明這些區(qū)域更能吸引被試者的視覺注意，這同樣也證明了之前的研究，即在信息量相等的界面區(qū)域中，個體的搜索軌跡總是呈現(xiàn)左邊多右邊少、上邊多下邊少的規(guī)律，近似于F型瀏覽方式，這符合大多數(shù)人對界面的瀏覽習慣[24]。

3.1.2 注視點分析

注視點可以準確反映個體的視覺認知特征，在被試者在進行實驗的過程中，關注網(wǎng)課視頻畫面的注視點數(shù)據(jù)進行收集，前人的研究指出，眼動凝視指標與人對信息的加工有關，掃視指標與人對信息的尋找有關[26]。因此，本研究將對眼動數(shù)據(jù)指標中的凝視次數(shù)、凝視時間、掃視次數(shù)與掃視時間進行分析，從而獲得不同網(wǎng)課界面布局下被試者的視覺搜索過程，以此判斷被試者在實驗中視覺注意力分配及認知加工情況，4個眼動指標數(shù)據(jù)結果如表2所示，為了檢驗數(shù)據(jù)的有效性及差異情況，本研究使用SPSS 23對3組眼動數(shù)據(jù)進行雙因素重復測量方差分析，自變量內(nèi)部的LSD驗后多重比較結果如表3所示。

圖3 三組網(wǎng)課視頻課程畫面的眼動軌跡圖與熱區(qū)圖

由表2中的眼動指標數(shù)據(jù)可以看出，被試者掃視時間遠大于凝視時間，掃視次數(shù)同樣也大于凝視次數(shù)，而且在不同的網(wǎng)課界面布局下，凝視與掃視之間數(shù)據(jù)差值也在逐漸增加，這說明在不同的網(wǎng)課界面布局下，被試者的視覺注意力分配存在差異。

表2 4個眼動指標數(shù)據(jù)

Tab.2 Four types of eye-movement indicator data

表3 眼動數(shù)據(jù)多變量顯著性檢驗

Tab.3 Multivariate significance test for eye-movement data

注*<0.05；**<0.01。

由表3可知在凝視時間上，文字排布與教師人像布局因素主效應均顯著(1,9)=9.73，=0.003，(1,9)= 13.41，=0.017；文字排布與教師人像布局因素交互效應也顯著(3,7)=8.62，=0.001；在凝視次數(shù)上，文字排布與教師人像布局因素主效應均顯著(1,9)= 17.52，=0.001，(1,9)=6.92，=0.039；文字排布與教師人像布局因素交互效應也顯著(3,7)=9.44，=0.003；在掃視時間上，文字排布與教師人像布局因素主效應均顯著(1,9)=15.21，=0.029，(1,9)= 9.95，=0.026；文字排布與教師人像布局因素交互效應也顯著(3,7)=18.62，=0.004；在掃視次數(shù)上，文字排布與教師人像布局因素主效應均顯著(1,9)= 12.57，=0.003，(1,9)=20.59，=0.017；文字排布與教師人像布局因素交互效應也顯著(3,7)=18.65，=0.001。

這表明有教師人像存在的網(wǎng)課界面布局會顯著引起被試者的凝視時間等眼動指標，這可能會讓被試者對網(wǎng)課視頻畫面中的內(nèi)容擁有更好記憶。文字排布因素也同樣會引起被試者眼動數(shù)據(jù)的顯著差異，文字左右排布會引起被試者更多的凝視時間，這也會加深被試者對內(nèi)容的理解與記憶。凝視/掃視比可以反映被試者對網(wǎng)課視頻畫面的信息加工效率，因此對眼動指標數(shù)據(jù)進行處理，得到的信息加工效率數(shù)據(jù)如圖4所示。

圖4 凝視/掃視比

由圖4可以看出，被試者在不同網(wǎng)課界面布局下的信息加工效率存在顯著差異，例如在有教師存在的網(wǎng)課界面中，被試者的信息加工效率要高于無教師存在的網(wǎng)課界面。在文字左右排布的網(wǎng)課界面中，被試者的信息加工效率也明顯高于文字上下排布的形式。可見，網(wǎng)課界面布局中有無教師存在、文字的排布方式都會影響被試者的視覺注意力分配與視覺信息加工效率。

3.2 績效數(shù)據(jù)分析

績效數(shù)據(jù)是檢驗網(wǎng)課教學效果的直接方式，通過對收集的30名被試者答卷數(shù)據(jù)進行分析，以答題的正確率來評估被試者的學習效果。由圖5的績效數(shù)據(jù)結果可以看出，組1（有教師存在且文字左右排布的網(wǎng)課界面）的被試者答題正確率最高，答題的平均正確率為85%；其次是組2（無教師存在且文字左右排布的網(wǎng)課界面），答題的平均正確率為70%；最后是組3（無教師存在且文字上下排布的網(wǎng)課界面），答題的平均正確率為50%?？梢钥闯?，不同網(wǎng)課界面布局會影響被試者的學習效果，有教師存在和文字左右排布的網(wǎng)課界面都會提升被試者的學習效果。

圖5 問卷答題數(shù)據(jù)

3.3 問卷訪談數(shù)據(jù)分析

實驗結束對所有被試者進行了問卷訪談，目的在于獲取被試者網(wǎng)課學習的主觀感受，訪談所用的問卷參照NASA-TLX任務負荷量表來進行設計[27]，問卷中的問題采用李克特5級評分制進行打分，除業(yè)績水平外，其余項得分越高說明被試者對網(wǎng)課內(nèi)容的評價越低。30位被試者在不同網(wǎng)課界面布局下的主觀數(shù)據(jù)平均值結果如表4所示。

表4 訪談數(shù)據(jù)

Tab.4 Interview data

由表4中可以看出，被試者對有教師存在且文字左右排布的網(wǎng)課界面布局評價最高，績效水平也較高，這和眼動與績效數(shù)據(jù)結果一致。被試者的主觀數(shù)據(jù)結果表明，有教師存在且文字左右排布的網(wǎng)課界面布局更能引起被試者的學習興趣，從而產(chǎn)生更好的學習效果。

4 結果討論

4.1 教師人像因素對網(wǎng)課學習效果的影響

從數(shù)據(jù)結果可以看出，在網(wǎng)課界面布局中，教師人像的存在會導致學習者的眼動數(shù)據(jù)產(chǎn)生顯著差異，學習績效與問卷訪談數(shù)據(jù)說明有教師人像存在的網(wǎng)課界面布局更能吸引學習者的視覺注意力，產(chǎn)生較好的學習效果。之前的研究表明，在教學視頻中看到教師的臉有助于學習，這是因為教師的目光提供了指導，提醒學習者應該關注什么[28]。本研究的眼動軌跡表明，學習者能夠有效地將視覺注意力分散在教師人像面部與網(wǎng)課學習任務之間，這也對Korv等[29]的研究提供了結論，即學習者在觀看網(wǎng)課視頻教學時，教師人像的存在或教師的臉會促進學習。同樣的，本研究的結果與Kuhn等[30]的研究結果一致，即教師在面對攝像頭（即學習者）和演示任務之間切換時，學習者的視覺注意力會被引導至任務上，由于個體傾向于自動跟隨另一個人的目光。本研究的結果還表明，當教師說話和做手勢動作時，學習者的視覺注意力一直在教師人像區(qū)域與學習內(nèi)容區(qū)域之間切換，這是學習者有良好學習效果的重要原因，Ouwehand等[31]已經(jīng)證明了，學習者在任務和教師面部之間切換的頻率越高，學習效果越好。

當教師為學習者所關注的內(nèi)容提供指導時，學習者會更多地關注教師的面部，并在教師進行講話和手勢指導時，自適應地將視覺注意力分配在教師的面部和任務之間。這表明，教師的面部指引可以為學習者提供強有力的線索，幫助他們及時將視覺注意力轉移到學習任務上。因此，在網(wǎng)課教學的設計中，教師人像的存在是必要的，并且教師在進行授課時要避免無意義的面部引導，應充分利用手勢等肢體語言來進行指導，快速引導學習者的視覺注意力。

4.2 文字排布因素對網(wǎng)課學習效果的影響

界面顯示會對個體的視覺注意力分配產(chǎn)生顯著影響[32]。本研究通過對比網(wǎng)課界面布局中，文字左右與上下排布方式對學習者眼動數(shù)據(jù)的影響情況，結果發(fā)現(xiàn)文字左右排布會對學習者產(chǎn)生更好的學習效果，答題正確率更高。問卷訪談的數(shù)據(jù)顯示，學習者對于網(wǎng)課界面布局中文字左右排布的方式滿意度高于上下排布的方式，這是因為左右排布的文字和書本頁面類似。有研究表明，個體在電腦顯示器上進行閱讀時會受到書本閱讀習慣的影響[33]。本研究所篩選的學習者全部為在校學生，他們有著大量書本閱讀的經(jīng)驗，對于文字的排布方式更習慣與書本一致的左右排布。而且個體對顯示界面的瀏覽習慣為F型瀏覽方式[24]，網(wǎng)課界面布局中文字左右排布方式與個體的瀏覽習慣一致，所以學習者對于文字左右排布方式更滿意。

5 結語

本研究以視覺認知特征為基礎對網(wǎng)課界面布局進行評價，通過開展眼動實驗，來探究網(wǎng)課界面布局中，教師人像與文字排布兩類因素對網(wǎng)課教學效果的影響。

有教師人像存在的組別，凝視時間均值為3 954.18 ms，顯著高于無人像存在的組別，而且答題正確率為85%，這說明在網(wǎng)課界面布局中有教師人像存在時，學習者的注意力會集中在教師的眼神與手勢上，從而產(chǎn)生較好的理解能力，學習效果也會更好。

當頁面中的文字按左右排布時，凝視時間均值為2 384.27 ms，顯著高于文字上下排布的方式，而且答題正確率為70%，這說明網(wǎng)課界面布局中文字左右排布的方式會更吸引學習者的視覺注意力，產(chǎn)生更多的凝視，促使學習者對網(wǎng)課界面內(nèi)容擁有更好的記憶效果。

網(wǎng)課內(nèi)容設計會影響學習者的學習效果，在網(wǎng)課界面布局中，教師人像與文字排布因素會對網(wǎng)課教學效果產(chǎn)生影響，教育工作者應當廣泛考慮這些因素，來提升網(wǎng)課教學效果。未來還會對更多的網(wǎng)課內(nèi)容因素進行研究。

[1] 劉鑫鑫, 肖曦. 鞏固拓展高校線上教育發(fā)展良好勢頭[J]. 人民論壇, 2021(7): 105-106. LIU X X, XIAO X. Consolidate and Expand the Good Momentum of Online Education in Colleges and Unive-rsities[J]. People’s Tribune, 2021(7): 105-106.

[2] MICHELINI C K. Online Course Design[J]. The International Review of Research in Open and Distributed Learning, 2017(1):88-93.

[3] URQUIZA-FUENTES J, PAREDES-VELASCO M. Investigating the Effect of Realistic Projects on Students' Motivation, the Case of Human-Computer Interaction Course[J]. Computers in Human Behavior, 2017, 72: 692-700.

[4] 侯雅婷, 尚曉青. 虛擬現(xiàn)實技術促進在線課程的具身轉向[J]. 中國信息技術教育, 2022(20): 81-84.HOU Y T, SHANG X Q. Virtual Reality Technology Pro-motes the Embodied Turn of Online Courses[J]. China Information Technology Education, 2022(20): 81-84.

[5] 馮晉湘, 王敏. 高校就業(yè)與創(chuàng)業(yè)指導在線課程提升路徑研究[J]. 山西青年, 2022(14): 141-143. FENG J X, WANG M. Research on the Promotion Path of Online Course of Employment and Entrepreneurship Guidance in Colleges and Universities[J]. Shanxi Youth, 2022(14): 141-143.

[6] 張文麗, 董一諾, 孫莉, 等. 基于學習者視角的外語在線課程質(zhì)量評價指標研究[J]. 外語與外語教學, 2022(4): 111-121. ZHANG W L, DONG Y N, SUN L, et al. Learner-Based Evaluation Indexes of Foreign Language Online Course [J]. Foreign Languages and Their Teaching, 2022(4): 111-121.

[7] 張詠鷗, 邵江燕, 吳靜萍, 等. 在線課程學習效果評價指標的學習者認可度研究[J]. 高教學刊, 2022, 8(31): 45-48. ZHANG Y O, SHAO J Y, WU J P, et al. Study on Learner's Acceptance of Online Course Learning Effect Evaluation Index[J]. Journal of Higher Education, 2022, 8(31): 45-48.

[8] KING S T, NININGER M J. Quality Improvement in Online Course Development: Igniting the Online Teaching Team[J]. Computers, Informatics, Nursing: 2019, 37(7): 55-62.

[9] HAN Y, WU W J, ZHANG L J, et al. Online Blended Learning in Small Private Online Course[J]. Applied Sciences, 2021, 11(15): 7100.

[10] BOLLIGER DORIS U, FLORENCE M. Critical Design Elements in Online Courses[J]. Distance Education, 2021, 42(3): 352-372.

[11] RALSTON-BERG P, BRAATZ H. Online Course Design Structure and Interface[J]. New Directions for Adult and Continuing Education, 2021, 2021(169): 15-33.

[12] LEWIS E. Best Practices for Improving the Quality of the Online Course Design and Learners Experience[J]. The Journal of Continuing Higher Education, 2021, 69(1): 61-70.

[13] BEATTIE G, WEBSTER K, ROSS J. The Fixation and Processing of the Iconic Gestures that Accompany Talk [J]. Journal of Language and Social Psychology, 2010, 29(2): 194-213.

[14] GULLBERG M, HOLMQVIST K. What Speakers do and what Addressees Look at[J]. Pragmatics and Cognition, 2006, 14(1): 53-82.

[15] LEVY J, FOULSHAM T, KINGSTONE A. Monsters are People too[J]. Biology Letters, 2013, 9(1): 20120850.

[16] LOUWERSE M M, GRAESSER A C, MCNAMARA D S, et al. Embodied Conversational Agents as Conversational Partners[J]. Applied Cognitive Psychology, 2009, 23(9): 1244-1255.

[17] AYRES P, SWELLER J. The Split-Attention Principle in Multimedia Learning[M]// The Cambridge Handbook of Multimedia Learning. Cambridge: Cambridge University Press, 2014: 206-226.

[18] HOMER B D, PLASS J L, BLAKE L. The Effects of Video on Cognitive Load and Social Presence in Multimedia-Learning[J]. Computers in Human Behavior, 2008, 24(3): 786-797.

[19] GUNAWARDENA C. Social Presence Theory and Implications of Interaction and Collaborative Learning in Computer Conferencing[J]. International Journal of Educational Telecommunications, 1995, 1(2/3): 147-166.

[20] 吳曉莉, 許盼盼, 江曉曼. 基于注意捕獲的工業(yè)監(jiān)控界面色彩層級編碼研究[J]. 工業(yè)工程與管理, 2022, 27(4): 32-38. WU X L, XU P P, JIANG X M. Color Level Coding on Industrial Monitoring Interface Based on Attention Capture[J]. Industrial Engineering and Management, 2022, 27(4): 32-38.

[21] VAN GOG T, RUMMEL N. Example-Based Learning: Integrating Cognitive and Social-Cognitive Research Perspectives[J]. Educational Psychology Review, 2010, 22(2): 155-174.

[22] 陳磊, 呂健, 潘偉杰, 等. 融合認知負荷的用戶界面布局優(yōu)化[J]. 計算機系統(tǒng)應用, 2022, 31(7): 307-315. CHEN L, LYU J, PAN W J, et al. User Interface Layout Optimization Incorporating Cognitive Load[J]. Computer Systems and Applications, 2022, 31(7): 307-315.

[23] 侯森. 色彩與布局在移動App界面設計中的應用[J]. 電腦知識與技術, 2022, 18(27): 89-90. HOU S. Application of Color and Layout in Interface Design of Mobile App[J]. Computer Knowledge and Technology, 2022, 18(27): 89-90.

[24] 王群, 解芳, 魏中亮, 等. 駕駛艙顯示界面文字編碼工效學實驗研究[J]. 車輛與動力技術, 2015(1): 27-30. WANG Q, XIE F, WEI Z L, et al. Ergonomics Research on Encoding of the Cab’s Display Interface[J]. Vehicle & Power Technology, 2015(1): 27-30.

[25] 人民日報海外版. 中國慕課學習人次達9.79億[EB/OL] (2023-01-04)[2023-05-03]. https://baijiahao.baidu.com/ s?id=1754031538336068775&wfr=spider&for=pc. People's Daily Overseas Edition. The number of Chinese MOOC learners reached 979 million[EB/OL] (2023- 01-04)[2023-05-03]. https://baijiahao.baidu.com/s?id= 1754031538336068775&wfr=spider&for=pc.

[26] 吳曉莉, Tom Gedeon, 薛澄岐, 等. 影響信息特征搜索的凝視/掃視指標與瞳孔變化幅度一致性效應比較[J]. 計算機輔助設計與圖形學學報, 2019, 31(9): 1636- 1644. WU X L, GEDEON T, XUE C Q, et al. Comparison of the Congruent Effects on Fixation/Saccade and Pupil Dilation Influencing Information Feature Searching[J]. Journal of Computer-Aided Design & Computer Graphics, 2019, 31(9): 1636-1644.

[27] 鐘曉, 李健, 劉志鋼, 等. 基于VTS測試的NASA- TLX量表主觀疲勞評價的有效性研究[J]. 人類工效學, 2018, 24(4): 24-29.ZHONG X, LI J, LIU Z G, et al. Research on the Reliability and Validity of NASA-TLX as a Measurement of Subjective Fatigue after Vienna Psychological Test[J]. Chinese Journal of Ergonomics, 2018, 24(4): 24-29.

[28] VAN WERMESKERKEN M, VAN GOG T. Seeing the Instructor’s Face and Gaze in Demonstration Video Examples Affects Attention Allocation but not Learning[J]. Computers & Education, 2017, 113: 98-107.

[29] KORVING H, HERNáNDEZ M, DE GROOT E. Look at me and Pay Attention! a Study on the Relation between Visibility and Attention in Weblectures[J]. Computers & Education, 2016, 94: 151-161.

[30] KUHN G, MARTINEZ L M. Misdirection - Past, Present, and the Future[J]. Frontiers in Human Neuroscience, 2012, (5): 172.

[31] OUWEHAND K, GOG T, PAAS F. Designing Effective Video-Based Modeling Examples Using Gaze and Gesture Cues[J]. J Educ Technol Soc, 2015, 18: 78-88.

[32] 姜興宇, 馬生順, 馬明宇, 等. 基于注意力分配的盾構顯示界面優(yōu)化研究[J]. 機械工程學報, 2023, 59(4): 332-344. JIANG X Y, MA S S, MA M Y, et al. Research on Optimization of Shield Display Interface Based on Attention Distribution[J]. Journal of Mechanical Engineering, 2023, 59(4): 332-344.

[33] 胡志剛, 何雨, 喬現(xiàn)玲, 等. 數(shù)控設備顯示器上的漢字文本閱讀工效研究[J]. 包裝工程, 2016, 37(24): 165-169. HU Z G, HE Y, QIAO X L, et al. Reading Efficiency of Chinese Character on CNC Equipment Displays[J]. Packaging Engineering, 2016, 37(24): 165-169.

Layout Design of Online Course Interface Based on Visual Cognitive Features

GANG Chunming

(Yuncheng University, Shanxi Yuncheng 044000, China)

The work aims to explore the pedagogical effectiveness of online course education.With the online ideological and political course offered by universities as the research object, three typical online course interface layouts were summarized combined with individual visual cognitive characteristics, and the subjects' eye-movement data, performance data and questionnaire data in different online courses interface layouts were collected through experiments.The left-right distribution of text in the online course interface layout was more likely to attract subjects' visual attention, resulting in a better learning effect. The teacher's portrait factor in the online course interface layout had a significant effect on subjects' gaze duration, gaze frequency and other eye-movement data (p<0.05). The teacher's eyes and body movements effectively attracted subjects' attention, resulting in more gaze duration and gaze frequency as well as a better learning effect. The questionnaire data further indicated that subjects rated the layout of the online course interface more highly when the teacher was present.The research provides scientific and theoretical recommendations for the development of online education and teaching.

interface layouts; visual cognitive characteristics; eye-movement data; online ideological and political course

G648.9；TB472

A

1001-3563(2024)02-0209-07

10.19554/j.cnki.1001-3563.2024.02.022

2023-08-26

教育部產(chǎn)學合作協(xié)同育人項目（202102443008）；黃河文化生態(tài)研究項目（HH202024）