在使用着陆页热图之前你需要知道的一切

已发表: 2017-08-02

Cormac Kinney 的软件最初是作为一种帮助华尔街交易员玩弄股票市场的工具。它将金融数据变成“红色和蓝色方块的发光马赛克”，称为“热图”，用颜色向交易者发出何时买入或卖出的信号。

二十多年后，受益于热图及其提供的见解的不仅仅是交易者。营销人员（以及现在的 Instapage 客户）也在使用它们。通过这样做，他们可以准确了解潜在客户在其网页上的行为方式。

什么是热图？

热图是一种数据可视化，它展示了访问者如何使用颜色编码系统与网页进行交互。例如，看看可能是有史以来最著名的热图（至少是数字营销人员），它显示人们在网络上以 F 形模式阅读：

地图的红色和黄色部分表示观看次数较多的区域。蓝色是游客最少看到的地方。

这一特定数据是 Nielsen Norman Group 从 2006 年眼球追踪研究中收集的，该研究监测访问者在遇到网页上的文本时的注视情况。但是像这样的测试并不是您可能会在网络上看到的那些。

眼球追踪热图与鼠标追踪热图

来自眼球追踪实验的热图是最准确的，但它们也是最昂贵和最不方便的。像上面的 Nielsen Norman 那样的研究通常在受控环境（实验室、内部）中进行，研究团队或昂贵的硬件会在访问者与您的网页交互时观察他们的眼睛。这些运行的成本可能高达数千美元。

因为对于大多数企业来说聘请整个研究人员团队是不可能的，所以许多企业转而使用鼠标跟踪软件。与监控实际的眼球运动相反，鼠标跟踪软件监控访客的鼠标运动，如点击、滚动和悬停。

由于这种方法不需要正式的实验室环境或企业的大量预算，因此更容易获得。今天，您可以安装鼠标跟踪软件并立即开始监控访问者的行为——并且一些研究表明，几乎与正式的眼动追踪研究一样准确。

左边的热图是从一项正式的眼动追踪研究中产生的，而右边的热图是通过鼠标追踪产生的。根据 ClickTale 的说法，同时使用这两种技术的实验表明，它们的结果之间存在 84-88% 的相关性。

基本上，在某些情况下，人们移动鼠标的位置和他们看起来的位置往往重合（稍后会详细介绍）。

可用的不同类型的鼠标跟踪热图

当人们提到“热图”时，他们指的是显示用户行为的可视化。但是，用户行为并不总是相同的。一些热图显示人们如何滚动，而其他类型可以识别人们用鼠标悬停在屏幕上的位置。鼠标跟踪热图的主要类型如下：

点击热图

点击地图显示访问者在您的网页上点击的位置。它们对于发现流行链接或访问者可能认为是链接但不是链接的区域特别有价值。

以这张特定的地图为例，它发现页面上点击次数最多的元素是产品的照片：

Brothers Leather Supply Company 的创始人 Adam Kail 解释了这张地图如何在产品页面设计方面改变了企业的重点：

热图增强了我们对所有产品页面上精美图像的需求。 我们过去常常沉迷于正确的副本——但现在我们花时间让图像恰到好处。 每张图片都显示了我们包的不同用途或角度......未来的客户想知道当有人穿着它时，当它装满了手提电脑时，手提包会是什么样子。

归根结底，这就是热图分析的目标——发现可用于优化用户体验的真实访客行为。为了说明这一点，让我们看看另一个来自手机点击后登陆页面的点击地图：

以红色轮廓显示，您会注意到点击率最高的手机远低于折叠屏，位于几个不太受欢迎的型号下方。那么，如何使用这张地图来改善用户体验呢？

将折叠上方较不受欢迎的模型之一替换为红色轮廓的模型。这样，人们就不必去寻找它。

也许与点击后登陆页面设计最相关的热图来自 VWO 对客户 Pair（现在是 Couple）的案例研究。

这是该应用程序的原始主页：

这是该主页的点击热图的样子：

