如何在网页测试中叠加多个被试的眼动追踪数据？

　　如何在网页测试中叠加多个被试的眼动追踪数据？

　　

　　在多数网页研究中，给被试者分配的任务通常包含浏览某个网站或浏览某个网页应用。在浏览的过程中，他们并不是被动地观看按指定顺序和时长呈现的刺激材料，而是会与呈现的刺激材料进行交互，这样每个被试者的结果都是独一无二的。因此如果要对这些被试者的体验进行对比就会很繁琐，并且多被试的眼动数据自动叠加是一项很有挑战性的工作。

　　例如，在浏览网页时，一些被试者可能在某个页面的停留时间比其他被试者长，他们可能会跳转到其他页面，多次播放和停止网页内的视频等。如果一个或两个被试者在浏览一个页面时花了很多的时间，那么他们的注视点数量可能会增加，这会对叠加的数据带来影响。页面中还有可能会包含一些动态内容，例如下拉菜单，弹出窗口和flash*敏*感*词*内容，这些都会对数据的自动叠加带来一些挑战。

　　在进行网页眼动数据采集时，对这些不同的挑战要保持足够的注意并做出相应的分析做好准备。本文将介绍通过Pro Lab软件实现对网页实验项目中多被试者的眼动追踪数据叠加的方法和步骤。我们将对能够自动叠加数据和手动叠加数据的案例进行着重阐述。

　　1

　　通过自动网页导航TOI兴趣区间叠加数据

　　在使用网页元素进行测试时，Pro Lab软件会记录观察窗*区域的测试过程的视频并同时提取所有打开的独立的URL的完整页面屏幕截图。软件还会保存与页面导航时间相关的TOI信息和事件（确定TOI的开始和结束点）在分析过程中，你可以通过这些视频记录来观察被试者的行为并发现可用性问题并找到诠释问题的方法，或可以通过屏幕截图与相应的TOI将眼动追踪数据叠加到每个网页上。例如，将数据叠加到一张热点图上时，Pro Lab软件使用屏幕截图作为数据叠加的背景图像并使用两个TOI事件来确定叠加在热点图上的数据范围。

　　*观察窗是指被试者在浏览网页时呈现在当前屏幕上的那部分网页。

　　如果在测试中被试者多次访问同一个网页，那么每次访问都将生成相同的开始和结束事件并作为属于相同的兴趣区间TOI的不同时间片段和屏幕截图被记录下来。默认情况下，当你选择了一个兴趣区间TOI，Pro Lab软件会按所有属于该兴趣区间TOI的时间片段来叠加数据。

　　

　　图1. 对相同的网页进行多次访问的数据是如何被叠加到相同的网页导航兴趣区间（TOI）的。

　　接下来，我们将分步骤介绍创建数据叠加可视化结果和根据网页导航兴趣区间TOI提取眼动追踪统计指标的方法。

　　将数据叠加到热点图上的操作步骤：

　　1. 点击Visualization按钮，可以在Project Overview界面或从顶部导航栏中的Analyze下拉列表中找到该按钮。

　　2. 在界面右侧打开工具栏中的Visualization Type和Settings工具，并选择Heat Map。

　　3. 选择创建热点图所使用的眼动数据过滤器。请参考Pro Lab用户手册附录部分 “Appendix B Gaze Filters’ functions and effects” 进一步了解眼动数据过滤器。

　　4. 进入Times of Interest工具并选择与要创建热点图的网页相对应的网页导航。为了帮你高效地进行兴趣区间TOI的选择，软件将呈现网页的名称和缩略图。

　　5.切换到Recordings工具并选择或取消选择要叠加到热点图上的记录。

　　6. 选择热点图的创建方式- 绝对计数, 相对计数，绝对时间或相对时间。(请参阅Pro Lab 用户手册附录部分“Appendix C Calculating heat maps” 进一步了解热点图的不同创建方式)。

　　7. 叠加了多个记录的数据的热点图创建ok。

　　提取眼动追踪统计指标的步骤:

　　1. 打开AOI选项卡来创建你的AOI兴趣区。

　　2. 在Media Selection部分选择目标网页图像。

