基于眼动仪分析新闻网页的视觉浏览模式

刘星彤，孟 放

(中国传媒大学 信息工程学院，北京 100024)



基于眼动仪分析新闻网页的视觉浏览模式

刘星彤，孟 放

(中国传媒大学 信息工程学院，北京 100024)

用户在浏览网页时，会因为视觉感知特性、自身浏览习惯及网页布局引导等因素的影响，对网页各区域的关注程度以及浏览顺序形成某种固有的视觉浏览模式。该浏览模式可为新闻网页的布局优化提供依据，提升用户对新闻信息的获取效率，并为网页的可用性提供评价标准。借助眼动仪获取用户在浏览网页时的视点运动信息。首先基于用户的浏览习惯，通过预实验将新闻网页划分为若干个兴趣区域；然后统计用户在不同区域的视点数据，以获取用户对不同区域的关注程度和浏览顺序，从而分析用户在网页浏览中的视觉浏览模式。以凤凰资讯网站为例，对用户在浏览新闻网页时的关注模式进行了分析。

眼动仪；浏览模式；网页可用性

新闻类门户网站是继报纸、广播、电视之后，被公认的第四大新闻媒体。它融合了多种媒体形式，覆盖范围之广、受众群体之大是其他新闻媒体无法比拟的，因此新闻网站需要高效、准确地向受众传达新闻信息。

用户从网页中获取的信息有80%来源于视觉感知[1]。因此，用户对新闻网站的浏览行为直接影响用户对新闻内容的获取。充分认识并发现这一行为的规律特征，分析网页信息如何有效地布局以引导用户的视觉行为，进而提高新闻信息传达效率，便成为了新闻网站设计者们研究的焦点。

用户在浏览某一网页时，在浏览顺序、关注区域上可能存在某种特定偏好或习惯，称之为网页的视觉浏览模式[2]。这种模式的形成，一方面受到人类视觉本能特性的影响，另一方面是网页布局引导的结果[3]。此外，用户对此类网站是否有长期的使用习惯、是否有固有的认知印象等因素，也会影响用户网页浏览的视觉浏览模式。

眼动仪可以记录下人的眼球运动，即眼动。眼动仪输出的关键数据指标包括注视时长、注视点数目、兴趣区域和眼动轨迹。随着眼动研究理论的不断完善和精密眼动追踪设备的发展，眼动仪逐步应用到网页可用性测试领域。眼动仪可以记录人眼在浏览网页过程中的眼动数据，从而作为视觉浏览模式分析的依据[4]。

本文介绍了基于眼动仪的网页浏览模式分析方法，并以凤凰资讯新闻网页为示例对用户进行测试。测试过程中用户可以自由浏览网站首页，眼动仪会记录下被试的视点信息。经过分析得出用户对新闻网站的视觉浏览模式，该结论可为相关网页布局的合理性提出评价指标，并为新闻内容的布局优化提供依据，从而提升用户对新闻信息的获取效率。

1 基于眼动仪的网页浏览模式分析方法

1.1 眼动仪及眼动分析软件

本实验所采用的眼动仪为Tobii X2-30，它的取样频率为30 Hz，可以固定在笔记本、计算机屏幕或者平板上来实现紧凑、高度便携的眼动追踪解决方案，适用于针对网页的眼动实验，具有较高的灵活性和便携性。

Tobii X2-30眼动仪使用的分析软件为Tobii Studio，它所提供的数据可视化工具有热点图、眼动轨迹图和聚簇图等。热点图使用不同的颜色来呈现被试者对一张图像的关注区域，或用来展示被试在某个区域的视觉停留时间；眼动轨迹图是指在一副静态背景图上呈现注视点的顺序和位置；聚簇图可在背景图上呈现注视点数据密度最大区域。

1.2 眼动数据统计指标

眼动分析软件可以对原始的眼动数据进行初步统计，得到相应的统计指标。用于视觉模式分析的主要眼动指标[5]见表1。

