使用 CSS 样式表进行拆分测试

已发表: 2021-07-19

对网站进行显着拆分测试的最快方法是在站点范围的实验中对级联样式表 (CSS) 进行大胆更改。

为什么 CSS 样式表很重要css-split-testing-2

网站的主要 CSS 文件是一个中心参考点，它控制每个网页上所有元素的通用样式、位置和行为。

主 CSS 文件中包含所有字体、边距、颜色、对齐方式等的设置。 它是大多数模板化网站上最重要的文件，只需稍加编辑即可彻底改变网站的外观。

您每次都应该执行的站点范围拆分测试

网站上有许多共同元素，它们在网站阅读、使用、导航、突出号召性用语和显示所有关键信息的难易程度方面发挥着重要作用。

当用户决定是否进行联系或在网站上进行购买时，上述任何一项都可能是阻止该转换的决定性因素。 以下是站点范围元素的一些关键注意事项：

号召性用语按钮

所有在线转化都以行动号召 (CTA) 按钮、链接或小部件开始。 这些 CTA 的大小、颜色、措辞甚至位置对转换率有很大影响。 例如，CTA 按钮的某些颜色可能会与背景混合过多，或者可能会下意识地让用户不愿点击它们，这取决于他们认为负面的颜色。 链接和按钮上使用的文本也会有所不同。 例如，简单地将表单的“提交”按钮更改为“发送”会产生更好的结果，因为“提交”被认为是一个强有力的词。 您可以在 VWO.com 上的 CTA 终极指南中阅读更多相关信息。

用于“立即购买”按钮的绿色略有变化。组合 2 添加到购物车的产品比原始组合 1 多 1.5%
用于“立即购买”按钮（突出显示）的绿色略有变化。 组合 2 将产品添加到购物车的用户比原始控制多 1.5%，组合 4 差 1.4%

字体大小

这个很少测试的元素在许多用户的可访问性方面发挥着重要作用。 字体对于某些用户来说通常太小而无法阅读，因此如果他们熟悉它，他们可能必须使用缩放功能，但这在移动设备上并不总是可行或容易。 过大的字体大小也可能是有害的，因为它们会降低阅读速度，尤其是在适合移动设备的网站上。 在 imarc.com 上阅读有关字体大小背后的科学的更多信息。

字体类型

同样，字体的样式很少在许多网站上进行测试，似乎在开发的初始设计阶段就决定了，然后在许多网站上被遗忘了。 不同风格的字体具有不同程度的可读性。 此外，有些字体仅在某些设备上可用，有些字体在某些设备上以某些大小显示非常糟糕，而没有字体光栅化。 您可以使用字体系列来使用一系列字体，从您最喜欢的字体开始，逐渐使用更简单的字体，例如 Arial，这些字体始终存在于每台设备上 新字体可以通过 JavaScript 或服务包含在网站中，例如谷歌字体。 您可以在 TypeWolf.com 上的这篇关于 2016 年十大网络字体的帖子中找到更多信息。

字体样式

行高、下划线、粗体、颜色和边距等字体样式也会影响可访问性和可读性。 蓝色和带下划线的链接更有可能被点击，谷歌和 eBay 多年来精心测试了这一点，谷歌甚至在 2016 年测试了黑色链接。 如果链接在您的网站上没有明显地突出作为链接，那么应该对它们进行测试，您会发现它们在更改后通常表现出更大的参与度。

只需更改本网站的字体，转化率就提高了 1.9%
只需更改本网站的字体，转化率就提高了 1.9%

背景颜色

网站通常是在白色背景上制作的，但如果您查看自己喜欢的新闻网站或社交媒体平台，它通常会带有轻微的蓝色或灰色阴影。 背景颜色可以帮助网页的某些区域脱颖而出，例如信息框或特价横幅。 此外，背景颜色可以加强所显示产品的品牌或类型，这种相关性可以提高转化率，因为内容看起来更相关。 在 Jimdo.com 上的这篇文章中了解有关网站色彩心理学的更多信息，并了解橙色等颜色如何表示划算（想想亚马逊），蓝色表示中立和技术（想想 Facebook 或 Twitter）。

重新定位或隐藏元素

CSS 文件控制网页上所有常见元素的边距和填充，还允许您使用“display:none”命令完全删除某些项目。 您可以通过尝试减少垂直浪费的空间、删除不必要的信息、改变重要 CTA 之间的间距或尝试删除某些内容块来利用这一点。 有时在网页上越少越好（保持简单的愚蠢原则），并且在提高转化率的同时查看可以从网页中删除多少内容是一种很好的做法。

将内容添加到此页面后，参与度提高了 16% 以上
当内容包含在类别页面中时，参与度提高了 16% 以上

用于在站点范围内拆分测试 CSS 文件的平台

当每个用户从一个页面到另一个页面时，让网站上的模板对于每个用户保持一致非常重要。 如果只有一页进行 A/B 拆分测试而其他页面保持不变，这可能是有害的（当然也是一个糟糕的实验）。

需要特殊的拆分测试软件来使每个用户的页面之间的 CSS 文件更改保持一致，不幸的是，Google Analytics 的免费“内容实验”不能满足这些类型的拆分测试。 以下是您可能想要使用的一些工具：

  • Visual Website Optimizer (VWO) – vwo.com – 我们发现这是最容易实施的拆分测试软件。 它处理 HTML、CSS 或 JavaScript 上的所有类型的拆分测试，并在需要时生成用户热图。 价格结构可以在这里找到
  • Optimizely – optimizely.com – 它还可以处理 HTML、CSS 或 JavaScript 上的所有类型的拆分测试，并且可以根据需要进行一些非常高级的拆分测试。 定价信息可以在这里找到

结论

设置站点范围的 CSS 拆分测试既简单又有效，但如果您不熟悉 CSS，则可能需要开发人员 15 分钟的帮助。

一旦网站拥有正确的字体、样式和 CTA，您就可以专注于网站的关键登陆页面和其他更多利基元素。 这提高了转化率并使网站更有效，而无需任何额外的流量。

如果您需要帮助，请随时与我们联系。