　　3. 为要分析的元素描绘兴趣区域。

　　4. 如果你想跨多个兴趣区来叠加数据，也可以创建AOI标签并将每个AOI进行标记（兴趣区组）。

　　5. 切换到Metrics Export选项卡。

　　6. 在Settings面板点击Export Format下拉列表选择数据输出的格式。选择Interval based TSV file (default).tsv格式将按照页面的每次访问来切分数据或选择Excel report for the.xlsx格式导出汇总报告。

　　7. 选择要包含在导出数据文件中的统计指标(可选的统计指标按第2步的选择有所不同)。

　　8. 选择导出使用的眼动数据过滤器。请参考Pro Lab用户手册附录部分 “Appendix B Gaze Filters’ functions and effects” 进一步了解眼动数据过滤器。

　　9. 选择记录。选择导出全部记录或按照需要选择相应的记录进行导出。

　　10. 选择Participant variables可根据被试变量对数据做进一步筛选。

　　11. 选择网页导航兴趣区间TOI。

　　12. 选择第1-4步创建的AOI兴趣区和兴趣区标签。

　　13. 可选择Web Navigation Event types来导出与事件相关的统计指标。

　　14. 点击Export开始数据导出。

　　2

　　使用自定义兴趣区间TOI叠加数据的操作步骤

　　如果你的研究需要将数据叠加到带有少量或没有动态元素的网页上，你可以使用网页导航兴趣区间TOI和相应的屏幕截图来叠加数据。但如果网页包含较多动态元素，你就会面临三个挑战：

　　1. 浏览器不支持某些动态内容**

　　2. 网页截图无法呈现某些网页的动态元素***

　　3. 在网页访问期间如果用户花了一些时间与动态元素进行交互和观察，那么这期间采集到的眼动数据可能会错误地叠加到网页图像上。

　　** 例如，Pro Lab内嵌浏览器目前不支持 Flash*敏*感*词*元素。

　　***唯一的例外是网页的固定元素，Tobii Pro Lab软件能够追踪这些元素并正确叠加数据。固定元素是指网页中与浏览窗口位置相关而不是与网页本身位置相关的元素。当被试者将包含固定元素的网页向下滚动时，这些元素仍停留在网页截图中固定的位置不变，而其他的元素则会相应地移动。这些元素在网页截图中的位置是固定的。任何在这些元素上的眼动数据都将被叠加到屏幕截图中相应元素的位置，无论这些元素真正被看到时处于什么位置。这样可以更真实地展现注视点。

　　上面列出的挑战也说明了系统生成的网页导航兴趣区间TOI可能无法满足你的研究需求，因为将会有一部分眼动数据无法正确叠加到自动生成的网页截图所无法呈现的元素上，即一部份数据是视觉上无意义的。而这部分数据应该属于被试与动态元素的交互行为。例如，如果被试在网页中打开了一个下拉菜单，那么观察该菜单的视觉模式将会被记录并叠加到网页截图上，但在网页截图上，该菜单是不可见的。其他类型的动态元素也会出现这种情况，例如不会生成独立URL的弹出窗口或跨越屏幕呈现的元素。

　　如前文所述，在眼动测试数据采集期间，Pro Lab也会捕捉整个浏览环节中观察窗部分的视频。该视频也可以在后期回放记录时被回放出来。该视频其实就是被试者网页浏览行为的屏幕记录，因此你可以在回放中看到不同的动态元素和被试者对这些元素的观察与交互行为。在数据分析期间，你可以使用该视频在时间轴上创建事件作为被试者与这些元素交互的开始和结束标记。创建好这些事件后，就可以进一步通过它们来创建与视频帧相关的自定义兴趣区间TOI。自定义兴趣区间TOI可将与动态内容的交互相关的视觉浏览行为数据进行叠加，而视频的帧图像可作为带有动态内容的网页的数据叠加背景图像。将自定义兴趣区间TOI和帧图像结合，就可以实现叠加了多被试数据的可视化结果生成并创建兴趣区来提取眼动追踪统计指标。

