热图完整指南：如何创建和使用它们

热图是一种流行的转换优化工具，这是有充分理由的。 我们正确地利用了它们，它们是更好地了解您的受众并提供更多价值的有效方式。

那么热图可以回答什么？

什么是热图？

热图是数据的可视化表示。 它们由 Cormac Kinney 在 20 世纪 90 年代中期开发，旨在让交易者战胜金融市场。

在我们的上下文中，他们让我们记录和量化人们用鼠标或触控板做了什么，然后他们以一种视觉上吸引人的方式展示它。

“热图”实际上是一个广泛的类别，可能包括：

1. 悬停地图（鼠标移动跟踪）；
2. 点击地图；
3. 注意地图；
4. 滚动地图。

要对上述任何热图类型做出准确的推断，在对结果采取行动之前，您应该在每个页面/屏幕上有足够的样本量。 一个好的经验法则是每个设计屏幕和每个设备（即分别查看移动设备和桌面设备）有 2,000-3,000 次页面浏览。 如果热图基于 50 个用户，请不要相信这些数据。

什么是网站热图？

网站热图是通过用从红色“最受欢迎”到蓝色“最不受欢迎”的一系列颜色描述您网站上的类别来直观地说明您的用户如何与您的网站互动。

4种类型的热图

由于有几种不同类型的热图，让我们逐一了解它们及其提供的价值。

1. 悬停地图（鼠标移动跟踪）

当人们说“热图”时，他们通常指的是悬停图。 悬停地图向您显示人们用鼠标光标悬停在页面上的区域。 这个想法是人们看他们悬停的地方，因此它显示了用户如何阅读网页。

悬停地图模仿了经典的可用性测试技术：眼动追踪。 虽然眼球追踪对于了解用户如何浏览网站很有用，但鼠标追踪往往会因为一些牵强的推论而达不到要求。

鼠标光标跟踪的准确性值得怀疑。 人们可能正在查看他们没有悬停的东西。 他们也可能将鼠标悬停在很少受到关注的事物上——因此，热图将不准确。 也许它是准确的，也许它不是。 你怎么知道的？ 你不知道。

2010 年，Google 高级用户体验研究员 Anne Aula 博士提出了一些关于鼠标跟踪的令人失望的发现：

• 只有 6% 的人表现出鼠标移动和眼动追踪之间存在某种垂直相关性。
• 19% 的人显示鼠标移动和眼动追踪之间存在某种水平相关性。
• 10% 的人将鼠标悬停在链接上，然后继续浏览页面并查看其他内容。

我们通常会忽略这些类型的热图。 即使您确实查看它是否支持您的怀疑，也不要在其中投入过多的资金。 Simple Usability 的 Guy Redwood 同样对鼠标跟踪持怀疑态度：

我们进行眼动追踪研究已有 5 年多了，可以诚实地说，从用户体验研究的角度来看，眼球运动和鼠标运动之间没有任何有用的相关性——除了明显地注视您即将点击的位置之外。

如果存在相关性，我们就可以立即停止在眼动追踪设备上花钱，而只使用来自网站和可用性会议的鼠标追踪数据。

因此，为什么 Peep 将这些地图称为“穷人的眼动追踪工具”。

这些地图显示的内容和用户的行为之间没有太多重叠，因此很难推断出任何实际的见解。 你最终会讲更多的故事来解释图像，而不是实际的真相。 这篇批评足球运动员动作热图的博文说得好：

“热图有什么作用？ 他们给出了球员在比赛中去了哪里的模糊印象。 好吧，我可以通过在报纸上观看比赛，对球员在比赛中去了哪里有一个模糊的印象。”

虽然一些研究表明注视和光标位置之间存在更高的相关性，但问问自己，可能的见解是否值得冒误导数据或鼓励分析中的确认偏差的风险。

算法生成的热图怎么样？

同样，有一些热图工具使用算法来分析您的用户界面并生成结果视觉效果。 他们考虑了各种属性：颜色、对比度、视觉层次、大小等。他们值得信赖吗？ 也许。 以下是 Aura.org 的说法：

视觉注意力算法，其中计算机软件“计算”图像中不同元素的可见性，通常作为更便宜的替代品出售。 但 PRS 的同一项研究表明，这些算法不够灵敏，无法检测设计之间的差异，并且在预测包装声明和消息传递的可见性水平方面尤其糟糕。