表1 眼动数据统计指标

1.3 网页浏览模式分析一般方法

Jakob Nielsen于2006年提出了F形网页浏览模式[5]，该研究基于232名实验对象浏览的近千张网页。研究指出，大多数情况下用户都习惯于不由自主地以F形状的模式浏览网页，这种基本恒定的网页浏览习惯决定了网页基本呈现F形的关注热度。

网页的浏览模式分析属于视觉模式分析，在眼动测量时采用的方法为自由浏览。自由浏览指的是用户在没有明确任务的情况下，对特定页面或区域进行浏览的行为。通常的实验流程设计如下[6]：

1)确定测试内容，如指定页面、特定内容和区域等。

2)划分兴趣区域，根据页面的功能布局，将页面划分为不同区域，以便后续眼动数据的分析。

3)选取实验人员，根据用户研究的相关理论，选取实验人员时，要注意人群的分布特点，尽量覆盖到网站的所有用户类型。其次，要注意区分已有用户和潜在用户。最后，视觉模式类的研究，实验人员的数量要在20人以上。

4)进行眼动实验，根据具体的网页类型和内容，设定自由浏览的时长。

2 实验设计及流程

凤凰资讯是全球领先的跨平台网络新媒体，其日均覆盖用户数(UV)超过4 700万，月度覆盖用户数超过4.3亿，稳居中国第四大门户网站(见图1)，因此采用凤凰资讯作为示例新闻网页进行实验具有代表性[7]。下文介绍该实验的具体流程。

图1 凤凰资讯首页部分截图

2.1 实验设备和环境

该实验所用眼动仪为Tobii X2-30，刺激材料播放的显示器为Acer 4750G-2414G50Mnbb屏幕，14 in(1 in=2.54 cm)，分辨率为1 366×768。实验前需调整好被试的座椅与屏幕间的距离，以减少定标过程中头部位置的调整幅度。

2.2 实验对象选取

在选择实验对象时，要充分考虑以下因素：

1)目标用户群体的人口统计学特征，如性别、职业、文化程度等；

2)是否有相关新闻网站的使用经验，使用频率如何；

3)考虑到本可用性测试采用眼动实验的方式，要充分考虑被试的视力情况(对红外线是否敏感、是否患有高度近视等)。

结合新闻网站的定位，根据社会学、人口统计学等方面的理论，按照角色法[8]的定义，确定了实验对象的特征属性，如表2所示。

表2 实验对象的特征属性

2.3 预实验

在正式实验执行前，首先要进行预实验。预实验有以下3个目的：1)确定自由浏览的时长；2)根据预实验结果进行兴趣区域的划分；3)发现一些眼动仪使用及实验设计上的问题并进行修正。

参与预实验的被试者共有5人，其中男生2人、女生3人，均为在校大学生，被测网页为凤凰资讯。预实验过程中，被试人员可以按照日常浏览习惯对被测网页进行无任务的自由浏览，浏览时长不限，当被测人员认为达到浏览目的后，单击鼠标结束实验。根据预实验中被试的浏览时长的平均值，将正式实验的自由浏览时长设定为40 s。5位被试者的浏览时长如表3所示。

表3 预实验被试者的浏览时长

根据预实验中5位被试人员的眼动记录得到的聚簇图，可以发现被试人员注视点聚集的区域在整个网页的上半部分，因此，对网页的兴趣区域划分采用如下方法：由上至下进行三等分，分别称之为上部、中部和下部。对其中的上部进行兴趣区域的详细划分。聚簇图及网页的兴趣区域划分见图2。

图2 网页区域划分(截图)

2.4 正式实验

正式实验的主要流程如下：

1)提示语，即给被试者呈现提示语。提示语设定的浏览情景为：“假设你想看看今天凤凰资讯上都有什么重要的新闻内容”。

