眼动仪在网页优化中实验探究

1、眼动仪在网页优化中实验探究随着网络的越发普及，网络学习在各大高校悄然兴起，人 们对其热爱程度也逐渐增加，越来越多的学习者接受了这种 学习方式。然而对于网络课程首页的设计除了传统的问卷 法、访谈法等评价方式以外，定量的评价方式很少见到。视 线追踪技术可以从学习者的角度定量的来评价页面的设计， 通过学习者的视线轨迹来量化的分析页面的设计情况。视线 追踪是近几年专家学者研究的热点，但其和网络课程首页设 计相联系起来进行研究的资料还不是很多，笔者希望通过本 文抛砖引玉，可以有更多的专家学者进行研究。一、概念介绍(%1) 眼动仪概述早在19世纪已有学者通过人的眼球运动来分析人的心 理活动，当时使用肉眼直

2、接观察被试的眼动情况。这种方法 简单易行，较为方便。但它受主观因素影响较大，结果不够 精确。随着技术的发展，眼动记录技术也在不断完善，出现 了机械记录法、光学记录法、电流记录法等一系列眼动记录 方法。专家学者一直致力于改进眼动记录技术，20世纪60 年代以来，随着摄像技术、红外技术(infrared technique) 和微电子技术在当今社会的迅猛发展，再加上计算机技术的 普及，极大的推进了研究人员对高精度眼动仪的研发，从而 促进了眼动研究在国际心理学及相关学科中的应用。眼动心 理学的研究已经成为当代心理学研究的一种有用范型，在各 个专业领域也越来越重要。眼动技术就是通过从眼动轨迹的记录中提

3、取诸如注视 点、注视时间、注视次数、眼跳距离、瞳孔大小等数据，从 而研究个体的内在认知过程。现代眼动仪的结构一般包括四 个系统，即光学系统、瞳孔中心坐标提取系统、视景与瞳孔 坐标迭加系统和图像与数据的记录分析系统。眼动有三种基 本方式：注视(fixation)、眼跳(saccades)和追随运动 (pursuit movement)。在对学习者的心理过程进行分析时，可以有以下主要参 数：(1) 注视时间是指关注一个注视点所停留的时间。注 视时间反映被试者对材料加工的仔细程度，也受材料的长 短，难易，布局等因素影响。(2) 注视次数是指注视的多少。注视次数多少反映被 试者对材料的熟悉程度，与注视

4、时间密切相关。(3) 第一次到达目标区域的时间是指在区域内搜索所 需要的目标时，第一次到达目标区域的时间。其是衡量学习 者学习效率的重要指标。(4) 眼动轨迹图是将眼动信息用数据和图形的方式呈 现出轨迹视图，能最具体、最直观和最全面地反映眼动的时 空特征。(5) 瞳孔大小。瞳孔直径与人的情绪和认知加工有密 切关系。如看到厌恶的东西瞳孔会缩小，看到感兴趣的东西 瞳孔会增大。阅读时文字理解难度越高，记忆负荷量越大， 则瞳孔会放得越大。(6) 眼跳距离是指一次注视完成后，从一个注视点转 移到下一次注视点之间的距离。距离的大小与加工的内容有 关。(7) 丢失时间是指在注视过程中，被试者并没有注视 到被

5、试材料的时间。导致的原因可以是被试材料的难度和被 试者的疲劳等多种原因。(%1) “米达斯接触”概述所谓"米达斯接触” (midas touch),原意为无论你接 触什么东西，它都会变成金子(whatever you touch, turns to gold)o在基于视线追踪的人机交互中指的是，在利用视 觉进行目标选择和操作时，操作者当前的注视位置往往反映 其感兴趣的目标对象，因此系统可根据这一特征作出适当反 应。眼动信号以主动方式作用于网络课程的主界面，通过眼 动仪可以观察到被试者的眼动轨迹。通过页面的有效设计， 可以让使用者对有用的信息进行“米达斯接触”，尽量避免 “米达斯接触”

6、不必要的信息。二、研究实验设计（一）被试选取江苏师范大学20名本科生随机分成两组进行实验。 被试者年龄在2022岁之间，所有被试者视力或矫正视力 正常，均无色盲且为自愿参加。实验完成后被试可获得一份 礼物。（二）实验仪器瑞典公司生产的smarteye5. 4眼动仪。测量原理：角膜 反射，采样频率60/120ho眼动仪耦合到分辨率为1280x1024 像素的17寸显示器，作相应调整，保证呈现图像尺寸准确。 显示器的亮度与对比度均调节到较为舒适的水平，色温 58000° ko显示器前85cm处放置舒适稳固的高背皮椅，被 试坐姿的观视距离为70cm左右。（三）实验设计与实验材料本个案选取厦