你注意到 Pair 的增长营销人员 Lim Cheng Soon 在这张热图中做了什么吗？他说：

结果，我发现太多人点击顶部的导航栏而不是点击转换按钮（链接到 AppStore 和 Google Play）。 所以我提出了一个理论，认为在转换按钮周围有太多“分心”并不是一个好主意。
因此，我根据消除转换按钮周围“干扰”的理论进行了几次 A/B 测试。

结果？

隐藏按钮上方的“免费下载”文本可将转化率提高 10%。
隐藏导航菜单提高了 12% 的转化率

Soon 的“分心太多”的理论根本不是捏造的。正如其他几项测试所表明的那样，导航链接会大大降低转化率。在您的点击后登录页面上，最好将它们从您的设计中排除。

像上面这样的点击地图特别有价值，因为点击信号意图——动作更有可能是有目的的，而不是随机的。当有人点击时，他们这样做是因为他们想了解更多关于特定元素或其对应的内容（CTA 按钮、“关于我们”链接等）。

滚动热图

“你不会读完这篇文章”是 Slate 在 2013 年发表的一篇文章的标题。在其中，作者 Farhad Manjoo 透露了 Chartbeat 和在线杂志联合热图分析的结果，该结果表明很少有人阅读全部通过文章的方式。

尽管令人印象深刻的 86.2% 参与度发生在首屏下方，但只有 25% 的人滚动超过 1600 像素（大多数 Slate 文章的长度约为 2,000 像素）。像这样的洞察力是滚动地图有助于发现的东西——尤其是在较长的页面上。

在点击后登陆页面术语中，这很可能是一个销售页面。这些精心起草的有说服力的营销材料可以增长到巨大的比例。例如，这一篇超过 5,000 字（点击此处查看整页）：

像这样的页面上的滚动图可以告诉它的创建者人们在阅读过程中的哪些方面。 Peep Laja 说，有了这些数据，创作者可以假设下降的原因——乏味的副本、烦人的广告，甚至背景颜色的变化：

如果你有强烈的线条或颜色变化（例如，白色背景变成橙色），这些被称为“逻辑结束”——人们通常认为后面的内容不再与之前的内容相关联。

从那里，优化器可以测试让人们阅读整个页面的潜在方法 - Nielsen Norman Group 的一项实验表明这当然是可能的：

这是罕见的，但可能。

请记住，上面的地图是眼球运动，而不仅仅是滚动深度。这意味着它比您在滚动地图上看到的更详细，滚动地图只会显示您的访问者在页面上前进了多远。以下是 RJMetrics 网站上的测试示例：

此网页上查看次数最多的区域（按颜色）是：

白色的
红色的
黄色
绿
蓝色

我们知道您在想什么：页面顶部的浏览量怎么可能低于中间的浏览量？

好吧，来自 Chartbeat 的研究表明，许多人倾向于在页面加载之前就开始滚动，这意味着他们会错过最顶部。

他们的研究还表明，许多页面的参与度在折叠以下达到峰值：

这可以解释为什么折叠附近的区域是红色的，而其上方的大部分区域是黄色的。

从这张地图中，RJMetrics 的前前端开发人员 Stephanie Liu 提出了以下假设：

我的假设是，与原始定价页面相比，将按钮移动到白色热滚动地图区域会导致设计具有更高的转化率。 更多的人会关注按钮，因为他们的眼睛会在那里停留更长时间。

原始页面如下所示：

她创造的变体看起来像这样：

结果是转化率提高了 310%。

此滚动地图测试的两个重要内容是：

1. 使用滚动地图，您将不知道人们为什么滚动得这么远。 您和您的团队必须进行一些假设检验才能弄清楚。

2. 有时您不一定需要知道为什么人们会在他们所在的地方下车。目标并不总是让人们更深入地滚动。在 Stephanie 的案例中，只需将 CTA 按钮移动到更受关注的区域即可为 RJMetrics 带来巨大的转化提升。

