基于眼动跟踪的教育网页“优势区域”论证研究

徐卫卫

（宁波经贸学校，宁波315000）

0 引言

国内部分关于“网页设计”的论著往往是凭借经验泛泛论述较多；设计的理论依据较为空洞，说服力不强[1]；针对具体问题（功能模块）研究较少；采用心理实验研究法进行严谨科学实证研究更少。梳理文献资料后可得知“眼动追踪研究”和“网页设计”之间没有形成有机的互联，往往只是针对于某一小模块的探讨，将两者统一起来研究的并不多见，并且呈现出研究的不系统性[2]。所以基于系统的国内外眼动研究成果的网页设计应运而生，力求给出一套系统、有科学依据的方法。在此背景下利用“眼动追踪”技术对网页设计进行定定量分析，对网页结构、内容等的设计具有很强现实指导意义。本研究针对学生浏览教育网页的“视觉偏好区域”进行论证研究，为教育网页优化设计提供数据支撑。同时也可以给中小学教师进行信息化教学实施过程，提供一个全新的审视视角[3]，论证设计的有效性、科学性。

1 实验假设（目的）

验证教育网页页面的“中上部”位置是其视觉的“优势区域”。

2 实验被试

实验对象为宁波大学本科生，涉及的学科有教育学、理学、工学、管理学、文学、经济学、法学、医学等。随机选取34 人（男16，女18），分为两组，两组男女人数分别相同。要求裸眼视力或矫正视力正常，不是色盲、色弱、闪光者，无眼动实验经验。

3 实验设计

采用被试内实验设计，利用AB、BA 交互平衡法，先让第一组（17 人）中每人先浏览教育网页A，接着浏览教育网页B；然后，让第二组（17 人）中每人先浏览教育网页B，再浏览教育网页A。浏览时间被试自己控制。其中教育网页的微观结构（“版块”填充的信息内容）为自变量，因变量为注视次数、注视时间。

4 实验材料、仪器

实验材料为两张教育新闻网页（如图1 和图2）。两张网页的宏观结构（布局方式）相同，但是微观结构不同（每个“版块”填充的信息内容不同）。为模拟真实操作环境，超链接均设为空链接。

实验采用瑞典Tobii T120 型眼动仪（双眼追踪），采样频率为120Hz，屏幕分辨率为1280×1024 像素，被试眼睛距显示器中心的距离为60-70cm，不需要佩戴头盔。实验材料的呈现和数据的记录、加工由其自带的Tobii Studio 软件完成。

5 实验过程

实验在宁波大学教师教育学院“眼动与生物反馈实验室”中进行。该实验室有单独的被试等候室，具有良好隔音功能，光线、温度条件良好，并且被试无需带头盔，最大限度的模拟真实的操作环境，确保实验结果的可信度。实验由一名主试引领一名被试进行个别测试，一名辅助人员在等候室接待被试及排序。

6 数据采集与处理

兴趣区（AOI）划分。本研究将每个实验材料分别划分为五个兴趣区（Area Of Interest，AOI），五个兴趣区的面积相当[1]。如图1-图2 所示：

图1 教育新闻网A（五个兴趣区）

图2 教育新闻网B（五个兴趣区）

根据上面划分的兴趣区，Tobii Studio 软件会自动生成相关眼动数据，然后用Spss17.0 软件对数据进行统计分析[2]。

●教育新闻网A 五个兴趣区在注视时间（fixation duration）维度上的分析

表1 教育新闻网A 五个兴趣区注视时间的平均值和标准差

从表1 可以得出，AOI 1 的注视总时间明显多于其他四个区域，AOI 1 注视时间的平均值除了较AOI 2 差别明显外和其他三个的差异并不明显。

表2 教育新闻网A 五个兴趣区注视时间上的单因素方差分析

通过单因素方差分析可见，在注视时间上，F（4，34）=10.335，p<0.001，说明网页中区域的位置会对读者在其区域内的注视时间产生异常显著影响。

为了能够分析清楚五个兴趣区它们两两之间差异的具体情况，进一步进行了事后多重比较研究（LSD），如表3。

表3 教育新闻网A 五个兴趣区在注视时间上的事后多重比较（LSD）

从表3 可以看出，当进行兴趣区在注视时间上两两比较时，AOI 1 和AOI 2 存在异常显著的差异、AOI 1和AOI 3 是存在显著差异，但是AOI 1 和AOI 4、AOI 5存在的差异没有达到显著水平；AOI 2 和其他各区的差异都达到了极其显著水平；AOI 3 和其他各区差异都显著；AOI 4 与 AOI 1、AOI 5 没有显著差异，与其他区域差异显著；AOI 5 与 AOI 2、AOI 3 差异显著，与其他区域差异不显著。

