基于視覺(jué)認(rèn)知特征的網(wǎng)課界面布局設(shè)計(jì)研究

剛春明

基于視覺(jué)認(rèn)知特征的網(wǎng)課界面布局設(shè)計(jì)研究

剛春明

（運(yùn)城學(xué)院，山西 運(yùn)城 044000）

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

界面布局；視覺(jué)認(rèn)知特征；眼動(dòng)數(shù)據(jù)；思政網(wǎng)課

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

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

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

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

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

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

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

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

1.2 網(wǎng)課界面布局設(shè)計(jì)

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

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

2 實(shí)驗(yàn)研究

2.1 實(shí)驗(yàn)設(shè)計(jì)

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

表1 實(shí)驗(yàn)分組信息

Tab.1 Experimental grouping information

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

2.2 設(shè)備與環(huán)境

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

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

2.3 被試者選擇

通過(guò)招募在校大學(xué)生共36名（被試者），其中男女按1∶1的比例進(jìn)行篩選，所有被試者的視力正常（或矯正后正常），無(wú)其他眼部疾病史，右利手且平均年齡為22歲。將所有被試者隨機(jī)分為3組，從而進(jìn)行眼動(dòng)實(shí)驗(yàn)，每位參與實(shí)驗(yàn)的被試者將會(huì)獲得一定的獎(jiǎng)勵(lì)。

2.4 實(shí)驗(yàn)過(guò)程

實(shí)驗(yàn)前，對(duì)所有被試者的身體狀況進(jìn)行評(píng)估，以保證實(shí)驗(yàn)數(shù)據(jù)的有效性。引導(dǎo)被試者進(jìn)入實(shí)驗(yàn)室，就坐于屏幕前的可調(diào)節(jié)座椅上，要求被試者的眼睛與屏幕中心處于同一高度，所有被試者在實(shí)驗(yàn)前自愿簽署知情同意書(shū)。主試詳細(xì)闡述本次實(shí)驗(yàn)?zāi)康募白⒁馐马?xiàng)，所有被試者首先進(jìn)行培訓(xùn)，以完成設(shè)置的預(yù)實(shí)驗(yàn)方式來(lái)熟悉任務(wù)。正式實(shí)驗(yàn)開(kāi)始前，被試者需要完成注視點(diǎn)的矯正，整個(gè)實(shí)驗(yàn)過(guò)程保持安靜并由被試者一人完成，在實(shí)驗(yàn)結(jié)束后對(duì)所有被試者進(jìn)行問(wèn)卷作答與訪談，實(shí)驗(yàn)的流程圖如圖2所示。

圖2 實(shí)驗(yàn)流程

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

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

3.1.1 眼動(dòng)軌跡分析

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

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

3.1.2 注視點(diǎn)分析

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

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

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

表2 4個(gè)眼動(dòng)指標(biāo)數(shù)據(jù)

Tab.2 Four types of eye-movement indicator data

表3 眼動(dòng)數(shù)據(jù)多變量顯著性檢驗(yàn)

Tab.3 Multivariate significance test for eye-movement data

注*<0.05；**<0.01。

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

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

圖4 凝視/掃視比

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

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

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

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

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

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

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

Tab.4 Interview data

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

4 結(jié)果討論

4.1 教師人像因素對(duì)網(wǎng)課學(xué)習(xí)效果的影響

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

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

4.2 文字排布因素對(duì)網(wǎng)課學(xué)習(xí)效果的影響

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

5 結(jié)語(yǔ)

本研究以視覺(jué)認(rèn)知特征為基礎(chǔ)對(duì)網(wǎng)課界面布局進(jìn)行評(píng)價(jià)，通過(guò)開(kāi)展眼動(dòng)實(shí)驗(yàn)，來(lái)探究網(wǎng)課界面布局中，教師人像與文字排布兩類因素對(duì)網(wǎng)課教學(xué)效果的影響。

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

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

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

[1] 劉鑫鑫, 肖曦. 鞏固拓展高校線上教育發(fā)展良好勢(shì)頭[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)實(shí)技術(shù)促進(jìn)在線課程的具身轉(zhuǎn)向[J]. 中國(guó)信息技術(shù)教育, 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è)指導(dǎo)在線課程提升路徑研究[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] 張文麗, 董一諾, 孫莉, 等. 基于學(xué)習(xí)者視角的外語(yǔ)在線課程質(zhì)量評(píng)價(jià)指標(biāo)研究[J]. 外語(yǔ)與外語(yǔ)教學(xué), 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] 張?jiān)侜t, 邵江燕, 吳靜萍, 等. 在線課程學(xué)習(xí)效果評(píng)價(jià)指標(biāo)的學(xué)習(xí)者認(rèn)可度研究[J]. 高教學(xué)刊, 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í)編碼研究[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] 陳磊, 呂健, 潘偉杰, 等. 融合認(rèn)知負(fù)荷的用戶界面布局優(yōu)化[J]. 計(jì)算機(jī)系統(tǒng)應(yī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] 侯森. 色彩與布局在移動(dòng)App界面設(shè)計(jì)中的應(yīng)用[J]. 電腦知識(shí)與技術(shù), 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] 王群, 解芳, 魏中亮, 等. 駕駛艙顯示界面文字編碼工效學(xué)實(shí)驗(yàn)研究[J]. 車輛與動(dòng)力技術(shù), 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] 人民日?qǐng)?bào)海外版. 中國(guó)慕課學(xué)習(xí)人次達(dá)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, 薛澄岐, 等. 影響信息特征搜索的凝視/掃視指標(biāo)與瞳孔變化幅度一致性效應(yīng)比較[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào), 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測(cè)試的NASA- TLX量表主觀疲勞評(píng)價(jià)的有效性研究[J]. 人類工效學(xué), 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] 姜興宇, 馬生順, 馬明宇, 等. 基于注意力分配的盾構(gòu)顯示界面優(yōu)化研究[J]. 機(jī)械工程學(xué)報(bào), 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ù)控設(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)學(xué)合作協(xié)同育人項(xiàng)目（202102443008）；黃河文化生態(tài)研究項(xiàng)目（HH202024）