眼动追踪 CSS-Tricks.com

早在 10 月初，我参加了 ConvergeFL 并进行了一次演讲。 JD Graffam 来自 Simple Focus 以及他的团队也将在那里举办关于眼动追踪的研讨会。我们设法在现场为 CSS-Tricks.com 进行了一次真实的眼动追踪测试。

时机很好，因为我当时正准备完成该网站的 v10 版重新设计。使用眼动追踪，您必须让用户查看一些内容才能使其发挥作用（我知道！）。但同时，设计仍然足够灵活，我不怕做出改变。

这是 Simple Focus 从这些测试中创建的亮点视频

简单来说，我们测试了四个人，每次测试大约 45 分钟。有一个脚本需要遵循。脚本中大约有五个问题。每个问题都提供了一些背景信息，然后询问用户一个问题/要求他们在网站上执行一项任务。例如

在 CSS-Tricks 上查找有关全宽视频的信息。

然后他们会照做，并一边操作一边说出自己的想法。然后，针对每个问题都会进行后续跟进，以获取更多关于该任务执行情况的信息。

如果您有兴趣查看完整的个人测试环节，我将在此处发布三个（其中一个受测者的眼球“无法测试”。显然，这种情况会发生）。绿点，如果不明确，就是他们眼睛注视的地方。

眼动追踪测试需要很多准备工作。这不是您可以简单下载并通过 iSight 摄像头或类似设备就能使用的软件。有一些独立开发者以低成本的方式来做到这一点，但通常情况下，眼动追踪设置的成本相当高。Simple Focus 使用的系统是 Mirametrix。由于其价格远低于市场上的其他产品，因此他们在市场上颇具颠覆性。即便如此，您仍然需要花费 10,000 美元购买所需的硬件和软件，即使使用 Mirametrix 也是如此。

硬件和软件并不是您唯一需要的。您还需要一个合适的场所来进行测试。一个安静的隔离房间供测试人员和被测试人员进行测试，并运行测试环节。另一个房间则供另一名团队成员和网站所有者使用。此外，您需要准备一个脚本并确保其经过精心打磨。另外，还需要找到一群愿意做一些相当无聊的工作并在 45 分钟内谈论它的人。这不是一件容易的事！

我从这次测试中学到了很多东西。我们发现了损坏的地方。我们发现了一些很容易改进的小问题。我们发现了一些需要大量工作才能改进的问题。以下是从测试环节的笔记中摘取的一个页面示例

在实时观看测试环节时，我在网站的 GitHub Issues 中记下了一些快速要点，并正在逐步解决这些问题。我认为这是长期以来真正帮助过该网站的一件事：我每天都会更新一些小东西。设计上的小怪癖、旧文章中的信息、演示中的代码等。这里的东西不会停滞太久。因此，我收到的关于该网站的每一封电子邮件或推文都会得到关注。这次眼动追踪研究就像对这些内容进行快速射击一样。

感谢 JD Graffam、Patrick McNeely、Casey Zumwalt 和 Simple Focus 的全体成员对此次测试提供的帮助。如果您对眼动追踪感兴趣，请与他们联系。如果您对重新设计该网站的整个过程感兴趣，可以在 The Lodge 上观看整个过程。