　　在上一个例子中，当被试者与一个下拉菜单进行交互时，你可能需要标记两个事件，例如，下拉菜单打开和下拉菜单关闭，然后通过这两个事件作为开始点和结束点，结合一帧视频图像来创建自定义兴趣区间TOI。帧图像需要在视频中该下拉菜单处于打开状态时截取。然后重复这个步骤，在其他记录中创建相应的兴趣区间TOI，然后在Visualization工具中选择按自定义兴趣区间TOI来创建热点图等可视化结果。这样，生成的热点图就将展示出叠加了多被试数据的对下拉菜单的视觉观察行为。下面将按步骤介绍基于视频帧的自定义兴趣区间TOI的创建方法。

　　创建自定义兴趣区间TOI的操作步骤:

　　1. 打开一条记录

　　2. 创建一个或两个自定义事件来确定兴趣区间TOI的开始点和结束点，例如，每当用户打开下拉菜单和关闭该菜单。

　　3. 将鼠标指针移到打开的菜单中视频的一帧，然后点击位于记录的计时器右侧的创建帧图像的图标并选择Create Toi with frame选项。如前文所述，帧与网页截图的功能相同。

　　4. 在Create custom Time of Interest 窗口中选择在第1步中创建的开始和结束点。

　　5. 将Media重命名为对分析有意义的描述性名称。

　　6. 点击OK 创建兴趣区间TOI。

　　7. 重复第1步和第2步为其他记录定义兴趣区间TOI的开始和结束点。

　　创建了与帧相关联的自定义兴趣区间TOI后，你就可以像使用网页导航兴趣区间TOI一样使用这些自定义的兴趣区间TOI来生成可视化结果并提取基于多被试的叠加的眼动统计指标了。

　　这种分析流程的局限性在于网页的动态内容需要适应观察窗。如果被试需要通过滚动操作来与元素进行交互，那么这种方案就不可行，因为你无法将观察行为汇总到一个单独的视频帧上。

　　3

　　结语

　　在网页的眼动测试中叠加多个被试的数据在概念上和技术上都具有挑战性，对如今包含大量动态内容的网页来说更是如此。

　　从概念上看，由于动态内容使每个被试在一个网页的交互数据都不同，所以很难在几个不同被试之间进行数据对比；而从技术上看，很难有效地捕捉用于创建热点图的眼动数据，因为 内容是不断变化的——尤其是仅当页面的某些部分发生变化。

　　在研究的准备阶段，你就需要充分考虑到这些可能会面临的挑战并针对每个难点确定可行的分析方案和流程。这样你才能更现实际地预估为数据分析工作投入的时间和资源。

　　表1.不同的网页动态元素与跨多被试数据叠加的相应流程/功能汇总

　　网页动态内容

　　Pro Lab 分析元素

　　无

　　网页截图相关联的网页导航兴趣区间TOI

　　事件自动生成，自动抓取整幅网页图像

　　可展开的元素与不需要滚动的内容(适应观察窗)

　　视频帧相关联的自定义兴趣区间TOI

　　需手动添加事件并从视频中选择背景帧

　　可展开的元素与需要滚动的内容(不会自适应观察窗)

　　手动叠加 (请参见用户手册第8.2 章节)

　　需要通过手动Coding的方式将注视点叠加到视觉编码方案表单或导入的网页图像上

　　固定元素

　　网页导航兴趣区间TOI相关联的网页截图

　　事件自动生成，自动抓取整幅网页图像

　　生成新URL的弹出元素

　　网页导航兴趣区间TOI相关联的网页截图

　　事件自动生成，自动抓取整幅网页图像

　　不生成新URL的弹出元素

　　视频帧相关联的自定义兴趣区间TOI

　　需手动添加事件并从视频中选择背景帧

　　嵌入式mp4视频内容

　　暂时无法分析 (浏览器不支持)

　　在视频记录中不可见

　　嵌入式Flash*敏*感*词*内容

　　暂时无法分析 (浏览器不支持)

　　在视频记录中不可见

　　-The end-

　　你可能还想看：

　　

　　探究人类行为

　　我们通过领先的眼动追踪解决方案帮助商业和科研专家获得人类行为的真实洞察力。我们的眼动追踪研究产品和服务正在被全球超过2,000家企业和1,500所研究机构所使用。