关于您网站的最佳号召性用语按钮颜色的真相

互联网上关于网页上效果最佳的颜色的说法很多。 你会发现数以千计的关于它的文章。 从用户询问哪种颜色更好并收到相互矛盾的答案（多么令人惊讶，嗯？）的那篇文章，到解释 Google 对其链接使用许多蓝色阴影进行的测试的著名文章。

所有这一切背后的现实是，没有人可以保证特定颜色在不尝试的情况下在网站上会更好或更差。 如果他们不告诉你，他们就是在骗你。 我敢肯定你不喜欢被骗。

我也没有，所以当我从雅虎阅读这篇文章时！ 小型企业，他们说按钮上使用的最佳颜色是红色、绿色、橙色或黄色，我首先想到的是我应该在我们自己的网站上尝试一下。

如果您一直关注我每月撰写的有关 A/B 测试的系列文章，那么您肯定已经知道我们网站上最重要的页面之一是 Nelio Content 的登录页面，以及它的定价页面。 在这两个页面上，我们拥有的号召性用语按钮都是橙色的。

与我们网站上已用于号召性用语按钮的橙色相比，红色或绿色会更好吗？ 这是我问自己的问题，我将在这里用来自访问者的真实数据来回答。 不是主观意见。 真实数据。

我们走吧！

创建 CSS 的 A/B 测试

更改页面上按钮颜色的最简单方法是添加一些额外的 CSS 规则来应用新颜色。 你用你想要的颜色给按钮添加了一个新的background-color规则，就是这样。 十分简单。

使用 Nelio A/B 测试，您可以创建 CSS 样式的 A/B 测试，以测试其他 CSS 规则的不同变体。 您只需创建一个新测试并在测试类型选择器中选择 CSS 选项：

这将带您进入测试编辑器，您要做的第一件事就是创建变体。 请记住，在这种类型的测试中，第一个变体是以当前外观显示页面的变体，没有额外的 CSS。

然后，您为我们将要测试的每种其他颜色创建一个变体：一种用于绿色，一种用于红色。 第一个变体已经是橙色的，所以我们已经准备好了一切。

对于每个附加变体，您可以对其进行编辑以添加更改按钮颜色的附加 CSS 规则。 您需要的 CSS 规则取决于您在 WordPress 中使用的主题。 在 Nelio A/B 测试提供的 CSS 编辑器中，您可以实时查看新的 CSS 规则如何改变您网站的外观。 这将帮助您检查您是否做对了。

以下是我们正在设置的每个 A/B 测试变体的 CSS 样式编辑器中操作按钮的外观。 如前所述，首先您拥有带有橙色按钮的原始版本。 其他两个变体包括分别将按钮变为绿色和红色的 CSS：

一旦我们准备好变体，就该定义我们想要衡量的转换目标了。 在这种情况下，正如您在测试编辑器的屏幕截图中看到的那样，我们有两个目标。

第一个目标将测量操作按钮上的点击，而在第二个目标中，我们也测量这些点击，但仅测量发生在 Nelio Content 定价页面上的点击。

最后，请注意 CSS 的 A/B 测试将影响您网站的所有页面。 要在 Nelio A/B 测试中限制这种行为，在 A/B 测试编辑器的右侧边栏中，您可以选择限制测试范围。 我已经这样做了，它只影响 Nelio Content 的主页和定价页面。

我们已经准备好开始测试了。 完成后，Nelio A/B 测试负责为您拆分访问这两个页面的流量并显示不同的颜色变体，以及跟踪转化（点击按钮）。

请记住，您只需等待访问者浏览这些页面即可开始看到结果。

分析结果

我们已经在我们的网站上对按钮颜色进行了 A/B 测试，在西班牙网站上运行了一个半月，在英文网站上运行了将近一个月。 在英文版本中，我们更早地停止了它，因为我们以高置信度值更快地获得了统计上显着的结果。

但是，让我们从我们网站上的西班牙语测试结果开始：

正如您在上面的屏幕截图中看到的那样，为了衡量两个页面上的点击次数，按钮的绿色和红色变体似乎比原来的橙色版本表现得更好。 然而，统计数据告诉我们，改进并不大，因此，我们不能说这些颜色比橙色更好。

对于第二个目标，它只测量了 Nelio Content 定价页面上的点击次数，我们看到也没有明确的获胜颜色。 我们甚至可以观察到这里的绿色表现如何比橙色差。 尽管我们无法根据 Nelio A/B 测试从访问者那里收集的数据得出强有力的结论：

我们现在去看看英文版页面的测试结果。 在这里，在第一个目标中，测量 Nelio Content 两个页面中的任何一个页面的点击量，我们看到绿色和红色都是产生更好点击率的颜色。

此外，在这里我们可以肯定绿色是测试的获胜颜色。 结果具有统计学意义，置信度大于 99%。 绿色是我们可以在我们的英文网站上为 Nelio 内容页面上的按钮使用的最佳颜色。

如果我们只看 Nelio Content 定价页面上的点击（测试的第二个目标），我们会看到结果与测试的第一个目标一致：

看到这一点，我们可以说绿色是在 Nelio 内容页面上最适合我们的英语观众的颜色。 然而，对于我们的西班牙观众来说，我们还没有找到一种比我们已经拥有的颜色更好的颜色。

结论

在这里，我展示了 A/B 测试的结果，其中包含来自浏览我们网站两个最相关页面的访问者的真实数据。 而且您已经能够检查对特定受众最有效的方法并不需要对不同的受众最有效。

绿色按钮最适合我们说英语的访客。 但这并不意味着其他访客也一样。 为此，我们仅在这些页面的英文版中将 Nelio 内容页面的操作按钮颜色更改为绿色。 西班牙语中的那些仍然是橙色的。

如果我告诉您您需要在页面上使用绿色，那我将是愚蠢的。 没有人应该告诉你。 不是我，不是任何人。 我不知道绿色是否适合你。

出于这个原因，在关注您会在互联网上找到的许多大师之前，请自己进行测试。 创建 A/B 测试非常简单。 这是发现在您的网站上更好（或不更好）的唯一方法。 与你真正的观众。

罗伯特·卡茨基 (Robert Katzki) 在 Unsplash 上的特色图片。