网站热度图是一个数据可视化工具,可以帮助企业了解他们网站上的特定页面的表现。
简而言之,网站热图是以图表或地图的形式对数据进行图形化表示,使用不同的颜色表示不同的数据集和数值
网站热度图使用从暖到冷的颜色方案来显示网页的表现,最暖的颜色表示最高的访问量,最冷的颜色表示最低的访问量。
它使用颜色来表示一个页面不同部分的访问者参与程度。
如果你想知道一个网页的哪个部分的访问量最高,访问者点击的次数最多,访问者是否点击了 CTA,他们是否到达了页面的底部,以及许多这样的访问者行为洞察力,网站热度图是正确的选择。
网站热图收集所有的数据如何访问者的行为在您的网页,并帮助您做出明智的优化决策。它们消除了由数字引起的混淆,并以易于理解的方式表示数据。
网站热图主要有5种类型: 热图、点击图、滚动图、鼠标跟踪热图和眼球跟踪热图。
热图帮助你收集访问者的行为洞察力,这样你就可以使用这些数据来定制你的网站,以满足访问者的期望。它直观地展示了你网站上的各种页面在提供良好的用户体验和回答访问者查询方面的表现。使用 VWO 提供的免费热图工具,了解访问者如何参与到页面元素中。
点击地图可以显示你网页的哪些部分被点击最少和最多。除了直观地显示网页中最受欢迎的元素外,点击地图还可以帮助确定网页上的导航空白。
使用点击地图,你可以追踪点击:
滚动地图是访问者滚动行为的直观表示。它显示了用户向下滚动页面的距离以及他们花费时间最多的部分。它会告诉你有多少访问者滚动到页面的底部,有多少访问者滚动了页面的50% 但没有100% ,或者大多数访问者放弃了页面的哪些地方,等等。
提示: 基于滚动地图报告,将网页中最关键的元素放置在访问者花费最多时间的部分。
滚动地图不仅用不同的颜色显示数据,而且还反映了一些百分比,这些百分比是为了让你知道哪些用户在你的网页上移动得更远,哪些用户没有移动。它们有助于识别被忽视的重要内容。
使用滚动映射可以:
鼠标跟踪热图(也通常被称为悬停地图,注意力地图,移动地图)显示哪些区域的访问者悬停他们的光标最多。
你可以使用鼠标跟踪热度图来:
一个有趣的事实是,访问者往往徘徊在他们认为吸引人和有趣的地方,或者他们需要更长的时间才能理解,因为这些信息可能会令人困惑或难以理解。这就是为什么鼠标跟踪热度图可以帮助确定哪些区域是游客花费时间最多和最少的。
然而,重要的是要记住,以上的可能并不总是正确的,特别是对于在线新闻网站。这是因为一种叫做“帕克”的东西。游客是那些把光标放在一个地方的游客,不管他们在读什么,在哪个区域,或者他们是否在阅读。忽略参与者影响你的鼠标跟踪热图数据的可能性通常会增加数据污染的机会。解决这个问题的一个方法是根据花费的时间进行细分。
例如,假设您的新闻站点上流量最高的文章的阅读时间为6分钟。给访问者额外的4分钟缓冲时间,你可以将访问者分成只包括那些在页面上花费不到10分钟的用户。通过这种方式,您不仅可以在您的分析中包含实际阅读文章的访问者和用户的数据,而且还可以消除因参与者的存在而造成的数据污染风险。
鼠标跟踪热度图经常与眼睛跟踪热度图混淆。根据注视长度和访问者浏览图片的次数,眼球追踪热度图通过追踪访问者眼球的运动,以”热点”和”冷点”的形式表现出网页中最吸引访问者的元素。
人类有一种倾向,喜欢视觉胜过其他任何感官,这正是可以派上用场的许多企业。例如,一个电子商务商店可以受益很多,如果他们可以找出什么访问者最看当他们来到他们的网站。了解哪些部分最能吸引访问者的眼球,并确定哪些元素可以从放置在眼睛互动最多的部分中受益,这可以帮助企业对其网站进行数据支持的更改,以满足访问者的期望。眼动跟踪热度图对于确定网站上某些图片的吸引力非常有用。
你可以使用眼球追踪热度图来:
传统的或定量的用户分析工具只能告诉你有多少访问者访问了你的页面,有多少访问者转换了页面,但是无法回答在这两个步骤中究竟发生了什么,从而导致了最终的行动。在这里,理解这些互动的质量开始发挥作用。比如说,一家电子商务商店每天大约有1000名新顾客,其中大约有20名新顾客在购买商品。对于商店老板来说,为了理解为什么剩下的980名游客没有转化,他们需要知道导致他们没有买任何东西就离开商店的各种原因。原因可能是,无法找到“添加到购物车”按钮,或者无法找到运输信息,或者花费太多时间创建用于结账的来宾帐户等等。这样的信息可以很容易地发现使用定性分析工具,如热图。热点地图是一个不断给予的礼物。热图是最强大和最有效的诊断工具之一,通过它,你可以发现访问者如何与你的网页互动的大量洞察力,并利用这些洞察力来提高你网站的参与度和设计一个更智能的用户界面。
测量网站性能: 用不同的热度图颜色描绘不同的性能水平,热度图即时突出主要问题在您的网站上。通过点击地图跟踪访问者的点击模式,滚动地图确定最佳页面长度,鼠标跟踪地图告诉访问者在浏览你的网页时在哪里徘徊,你可以很容易地确定你的网站有多么吸引人,以及它在保持访问者对你的品牌感兴趣方面做得有多好。
简化数字数据: 如上所述,热图补充了由数字创建的假设,并以易于理解的方式表示数据。基于它使用的配色方案,你可以很容易地确定你的网页的哪些部分表现良好,哪些部分有改进的余地,哪些部分需要彻底重新设计。例如,假设你拥有一家电子商务商店,你想在你的产品页面上设置一个热度图,看看它在回答所有访问者的问题方面表现如何。在选择了3000个访问者的样本大小和2周的样本周期后,你开始热图。在完成示例周期之后,您将在单个屏幕上获得产品页面性能的图形表示。只要看看颜色的浓度,并进一步分析每个部分的性能和参与潜力。如果你要使用来自 GA 和 Excel 这样的工具的数据来做同样的练习,那么对所有表明每个部分性能的数据进行排序所需要的时间将会超过两倍。此外,手动输入每个数字数据也会增加错误和数据损坏的机会。
了解访问者的想法: 如果你不考虑访问者希望在哪里找到什么,你可以重新设计整个网站,但仍然不能提高其性能。热度地图可以帮助你做出确保符合访客期望的变化。热图能做的最好的事情就是准确地告诉你访问者在你的网站上的行为以及他们对事物的期望。简而言之,网站热度图可以帮助你了解每个访问者的想法,并做出相应的改变。你可能会争辩说,即使是表格和调查也可以达到这个目的。但是想想看。回想一下你填写的所有反馈表格和调查问卷。不可避免地,在填写表格和调查问卷的过程中总会发现一些偏见,尤其是在回答个人问题时,以及与你相关很长时间的话题等等。Heatmap 消除了这种偏见,因为你的访问者来到你的网站寻找特定的东西,并期望在特定的地方找到他们正在寻找的东西。这两个参数结合起来形成了你的访问者的浏览模式。热点地图正是这样追踪的,并给你有意义的和可行的见解。
优化你的网站转换率:以上所有的好处都有助于优化你的网站,使其成为最好最聪明的版本。每一个在热图上被追踪的访问者都意味着为优化你的网站增加了可行的见解让我们举个例子来理解热度图是如何帮助整个网站优化的。对于任何在线业务,主页是每个访问者的旅程开始的地方(除非他们直接降落在一个产品或通过外部链接提供页面,付费广告等)。无论他们是继续购买产品,订阅时事通讯,填写引导表单,还是不转换就离开,他们的整个旅程都从主页开始。让我们假设你拥有一家电子商务商店,你想看到访问者对你的主页的反应。因此,你设置了一个为期2周的样本期和3000新访问者的样本流量的首页热图。热图成功地运行在样本周期,并给你关于访问者行为的深刻见解。在查看了由此产生的热度图之后,你注意到你的主页有一些部分吸引了大量的访问者。这些是页面顶部的部分: 英雄形象、主页标题和产品评论。你还注意到的是,没有很多访问者滚动到主页的底部,这是你放置你的主页的主要 CTA-“订阅我们的每月风格指南”。
现在你有了所有这些见解,除了让你知道访问者对你的网站的看法之外,它们还有什么用处吗?
现在你知道了Hero Image,主页的标题和产品评论得到了最多的关注,你可以把这些部分做得更好,也可以在这些部分中添加其他重要信息。你也可以改变你主页的主要 CTA 的位置,把它放在折叠的上面,放在一个可以得到最大关注的部分。这些改变将会使你的主页变成一个符合访问者期望的版本. 因此有助于提高你网站的转化率。
在 CRO 内部,热度图是一种质性研究分析工具,可以根据访问者的行为对网站进行修改。您可以设置热度图,分析结果,基于它们创建变量,对照原始版本测试变量,并部署获胜版本。你可以做一些小的改变,比如改变 CTA 的位置,页面的长度,以及一些大的改变,比如重新设计特定的页面,完成网站的重新设计,等等
没有网站的热度地图 | Website Heatmap 与网站 Heatmap |
不知道访问者是如何参与你的网页的 | 实时跟踪访问者如何参与你的网页 |
根据你的直觉和猜测改变你的网站 | 使用网站热图生成的访问者行为数据进行数据支持的更改 |
仅仅满足于访问者没有转化的信息 | 了解访客为何不隐蔽 |
没有关于浏览模式和特定用户群体期望的洞察力 | 切片和骰子,并深入到特定的浏览模式的部分你的观众 |
根据常见的行业最佳实践进行设计更改,这些最佳实践可能适用于您的网站,也可能不适用 | 为了更好的用户体验和更智能的用户界面,根据直接访问者的行为洞察力进行设计改变 |
现在你知道了使用热度图的好处,你肯定会有大量的想法和假设需要通过访问者行为数据来验证。这部分将装备你一步一步的知识,你可以如何建立网站热图上的任何你的网页,然后验证你的假设。
设定目标: 每当你建立一个网页,它总是有一个最终目标。每个企业在实现目标的道路上都面临着障碍。在决定使用网站热度图之前,你必须确定一个需要访问者行为数据来解决的问题区域。一旦你确定了问题区域,你就可以决定你想要使用的热图的类型。另一个重要的原因是,你应该在热映射练习开始时设定一个目标,那就是你的分析应该从你的目标出发。
例如,如果你是 B2B Saas 企业,那么也许你会想使用网站热度图来识别网站注册页面上的干扰。如果你是一个新闻网站,你可能想要使用滚动地图来找到你的文章应该的最佳长度。或者,如果你是一个电子商务企业,你可能想要使用点击地图来找出哪里的访问者点击你的主页最多。在确定问题区域并设定目标之后,建立网站热图的过程就开始了。
选择正确的工具: 使用网站热度图的第二步是选择一个具有正确功能的工具来帮助回答你所有的问题。随着网站热图需求的上升,许多热图工具也浮出水面。并不是所有的系统都能提供相同的功能。找到最好的工具的关键是确保你选择一个允许你自定义你的样本流量,根据用户当前的业务需求来划分用户,并且允许你自由地深入研究采购的数据,同时适合你的预算。可以参考像 G2Crowd 和 TrustRadius 这样的网站,它们根据用户验证评论对商业软件进行排名
目标 | 网站类型热图 |
确定网页的理想长度 | 滚动热图动 |
确定哪些部分的访问者徘徊在最多和最少 | 鼠标跟踪热度图 |
识别访问者预期的超链接机会 | 点击热图 |
测试网站的导航性 | 热度图和点击图 |
在铅收集表单、注册表单和类似表单中确定摩擦区域 | 点击图和鼠标跟踪热度图 |
确定内容片段的理想长度 | 滚动热图 |
发现像呼叫行动按钮(CTA)这样的关键元素是否得到了足够的关注 | 点击地图和鼠标跟踪 |
确定一个页面的主要 CTA 是否位于最受欢迎的部分 | 热度图和点击图 |
确定你网页上的图片是否会分散访问者转换的注意力 | 眼球追踪热度图,点击图和热度图 |
一旦你完成了你想要深入了解的页面,继续在它们上面建立热图。每个工具都会要求你在要分析的页面上安装一个智能代码,这样就可以在上面绘制热度图。这个智能代码使工具能够开始跟踪点击和移动。
然而,仅仅设置这个工具并不足以收集有洞察力的热图数据。为了收集有意义的数据,你需要设置你的样本大小和样本周期,这是你的整个流量的代表,否则,数据收集将只代表一半的地面现实。你的样本大小应该包括每一个可能会影响你的网站性能的部分的访问者。理想情况下,您的示例周期应该涵盖一周中的所有天数,因此它可以跟踪也应该被设置牢记诸如销售、节假日等可能影响数据收集的外部元素。
一旦你完成了前三个步骤,开始网站热图,这样它可以收集尽可能多的有见地的数据,供你使用。
当你在你的网页上建立网站热度图的时候,重要的是你要告诉访问者关于跟踪匿名点击行为的 cookies,这是为了网站性能分析,并得到他们的同意。你不想也不应该违反任何旨在保护用户信息和隐私的规定。
分析热度图数据: 第四步是分析收集到的数据。这是整个网站热图工作过程中最关键的一步。大多数营销人员在分析网站热度图时面临的最常见的问题是他们不知道从哪里开始,对热度图数据的分析根据你使用的网站热度图的类型而不同。
热度图: 使用热度图,你可以得到一个基本方向的部分和元素在你的网页上得到最多和最少的关注。你可以使用热度图来识别页面中最受欢迎的部分,识别那些阻止访问者点击你主页上的主 CTA 的干扰因素,等等。绘制热图很容易,但如果你对热图的分析有缺陷,那么它将无法给你有意义的见解。假设你刚刚重新设计了整个网站。为了了解访问者对此的反应,你可以在其主页上绘制一张热度图。您将样本规模固定为1000个访问者,并在确定的样本期间开始数据收集。样本周期结束后,您就可以开始分析收集到的数据了。经过分析,数据显示,500名游客对新设计作出了积极的反应,并将其转换。因此,不需要进行任何进一步的研究,你就可以以50% 的转化率部署你的新设计作为你的最终设计。
分析是成功的,而且过分正确? 错!
许多市场营销人员一旦发现新设计带来了50% 的转化率,就会停止对热度图的分析。如果你考虑的高层次的目标是找出访问者对新网站的反应,那么是的,分析已经完成。但是为了收获你的热图所能提供的每一丝洞察力,你应该深入探究并问问“为什么”——为什么其他50% 的游客没有转化?有50% 的游客转变了信仰,有什么特别之处?等等
获得上述问题答案的最佳方法是分析热图生成的分段数据。由于您没有对样本访问者进行细分,所以您没有注意到在转换的500个访问者中,有400个是新访问者,100个是返回访问者。如果你把你的样本分成新访问者和返回访问者,你的网站热度图数据会显示,虽然80% 的新访问者对新设计反应良好并进行了转换,但只有20% 的返回访问者认为新设计有吸引力。
现在你已经成功地识别出回访者对你的网站重新设计不是很满意,你可以为他们创建一个调查,找出到底是什么促使他们不愿意转换。这种对访问者的深入理解只有在你深入分析片段和角色的个人行为时才有可能。根据来自特定国家、特定设备类型或特定引用域等的访问者对页面上的访问者进行分段。
提示: 将你的网站热图工具与其他定性和/或定量的研究工具结合起来,可以获得更深入和可靠的见解。
点击热图:使用点击图,你可以跟踪网页上每个元素或部分的点击次数。点击地图还允许您比较一个部分与另一个部分的点击,一个部分与整个页面的点击,以及一个部分与多个其他部分的点击。
使用点击地图,您可以跟踪表单字段的点击,以确定是否有任何字段,访问者在其中点击多次。在表单字段上点击太多可能意味着你的问题不清楚,这就是为什么访问者在同一个字段中会犯如此多的错误。然后,您可以使用这种洞察力来优化窗体。
基于你的目标,你可以建立许多假设,并使用滚动映射洞察力来确定确切的问题。
提示: 将滚动地图与其他类型的热图结合起来,可以发现隐藏的洞察力。
鼠标跟踪热度图:通过跟踪访问者的鼠标移动,鼠标跟踪热度图可以帮助您确定访问者在哪些区域徘徊最多,哪些区域得到的关注最少。通过深入分析,鼠标跟踪热度图可以帮助您收集、可视化和理解访问者的集体行为。它记录了访问者如何使用鼠标,他们移动的地方,他们到达目的地的路径,以及他们从你的网站弹回的地方。通过分析访问者的鼠标移动,你可以确定放置广告的最佳位置,页面中不相关的部分,还可以确定访问者希望网站的结构和内容如何等等。
让我们以一个旅游业的鼠标跟踪热度图用例来更好地理解它是如何工作的。鼠标跟踪热度图可以帮助提高旅游公司的转化率的一个方法是通过识别主要预订表单中的问题。通过跟踪访问者花费最多时间的表单区域或者访问者从网站跳出的区域,然后分析这些数据,你可以找出这些区域的问题,优化预订表单以降低跳出率,提高网站转化率。
鼠标跟踪热度图对 B2B SaaS 业务来说也很有用,可以帮助他们找出表单流中的漏洞并修复它们。看看下面的图片:
你的滚动地图可以告诉你大多数访问者滚动到页面的底部,甚至滚动到页面的折叠之下,你的主 CTA 就在那里,而同一页面上的点击地图可能会告诉你,靠近页面末端的区域获得的点击次数最少。通过组合并分析这两个数据集,您可以识别出核心问题: 访问者滚动到页面底部,但不点击该区域。这可能表明底部区域的信息不够清晰,不足以促使访问者点击 CTA 或者页面太长,以至于当访问者到达页面底部时,他们已经失去了兴趣,甚至没有注意到 CTA。
滚动热图: 如果执行和分析正确,滚动映射可以帮助您确定您的网页应该具有的理想长度。例如,出版社的关键转化指标可能是通过吸引更多的人注册每月通讯来增加读者数量。正确分析滚动映射可以帮助您确定新闻稿注册表单的最佳位置。比较两个不同来源收集的数据总是有助于发现两个来源单独无法发掘的新见解。
在为任何目标分析点击图数据时要记住一件事,那就是不要忽略死区点击。在一个特定的元素上有太多的死点击意味着访问者可能希望从点击中脱身,但是实际上并不是这样。例如,如果你的网站无处不在的英雄形象被点击了太多次,也许访问者希望通过点击英雄形象来访问主页。这种洞察力可以帮助您在访问者期望他们去的地方添加缺少的链接。
对于 B2B Saas 业务来说,良好的质量导向对于生存至关重要。这些信息最重要的来源是表单: 注册表单、演示请求表单、封闭内容表单等等。如果在同一页面上有两个表单,点击地图将帮助您跟踪和比较每个表单获得的点击次数。如果你的广告登陆页面上有一个表单和一个视频,你可以使用点击地图来确定这个视频是否通过比较两者的点击次数来分散用户填写表单的注意力。
Image source: 图片来源:cxl
正如你所看到的,绘制在上面页面上的鼠标跟踪热度图高亮显示了所有访问者将鼠标悬停在最上面和最下面的区域。利用这种洞察力,您可以跟踪访问者在表单页面和表单本身上的浏览行为,并进行必要的更改以减少掉落。
眼球追踪热图: 像所有其他类型的热图一样,通过使用眼球追踪热图,你可以极大地改善你的网站的用户体验(UX)和用户界面(UI)。看看下面的截图:
这是杜嘉班纳香水的广告,史嘉蕾·乔韩森是好莱坞著名演员。你可能会看到广告然后说‘哇!这是宣传我们新香水系列的完美方式。现在看看这则广告生成的眼球追踪热图:
通过热度图,你可以清楚地看到,访问者被演员的脸分散了注意力,而没有看广告上的产品。产品的形象和产品的摆放方式并没有增加产品的价值,也没有吸引越来越多的游客来尝试产品,而是掩盖了产品形象,有利于广告中的产品代言人。你还会为你的产品复制这样的广告设计吗?如果没有眼动跟踪热图,你往往会在没有任何数据支持或挑战的情况下复制其他设计和想法。对热图数据的正确分析可以提供可操作的洞察力,帮助你准确地理解你的网页哪里出了问题,也可以帮助你做出符合访问者期望的改变。
通过实验验证分析: 如上所述,分析热度图的方式将取决于您所追踪的目标和所使用的热度图的类型。一旦你完成了分析绘制热图,对如何达到你的目标进行观察。例如,在分析了你主页上的点击图之后,你发现大多数访问者点击的文本甚至不是你页面的主要 CTA。页面的主要 CTA 接收到的总点击量不到页面总点击量的20% 。
由此可以推断,CTA 位于访问者关注度最低的区域,因此为了提高转换率,您应该将 CTA 重新定位到点击最多的文本所在的区域。在你根据你的热度图数据设置了一系列行动之后,你可以使用多种方法来验证这些发现。最常用的方法之一是 a/b 对比测试。一旦你决定将 CTA 迁移到最大点击文本的区域将有助于提高转换率,你可以通过 a/b 对照原始版本检验你的假设是否有效。
提示: 有缺陷的分析会导致有缺陷的结论
当我们谈论研究时,有2种研究方法: 定量研究和质性研究研究。定量研究工具,如谷歌分析(GA)生成的数据,帮助您与数字。定量数据可以告诉你有多少访问者访问了你的网站,他们花了多少时间在上面,有多少访问者转换了,你的网站的跳出率是多少,等等。如果你想得到关于你网站表现的具体数字事实,定量数据可以非常成功地达到目的。
当你想要挖掘比数字更深的东西时会发生什么?你如何理解为什么访问者花费的时间和他们在你的网站上花费的时间一样多,为什么 x 数量的访问者转化而其他人没有,为什么你的网站的跳出率是这样的?定量数据回答了“是什么”,而不是“为什么”。只有定性的数据可以帮助你理解为什么你的网站是这样运行的原因。
所有行业的企业都在努力实现一个共同点: 成功地理解访问者,并基于这种理解修改他们的网站。底线-你应该使用热图几乎所有的时间。无论需求有多大或多小,热度图都能帮助你理解游客行为背后的“原因”。而且,当你身边有 VWO 的综合实验套件时,任务就变得更容易了。
一家 B2B 企业可能陷入低领先的困境,一家电子商务商店可能陷入高放弃购物车率的困境,一家媒体和娱乐公司可能陷入观众减少的困境,一家出版公司可能面临低读者人数和低订阅率等等。企业面临的问题是无穷无尽的。
当你的目标是跟踪访问者与页面的互动时,Heatmap 就派上用场了。它从不同方面展示了你网页上每个部分的表现。没有关于何时应该或不应该使用热图的指导方针。热度地图是如此多才多艺,他们可以用于任何事件或环境要求从你的访问者的角度回答。因此,不管项目的范围如何,在所有的分析中使用热图是一个很好的做法。他们是如此的直观和有用,你应该运行一个即使是最微小的洞察力需要当涉及到你的访客的行为。为了更好地理解何时使用热度图,让我们看看一些可以使用热度图的具体例子:
为更直观的用户界面重新设计: 重新设计可能包括从小的设计调整到完整的设计改造。当你重新设计某个东西时,你希望新版本比上一个更好。此外,重新设计一个网站可能是单调乏味和昂贵的,所以,你会想要测试和验证所有的用户研究假设,然后再去一个新的网站上线。在重新设计你的网站时,确保你走在正确的道路上的一种方法是使用热度图。正如前面提到的,没有什么能比热度图这样的定性工具更好地告诉你关于访问者的信息了。借助热度图,你可以发现页面上的不同元素是如何影响访问者行为的,比如内容位置、颜色选择、 CTA 文本和喜欢。一旦你发现了这些见解,你就可以利用它们来重新设计你的网站,使其拥有更直观、更智能的用户界面,这不仅可以提高访问者的参与度,还可以增加转化率。
降低跳出率: 你的网站可能会产生大量的流量,但是它的跳出率同样高吗?你是否在努力找出是什么让访问者在没有转化或没有花费足够时间的情况下从你的网站跳出来?让热度图为你完成这项工作。热度地图可以帮助你识别网站上的干扰,优化网站的布局和内容放置,修正导航间隔,放置适当类型的内容以提高访客参与度,从而降低跳出率,提高转化率。
修复导航间隙: 通常,你的网站导航可能不符合访问者的期望,因为你没有知道访问者对导航的期望是什么,就构建了它。这导致了糟糕的用户体验,并且当访问者找不到他们想要的东西时,会产生摩擦。使用热度地图,找出你的访客期望你的网站导航是什么样的,并相应地组织它,以提高转化率。
增加注册: 对于 B2B Saas 业务,注册(可以是免费演示、免费试用或简报)作为最终的线索来源。如果访问者没有完成添加到合格线索池的操作,那么可能是时候重新审视您的表单及其位置了。例如,让我们假设您拥有一家 B2B Saas 企业,并且您的优秀客户的主要来源是您的免费试用申请表。比如说,在你当前的主页设计中,免费试用申请表放在页面的底部。你看看你的 GA 数据,发现即使在获得了大量的流量之后,你的网站的转化率也不是很高。因此,您决定在页面上运行滚动映射。在成功完成样例时间段之后,您查看由此生成的滚动映射,并注意到超过一半的访问者甚至从未找到免费试用请求表单,因为他们没有滚动到页面底部。你现在可以运行一个热度图来确定页面中最受欢迎的部分,并将演示请求表单放置在其中一个部分中,以获得最大的访问者参与度。
运行 a/b 测试: 在计划运行 a/b 测试时,绝对不能错过使用热图的机会。A/b 测试可以帮助你提高转化率,防止你的生意每天都在挣扎。但这只有在 a/b 测试是有数据支持的情况下才是正确的。所有的 a/b 测试活动之前都应该对访问者在网站上的行为进行良好的定性分析。你当前的设计无法转化访问者,所以你知道你必须稍微调整一下或者完全改变它。你将如何决定它是需要一点调整还是一个完整的转换?在热度图的帮助下。通过热度图,你可以找出当前设计没有达到预期转换效果的原因。你可以识别高注意力点和低注意力点,并根据它们为 a/b 测试创建一个变化。
除了以上的业务需求,一个网站的不同页面和元素对于网站热图也有不同的用例。它们可以是最具业务关键性的页面和元素,推动您的业务转换。热度图对网页的分析也因为你追踪的目标而不同。让我们来看看网站热度图是如何帮助你提高网页和元素的转化率的:
主页: 你的主页是整个网站的支柱。你网站上的每个网页都是从中分支出来的。它还决定了访问者观看你品牌的方式。你的主页给人的第一印象是你的品牌。如果你的主页设计得不好,不能提供良好的用户体验,如果它不能满足访问者的期望,你的访问者更有可能退出,而不是更深入地进入你的转化渠道。你可以使用点击地图来确定访问者在你的主页上点击最多的地方。你也可以使用滚动地图来判断你的主页是太短还是太长,并找到你的主页应该有的最佳长度。通过热度图进行持续监控,您可以轻松识别主页上最受欢迎的部分,并在这些部分放置关键内容和 CT
产品页面: 您的产品页面确定访问者是否将商品添加到他们的购物车中。如果你的产品页面信息量不够,如果没有高质量的产品图片,或者尺寸指南太难找到,访问者肯定会从你的网站跳出来而不购买。你可以使用网站热度图来跟踪用户如何浏览你的产品页面,确定他们是否发现很难找到尺寸指南,如果他们正在寻找优惠等等。例如,作为一个电子商务企业主,你决定在你的产品页面上绘制热度图。在样本周期结束后,您返回并分析数据。在查看了热度图之后,你发现很多用户点击了产品图片,按照你现有的设计,点击产品图片,它不会扩展。这张热度图告诉你用户对你的产品页面有什么期望,并且让你对如何优化你的产品页面以满足用户期望和提高你网站的用户体验有切实可行的见解:
结帐页面: 结帐页面是您的转换漏斗的最后一页。因此,访问者在这个页面上找到所有必要的信息就变得非常重要。如果不是这样,那么访问者可能会离开你的网站寻找丢失的信息,然后再也不会回来。网站热度图可以帮助您通过跟踪用户在结账页面上的行为来识别所有这些缺失的信息。例如,您的谷歌分析(GA)数据显示,大多数访问者谁添加产品到他们的购物车,下降到结帐页面。你决定在结账页面上绘制一张热度图。在分析收集的数据后,你注意到大量的访问者点击了“应用优惠券”字段,然后退出你的网站,再也没有返回。使用这种洞察力,你现在可以假设,添加一个所有适用的优惠券代码的下拉列表或自动填充字段基础每个客户的资格将有助于减少购物车废弃率和增加购买、
博客和其他资源页面: 当你想确定你的博客、案例研究、文章和其他内容的最佳长度时,热图可以像魔术一样发挥作用。滚动地图可以告诉你用户向下滚动页面的距离,滚动页面50% 但不是100% 的访问量等等。使用滚动地图,您可以优化您的内容,并根据访问者和用户的滚动模式计划其长度。
呼吁行动(CTA) : 你的网页的“呼吁行动”(Call-to-Action)或 CTA 是所有真正行动发生的地方。如果你选择了错误的文本、颜色或区域来放置它,你的网站转化率将会受到极大的影响。当你想要确定你网页中最受欢迎的部分时,使用网站热图,这样你的 CTA 就可以放在那个部分,或者当你想要跟踪访问者是否滚动浏览整个页面,达到你的 CTA 放置的折叠以下时,等等
你可能认为使用类似热度图这样的工具,这是一种评估页面上访问者行为的快速简单的方法,犯错误的机会更少。当营销人员在他们的网站上建立和使用热度地图时,他们经常会犯一些简单的错误,你会对此感到惊讶。
样本量: 营销人员常常忘记热度图应该像其他统计工具一样对待,他们应该选择代表整个目标受众的样本量。在选择样本大小时,要注意不要太大或太小,因为这样,样本大小将不具有代表性,热图报告将没有多大用处。除了依赖于你想跟踪的目标,你的样本大小还取决于其他因素。你可以根据以下参数计算出热图绘制的正确样本大小: 每月实际流量: 你想要绘制热图的页面的每月总流量。误差幅度: 您设置的误差幅度反映了您的研究结果可能与整个人口的真实情况有多大差异。
自信程度: 百分比,反映你对你选择的样本能够产生某种结果的自信程度。如果你的网站获得了巨大的流量,你可以很容易地使用 Scott Smith 提供的公式设置你的热图的样本大小:
(z 值)2 x 标准差/(误差幅度) = n2
其中,z 值对应于你选择的置信水平。
您可以轻松地在线查找列举最常见置信级平板的 z 值的表。
Confidence level 信心水平 | Z score Z 得分 |
99% | 2.58 |
95% | 1.96 |
90% | 1.65 |
85% | 1.44 |
80% | 1.28 |
标准差是数据集中某个数据集的平均值与个别数据点之间的差异程度。
您也可以选择使用在线样本大小计算器,以避免提交任何计算错误。在线调查门户网站 SurveyMonkey 就提供了这样一个在线样本量计算器。
流量类型: 除了样本大小,避免使用错误的流量类型也很重要。例如,任何行业的企业网站总是有两种类型的访问者: 新访问者或第一次访问者和老访问者或回头访问者。现在,第一次访问者和返回访问者的行为跟踪参数是非常不同的。返回访问者对你网站上的信息的反应可能与第一次访问者非常不同。或者,一个回访者可能会来到你的网站,寻找与第一次访问者不同的信息。就像你的样本量一样,你选择的流量类型也取决于你追踪的目标。想象一下你想要提高你的电子商务网站上重复购买的次数。为了让你选择的流量具有代表性,为了让热点地图产生有意义的见解,只选择回头的访问者作为你的观众。同样,如果你的目标是测试新网站设计的可用性,将访问者分为新访问者和返回访问者,这样最终的数据就可以说明这两个部分。这是至关重要的,你的热点映射工具,让你可以根据你的业务需求细分你的访客。
示例阶段: 当你在你的网页上建立一个热度图时,要注意你选择的运行它的时间段。在决定样本周期时,请记住以下几点: 您的样本周期应该考虑外部因素,如假日、节日、销售周期、周末等。你的样品周期应该考虑不同的买家行为
如果在设置样本周期时没有考虑以上几点,那么你的热图报告不具有代表性的可能性就会增加。例如,你拥有一家电子商务商店,并且在圣诞节前一周在你的网页上开始一个热度地图。你认为这个结果能代表全年吗?不,可能不会。在节日或者其他场合的购买行为与一年中的其他时候有很大的不同。
再举一个热度地图的例子,假设你设置了一个工具来收集主页上前5000个访问者的数据。如果在最初的2-3天内达到5000点,会发生什么?它在击中目标后停止收集任何更多的数据。如果您的样本周期从周五开始,并在周日前收集5000访问者的数据,那么对于周日访问您网站的访问者,数据帐户将如何处理?
无论一个工具是多么直观或简单,它总是带来它自己的一系列挑战。但是,这并不意味着在使用该工具时不能克服这些挑战。热度图在理论上很简单,但在实践中却很复杂。让我们来看看与使用各种热图相关的一些最常见的挑战:
例如,让我们假设你拥有一家电子商务商店,并且你想了解你的购物车页面上访问者的浏览模式。你在购物车页面上设置了一个动态热图,然后等待规定的时间过去。由此产生的报告大致如下:
上面的动态热图截图代表了1个独立访问者的活动。红色区域表示相互作用最强的区域,淡蓝色区域表示相互作用最弱的区域。乍一看,您可能会发现在选定的产品图像上、取消按钮上、邮政编码字段上、折扣选项上以及结账页面上的活跃度很高。通过这些观察,你可以很容易地深入了解单个访问者,并且可以优化页面以更好地匹配访问者的期望。只有通过动态热图才能进行这种深入分析
例如,假设你出版社网站首页的主要 CTA 要求访问者订阅每月通讯——“订阅我们的每月通讯”。在你的主页上,CTA 也会和其他重要信息一起放在下面,比如现在捐款,联系我们,和我们一起实习等等。你查看你的 GA 数据,发现尽管有很好的流量,转化率还是非常低。所以你在你的主页上建立了一个热度地图。但是在没有定义任何目标的情况下,你开始通过热度图收集数据。在样本周期结束后,开始分析收集到的数据。当你看到最终的热度图时,你会被吸引到一个最亮的区域。因此,您立即决定将主要 CTA 重新定位到该部分
因为你在绘制热度图之前没有设定任何目标,你没有意识到如果你在页面上绘制滚动图,你可能会发现大多数访问者甚至没有滚动到主页的底部,从而错过了主要的 CTA 以及放置在那里的所有其他重要信息。也许,通过将你的 CTA 转移到最受欢迎的部分,你可以增加订阅新闻稿的数量。但是如果没有所有的洞察力,你就会错过其他内容创造的机会
电子商务企业使用热度图来提高转化率,因为网站热度图可以帮助他们准确地找出和分析访问者在网站上的行为。为了理解这在现实中是如何工作的,让我们举一个购物者在购买书籍时如何使用亚马逊的网站热图的例子。
如果你看一下热度图,你可以很容易地确定页面上哪些区域最受关注:
这张热点地图揭示的是,最吸引眼球的部分和最能推动参与度的部分位于页面顶部。另一个观察结果是,访问者还点击了“购买此系列图书的顾客也购买了”部分、“赞助产品”部分和“此系列图书”部分:
利用上面的观点,电子商务商店可以把相关的产品和重要的内容放在最受欢迎的地区,从而提高转化率。
为了了解热度图在电子商务行业中的具体用途,让我们来看看一家销售婴儿用品的在线商店是如何利用网站热度图来识别分心事物,并利用这种分心事物来获益。以下是原始页面上的热度图:
经过分析,热度图显示,页面上婴儿的脸吸引了大部分访问者的注意力,而右侧的信息和产品应该是最受欢迎的区域。进一步的研究揭示了婴儿的脸吸引注意力背后的原理: 女人、婴儿和有魅力的人是访问者在任何页面上注视的主要对象。基于所有这些见解,页面的设计发生了改变,这是新设计的热点图:
在第一张截图中,人们注意到婴儿的脸让来访者分心。因此,婴儿的视线主题被改为产品和信息,新设计的热图显示,虽然婴儿的脸继续吸引注意力,游客越来越多地关注的内容和产品在右手边,跟随婴儿的视线。
在线出版公司可以出版新闻通讯、报纸、月刊等等。无论内容类型如何,其主要目的始终是增加各种产品的读者人数和订阅量。事实上,如果你的文章增加了他们现有知识的价值,人们只会阅读你的文章和数字报纸并订阅它们。因此,你必须把人们想知道的信息量最大的部分放在页面的最受欢迎的部分。例如,让我们看看卫报关于他们的一个报纸问题的热度图:
热度图显示,大部分的注意力集中在页面的左上部分,页面的底部和右侧几乎没有注意到任何东西。如果页面的某些部分获得了大部分关注,而其他部分完全被忽略,那么页面需要重新设计。比如说,上面页面的“更多新闻”部分可能包含与很多读者兴趣相关的新闻项目。但是因为他们的注意力范围在到达底部的时候缩小了,他们最终只能与那些没有他们感兴趣的话题的左上角的部分进行互动。这可能会导致摩擦和糟糕的用户体验。网站热度图可以帮助你识别这种浏览模式,并允许你根据访问者的兴趣和期望来放置新闻项目。
在视频流媒体行业,Netflix 是利用 a/b 测试、网站热图和其他访问者行为分析工具等各种手段为用户提供个性化体验转换优化的王者。其中一个最有力的证据就是2013年他们对整个用户界面进行了彻底的改革,旨在减少用户的认知负荷。这是 Netflix 在大修之前的页面:
2009年,Netflix 推出了上图的智能电视和连接设备格式。然而,这种格式呈现了无穷无尽的盒子封面艺术。因此,在2012年,Netflix 的设计师们开始着手为一种 UI 格式构建模型,这种格式将侧重于大图片,用架子取代盒子艺术。这就是新设计的样子:
除了改变向用户播放视频的方式,Netflix 还删除了页面右侧的文字说明,即2009年版本的视频,并将标题上方的文字说明移到了左上角。之所以这样做,是因为在页面上绘制的眼球跟踪热度图显示,用户必须不断地在右边的文本和左边的标题之间切换。
Netflix 的团队还在新界面上绘制了热度图。
新界面的热度图显示,新界面不再需要从一条信息到另一条信息的来回切换,最终降低了用户的认知负荷。Netflix 对新界面进行了7次 a/b 测试,并对其进行了现场测试。我们今天看到的 Netflix 是上面显示的全新界面的优化版本。
有没有想过一些旅游网站是如何在你期望的地方提供你想要的准确信息的?这里有一个可能的方法——网站热图。对于任何一家旅游公司的网站来说,主要目标都是增加预订量。但它也为用户提供其他需求,如获取航班信息、在线登记、申诉纠正等。为了增加在线预订数量,并使用户更容易在网站上找到他们想要的信息,旅游企业经常转向网站热图寻求帮助。正如本指南前面提到的,热度图可以帮助你跟踪访问者和用户在网站上的浏览行为,这样你就可以利用这些信息来改善网站的用户体验和用户界面。
荷兰皇家航空航空公司总部设在阿姆斯特尔芬,成立于1919年,是世界上最古老的航空公司,目前仍以其原名运营。根据一项关于航空公司网站用户体验的研究,用户花费最长的时间才能在荷兰皇家航空公司的网站上找到他们的登机牌。
达美航空位居榜首,用户发现在他们的网站上最容易获得登机牌。这是达美航空的页面:
以下是荷兰皇家航空公司的主页:
荷兰皇家航空公司的体验优化团队决定在他们的主页上运行一个热度图,来找出为什么用户在他们的网站上找到登机牌的时间比其他航空公司的网站要长。下面是在页面上生成的热度图:
如果你比较荷兰皇家航空公司的网站和达美航空公司的网站,你会发现在他们各自的网页之间有着巨大的差异。达美网页的设计是干净的,直截了当的,而不是混乱的。然而,荷兰皇家航空公司的网站热度图显示了他们的主页是多么的混乱,这可能正是他们在网上查找登机牌表现不佳的原因。
旅游网站使用热度图进行转化优化的另一个有趣的方式不是在后端分析用户行为,而是在前端帮助用户提高预订体验。是一个提供不同交通方式、酒店和度假租赁综合旅游搜索的网站,它帮助比较顶级旅游网站以展示最好和最便宜的选择,是第一个在前端使用热度图的网站。以下是热度图在游客眼中的样子:
根据热度图的数据,Hipmunk 网站上的访问者可以很容易地决定去哪里旅游,去哪里吃饭,去哪些地方参观,并决定他们行程的其他主要部分。因为访问者不需要到多个网站去寻找他们旅行的不同方面的推荐,Hipmunk 的用户体验得到了极大的改善,并且在他们的转化率上也有所体现。
追随 Hipmunk 的脚步,其他的竞争对手如 kayak 也开始向游客提供他们计划参观的城市热点和凉点的热点地图视图。
对于 B2B SaaS 公司来说,合格的领导者是极其重要的。如果没有好的、合格的客户,B2B 企业就不会兴旺发达,因为它将无法销售任何产品。这些线索的主要来源是他们网站上的各种表格: 注册表格、演示申请表格、案例研究下载表格、通讯等等。这些表格位于不同的网页上,并分散在网站上的多个 cta 中。许多 B2B 企业使用不同类型的网站热图来确定页面上放置此类 cta 和表单的最佳部分,并确定表单流中的中断点,并对其进行修正以满足访问者的期望。
A B2B SaaS 的商业主页是整个网站最重要的页面之一,这是因为它不仅有多个引导表单,而且因为主页可以让访问者在网站的其他地方(不像他们通过广告、社交媒体促销和其他类似渠道登陆到一个特定的页面)。为了利用其主页提供的尚未开发的机会,并从转化漏斗中删除所有可能的阻碍者,总部位于 saas 的 Sumo 公司决定在其主页上绘制一幅热度图。这是由此产生的热度图的样子:
在浏览了主页上的热度图之后,相扑大赛的研究小组得出了一些结论:
这些观察帮助相扑团队对页面进行设计和内容更改,最终提高了相扑的转化率。
现在你已经阅读了这篇指南,你应该已经具备了关于所有热图的知识——从热图是什么到它是如何工作的。网站热图是一个不可或缺的访问者行为分析工具,但是在不了解整个过程的复杂性的情况下使用它,并且根据非结构化的方法,会给你带来扭曲的数据。
正确的做法,记住你可能犯的所有小错误,你可以使用的洞察力,并使用正确的类型的网站热图,你可以调整你的网站设计和内容,基于实时访问者在你的网站上的互动。
如果你发现这个指南内容丰富且有用,并且你认为它有助于作为营销人员回答你的一些问题,那么就传播这个信息,阻止其他营销人员面临同样的障碍。
如何显示热图?热点地图通过收集访问者在选定网页上的互动行为数据来工作。然后它使用调色板来显示哪些部分和元素互动更多,哪些部分得到较少的关注。例如,在网页上,浏览者点击次数最多的区域会以较暖的颜色突出显示,而浏览者不注意的区域则会变冷。
要使用热度图,首先,根据您的用例和行业选择合适的工具。然后选择要包含在热度地图活动中的页面,根据您的目标配置设置,将选定工具的代码片段安装到您的网站上,并开始记录。在这个指南中知道更多。
Heatmapping 工具是一个软件,它可以帮助您以图形方式表示数值数据,其中矩阵中包含的各个数据点使用不同的颜色表示。这个热图工具也可以被定义为一个软件,可以帮助你在数据可视化中使用。
简单来说,热图的目的是用一种易于理解的方式来表示数据。基于热图使用的配色方案,你可以很容易地确定你的表现有多好,哪些部分有改进的余地,哪些部分需要彻底检修