2)呈现网页刺激材料，即播放网页刺激材料(凤凰资讯首页)，浏览方式为自由浏览，浏览时长为40 s。在自由浏览的过程中，被试人员可以模拟日常使用浏览器浏览网页的情景，可使用鼠标滚轮进行网页的滑动操作，但不能进行鼠标点击操作。眼动分析软件Tobii Studio会对每一个被试人员的眼动行为进行记录，形成一段独立的眼动录像，并记录下相关的眼动数据，便于后续的数据统计分析。

3)口头问答，即测试结束后，对被试人员进行简短的口头问答。口头问答的目的在于剔除无效样本，避免被试人员在测试过程中没有按照情景设定进行新闻内容的浏览，而是无目的性的浏览。口头问答的内容为要求被试人员复述一条在浏览过程中看到的新闻。若被试完全不能复述网页中呈现的任意一条新闻，则将此被试者数据在后续的数据统计与分析中剔除。

2.5 数据统计

数据统计采用的软件为Tobii Studio。该软件可以根据实验记录下来的眼动数据输出3种可视化工具图：眼动轨迹图、热点图和聚簇图。此外，Tobii Studio还可以导出记录的原始数据，供其他工具进行特定指标的统计分析。

3 结果及分析

本实验主要统计的数据指标有：区域首次注视时间(见图3)、区域总访问时间(见图4)、区域浏览人数百分比(见图5)、区域浏览顺序(见图6)。其中，图3～图5中的数据为有效样本的均值。

图3 区域首次注视时间(截图)

图4 区域总访问时间(截图)

图5 区域浏览人数百分比(截图)

根据实验测试数据，可以进一步从区域浏览顺序、区域关注程度两方面得出用户对该新闻网页的视觉浏览模式，并对该网页布局的合理性进行整体评价。

3.1 区域浏览顺序

根据区域首次注视时间得出区域浏览顺序图，更为直观地展现用户在浏览此新闻网站时的浏览顺序偏好，如图6所示。区域上所示的数字即代表用户首次注意到此区域的顺序。

图6 区域浏览顺序(截图)

由区域浏览顺序可以得到如下结论：1)用户能够较快注意到的区域依次为“要闻区”、“导航区”、“logo区”、“图片新闻区”；2)网页中部、下部区域，用户注意到的时间较晚，甚至有用户并没有浏览底部区域。

因此新闻网页在进行页面布局时，重要新闻内容建议放置于页面的左上方，并尽量集中在页面的前1/3部分。此外，附加新闻图片的形式可以有效吸引用户的关注。

3.2 区域关注程度

衡量关注程度有两个因素，一个是注视顺序，一个是注视的时长。对应的数据指标即区域浏览顺序、区域总访问时间。结合这两个指标，可以得出如下结论：

1)用户停留较长时间的区域依次是要闻区、分类新闻区、图片新闻区；

2)用户在要闻区停留的时间要超过其他任何区域的两倍以上，关注程度最高；

3)用户能较快关注到静态广告、横幅广告，但注视时间很短，仅进行粗略浏览。

此外，热点图和透明度图也能反映用户对整个网页的关注程度，如图7、图8所示。其结论与数据指标衡量的基本一致，用户关注的部分大多数都集中在网页上部。此外，通过热点图还能够看出，用户的浏览模式基本符合F型浏览模式，对网页上部和左侧的关注程度更高，向底部和右侧的关注程度递减。这是用户习惯和网页设计引导共同的结果。

图7 凤凰资讯首页热点图(截图)

图8 凤凰资讯首页透明度图(截图)

3.3 网页布局的合理性

根据以上分析，凤凰资讯的首页布局能够按照F型浏览模式对用户的视觉行为进行引导，让用户在第一时间注意到要闻区域的重要新闻，并且呈现较为持久的关注，而且能够让用户适当被图片新闻吸引，新闻内容的布局合理。