悬停热图（又名运动热图）

您的眼睛会在鼠标光标所在的位置移动——这是建立在悬停热图（也称为“移动”热图）基础上的一般假设。

这些地图的准确性取决于眼球运动和鼠标运动之间的相关性，早先引用的研究表明，这种相关性约为 84-88%。然而，其他消息来源并不相信它那么高。

2010 年，Google 的 Anne Aula 博士发布了她关于悬停热图准确性的发现：

6% 的人表现出鼠标运动和眼球运动之间的垂直相关性。
19% 的人表现出鼠标运动和眼球运动之间的水平相关性。
10% 的人将鼠标悬停在特定页面元素上，同时扫视其周围区域。

谷歌和卡内基梅隆大学的另一项实验发现，鼠标运动和眼球运动之间有 64% 的相关性。

毋庸置疑，对运动热图的研究无处不在。但是现实生活中的应用呢？

嗯，这也到处都是。

这是 North Face 用于优化其结帐页面的悬停热图：

在左侧，版本 A 似乎显示右侧边栏上的横幅比下方的 CTA 按钮（白色圆圈）更受关注。版本 B 考虑到这一点并使用按钮切换横幅（再次用白色圆圈）。

结果是转化率提高了 62%。

这是另一个似乎显示的悬停地图……好吧……亲眼看看：

这张地图似乎没有明确的结论。有很多悬停。到处。

总的来说，从悬停热图研究及其实际应用中最重要的一点是：

使用悬停贴图为您的设计提供信息，但用 EyeQuant 的 Rory Gallagher 的话来说，“不要过度概括。”

如果您的地图看起来像 North Face 制作的地图，那么您可能有一个用于 A/B 测试的有价值的假设，如下所示：

“我们从悬停热图中注意到，结帐页面 CTA 按钮上方的区域似乎吸引了更多访问者的注意力。因此，我们相信通过切换上面带有促销横幅的按钮，我们可以提高结账率。”

但是，如果您从第二个热图中得出一个测试假设，那么您可能犯了确认偏差——从测试中寻找特定结果只是因为它证实了您对某事的信念。一个错误的延伸可能看起来像这样：

“我们从悬停热图中注意到，‘如何做’这个词似乎比其他任何东西都更能吸引注意力。因此，我们认为未来所有博客文章的标题都应以“如何做”开头，以吸引读者。”

“如何”是开始标题的好方法，但该测试并未表明这一点。以怀疑的心态处理热图结果，只有在有明确理由时才进行测试。

负责任地使用热图

热图对于揭示人们如何使用您的网页很有价值，但它们不应该是您用来这样做的唯一工具。仅此而已，他们描绘了您用户的不完整图片，并依赖他们作为潜在客户行为的唯一指标可能会误导您。 Optimizely 的团队提供了一个示例：

查看表单的热图时，它可能会显示用户正在单击第一个字段，而对后续字段的单击较少。
这可能表明用户在填写第一个字段后退出该过程。 然而，热图没有显示的是，用户是否使用键盘而不是鼠标来浏览表单字段。

出于这样的原因，将您的热图与来自其他工具（例如 Google Analytics 或 Instapage Analytics）的洞察力相结合，可以更全面地了解您的潜在客户在您的点击后登录页面上的行为。

但是，这种“更完整的形象”有什么价值吗？如果你没有收集足够的用户数据，就不会，Peep Laja 说：

在您相信任何结果之前，您需要每页/屏幕有足够的样本大小。 粗略的估计是每个设计屏幕有 2000-3000 次浏览量。 如果热图基于 34 个用户，请不要相信其中的任何一个。

归根结底，重要的是要记住热图不是数据。它们只是以易于理解的方式组织数据。它们显示点击、滚动和悬停。这些鼠标移动意味着什么由您决定。

始终将您的所有广告连接到个性化的点击后登录页面，以降低您的每次客户获取成本。立即注册 Instapage Enterprise 演示，开始创建您的专用点击后页面。