你是否怀疑你的销售页面让人们感到冷淡?你认为没有人阅读你的内容——或者,至少,他们忽略了你的号召行动(CTA)按钮吗?你网站上的图片是否让访问者感到厌烦或困惑?
你的访客在想什么?
如果你提出了这些问题中的任何一个,或者只是想知道你的访问者喜欢什么,不喜欢什么,热图是一个超级简单(而且非常有价值)的答案。
文案和设计师请注意:这将改变你做事的方式。准备好了吗?我将向您展示如何使用热图来充分利用您的视觉内容。最好的部分?这些程序通常是免费的或价格合理的(我推荐下面五个最喜欢的)。
什么是热图?你为什么要关心?
热图,又名“悬停图”和“点击图”,是令人难以置信的技术,更不用说其本身令人印象深刻的数据可视化了。一个好的热图程序可以跟踪鼠标的运动——你可能已经注意到,当你阅读一页时,你的鼠标在你正在阅读的单词附近徘徊。我们倾向于像用手指一样在页面上使用光标来标记我们阅读的地方;但我们在考虑的时候也会用到它。停下来思考一下这个古老的问题:点击?或者不点击。
通过跟踪鼠标的运动,你可以看到什么吸引了访问者的眼球,他们在考虑什么选择,什么可能会让他们感到困惑。您还将非常清楚地看到页面根本无法工作的地方。
热图大致是这样的。
(下面的热图来自WordPress仪表板中的Mouseflow)
Mouseflow热图
红色区域是游客带着鼠标徘徊最多的地方。作为一名企业家,你可以利用这些信息来调整你的产品,发现你的用户群的偏好,并相应地进行迭代。
作为一名作家或设计师,你可以使用这些信息来制定策略,你想要在视觉上强调什么,以获得更多的关注。
看到不存在的东西的艺术
我们来玩一会儿夏洛克,好吗?因为热图不仅能告诉你人们看到了什么,还能告诉你访问者没有看到什么,这是无价的。
看看这个来自Heat map.me的例子。看到热点在哪里了吗?注意到它们不在哪里了吗?
热图。我的例子
图像通常会吸引注意力——这是它们唯一的目的。所以,如果你的图片没有得到任何关注——你肯定做错了什么。这种形象错过了两个机会。首先,它不是特别引人注目,这就是为什么它甚至不被评为酷的一瞥。另一个原因是,研究表明,图片下方的说明文字比页面上任何其他文字的阅读次数都要多。这张图片没有标题。
热图。我的例子
当你在优化转化时,你会想要使用你的图片来吸引注意力,并包括标题,作为CTA,或者强化你想要访问者知道的核心主题。
误导-对胡迪尼很好,对你不好
人们很容易分心——哦,闪亮的物体!我刚才说什么来着?哦,是的——人们很容易分心,尤其是被图片分心。你可以利用这一点,创造视觉线索,为人们指明正确的方向。看看这个微妙的视觉线索——看到模特的眼睛在看这个约会网站的哪里了吗?就在CTA(行动号召)。
CTA(行动号召)的例子
但是,许多网页的图像和设计都指向各种各样的方向,所以访问者不是来到一个页面并被引导去完成一个理想的任务,而是不知所措。Hotjar向我们展示了它在实践中的样子。
Hotjar例子
理想情况下,光标活动应该集中在页面的关键信息和CTA按钮上。如果你看到一个带有模糊光标的热点图,你的访问者可能会感到困惑,不知道他们应该在你的页面上做什么。你的转化率会受到影响。
但是,在重新计算整个页面之前,看看热量最高的地方。哪些词是你的听众认为是关键的(而不是你计划的关键词)。如果这些词或短语与你的信息产生共鸣,你可能想把它们放在更显眼的地方。如果他们不这样做,那么考虑重新设计你的信息(因为访问者可能会得到错误的想法)。
让好的变得更好
使用热图来优化你的网站是很容易的——如果你正确地破译了线索。例如,如果你看到折叠上方的活动很少,但折叠下方的图像周围有很多活动-你应该尝试将该图像向上移动。
一些点击跟踪程序(有时被折叠成热图程序,如下图中的Crazyegg)不仅会显示访问者点击的位置,还会根据推荐来源和搜索词对点击进行细分,这意味着你可以看到页面上的哪些图像、cta和单词与最有利可图的受众产生共鸣。酷是吗?我是说,很热!试着通过将这些部分移动到页面上更显眼的位置来加倍发挥作用。
Crazyegg例子
给智者的话
回到手指放在页面上的比喻——你有没有注意到你的手指实际上并没有放在你正在阅读的单词上,而可能就在它旁边或下面?同样的事情也发生在网站上。所以,即使热点可能在一组单词上,也要经常环顾四周,看看附近是否有另一组单词可能会引起人们的注意。
热图并不完美。即使是最好的,也会有不同的诠释。把他们想象成希腊的神谕——她会为你指出正确的方向,并在你到达那里后给你一个提示,但剩下的就取决于你了。
嘿,如果你发现一个图像不工作,你不必花一个小时在Photoshop中重新配置它。试试像Visage这样的工具,它可以让你通过快速点击和拖动将文本、图表和视觉效果移动到画布上的任何地方(你甚至可以通过这种方式调整画布本身的大小)。我几乎什么都用它。
当你不需要热图时
如果你的网站流量很低,热图可能不能代表你的网站在流量上升时的工作方式(在这种情况下,可以尝试使用像Feng GUI或eyequant这样的算法工具来优化页面布局和图像)。
如果你有一些流量,它可以帮助你确切地看到用户在做什么——这就是当你想从热点图转向会话记录程序,如SessionCam或Hotjar。有了这些,你可以看到你的实际用户在你的网站上工作,填写你的表单,放弃他们的购物车(开玩笑!不是真的)。严肃地说,如果您得到的是部分表单填写,记录用户会话可以得到很多答案。
尝试5个热点地图程序
Mouseflow显示人们点击、触摸、移动和滚动的位置,并支持自定义日期范围、移动/响应式布局和A/B测试。它还可以跟踪用户从一个页面到下一个页面的活动,这样你就可以看到成功的客户选择了哪些路径,以及你在哪些地方失去了其余的用户。它有一个免费的版本,而且安装起来非常容易。
热图。Me提供实时热点图,可以在几秒钟内显示在你的屏幕上,并不断更新——非常适合流量大、内容经常变化的网站。热图提供了一个巧妙的技巧,将热图叠加在页面上,这样你就可以浏览你的网站,看到其他人都在看什么。Heatmap提供免费的基本套餐。
Hotjar除了热图之外,还提供了页面反馈投票,所以如果你的用户的行为方式让你完全无法理解,你可以问他们为什么。他们的移动热图报告也可以方便地检查访问者在桌面电脑上与手机或平板电脑上的体验。Hotjar提供了一个免费的基本包。
SessionCam记录实际的用户会话,这对于排除转换问题很方便。这就像和用户分享屏幕一样,不过是匿名的,所以不那么令人毛骨悚然。SessionCam还提供热图、表单分析和转换路径。提供免费试用。
CrazyEgg提供热图,滚动跟踪和点击跟踪。真正酷的是它如何根据用户的来源(推荐或搜索条件)对点击进行颜色编码,以便于细分。提供免费试用版,但它的基本版包含了大多数功能,10页和10,000次访问每月只需9美元(非常适合新网站和小型企业)。
你对热图有什么问题、资源或讨论点吗?请在下方留言!