7、门大学网络课程系统首页，将页面各个板 块重新设计后进行组合，由50名在校本科生就设计后的系 统首页以五点量表进行评价，1分为页面设计最差，5分为 页面设计最优。然后从中选取主观评分最高的两个系统首 页，让其通过目标搜索任务进行视线跟踪，从中筛选出最合 理的页面设置。笔者将厦门大学网络课程首页的六个板块分成四个a0i 区域（the area of interest）,通过被试者的视线规律从 中发现总结出页面设计规律。其中个人信息为a0i （1）,我 的课程为aoi (2),我的问题为aoi (3),最新公告为aoi (4),下图为两个主观评分最高的首页面，页面一为图1, 页面二为图2o(%1)

8、实验过程为了保证实验的信度，整个实验过程分为练习和正式实 验两个阶段。练习过程：练习开始前对被试者进行眼校准，校准后告 诉被试者身体要保持目前的姿势。向被试说明这种方式阅读 下应注意的内容，然后呈现指导语："请以正常的速度浏览 网页。理解内容后按空格键结束阅读。阅读过程中尽量保持 头部不动。清楚了吗？清楚后请按空格键开始”。提供给被 试者一张网页进行练习。经过练习被试者熟悉后，进入正式 实验。正式实验过程： 被试者按照练习过程中的注意点进 行调整。呈现指导语并告诉被试者将要依次完成一次浏 览和三个任务。 被试者清楚要求后自己按键开始测试。找到答案后按空格键结束，主试者记录被试者眼动信

9、息。任务：1.在所给的网络课程页面，依据平时的浏览习 惯，了解首页的内容。按空格键实验结束。2. 分别完成以下三个任务。(1) 找出课程金融工程的学习入口；(2) 找出“毕业申请”图表并点击；(3) 查看课程论坛。三、实验分析(%1) 浏览页面进行分析设置此项任务主要是分析被试者进行页面浏览时的眼 动顺序，分析出一般规律，并根据规律设计页面，从而有效 地避免“米达斯接触”。同时，也是让被试者了解并熟悉首 页面的布局，为下一步实验做准备。从两者的3d图可以看出，视线在每个兴趣区所占的比 例是：aoi (2) > aoi (1) > aoi (4) > aoi (3)。说明不 管

10、页面怎样设计，被试者重点关心的是”我的课程”版块。 页面二的调整使被试者投入更多的精力放到”我的课程” 版块，如图4。由此看来，当学习者是初次学习时，页面一 可以更好的帮助其了解页面的布置，当学习者已经熟知整个 页面布局时，可以转而应用页面二页。(%1) 任务驱动数据分析1. 找出课程金融工程的学习入口这个任务的设计是为了观察哪种设计可以更快的引导 学习者找到学习的图标。页面一与页面二完成任务的实验数 据整理如下。从参数表中可以看出，两个页面中被试者都可以成功的 完成任务，视线轨迹在目标aoi中出现的比例是100%,说明 两者都很好地避免了 “米达斯接触”，课程学习的图标放置 很显著。然而在两

11、者的比较中发现，页面二中视线首次进入 目标aoi所用的时间比较短，可以很快地进入搜索状态。在 目标aoi中页面二的注视点数相对较少，可以很容易地找到 图标，不需要进行过多繁琐的思考。但从完成任务的时间来 看，页面一却略胜一筹。笔者分析，在对页面不是很熟悉的 情况下，页面一虽然在加工的过程中有所繁琐，但所用时间 比较少，有利于初学者。在学习者使用一段时间后，页面二 将是更适合的页面。页面一与页面二的热点图如下：从热点图可以发现，页面二形成了两个比较大的热点区 域，而在页面一中则只有一个。这是对页面不熟悉，在一进 页面后进行思考，视线停滞不前。页面一因为个人信息在左 边，而网络学习中人们的视线也是

12、遵循从左到右，从上到下 原则，有效地避免了视线混乱。对于初学者有指导意义。2. 找出“毕业申请”图表并点击这个任务的设计是为了观察首页面的“个人信息”的 呈现位置是否合理，是否能直接的找到所需要的服务。从参数表中可以看出，被试者在成功完成任务2的同时, 页面一的目标aoi中平均注视次数百分比为86. 80%,远远高 于页面二，说明页面一在避免“米达斯接触”中有一定的优 势。页面一在首次进入目标a0i注视点的平均时间也明显少 于页面二，说明在实验的前阶段，页面一版块的设计更有利 于学习者进入学习状态。然而在笔者继续进行分析时，结果 有点出乎意料。页面一的目标aoi中平均注视点数竟然比页 面二高出

