甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
The eye sees only what the mind is prepared to comprehend。—Henri Bergson
正如柏格森所说，人的眼睛与心理活动总是密切联系着，当用户在使用我们的产品时，通过他们的眼球运动所获得的信息，往往能比可用性测试和访谈获取更多隐藏但有价值的内容。毕竟，我们所观察到的和用户所说的，都不是最直接最全面的信息。因此，眼动追踪技术（Eye Tracking）为用户体验行业提供了一种更为直接有效地了解用户行为态度的方法。
当然，目前一台价格范围不亚于一辆 BMW3 系列的眼动仪设备并不是每家公司都愿意引进的。不过随着技术的发展，市场上已经出现一批“民用眼动仪”新秀。比如笔者购买的 theEyeTribe 眼动仪，全套设备包括邮费仅需 650 多元，价格还不如一部手机贵，但其功能和精度完全可以满足平时的项目需求。眼动技术民用化可以说是一种趋势，随着技术壁垒越来越小，未来很可能会和语言识别技术一样普遍和亲民。
作为 UX 从业人员，不管有没有机会接触这项技术，我们都可以了解下这项有趣的技术。本文将介绍以下四个方面的内容：
眼动测试在UX领域的应用场景眼动测试数据指标解读如何开展一场眼动测试项目实际项目中需要避免哪些误区常见的眼动设备现在的眼动仪一般分为两种，一种是最为常见的非接触式红外眼动仪：
另一种是头戴眼镜式眼动仪：
目前还有针对 VR 场景下的眼动仪：
这些高大上的眼动仪，其原理概括来说就是：使用机器视觉技术捕捉瞳孔的位置，然后将这个位置信息通过内置的算法计算，获得用户在所看的界面上视线的落点，即用户当前注视点在界面上的位置。
眼动测试在UX领域有哪些应用场景当用户和眼动仪“对接”之后，我们能获得的信息有：
用户此时在看什么，看了多久；在界面上，用户的注意力是如何从一个元素到另一个元素的；界面上哪些区域用户没有留意到；界面上的元素的尺寸及其如何影响用户的注意力基于这些信息，这里列举以下五个典型的业务场景。
场景一：了解用户的注意力在界面上的各元素上是如何分配的当用户访问一个电商网站准备购买一些商品的时候，页面上的哪些元素会影响他们的购买决策？用户是否会考虑商品列表上的所有商品，还是只将注意力放在头几个商品？为什么不少用户都没有点击页面上大块的推广区域中的商品？是因为他们没有看到，亦或是他们看到了然后跳过了那个区域。
场景二：了解用户在界面上的决策过程例如，用户在搜索网站上进行搜索时，每条搜索结果需要呈现哪些信息，才会让用户有点击的意愿，是每条搜索结果的标题最重要还是描述信息、URL或者其他信息最重要？如下图所示，用户使用 Google 搜索 leather tote（皮革手提包），图中呈现的是用户在搜索结果页上的视线扫描路径（Scanpath）。通过分析扫描路径，可以发现用户只有在头两条搜索条目中看了内容摘要，在后三条条目中都只看了标题，而且在第四条的标题上注视的时间最久，同时还瞥了几眼第五条的标题，最后用户点击了第四条。将这个观察结果与测后访谈结合，就能了解用户最终决定点击第四条搜索结果的决策过程。
场景三：了解产品页面布局与用户心理预期是否匹配例如，用户访问 GAP 的在线商店，想要购买一张礼品卡，这时用户会在页面上寻找礼品卡的购买入口。同时，他们会有一个心理预期，认为这个链接可能出现在页面的某个位置。如果这个位置和页面上礼品卡购买的实际位置不一致，就会导致用户寻找的过程受阻，甚至放弃购买。
那么我们在进行页面设计的时候，就需要知道用户是如何进行寻找的，他们预期这个入口会出现在哪里，他们能否理解页面上入口的文案或者icon的含义，以及用户究竟看了多少次这个入口才意识到这就是他要找的目标。这个时候就需要视线追踪技术了。
通过眼动仪获得用户的搜索路径如下图所示，这是准备要购买礼品卡的用户，在页面上寻找购买入口时的视线扫描路径，我们可以看出用户首先在页面的顶端搜索，发现没有找到就马上跳到最下方进行搜索，也就是用户对购买入口的期待首先是页面的顶端，其次是底端。那么我们在设计入口的时候，必须遵照用户的心理预期，如果把入口放在页面顶端或低端之外的区域，很可能会导致用户寻找入口受挫。
场景四：评估视觉设计与商业目标是否匹配当客户网购时，看到一个新产品的图片展示，那么图片上哪些内容能够首先吸引他们的注意力？在形成第一印象的头几秒内，客户首先注意到的是哪些元素？以及形成的印象和商业目标是否一致？
例如，有一个 Web 页面想要营造一个社区的形象，这时有A和B两种页面设计方案，我们可以用眼动技术去进行评估，了解哪个方案中，和社区功能有关的区域更容易获取用户注意。再例如，根据商业目标，我们有若干个设计元素需要在页面上体现，那么用户的注意力是否能够合理地分布在这些区域，是否存在某些元素吸引了用户太多的注意力导致忽略了和商业目标最相关的元素？
场景五：可用性测试中用于深挖可用性问题的原因例如，在一次对某会议网站的可用性测试项目中，所有的用户都成功将几个研讨会加入他们的会议日程表，其中有一个研讨会是需要门票的，同时会有一个图标标识该研讨会是购买门票才能参加。但是当用户在最后提交时被告知需要购买门票时，他们往往会觉得很困惑为什么会有这个要求。那么，虽然可用性测试发现了这个问题，但是研究人员并不知道究竟是因为用户没有看到那个需购票参加的图标，还是用户看到了，但是没有明白其含义，以及要放在哪个位置才最容易被用户注意到。
这个时候通过眼动测试就可以回答这个问题。跑了个热点图如下图所示，通过多名用户的热点图叠加，我们可以看到右下角的门票样式的图标几乎没有被热区覆盖，可见用户都没有注意到这个图标。此外，我们测后询问了用户这个图片的含义，大部分用户都没有理解这个图标的形状代表的是什么。基于这个结果，我们可以得出两个建议：首先是将这个图标放在靠近研讨会的标题，因为眼动数据告诉我们，这个区域能够获得用户足够的关注。其次要重新设计这个图标的样式，提高辨识度。
总之，眼动技术可与传统可用性测试相结合，作为可用性测试中所观察到的行为与用户口述内容之间的桥梁。
以上五个场景仅仅是抛砖引玉，读者也可以根据眼动测试能够获得的数据形式来扩展更多是项目场景。
眼动测试的数据及解读1.基本眼动指标眼动项目中，能够记录到的“眼动事件”主要包括：
注视（Fixation）：即用户视线停留在界面某处，并保持一段时间的稳定的过程。此时用户会对注视到的信息进行理解。眼跳（Saccades）：即用户从一个注视点跳到另外一个注视点的运动过程。一般情况下，眼跳不会对视线经过的信息进行理解。此外，一般眼动仪还可以记录瞳孔直径（Pupil diameter）。有研究显示瞳孔直径和用户的情绪有关。所以这项指标特别适合游戏产品的测试，可以通过对玩家瞳孔变化的监测，了解用户在游戏过程中的情绪变化。那么这些眼动指标分别代表什么含义呢，我们可以从关注度和操作性两个方面来总结：
关注度是指界面上的兴趣区（AOI）对用户的吸引力，具体指标如下：
操作性是指界面上的兴趣区（AOI）对用户使用绩效的影响，具体指标如下：
此外，瞳孔的直径既可以理解为吸引力指标也可以当做操作性指标，一般认为瞳孔直径大小和用户的情绪和认知负荷有关，一般瞳孔越大，认知负荷越高，但是该指标容易受到实验室光线和照明角度的影响，所以需要谨慎使用。
2.热点图（Heatmaps）热点图是眼动数据的一种非常常见的呈现方式。它能够直观呈现界面上各个区域受到用户关注的程度，而且非常有逼格，所以大部分眼动报告都可以看到这种图。通俗地说热点图就是呈现用户在界面上哪些区域看得多哪些区域看得少。一般最终呈现的热点图都是使用多名用户的数据叠加在一起形成的。热点图用颜色的深浅来表示用户的注视情况。注视情况可以是注视点的个数，即某个区域注视点个数越多，热点图上这个区域的颜色就越深。也可以用注视的时长，也就是用户注视某个区域的时间越久，热点图上该区域的颜色越深。Nielsen推荐使用注视时间作为热点图的指标，因为一个长时间的注视点要比“一瞥”来的有价值的多。
热点图虽然很炫酷，但是我们不能止步于此，热点图往往可以帮助我们找到有趣的ideas，这些ideas可以告诉我们在回放用户的注视过程（Gaze replays）中该重点关注什么。
3.兴趣区（Areas of Interest, AOI）在设计测试的过程中，我们可以使用眼动软件在测试材料上画一个区域，这个区域就是兴趣区，例如在对页面广告的眼动测试项目中，我们可以在广告的关键区域，比如产品的外观、品牌logo的位置画一个矩形，把关键区域包裹在矩形中。然后在进行数据分析时，可以用前文介绍的关注度指标来评估这个AOI区域对用户的吸引力如何。可以说画出AOI是帮助我们对眼动数据进行定量分析的必经步骤。
如何开展眼动测试目前公司里常见的眼动仪主要是非接触式红外眼动仪，本文基于该类型眼动仪，介绍眼动项目的大体流程。
1.界定研究问题，设计测试过程眼动测试在心理学研究中属于生理实验，有过相关经验的同学一定能体会到生理实验中任何影响被试（用户）情绪状态的因素都可能会影响实验的结果。因此，无论是科研还是公司的项目，我们都需要进行严谨的实验设计来减少各种误差。设计测试过程涉及到以下几点：界定问题：根据项目需求提出实验假设或者要验证的问题，例如在某次项目中，我们界定的问题是网页上两个banner版本，哪个版本吸引用户的注意力的效果更好。
用眼动指标来定义问题：这一步非常关键，我们可以结合眼动指标，对两个版本banner的效果进行指标定义，例如，可以将“用户的视线首次进入banner区域的时长”作为评估效果好坏的指标，即这个时长越长，说明这个banner越不容易被注视到，也就是吸引注意力的效果越差。
设计测试任务：对于这个问题，我们设计的任务可以很简单，即让用户分别浏览带有两个不同版本banner的静态网页界面，并都限定20秒的浏览时间。
准备测试材料：一般可以直接用实际界面做材料，比如上述对比两个banner效果的项目中，可以截取两个banner版本下的网页界面作为实验材料。
准备实验环境：一般要求测试在专用的房间（实验室）中进行，为了能让眼动仪能顺利记录数据，这个房间需要尽可能确保：
房间低照度，窗户需要使用遮光窗帘隔绝外界光线；②座椅最好是位置能固定的，避免用户在测试过程中移动座椅导致记录不到数据，此外可使用高度可调的座椅，以适应不同身高的用户；干净整洁的办公桌面，避免杂物分散用户注意力；有条件可以设置双屏，一台显示屏用于测试，一台给研究人员进行观察。下图是Nielsen眼动实验室的配置：
2.预测试在可用性测试中，预测试可以帮助我们发现之前设计的测试流程是否有疏漏，对测试脚本进行迭代。在眼动项目中，预测试更加重要，除了测试受阻可能会浪费宝贵用户资源外，眼动测试作为生理实验，在测试过程中的突发情况很容易破坏数据的稳定性。因此，在进行正式眼动测试前，可以自己或者找其他同事走一遍流程，确保每个步骤万无一失。
3.招募用户（被试）用户招募涉及到两个方面，招募要求和人数。首先，对于招募用户的要求，除了本身项目的需要外（比如用户对产品的使用经验），还需要考虑眼动项目的特殊性，由于现在眼动仪的限制，招募的用户需要尽可能符合以下情况，以确保实验顺利进行：
用户可以佩戴眼镜，但镜框不能太粗且不能反光。隐形眼镜则不建议参加；用户不可有较高度数的散光，眼动仪很可能记录不到有散光的这只眼睛的数据；用户双眼都没有任何眼疾，以及眼睑没有下垂；用户没有非常长、浓密的睫毛，或者有涂有较多睫毛膏以及带有假睫毛；用户能够在屏幕前长时间保持坐姿，所以也需要一个舒适的座椅。在实际项目中，难免会碰到用户来到实验室后发现眼动仪无法识别用户的眼球位置，所以在招募的时候，可以留有备选用户。实际上为了避免出现用户到场却无法完成测试的尴尬，我们一般直接招募没有近视没有散光的用户，当然这样的用户招募是有难度的，所以招募多少用户才合理呢？这和眼动测试的产出形式有关，如果眼动测试是为了产出热点图，考虑到热点图是叠加所有用户数据综合分析，所以至少需要30名用户的大样本才能减少生理实验中个体差异的影响，为了给因眼动仪无法获取数据导致的无效用户，Nielsen推荐至少招募39名用户。如果只是为了定性研究用户的眼动轨迹，那么只需要6名用户即可。这里Nielsen总结了一份表格如下：
因此，在时间和经费有限的情况下，研究用户的眼动轨迹比研究热点图来的更划算。当然，还有一种偷懒的方法，就是在测试用户数有限的情况下，观察每位用户的热点图，如果发现大部分热点图可得出的结论是一致的，那么可以挑选几个典型的热点图用于展示。
值得注意的是，如果用户开始测试后，发现始终无法被眼动仪追踪到，那么原则上我们还是要支付礼金，但为了减少损失，这个时候也可以让用户采用发声思维的方式参与测试。另外，在招募用户的时候，招募信息可以提及一些眼动相关的基本信息，但是也不用过于夸大，只要做到用户心里有数，测试时不会太紧张即可。
4.开始测试由于眼动测试的特殊性，在开始测试之前，需要做一些必要的准备工作：
测试材料：除了呈现在屏幕上的测试内容外，我们还需要准备好：指导语（最好是打印稿）、任务清单、用户信息登记表、问卷（如果需要）、纸笔、礼金等。调整坐姿：眼动仪所配的软件是可以将用户在眼动仪的“视野”中的位置示意出来的，我们在调整用户坐姿时，只要让用户的双眼在眼动仪视野的正中即可，必要时调整座椅高度和眼动仪角度。此外，研究人员需要查阅眼动仪的说明书，了解眼动仪的必要参数，例如一般非接触式红外眼动仪会要求人眼距离屏幕的距离保持在50cm~60cm。
当眼动软件提示眼球位置监测状态良好，且用户表示坐姿舒适时，就可以进行下一步了。测试前，最好口头告知用户在整个实验过程中，保持姿势尽可能不变。
眼动校准：这一步非常关键，只有确保校准成功，测试结果才是有效的。研究人员可以手动调节校准的点数，从4点校准到9点校准都可以。一般情况下，我们采用5点校准，当然校准点数越多，校准的效果越好，只是越费时间，可能导致用户疲劳。校准结束后，眼动系统会呈现校准结果，即误差角度，一般双眼的误差都小等于0.5°，那么校准就成功了，否则则需要考虑多次校准（不同品牌眼动仪校准步骤略有不同，可参考说明文档）。
预测试：在正式实验之前，需要用户熟悉测试流程，可以让用户做一遍预测试，预测试的流程和正式实验一致，只是测试材料会有不同。预测试过程中，研究人员可以观察用户是否遇到困难，或者是否会不由自主移动身体导致眼动仪无法追踪眼球运动，如果出现这种情况可以在正式测试前告知用户需要注意哪些。如果测试任务较为复杂，可以让用户在非眼动追踪的条件下，让用户完成一遍操作，以便让用户提前熟悉测试过程。
测后访谈/问卷：正式测试结束后，对用户进行访谈是非常必要和关键的。如果研究人员在测试过程中可以实时看到用户在眼动的轨迹，当发现用户并没有按预期注视某些区域，就可以在测试结束后的访谈中，与用户聊聊，究竟是什么原因导致用户没有留意某个区域，这时用户的解释可以为后续数据分析提供更为丰富的信息。对于测后问卷，则可根据之前设计好的问题收集必要的信息。
眼动测试中的一些误区误区一：对动态界面记录热点图一般报告里的热点图都是静态的，但是如果进行眼动测试的材料是动态的，例如大多数网页会有轮播广告，或者鼠标悬停菜单，那么这些动态元素势必会改变用户的眼动模式，所以所得的静态的热点图上就会有很大偏差。因此，如果要采用热点图来分析眼动数据，需确保测试材料是静态的，比如可以使用网页的截图。此外，对于 AOI 区域，也会受到动态页面的影响，好在目前 Tobii 最新型号的眼动仪已经可以通过设置 AOI 动态位移来解决这个问题。
误区二：制作热点图时没有统一用户的测试时间测试材料呈现给用户之后，眼动仪开始记录数据，这个时候用户在材料界面上的眼动轨迹会被记录下来，那么在制作热点图时，如果没有限定取用户前多少时间的眼动数据，那么用户看 10 秒钟的热点图和 100 秒的热点图将会有很大差异，所以在对比不同用户的数据时，只有统一取测试中指定长度时间的眼动数据制作成的热点图，才有可比性。
误区三：测试过程中要求用户发声思维（Think Aloud）发声思维法在可用性测试中是很常用的一种方法，但是在眼动测试中并不适用。有研究发现，当用户被要求实时说出自己的思维过程时，用户会倾向于注视界面上的元素更久且更频繁，毕竟用户在表达的过程中，会不由自主地将目光停留在所要描述的位置，这种现象与用户平时使用情况不符。所以如果采用发声思维的方法，可能会导致实验结果无法应用于用户实际使用情景。
误区四：仅需要一次校准就可以跑完整个测试理论上这是可以的，但是如果每次测试时间较久，用户难免会疲劳而改变坐姿，这个时候可以考虑在测试间隔让用户休息一下。但是在再次测试之前，最好重新校准再进行测试。另外，用户只要坐姿不变，头部有小范围地运动，对数据影响是不大的。
误区五：眼动仪记录的用户视线位置就是用户真实所看的位置眼动仪受到当前技术的限制，无论校准精度如何，都会存在一定的误差范围，特别是屏幕边缘附近的数据，可能误差更大，所以眼动仪分析软件呈现的结果是经过算法处理后，求得的用户注视点落点的“范围”，这个范围里可能有多个注视点，但因距离接近所以通过算法合并为一。不过只要不使用未经处理的原始眼动数据作为研究对象，就不用担心这个问题，因为眼动仪配套的软件会自动对原始数据进行了修正。
误区六：没有考虑到用户使用经验的影响新用户和老用户，在进行眼动测试时的结果会有很大差异，因为老用户可能已经对界面很熟悉，有些区域他们没有去看不代表这些区域没有吸引他们的注意力，而可能是用户已经很熟悉这块区域是什么。新用户则可能完全不同，他们对页面很陌生，视线会到处看看，这个时候如果他们没有看某些区域，就可以说明这块区域并没有吸引他们的注意力。所以分析数据时，新老用户是要区别对待的。特别是对于热点图，如果将新老用户的结果进行叠加，那结果就可能难以解释了。
以上内容希望能帮助您了解眼动测试的各个过程。如果有机会能使用眼动仪，相信您能体会到眼动技术的魅力：）
参考资料：[1] Kara, Pernice, and, Jakob, Nielsen. How to Conduct Eyetracking Studies[M]. USA:Nielsen Norman Group, 2009.
[2] Agnieszka, Bojko. Eye Tracking in User Experience Testing: How to Make the Most of It[DB/OL]. https://www.researchgate.net/publication/266161907_Eye_Tracking_in_User_Experience_Testing_How_to_Make_the_Most_of_It.
[3] Andrew, Duchowski. Eye Tracking Methodology: Theory and Practice[M]. New York:Springer-Verlag, 2007.
[4] Andrew, Schall, and, Jennifer, Romano, Bergstrom. Eye Tracking in User Experience Design[M]. Singapore:Elsevier Inc, 2014.
作者：江康翔，先后从事社交、教育及B端产品的用户研究工作。
本文作者@江康翔，由@用盐有点咸（微信公众号：用盐有点咸） 授权发布，未经许可，禁止转载。