（注意： PRS ，上面引用的另一项研究，销售眼动追踪研究服务。）

虽然您不应该完全信任算法生成的地图，但它们的可信度不亚于悬停地图。

而且，如果您的流量较低，算法工具可以为您提供一些用于可用性研究的可视化数据，包括即时结果，这很酷。 一些检查工具：

• 注意力洞察力；
• 眼睛量化；
• 冯桂。

仅仅因为它是“即时的”并不意味着它是神奇的。 这是基于算法的图片，而不是实际的用户行为。

2. 点击地图

点击图向您显示由聚合点击数据组成的热图。 蓝色表示点击次数较少； 较暖的红色表示更多的点击； 点击次数最多的是明亮的白色和黄色斑点。

这些地图有很多交流价值。 它们有助于证明优化的重要性（尤其是对非优化者而言）以及什么是有效的，什么是无效的。

大照片是否获得大量点击但不是链接？ 你有两个选择：

1. 把它变成一个链接。
2. 不要让它看起来像一个链接。

快速获取汇总点击数据并查看总体趋势也很容易。 只是要小心避免方便的讲故事。

但是，您还可以查看人们在 Google Analytics（分析）中点击的位置，这通常更可取。 如果您设置了增强型链接归因，Google Analytics 叠加层就很棒。 （有些人仍然更喜欢看到直观的点击图）。

而且，如果您转到“行为”>“站点内容”>“所有页面”，然后单击一个 URL，您可以打开任何 URL的导航摘要——人们从哪里来以及他们后来去了哪里。 非常有用的东西。

3.注意力图

注意力图是一种热图，显示用户浏览器查看最多的页面区域，同时充分考虑了水平和垂直滚动活动。

它们显示页面的哪些区域被浏览最多，同时考虑到用户滚动的距离以及他们在页面上停留的时间。

Peep 认为注意力图比其他鼠标移动或基于点击的热图更有用。 为什么？ 因为您可以查看关键信息（文本和视觉效果）是否对几乎所有用户可见。 这使得以用户为中心设计页面变得更加容易。

Peep 是这样说的：

窥视拉贾：

“它之所以有用，是因为它考虑了不同的屏幕尺寸和分辨率，并显示了页面的哪一部分在用户的浏览器中被查看得最多。 了解注意力可以帮助您评估页面设计的有效性，尤其是折叠区域上方。”

4.滚动地图

滚动图是热图，显示人们在页面上向下滚动的距离。 他们可以向您展示用户倾向于离开的地方。

虽然滚动图适用于任何长度的页面，但在设计长篇销售页面或更长的登录页面时，它们尤其相关。

一般来说，页面越长，页面底部的人就越少。 这很正常，可以帮助您确定内容的优先级：什么是必须的？ 有什么好？ 优先考虑您希望人们关注的内容并将其放在更高的位置。

滚动图还可以帮助您调整设计。 如果滚动图显示突然的颜色变化，人们可能不会察觉到页面两个元素之间的联系（“逻辑结束”）。 在 Google Analytics 中很难看到这些急剧下降点。

在较长的着陆页上，您可能需要在滚动停止的地方添加导航提示（例如向下箭头）。

奖励：用户会话重播

会话回放本身并不是一种热图，但它们是热图工具提供的最有价值的部分之一。

用户会话回放允许您录制人们浏览您网站的视频会话。 这就像用户测试，但没有脚本或音频。 与用户测试不同的是——以一种积极的方式——人们冒着实际金钱的风险，因此它可以更有洞察力。

与热图不同，这是定性数据。 您正在尝试检测瓶颈和可用性问题。 人们在哪里无法完成动作？ 他们在哪里放弃？

会话回放的最佳用例之一是观察人们如何填写表格。 尽管您可以为 Google Analytics 配置事件跟踪，但它无法提供与用户会话回放一样的洞察力。

此外，如果您的页面性能不佳并且您不知道原因，用户会话重放可能会发现问题。 您还可以查看用户阅读、滚动等的速度。

当然，对它们进行分析是及时的。 我们花了半天时间观看新客户站点的视频。 在查看了数百（数千？）张热图并回顾了其他研究之后，我们从各种热图中确定了一些反复出现的要点。

如果您想开始使用热图，可以考虑使用以下工具。

2022 年创建热图的 6 种最佳工具

不少公司提供出色的热图工具，提供一系列免费试用、免费增值、付费和完全免费的选项。

付费热图工具