综合以上三个表格，AOI 1 明显优于AOI 2 和AOI 3，AOI 1 与 AOI 4、AOI 5 的差异不大，但是从总的注视时间上看，AOI 1 较AOI 4 和AOI 5 还是要具有相当的优势。总之被试在不同的网页区域可能会有不同长度的注视时间，读者对网页的中上部区域（AOI 1）呈现出注视时间上特定的“区域偏好性”。

●教育新闻网A 五个兴趣区的注视点个数（fixa⁃tion count）维度上的分析

表4 教育新闻网A 五个兴趣区注视点个数的平均值和标准差

通过表4 可以得出，注视点个数的平均数和总数在AOI 1 里面是最多的，明显多于其他四个区域，存在明显的差异。

表5 教育新闻网A 五个兴趣区在注视点个数上的卡方检验

由表 5 可以看出，X2=68.993，p<0.001，所以 AOI 1和其他区域相比存在的差异极其显著。说明，网页中的区域位置会对读者在其区域内的注视点个数产生很大影响。

根据以上的两个表可以得出：AOI 1 中的注视点的平均数和总数明显多于其他几个区域，并且与其他区域在注视点个数上存在极其显著的差异。

为了排除因为网页内容造成的教育新闻网A 中上部区域为“优势区域”，所以打乱A 网页的内容排列，但是网页宏观结构不变，然后对教育新闻网B 进行试验。

●教育新闻网B 五个兴趣区注在“注视时间”（fix⁃ation duration）维度上的分析

表6 教育新闻网B 五个兴趣区注视时间的平均值和标准差

从表6 可以看出，AOI 1 的注视总时间远远地超越了其他四个区，尤其是AOI 2。但是从平均数上看，五个区域的差异不明显。

通过单因素方差分析可见，在注视时间上，F（4，34）=10.260，p<0.001，说明，网页中的不同区域会对读者在其区域内的注视时间的长短产生异常显著影响。

为了能够分析清楚五个兴趣区它们两两之间在注视时间上差异的具体情况，进一步进行了事后多重比较研究（LSD），如表 8。

表8 教育新闻网B 五个兴趣区在注视时间上的事后多重比较LSD

从图表8 中可以看出，当进行不同区域注视时间两两比较时，AOI 1 和AOI 2 存在极其显著差异、AOI 1和AOI 3 是存在显著差异，但是AOI 1 和AOI 4、AOI 5存在的差异没有达到显著水平；AOI 2 和其他各区的差异都达到极其显著水平；AOI 3 和其他各区差异都显著；AOI 4 与 AOI 1、AOI 5 没有显著差异，与其他区域差异显著；AOI 5 与 AOI 2、AOI 3 差异显著，与其他区域差异不显著。

综合以上三个表，对注视时间的影响上，AOI 1 明显优于 AOI 2 和 AOI 3，AOI 1 与 AOI 4、AOI 5 的差异不大，但是从注视总时间上看，AOI 1 较AOI 4 和AOI 5还具有相当的优势。总之被试在不同的网页区域可能会有不同长度的注视时间，在注视时间上，读者在网页的中上部区域（AOI 1）呈现出特定的“区域偏好性”。

●教育新闻网B 五个兴趣区注视点个数（fixation count）维度上的分析

表9 五个兴趣区在注视点个数上的平均值和标准差

从图表9 中可以看出，AOI 1 平均注视点个数最多，注视点总个数最多，AOI 2 最少，AOI 3、AOI 4、AOI 5 差异不大。

表10 教育新闻网B 五个兴趣区在注视点个数上的卡方检验

由表 10 可知，X2=68.993，p<0.001，所以 AOI 1 和其他区域在注视点个数上相比存在的差异极其显著。说明，网页中的不同区域会对读者的在其区域内的注视点个数产生很大影响。

综合以上两个表得出，在注视点的个数上，AOI 1相对于其他区域占有明显的优势，是注视点个数最多的区域。

7 研究讨论

网页的“中上部”区域是被试的页面“兴趣区”（视觉偏好区），表现在不论是在注视时间上，还是在注视点的个数上，相对于其他区域来说AOI 1 都占有明显优势，并且表现出与其他区域存在较大的差异性。

通过教育网页A 与教育网页B 比对还可以得出：被试在网页上的视觉偏好区域跟页面的空间位置存在必然联系，跟网页空间位置放置的“信息内容”关联很小[3]。

该结论对网页设计的科学性和商业价值具有较强指导作用。教学能力大赛、优质课比赛信息化教学设计模块，以此结论为指导进行有效设计，争取在效果和理论职支撑上分别取得理想成绩。