在定价页面中使用热图

让我们从非 A/B 测试开始“本月 A/B 测试”。 在你跑到互联网的另一个角落之前，让我解释一下为什么我们将从热图开始。

没有在您的网站上定期使用 A/B 测试的主要原因之一是不知道从哪里开始：我尝试了哪些更改、在哪里以及为什么？ 这些是你会问自己的关键问题。 如果您不知道如何回答它们，您将放弃测试。

为了克服这个问题，我建议您做的第一件事是从您的网站中选择一个页面开始。 此页面必须与您的目标相关。 这意味着它是您收到许多访问的页面，或者它是您的活动或业务的关键页面。

在今天的示例中，我们选择从高级插件的定价页面开始：Nelio A/B 测试和 Nelio Content。 这些页面是我们业务的关键，因为我们公司的收入来自它们两者。

既然我们已经选择了页面，要知道要进行哪些更改以及为什么要进行更改，最好从运行热图测试开始。 我们这样做是因为热图为我们提供了有关访问者如何与我们的网站互动的真实数据。

当我们真正看到我们的页面在真实用户数据下的表现时，就更容易获得未来运行测试的想法。 这就是为什么热图总是一个好的开始。

如何在 WordPress 中创建热图测试

为 WordPress 页面创建热图测试非常简单。 您只需选择所选页面并开始测试。

在 Nelio A/B 测试中，通过从单击按钮添加新测试时打开的对话框中选择此类测试来创建新的热图测试。

在测试编辑屏幕上，您可以为测试设置一个名称，以便以后轻松识别。 您还可以添加对要在测试中尝试的内容的描述。 最后但并非最不重要的一点是，您需要选择要在其上进行热图测试的页面：

一切准备就绪后（如上一个屏幕截图所示，这很容易），单击窗口右上角的按钮开始测试。 您只需等待访问者来，以便 Nelio A/B 测试从他们在页面上的行为中收集数据并处理结果。

热图结果

在我们的案例中，我们在网站上同时运行了两个热图测试：一个用于 Nelio A/B 测试的定价页面，另一个用于 Nelio Content 的定价页面。

每个测试已经收集了大约 20 天的数据，并分析了大约 500 名访问者的行为。 这足以得出某些结论并考虑我们可以在这些页面中运行的未来 A/B 测试。

请记住，这些页面并不是我们网站上访问量更多的页面。 它们是转换漏斗的最后阶段，因此在此过程中会丢失流量。 但请记住，我们之所以选择它们，是因为它们对我们的业务很重要。 在未来的测试中，我们将研究其他流量更大的页面，我们将解释其他原因。

Nelio A/B 测试的定价页面

让我们从 Nelio A/B 测试的定价页面获得的结果开始。 热图测试从三个不同的角度向我们展示了数据：热图、滚动图和五彩纸屑。 在这里嵌入 3 个完整图像太多了，因为它们的像素高度非常大。 为了避免强迫你一直上下滚动，我只是在这里链接它们：

• Nelio A/B 测试定价页面的热图。
• Nelio A/B 测试定价页面的滚动图。
• Nelio A/B 测试定价页面上的五彩纸屑。

现在让我们看一下之前结果中最相关的片段：

正如您在上图中所见，热图是一种图形表示，它以聚合的方式显示用户与页面元素的交互，并且具有色阶，其中暖色表示高度相关。

在 Nelio A/B Testing 的定价页面中，页面的第一折是热点较多的地方。 如果我们详细分析，基本计划和专业计划领域的要素比企业的要素更具相关性。 鉴于此，也许我们可以重新排序定价计划以首先显示企业计划。 请注意，我们习惯于从左到右阅读，因此首先在定价页面上显示最昂贵的计划可能是在 A/B 测试中尝试的一个很好的改变。

接收大量用户交互的另一个元素是向下滚动以查看计划详细比较的链接。 这很好，因为这意味着有兴趣查看有关计划的更多细节。

不好的是在不可点击的元素中有很多交互。 您可以在五彩纸屑中看到它，这是一种图形表示，您可以在其中看到访问者的所有点击：

在上一个屏幕截图中可以看到的整个计划块中，只有每个计划中出现的按钮是可以单击的元素。 请记住，单击其他所有内容均无效。 我们当前的界面正在产生混乱。

访问者正在点击每个计划的特征的文本和图标，这些是不可点击的元素。 从这里我们可以了解到他们试图找到更多关于它的信息，但是我们在页面的下方有这些信息。

我们可以在这里尝试的另一个 A/B 测试是更改计划的每个功能，以便它们具有浮动元素，当鼠标悬停在文本上时会出现并为访问者提供更多上下文信息。 我们可以在上下文帮助下针对当前版本测试这个版本，看看哪一个最终会产生更多购买。

五彩纸屑还为我们提供了访问者的汇总信息，这些信息是从他们的点击中提取的。 Nelio A/B 测试包括几种类型的过滤器，以更好地了解访问者的不同特征，您可以在此处看到：

从这些过滤器中，我们提取了以下数据：