但通过上述数据也可以看出，该网页的广告内容投放效率较低。条幅广告区的注视人数百分比仅为16%，注视时间为0.11 s，图片广告区的注视人数百分比仅为37%，注视时间为0.11 s。经分析，被测网页的图片广告和条幅广告均为静态广告，并且颜色对比度与其周围区域对比度较小，因此获得的关注度较低。关于上述影响网页的广告投放效率的因素分析，仍需进一步的实验验证。

4 小结

为研究用户浏览新闻网页时的视觉关注模式，本文基于眼动仪的预实验结果，将凤凰新闻网页分成上中下3个区域，并在上部区域进行了详细的兴趣区域划分；然后设计了任务型眼动实验，通过眼动仪采集用户自由浏览该网页时的视点信息，并根据网页的区域划分对眼动数据进行相关指标统计；最后从区域浏览顺序、区域关注程度来分析用户对新闻网页的浏览模式。

本文分析得出的用户对新闻网站浏览模式有如下特点：1)用户对新闻网站的关注热度基本呈现“F”形，关注热度由上至下、由左至右递减。2)预实验反映用户注视点的聚簇集中在页面的前1/3(即首屏)，用户对页面的后1/3几乎没有关注度。3)用户对页面左上区域的浏览顺序和关注时间均远超过其他区域，该区域的新闻信息的传递效率最高。

关于新闻网页的广告投放效果、动态静态图片对用户关注度的影响，仍可做进一步的实验探究。

[1] 杨雄里.视觉的神经机制[M].上海：上海科学技术出版社，1996.

[2] 赵乃迪.网页布局对视觉搜索影响的眼动研究[D].上海：复旦大学，2012.

[3] 陈真真.网页浏览中的前注意与注意行为及其眼动研究[D].杭州：浙江大学，2012.

[4] COWEN L. An eye movement analysis of Web page usability[D].Lancaster，U K：Lancaster University，2001.

[5] NIELSEN J.F-shaped pattern for reading Web content[EB/OL].[2016-03-03].https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/.

[6] SANTELLA A，DECARLO D. Robust clustering of eye movement recordings for quantification of visual interest[C]//Eye Tracking Research & Application Symposium, Etra 2004. San Antonio，Texas，Usa：[s.n.]，2004：27-34.

[7] 周婷.台网融合趋势下电视媒体网站的发展之道[D].合肥：安徽大学，2014.

[8] 燕保珠.眼动研究在网站可用性测试中的应用[D].北京：北京邮电大学，2011.

刘星彤(1993— )，硕士生，主研数字电视技术、视觉信息处理等；

孟 放(1972— )，女，硕士生导师，主要研究方向为数字电视技术、视觉信息处理、视频图像处理等。

责任编辑：许 盈

Analysis of visual browsing pattern of news webpages based on eye trackers

LIU Xingtong，MENG Fang

(SchoolofInformationEngineering,CommunicationUniversityofChina,Beijing100024,China)

When users visit the webpage, some inherent pattern in browsing order and attention degree for different regions will be developed by factors such as visual instinct characteristics, browsing habits and page layout. This pattern can provide basis for layout optimization of news webpages, improve the efficiency of information acquisition and provide evaluation criteria for webpage usability. The captures user’s viewpoint information is captured based on eye tracker in the process of browsing. First, according to the user's browsing habits, the news webpage is divided into several regions of interest through the pre experiment. Then, viewpoint data is analyzed by different regions so as to get the user's attention degree and browsing order. This paper takes Phoenix News for example to analyze visual browsing pattern of news webpages.

eye tracker；browsing pattern；webpage usability

刘星彤，孟放. 基于眼动仪分析新闻网页的视觉浏览模式[J].电视技术，2016，40(12)：77-82. LI X T，MENG F. Analysis of visual browsing pattern of news webpages based on eye trackers[J].Video engineering，2016，40(12)：77-82.

TN949.6

A

10.16280/j.videoe.2016.12.015

2016-05-08