网络课程的网页布局与导航样式对学习影响的眼动实验研究

赖丽花，王咸伟

（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-），广东人，硕士，研究方向为视觉心理、平面设计、实训平台建设等．