在结帐按钮中测试不同的样式

已发表: 2020-12-02

今天我给大家带来另一个我们已经运行了几个月的 A/B 测试。与往常一样，在本月刊系列文章中，我们将详细了解我们所做的改进假设、通过在我们的网站上创建页面的变体来应用它以及我们获得的结果。

前段时间，我们正在研究 Nelio Content 主页上操作按钮的颜色。由于对 CSS 样式进行了 A/B 测试，我们能够看到绿色如何最适合该页面的说英语的访问者。

我们不能假设任何页面都是这种情况。这就是为什么今天我们要从出现在 Nelio A/B 测试购买页面上的定价表中测试结帐按钮的颜色和大小。

A/B 测试的定义

我们改进的假设是，更改 Nelio A/B 测试定价表中结帐按钮的颜色和大小将获得更多点击这些按钮，因此，我们将获得更多销售额。

Nelio A/B 测试定价表的原始版本显示了我们销售的三个计划，每个计划都有价格、详细信息和订阅服务的按钮。您可以在以下屏幕截图中看到它：

按钮是灰色的，除了专业计划外，没有什么突出的，它有一个深蓝色按钮，与其他两个相比，这个计划更加强调这个计划。

我们要检查的第一件事是更改这些按钮的颜色以使其更醒目是否更好。为此，我们提出的替代版本包括使用新颜色更改 CSS 样式，如下所示：

我们一直强调专业计划，但现在其他计划是深蓝色，而这个中间计划有一个更突出的橙色。根据色彩心理学的研究，橙色是动作按钮的不错选择，因此我们决定选择您在上图中看到的这种橙色作为专业计划。

正如我们的假设所述，按钮的大小也会影响它们的性能，我们保留了先前变体中提出的颜色变化，以创建一个增加了按钮大小的新颜色。您可以在以下屏幕截图中看到此更改：

因此，我们有三个不同版本的 Nelio A/B 测试定价表的 CSS 样式：

完成所有这些工作后，我们可以将其转化为 CSS 样式的 A/B 测试。为此，Nelio A/B 测试允许您创建不同 CSS 样式的 A/B 测试，您可以使用它轻松测试 WordPress 中的样式更改。

我们创建了新的 CSS A/B 测试和其中的三个备选方案。事实上，您之前看到的变体屏幕截图是 Nelio A/B 测试包含的 CSS 样式编辑器的屏幕截图，用于创建替代方案。

正如您在上面的屏幕截图中看到的那样，我们将测试范围限制在 Nelio A/B 测试定价页面，并且我们定义了在测试中要衡量的五个目标：

创建所有这些后，您不会花费超过 10 分钟的时间，我们开始测试并等待结果出来。现在轮到 Nelio A/B 测试来做这项工作了。我们的插件负责在不同变体之间分配传入流量，并计算 A/B 测试中定义的每个目标中的转化次数。

这个 A/B 测试在我们的网站上运行了三个月。结果如下所示。我们将详细分析每个目标，以了解我们从该测试中得出的结论。

第一个目标是衡量对定价表中任何计划按钮的点击次数。在这种情况下，结果显示颜色改变的变体获得了 17.2% 的点击次数。另一方面，改变颜色和大小的变体比页面的原始版本差 15%。

然而，这些数字都没有达到足够的统计置信度来清楚地确定该目标的获胜版本。

第二个目标只计算基本计划按钮的点击次数。在这种情况下，结果与之前的目标相似。我们有改变颜色的版本是三者中最好的，颜色和尺寸最差的版本。

同样，统计数据也无法以足够的信心将具有新颜色的版本确定为明显的赢家。

第三个目标（我们在专业计划中衡量点击次数）的情况略有不同。和以前一样，有颜色的版本更好，结合颜色和尺寸的版本更差。然而，现在的统计数据告诉我们，显然获胜的版本有足够的信心。

我们可以说，通过使用更突出的颜色，我们获得了更多的点击次数。橙色按钮比我们之前的蓝色按钮效果更好。

在企业计划中点击的情况下，这里我们回到与前两个目标相同的状态。但是在这里，原始变体和颜色改变的变体之间的差异可以忽略不计。看起来更糟糕的版本是包含颜色和大小变化的版本。

所有这些点击的东西都很好。但是，如果我们只看以前的结果，我们将对现实有一个部分的看法。

出于这个原因，我添加了最后一个目标，我们衡量每个变体实现的购买数量。您可以获得获得更多点击的变体，但如果它也无法获得更多销售，您将选择一个虚假的赢家。

在以下结果中，我们看到这正是发生的情况。带有新颜色的版本的销售额减少了 24.5%，而结合颜色和尺寸的版本的销售额比我们页面的当前版本（没有变化的版本）减少了 16.6%。

有了这些结果，我们必须看到的是，转化漏斗是复杂的，虽然我们经常将其划分为阶段并计算微转化，但我们不能忽视整体情况。

创建多目标 A/B 测试的优势在于，我们可以从所有视角全面了解我们网站的表现如何（或差）。只有这样，我们才能有信心从 A/B 测试结果的数据中完全放心地选择获胜者。

Grooveland Designs 在 Unsplash 上的特色图片。