13、四倍，页面一的完成任务平均时间比页面二的要 长。这让所有研究人员倍感吃惊。后经笔者及研究人员分析, 虽然页面一可以有效地避免“米达斯接触”，这也得益于视 线浏览规律，但页面二也占有一定的优势。因为当学习者熟 悉首页面后，每次登陆学习页面的目的是很明确的，大部分 时间是用来学习的，对于个人信息的关注只是小部分和短时 间，把个人信息版块放到最右边可以有效地避免“米达斯接 触” o页面一与页面二的热点图如下：页面一的热点区较为集中，但其涉及3个aoi,虽然页面 二的热点区比较分散，但其涉及2个aoi,且在目标aoi中 可以很快地找到目标。3. 查看课程论坛这个任务的设计是为了了解页面上部的导航是否清

14、晰， 使学习者可以方便的使用。从数据分析可以看出，页面二可以有效地避免"米达斯 接触”，涉及版块只有两个，然而页面一的视线在四个版块 中都有所涉及。与上个任务的结果类似，页面一虽然首次进 入目标aoi注视点的时间比页面二少得多，但其在目标aoi 中的注视点数和完成任务的时间却比页面二多得多，说明页 面一可以很快地进入目标aoi,却在目标a0i中迷失方向， 然而页面二只要找到目标a0i就可以在最短的时间找到目 标，只要学习者对页面二多加熟悉，学习效果必定高于页面 二。页面一与页面二的立体图如下：此立体图可以很形象的对比出两者的区别，图中突出的 部分代表视线经过的地方，突出的越高，说明视

15、线停留的时 间越长。从图9可以看出，页面一中的山谷较分散，目标不 明确。从图10可以看出，页面二中的山谷较集中，目标较 明确。4. 结论从页面浏览到三个任务的眼动轨迹和各种轨迹图可以 发现：页面一在首次浏览时，各种指标都优于页面二，在任 务的完成过程中可以有效地避免“米达斯接触”，但其导航 的位置却不是很明确，容易导致学习者迷航。而对于页面二, 虽然在浏览和任务前期的各项指标没有页面一出色，但其在 任务后期和任务完成的时间上都略胜一筹。由此可见，页面一适合初次接触网络课程的学习者，可 以使学习者对整体版块都可以尽快地进行了解，但其导航部 分需要做进一步的改进；页面二适合对于网络课程界面有一 定

16、熟悉程度的学习者，这样可以避免页面二不利于学习者快 速进入学习状态的缺陷。如果条件成熟，可对网络课程首页 面进行改版，对于初学者使用页面一，经过一段时间学习后, 可以使用页面二进行学习。四、研究启示在网络课程学习中，学习者通过学习首页了解学习内容 和个人学习进度，设计一个完善的首页面是保证学习有效进 行的前提。比较完善的评价体系，如quis（用户界面满意度 调查问卷）、pueu（易用性及有用性调查问卷），大都是从设 计者的角度来审视，主观色彩比较浓重。然而将眼动追踪技 术应用到界面评估中就避免了这一缺陷，其可以直接反应学 习者的眼动数据，从而分析发现心理变化特征；其可以更加 自然的收集到数据，

17、避免了因为主观因素乱加评定；其可以 更加髙效，有效地缩短了测试时间。本研究对于网络课程首 页设计和课程设计有启示作用:（一）以学习者为主体设计网络课程页面眼动人机交互可以从学习者的角度出发，真正做到以学习者为主体，设计人员以学习者为中心，设计符合学习者需 求的页面。学习者在不同的进度中会有不同的页面需求，这 从传统的界面评价体系是了解不到的。应用先进的眼动人机 交互可以从数据中分析，进而得出科学的结论（二）简洁的页面更容易引导学习者学习网站的导航要很明显，这样可以使学习者尽快进入状态。划分板块和设置子标题可以让学习者节约时间，快速 的找到学习内容。必要时可以使用小图标进行引导。将学习 者必须阅读或重要的内容放到优势区域，其尺寸可以在有限 的范围内扩大。（三）增加有效"米达斯接触”，避免无效接触让学习者的视线最快最多的关注所需用的信息是传统 的评价体系所不能评估出来的。如何提高有效的“米达斯接 触”是眼动人机交互根据图表数据科学的分析得出的结论。 对于无效的接触可以修改页面的布置，从而提高学习者的学 习效率。五、研究不足与展望本研究利用科学的手段对网页优化做了一系