如果您不知道要更改什么,请尝试更改网站的颜色

已发表: 2021-10-28

提高网站性能的最大问题之一是不知道要进行哪些更改。 这在某个时间点发生在我们所有人身上。 在这种情况下,正确的做法是关注网络中最关键的部分。 我的意思是页面中最受关注或对您的业务模型最重要的部分。

例如,如果您的目标是让访问您网站的人最终填写表格,请关注表格本身:使其更加突出并尽可能简化,以便于填写和提交。 正如我之前所说,首先寻找那些在更改后可能对您的访问者产生更大影响的元素,因为这样您会更快地获得有趣的结果。

如果您仍然不知道要更改什么,那么永远不会令人失望且很容易尝试的方法是将更改应用于您的网页颜色。 无意将视障人士放在一边,很明显您网站的颜色非常重要。 远远超出你的想象。

关于色彩理论和我们人类感知它的方式有几项研究。 看起来只是对我们的视觉系统(眼睛、视神经和大脑)捕获的不同波长的解释,隐藏着巨大的心理背景。

出于这个原因,我鼓励您尝试更改网页(或其中的一些高影响元素)的颜色,并研究面对这些变化,访问者的交互如何演变。 这就是我今天要通过我们在本网站上测试的完整真实示例向您解释的内容。

A/B 测试的定义

要测试您网站上的任何更改,您应该使用 A/B 测试。 通过这样做,您可以使用真实数据并遵循科学方法来保证所应用的更改比您当前的版本更好(或不更好)。

在今天的示例中,我们要做的是测试 Nelio A/B 测试定价页面第一折的颜色变化。 第一个折叠对我们的业务产生了很大的影响,因为它负责显示价格表,我们的访问者在购买插件时最终通过该价格表成为客户。

在下面的比较中,您可以看到第一个折叠的原始版本(左侧)和替代版本(右侧),带有不同颜色的按钮和边距,以及新的背景图像:

Colores originales de la tabla de precios。
Colores alternativos del tabla de precios。
定价表中的原始颜色(左)和要测试的替代颜色(右)。

为了测试更改,我们使用 Nelio A/B 测试作为我们的参考 A/B 测试插件。 我们要做的第一件事是创建一个新的页面 A/B 测试,这是我们要测试的元素。

我们这样做是因为我们可以通过 WordPress 页面编辑器本身更改颜色。 如果我们不能那样做,因为颜色来自主题模板或其他一些不太正统的方式——经验告诉我们,颜色样式可以在 WordPress 中以多种方式定义——,另一个总是有效的选择是使用 CSS 样式的 A/B 测试,我们可以通过在变体中添加新的 CSS 样式规则来应用新颜色。

在 A/B 测试的编辑屏幕中,我们选择要测试的基本页面(我们的定价页面)并创建一个新的变体,稍后我们将对其进行编辑:

我们创建的页面的 A/B 测试的创建屏幕。
我们创建的页面的 A/B 测试的编辑屏幕。

另一个需要强调的重要方面是定义我们希望 A/B 测试工具跟踪哪些指标,以便以后找出两个版本中哪个效果更好。 正如您在上面的屏幕截图中所见,我们在转换目标和操作部分中对此进行了定义。

在我们的案例中,我们定义了五个目标,这将为同一个 A/B 测试提供五个不同的结果。 首先,我们定义目标来衡量价格表中任何计划的购买按钮的点击量。 然后我们有 3 个额外的目标,分别衡量每个计划的点击次数。 最后,我们有一个目标,即在查看被测页面的每个版本后衡量实际购买次数。

最后,我们编辑页面的替代版本。 这会将我们带到我们正在使用的 WordPress 页面编辑器(在我们的例子中是块编辑器),如以下屏幕截图所示:

使用 WordPress 页面编辑器编辑要测试的替代版本的颜色。
使用 WordPress 块编辑器编辑替代版本的颜色。

在这里,我们只需要更改三列中每一列的操作按钮的颜色以及用于创建上边距的元素的颜色。 我们还为已上传到 WordPress 媒体库的另一张图片更改了背景图片。

一旦包含我们要测试的更改的替代页面准备就绪,就该返回 A/B 测试编辑屏幕并启动它了。 这将自动将访问我们定价页面的流量分成两部分。 一半的访问者将与原始版本进行交互,另一半将看到变体。

通过这种方式,我们可以检查哪个版本的页面更适合五个转换目标。 现在我们只需要等待结果为我们提供我们所寻求的信息。

测试结果分析

最终,如果一种变体比另一种更好,A/B 测试工具本身会告诉我们。 在我们之前描述的A/B测试中,结果已经很清楚了。 新颜色的版本比我们已经拥有的更糟糕。 您可以在以下图库中查看测试中定义的五个目标中每个目标的详细结果:

该变体不仅减少了对操作按钮的点击次数,而且还导致销售额减少(减少了近 22%)。

这可能看起来很愚蠢,但是如果不使用 A/B 测试来测试更改,而是直接在您的网站上更改它们而不进行测试,那么您就有引入可能效果更差的更改的风险。 这可能是我们的情况,因为我们想要做出的改变并没有我们想象的那么好。

您可能会发现在任何给定时间更改颜色是一个很好的解决方案,因为您只是更喜欢新的颜色。 您找到了一个新的调色板,从风格的角度来看,您认为它要好得多,并选择直接使用它。 但这是一个很大的错误。 您喜欢一种颜色多于另一种颜色这一事实并不重要。 重要的是要仔细检查您的观众和访问者是否确实如此。 您可以通过 A/B 测试在受控环境中执行此操作。

Jeremy Thomas 在 Unsplash 上的特色图片。