• 到目前为止，Chrome 和 Firefox 是我们的访问者最常用的浏览器。 因此，我们必须让网页看起来不错，至少在这些浏览器中是这样。
• 此页面的一半访问者来自美国。 这与我们的销售数据相符。
• 访客在一周的前 3 天访问我们的次数更多。 例如，了解这些信息可能有助于在其他日子在网络的其他区域提供优惠，从而在流量低的日子吸引流量。
• 几乎 100% 的访问者通过台式计算机或笔记本电脑访问该页面。 我们几乎没有来自移动设备的访问。 这是以后要研究的东西。
• Windows 10 和 Mac OS X 是人们访问我们的操作系统。 它与之前的数据相匹配，因为我们没有来自移动设备操作系统的访问者。
• 我们在工作日有更多的访客（测试是在芝加哥时区进行的）。 这是有道理的，因为我们的主要客户来自美国。
• 访问是在最小宽度大于 1500 像素的屏幕上进行的。 另一个证实访问来自台式电脑或笔记本电脑的事实。

如果您检查热图和五彩纸屑的完整版本，您会发现 Nelio A/B 测试定价页面的所有其他部分都不太相关。 考虑到这一点，让我们检查以下滚动图：

如果您检查完整的滚动图，您会发现很少有访问者超出页面的第一折。 这让我认为，也许我们应该使用更短版本的 Nelio A/B 测试定价页面，将相关信息浓缩在首屏。

页面第一折之后的部分有很多文字，访问者没有阅读它。 不到 20% 的人会看到并与比较计划的详细表格进行互动，您可以在网络底部找到该表格。 所有这些数据都由滚动图提供：

使用包含更多视觉部分的较短版本的页面进行测试可以帮助说服潜在买家并使定价页面更加有效和高效。 这是尝试进行 A/B 测试的可能更改的另一个想法。

我们已经有了一些可以在未来进行测试的想法，因此很明显，热图为我们提供的信息对于获得我们可以在 A/B 测试中应用的想法非常有用。

Nelio 内容定价页面

与 Nelio A/B 测试的定价页面一样，这里有完整的图像以及 Nelio Content 定价页面的热图结果：

• Nelio Content 定价页面的热图。
• Nelio Content 定价页面的滚动图。
• Nelio Content 定价页面的五彩纸屑。

Nelio Content 的定价页面比 Nelio A/B 测试的定价页面更简单、更短。 除其他原因外，此页面只有一个计划，而对于 Nelio A/B 测试，我们有 3 个不同的计划。

如果您查看完整的热图并将其与 Nelio A/B 测试的热图进行比较，您会发现在这种情况下，除了第一个折叠部分之外，页面的其他部分还有更多热点。

在上图中，我们看到比较计划表中的操作按钮具有特殊的相关性。 这很好，因为我们有他们在那里。 但是，请注意，表中的Starter计划只不过是 Nelio Content 的免费版本，具有特殊的相关性。

这里的问题是我们是否应该在我们的定价页面中有一个指向 WordPress 插件目录的链接，以便访问者可以下载 Nelio Content 的免费版本。 现在我们有了它，但热图显示可能有几个访问者正在离开我们的定价页面去购买免费版本。

这个话题是有争议的，也是我们会议中长时间讨论的来源。 一方面，保留链接并不好，因为您在定价页面内失去了可能的直接销售。 但即使访问者离开我们的网站，免费试用 Nelio Content 也可能是件好事。 用户可能会喜欢该工具，并在测试后最终购买它。 在 Nelio，我们已经多次讨论过这个问题，我想今天不会是我们最后一次这样做？ 就目前而言，链接仍然存在。 你怎么看待这件事？

我们还看到该视频引起了很多关注。 我们制作了一个非常酷的视频，也许我们可以在页面的前面展示它。 我们可以通过 A/B 测试来尝试这种更改，因为第一次折叠之后的部分也没有那么大的相关性。

另一方面，我们在滚动图上看到，当我们向下滚动页面时，访问者的流失不那么突然。 这证实了如果我们希望访问者看到尽可能多的内容，那么较短的定价页面可能会更好。

此外，结合之前的热图我们看到，第一折之后的两个部分，讨论具体特征和表达人们的意见，可能需要重新设计。 它们是文本过多且不会引起太多关注的部分。 我们可以尝试一个更直观、更直接的替代版本。

关于点击五彩纸屑的图形，有趣的是看到在页面第一折内的不可点击区域中进行的不正确点击的数量：

尽管这些点击中的大多数都无法避免（是的，假设人们在滚动时点击侧面区域，尤其是右侧区域），但还有其他一些是访问者感到困惑的结果。 这就是您在上一个屏幕截图中看到的每月价格数字的点击情况。 该价格不是可点击的项目； 您必须改为单击橙色按钮。 但是，下面显示的年度价格数字是一个正确的链接。

我们必须寻找另一种不那么令人困惑的方式来显示两种价格，并且两种情况的交互作用相同。 这是我们可以在此页面上运行的另一个 A/B 测试。

现在呢？

我们一开始并不知道我们可以在我们的网站上运行哪些 A/B 测试。 我们已经看到热图可以帮助我们轻松获得想法，以便在我们的页面上进行 A/B 测试。 一旦我们有了这些测试想法，我们要做的就是根据我们的需要对它们进行优先级排序。

请记住，页面第一折中的更改更快地测试，因为更多的人会看到它们，因此您将更快地获得结果。 您可以开始优先考虑尝试更改页面该部分的 A/B 测试。

这里最重要的教训是：一旦开始测试，就不要停止。 在测试过程的每次迭代之后，您都会从您的网站和访问者那里学到一些新东西。

下个月见，我们将在其中分析真实结果的另一种类型的测试。 记得给我留言，告诉我你对这篇文章和我在这里解释的一切的看法。 您会在您网站的哪个页面上运行热图？

史蒂夫·哈拉马 (Steve Halama) 在 Unsplash 上的精选图片。