Crazyegg 是一款出色的鼠标跟踪测试工具。 它具有点击热图、滚动图、特定元素点击次数的叠加层和五彩纸屑，您可以使用它来根据引荐来源区分点击。 他们声称与眼动追踪测试相比，追踪准确度高达 88%。 所有计划均可免费使用 30 天； 付费计划起价为每月 24 美元。

Mouseflow 是另一个很好的鼠标跟踪工具。 他们非常重视回放并记录所有鼠标移动——点击、滚动事件、击键和表单交互。 您甚至可以在填写表格时记录访问者的击键。 他们有单独的电子商务跟踪选项。 定价从每月 30 美元起，他们还有一个小型免费增值计划。

Clicktale 是企业级鼠标跟踪软件。 该软件包括热图、会话回放、转换分析和其他高级分析。 您需要联系他们了解定价。

Luckyorange 提供鼠标移动记录和实时访客地图、访客投票和实时聊天软件等工具。 它提供免费试用，付费计划起价为每月 10 美元。

免费的热图工具

Clickheat 是一种开源替代方案，允许您通过在您的站点上单击鼠标来创建热图。

Corunet 需要开发支持。 与 Clickheat 类似，Corunet 允许您根据页面上的点击数据生成热图。

我们从热图测试中学到的 19 件事

多年来，我们已经看过很多热图。 其他研究人员也是如此。 虽然每个站点都不同（我们的永久警告），但还是有一些一般性的要点。

您应该在您的网站上测试这些知识的有效性，但至少，这些普遍的“事实”应该让您了解您可以从热图中学到什么。

1. 对访问者的目标最重要的内容应该放在页面顶部。

人们确实滚动，但他们的注意力持续时间很短。 这项研究发现，当访问者进入非首屏时，他们浏览页面的时间会急剧减少。 用户观看时间分布如下：

首屏： 80.3%
首屏以下： 19.7%

对您的业务目标最重要的材料应该放在首屏。

在同一项研究中，网页底部的浏览时间显着增加，这意味着访问者的注意力在页面底部再次上升。 在那里插入一个好的号召性用语可以提高转化率。

您还应该记住近因效应，它表明一个人最后看到的东西会在他们的脑海中停留更长时间。 仔细制作页面的末尾。

2. 匆忙时，突出的被选中。

加州理工学院的一项神经科学研究表明，在“快速决策速度”下（匆忙或分心时）​​，视觉影响比消费者偏好更能影响选择。

当游客匆忙时，他们会较少考虑自己的喜好，并根据他们最注意的内容做出选择。 一个人越分心，这种偏见就会越强烈，当一个人一开始并没有强烈的偏好时，这种偏见就会变得特别强烈。

如果产品的视觉影响可以超越消费者的偏好——尤其是在像在线购物这样的时间敏感和分散注意力的环境中——那么对网站设计的战略性改变可以严重转移访问者的注意力。

3. 人们花更多时间看你页面的左侧。

多项研究发现，网站的左侧吸引了访问者更多的注意力。 左侧也是首先看的。 总是有例外，但首先记住左侧是一个很好的起点。 在那里显示您最重要的信息，例如您的价值主张。

这项研究发现，网站左侧占据了 69% 的浏览时间——与右侧相比，人们花在页面左侧的时间是其两倍多。

4. 人们以 F 形模式阅读您的内容。

这项研究发现，人们倾向于以 F 形模式阅读文本内容。 这意味着什么？ 这意味着人们略读，他们的主要注意力集中在文本的开头。 他们阅读最重要的标题和副标题，但有选择地阅读其余文本。

您的前两段需要说明最重要的信息。 使用副标题、要点和段落使其余内容更具可读性。

请注意，在浏览基于图片的网页时，F 模式风格并不适用，这一点在本研究中很明显。 人们倾向于水平浏览基于图像的网页。

5. 不要因旗帜失明而赔钱。

当您的访问者因为看起来像广告而下意识或有意识地忽略您网页的一部分时，就会发生横幅失明。 访客几乎从不注意任何看起来像广告的东西。

这项研究没有发现广告中的注视。 如果人们需要快速获取信息，他们就会忽略广告——反之亦然。 如果他们完全专注于一个故事，他们就不会把目光从内容上移开。

有几种方法可以避免在您的网站上造成横幅失明。 大多数问题都可以通过使用在在线营销方面经验丰富的网页设计公司来避免。

6. 使用人物形象时，看他们的位置很重要。

在你的设计中使用人是有意义的——这是一个吸引注意力的设计元素。 但他们的眼睛看向何处也很重要。

几项热图研究表明，人们会跟随模特眼睛的方向。 如果您需要让人们不仅关注美女，还关注她旁边的内容，请确保她正在看那些内容。

传达情感也很重要。 让一个人表达情感会对转化率产生很大影响。 这项研究发现，与冷静地看着号召性用语的人相比，传达情感的人对转化的影响更大。

您最好的选择可能是将这两种方法结合起来——使用一个同时注视页面上所需位置的情感传达者。

7.男人是视觉的； 女性寻求信息。

当被要求查看约会网站上的人的个人资料时，这项研究发现男性和女性之间存在明显差异。 男人在看一个人的侧面时更注重视觉，专注于图像； 女性倾向于阅读更多所提供的信息。

在另一项研究中，男性注视女性胸部的时间比女性多 37%，而女性注视无名指的时间多 27%。 该研究得出结论，“男人是变态，女人是淘金者。”

8. 放弃自动图像轮播和横幅以获得更好的点击率。

这项研究的结论是，在用户有特定任务的两个网站上，主要横幅被完全忽略，包括动画版本。 自动图像轮播和横幅通常不是一个好主意。 它们会导致横幅失明并浪费大量空间。

同一项研究在其中一个网站中发现了这条规则的例外——ASOS 主页上的横幅比其他网站更能吸引参与者的注意力。 有何不同？ 它看起来不太像横幅，更好地融入了页面。

9. 明智地使用对比来引导您的访问者。

在使用热图测试登录页面后，TechWyse 发现颜色对比度的重要性。 主页上关于定价的不可点击的信息元素因其与周围区域的颜色对比而赢得了最多的关注。

经过轻微的重新设计，访客的扫描模式与公司的需求保持一致。

10. 60 岁的人犯的错误是 20 岁的两倍。

当您的目标受众是老年人时，请让您的网站尽可能易于使用和整洁。 在远程用户测试中对 257 名通讯员进行测试时，55 岁以上人员的任务失败率是 25 岁以下人员的 1.9 倍。 失败或放弃给定任务的老年人几乎是老年人的两倍。

年长的人上网速度也较慢。与最年轻的参与者相比，最年长的参与者完成一项任务的时间要多 40%。

即使您觉得网站上的随机任务很容易，但对年长的用户来说可能很难。 如果您的目标受众比平均年龄偏大，请确保测试您对他们的布局。

11. 使用照片引起访客的注意。

人是视觉的。 自互联网诞生以来，网站一直在使用精心挑选的图片来提高转化率，这是有充分理由的。 包括精心挑选的图像几乎总是一个好主意。

使用真人照片。 人们对真实人物的图像反应良好。 在这项研究中，与阅读占页面大部分的文本内容相比，测试对象查看员工照片的时间要多 10%。

相比之下，访问者完全忽略了“真实”人物的库存照片。 不知何故，我们学会了从真实人物的照片中识别出“照片库人物”。 这篇博文是使用股票摄影时可能发生的情况的完美示例。 这也适用于看起来像库存照片的实际照片，因此不要过度编辑您的照片。

这项研究证明你的照片是你 LinkedIn 个人资料中最重要的元素，这项研究在 Facebook 上也发现了同样的相关性。

如果使用得当，大的产品照片也是获得关注的保证方式。

12. 摘要优于博客主页上的完整文章。

这项研究发现，在您的博客主页上使用文章摘要而不是完整文章将使访问者阅读更多内容。

如果您的博客主页上有完整的文章，那么如果访问者对您的第一篇文章不感兴趣，您就有可能失去访问者。 他们会“耗尽”阅读第一篇文章的所有兴趣。

摘要可让您向访问者展示广泛的主题选择，从而增加访问者找到感兴趣内容的可能性。

13. 人们在你的电子邮件上花费的时间不到一分钟。

这项研究表明，67% 的用户在时事通讯介绍中没有注视。 人们倾向于跳过介绍性段落并浏览其余内容。

分配给时事通讯的平均时间为 51 秒； 人们仅完整阅读了 19% 的时事通讯。 他们大多是扫描的，所以让你的时事通讯简短明了，并明确呼吁采取行动。

14. 将 A/B 测试与点击图相结合以提高效率。

VWO 的人员发现，将近 25% 的主页流量都流向了顶部菜单中的一个微小的“定价”链接，而主要的号召性用语按钮仅获得了总点击次数的 5%。

他们将点击地图知识与 A/B 测试相结合，以找出更改后的主页的哪个版本效果更好。

当您将点击地图的知识与 A/B 测试相结合时，您可以多次提高点击地图的有效性。 CareLogger 通过更改号召性用语按钮的颜色，将转化率提高了 34%。

15. 在原价旁边显示折扣价会增加满意度。

受丹·艾瑞利 (Dan Ariely) 的《可预测的非理性》一书的启发，罗伯特·史蒂文斯 (Robert Stevens) 对 60 名随机人员进行了一项测试，以了解相对论如何影响日常决策。

人们接受了冰沙的两种不同货架布局测试。 第一个版本只有打折的“Innocent”冰沙可见，没有同品牌的全价冰沙。 第二个版本还包括一些正常价格的冰沙。

虽然打折冰沙的价格没有变化，但当人们也知道原价时，他们对购买的产品会更加满意。

16–19。 Eyetrack III 新闻门户研究

在 Eyetrack III 研究中，对几十个人进行了一个小时的观察，因为他们被要求访问模拟新闻网站和真实的多媒体内容。

16. 人们的视线先是停留在页面的左上角，然后在右侧的某个区域徘徊。 只是在一段时间后，人们才开始进一步探索页面下方。
17. 人们首先看到的是显性标题，尤其是当它们位于左上角时。
18.使用较小的字体进行重点阅读。 更大的字体会导致更多的页面扫描，因为人们会四处寻找引起他们注意的单词或短语。
19. 标题的第一句话很重要。 如果第一句话吸引了访问者，他们很可能会继续阅读。 你只有不到一秒钟的时间来引起他们的注意。

他们能做的事情太多了，值得记住的是：热图并不适用于所有情况。

热图有什么问题？

热图的问题让人想起关于醉汉和灯柱的古老格言——人们用它来支持而不是照明。

忽略上面讨论的一些数据不准确性会让您进入一个充满潜在偏见的世界，尤其是当热图是您的主要转化研究时。

Malwarebytes 的优化主管 Andrew Anderson 说得很好：

安德鲁·安德森：

没有什么比人们过度关注人们点击的地方更能说明对费率和价值缺乏理解的了。

更多或更少的人点击好事还是坏事？ 点击次数最多的东西是最重要的吗？ 最有影响力？ 如果有两倍的人点击这个东西会发生什么？ 是否必须点击很多东西才能产生影响？ 是否必须点击它？

最后，热图提供了一千多个问题，但无法以有意义的方式回答一个问题。

我们所知道的是，大多数人会利用他们的偏见来确定物品的价值，并以此来过滤所有传入的信息。 他们会将最活跃的与最有价值的相混淆。 它们将默认为线性速率模型，这是最不具有代表性的模型类型。 他们会尝试让更多人访问页面上的某个步骤或某个项目，而没有真正了解该更改的相对价值或效率。

更糟糕的是，他们将使用热图或任何基于点击的指标作为继续讲故事的方式，并继续混淆他们希望发生的事情与最适合网站或页面的事情。

热图在较高层次上很有用，并且可以作为一种将问题区域传达给组织中分析能力较低的人员的方式。 它们也可以作为转换研究和分析的良好起点。

但几乎所有它们带来的洞察力都可以从不同的分析工具中收集到，而谷歌分析往往为解释、讲故事和偏见提供较少的回旋余地。

换句话说，热图是优化器武器库中的重要工具，但不应该成为项目和测试计划的万能工具。

结论

热图看起来很酷。 如果使用得当，它们可以提供巨大的价值）：

以下是热图可用于改进营销的一些可能方法。

• 算法热图可以让低流量网站了解人们如何使用他们的网站。
• 点击地图可以提供有关人们点击和未点击位置的高级视觉效果。
• 注意力地图可帮助您了解网站的哪些部分对所有用户在所有浏览器和设备上最可见。 它们帮助您决定将您的价值支柱和其他重要元素放在哪里。
• 滚动图可以帮助您设计更长的着陆页，并让人们在页面上向下移动（同时优先考虑内容位置）。
• 用户会话回放是您武器库中不可替代的工具。

但是你不应该仅仅依靠热图来进行转化研究。 结果充其量是有限的，最坏的情况是误导性的，加剧了偏见并提供了虚幻的见解。