• 主页
  • 文章
  • 指导
  • 您应该如何以及为什么应该为您的电子商务着陆页创建 A/B 测试

您应该如何以及为什么应该为您的电子商务着陆页创建 A/B 测试

已发表: 2021-07-15

记得很久以前，当我第一次走在芝加哥的主要购物大道——密歇根大道上时，我绝对被不止一家商店的橱窗惊呆了。 耐克商店是对迈克尔乔丹的致敬，FAO Schwarz 玩具店是一个壮观的迷你游乐园，等等。 你进去了，最后随身携带了一些东西，只是为了获得体验的纪念品

相当于您在线商店中的实体店橱窗的是您的登陆页面。 登陆页面是您网站的关键页面：在许多情况下，它是访问者在进行 Google 搜索或阅读您博客上的帖子后看到的第一页。

人们通常认为登录页面是您网站的主页，因此只有一个。 没有东西会离事实很远。 这种类型的页面是我们设计为我们网站入口点的那些页面。 这就是吸引访问者注意力、让他们留在我们的网站上并开始他们的购物体验的原因。 例如，在我们的 Nelio 网站上，我们必须展示 Nelio A/B 测试的一些登录页面是：

  • Nelio A/B 测试的主页
  • 适合您业务的 Nelio A/B 测试
  • 电子商务的 Nelio A/B 测试
  • 等等

这些页面中的每一个都从稍微不同的角度展示了我们的产品，以响应可能对我们的产品感兴趣的不同类型的配置文件。 因此，例如，电子商务的登录页面强调具有电子商务的网站的特征或功能。 它们是为了转化潜在客户而创建的。 正是出于这个原因，您在这些页面上的主要目的是优化您的转化率。

在这篇文章中，我们将看到着陆页的主要特征以及提高其转化率的最佳实践。

电子商务登陆页面的特点

如您所见，电子商务登录页面是专门为营销目的而创建的独立网页。 它是访问者从广告、搜索引擎结果或促销活动中单击链接时“登陆”的页面。

登陆页面的目的是让客户完成某个动作，在电子商务的情况下主要是进行购买。 登录页面与您在网络上可能拥有的其他登录页面的主要区别之一是，它是针对特定访问者个人资料进行定制的：标题、文本、图像和推荐是特定于该个人资料的，因此鼓励具有此配置文件的人购买。 另一方面，登陆页面总是包含一个或多个号召性用语。

捕获用于电子商务的 Nelio A/B 测试登录页面的一部分
电子商务登录页面的 Nelio A/B 测试部分的屏幕截图。

例如，如果一个人在电子商务中搜索如何优化转化率，在看到不同的结果后，他们点击了电子商务的 Nelio A/B 测试链接（您可以在上图中看到部分截图)，当他们登陆页面时，他们会看到与搜索匹配的标题，他们会找到商店的图片，以及邀请他们开始创建 A/B 测试的文本和号召性用语。 该页面还解释了他们如何优化商店中产品的展示方式，并包含一份推荐信，以使访问者更有信心。 最后，有几个部分解释了他们如何通过数据增加销售额，当然还有关于他们为什么可以信任我们的其他信息。

正如您在上面的示例中所见，任何着陆页的目标都是让潜在买家在几秒钟内准确找到他们正在寻找的东西。 该页面的内容是根据买家角色量身定制的，包括重要的产品功能（同样，在编写时要考虑到特定的受众）、增加信心并让访问者更容易购买。

拥有不同目标网页的最大优势是您可以更好地定位特定客户。 设计、价值主张和号召性用语可以更适合细分市场。

为什么以及我应该在登陆页面上创建哪些测试

有人可能想知道为什么要麻烦 A/B 测试而不是简单地实现上述功能。 好吧，一件事是您可能认为会提高用户的转化率，而另一件事非常不同，是您网站上真正发生的事情。 唯一可以检查哪些有效哪些无效的方法是执行 A/B 测试。

您可能已经知道，A/B 测试从改进假设开始（例如，我们可能认为重新分配着陆页以更好地显示某些相关信息将导致更多转化），在变体中实现假设，并测试此变体是否比您的原始页面表现更好。 从技术上讲，A/B 测试将向您的每个访问者显示一个或另一个变体，跟踪他们的行为，并确定哪一个是最好的（如果有的话）。

描述 A/B 测试如何工作的图像：流量被拆分，每个段看到一个变体，然后我们检查哪个变体获得了更多转化
在最简单的形式中，A/B 测试建议将网站的流量随机分成两组，以便 50% 的访问者看到 A 设计，而另外 50% 看到 B 设计。 通过监控每组用户的反应，我们可以计算每组的转化率，如果两者之间存在统计学显着差异，则宣布获胜者设计。

这保证了您最终应用于您的网站的任何更改都将具有更好的转换率，因为您使用真实数据验证了所述更改是否是实际的改进。

请记住，正如我将通过一个示例向您展示的那样，在 A/B 测试中获得的结果可能与预期的不同，这就是执行它们如此重要的原因。 此外，A/B 测试必须连续执行，并且是所谓的转化率优化过程或 CRO 的一部分。

让我们来看看您可以开始在您网站的目标网页上使用的一些最佳做法。

简化页面

登陆页面应该简单易懂。 确保访问者没有被过多的文字淹没或迷路并且找不到“立即购买”按钮。 一些简化页面的技巧是：

  • 显示简洁直接的标题
  • 显示清晰可见的号召性用语
  • 消除不会导致结帐页面的导航链接
  • 显示带有要点的产品详细信息
  • 减少仅显示基本信息的文本

将登录页面想象为一个页面，您首先快速浏览一下以决定是留在上面还是尝试找到更好的东西。 避免不必要的文字，并限制自己回答为访问者增加价值的内容。

尽管理论很好，但最重要的是创建 A/B 测试，以确认您在页面上创建的简化确实是访问者喜欢的。 例如，我们想简化我们的 Nelio Software 主页并对其进行 A/B 测试。 我们的目标是设计一个更简单、更直观、更简洁的替代版本来提高转化率。

  • Nelio登陆。
    Nelio登陆。
  • Nelio登陆的简化版。
    Nelio登陆的简化版。
原始 Nelio 登陆（左）和简化版（右）的比较。

我们进行了测试，令人惊讶的是，我们创建的新变体并不是提高转化率的更好解决方案。 如果我们没有对其进行测试，我们会应用一个我们认为更好但实际上并非如此的页面。 您将在本文中找到我们执行的 A/B 测试的详细信息。

但正如您在下图中所见，我们并没有就此止步，而是继续测试 Nelio 主页的不同变体。 在撰写本文时，我们的主页的设计与之前的提议有很大不同：它更清晰、更简单、更整洁。 而且表现更好！

  • Nelio英文网站登陆页面部分截图1
  • 3. Nelio 英文网站登陆页面部分截图。
  • Nelio英文网站登陆页面部分截图2
  • Nelio英文网站登陆页面部分截图4

登陆页面的第一折

着陆页的第一折是最重要的部分。 这是每个登陆该页面的访问者都会看到的第一件事。 他们是继续浏览您的网站、向下滚动以查看更多内容，还是在不到两秒的时间内逃到 Google 搜索引擎，都取决于此。

不幸的是，您不能在第一折中获得所有信息：您必须仔细选择放入其中的内容。 您需要告诉访客的最重要的信息是什么？ 创建第一折的 A/B 测试对提高网站的转化率有很大的影响。

例如，在描述产品的 Nelio A/B 测试登录页面中，其转化目标是让用户访问产品定价页面，我们测试了其第一折的不同版本。 将鼠标悬停在块上并移动滑块以比较两个版本：

Nelio A/B 测试首页首折原版
Nelio A/B 测试主页第一折的变体
Nelio A/B 测试主页第一折的原始版本和变体之间的差异。

在变体中，我们更改了标题，而不是已经出现在徽标中的产品名称，我们添加了一条会引起访问者好奇心的消息。 不一样的颜色？ 按钮的形状不同？ 这一切的替代地点？

在此之后，我们将副标题更改为表明我们有满足他们好奇心的解决方案：“创建和测试您的 WordPress 的不同版本，以发现您的受众最喜欢什么并提高您的转化率”。 最后，我们更改了操作按钮的文本，添加了一个紧迫点：“现在开始”。 此外，网站的第一部分将占据整个第一部分。 目标是专注于信息。

在这种情况下，英文版的 A/B 测试结果与西班牙文版的结果不同。 虽然在英文版中我们获得了超过 12% 的转化率提升，但在西班牙文版中我们无法获得确凿的数据。 有关此实验的更多详细信息，请单击此处。

A/B 测试结果比较了英文 Nelio A/B 测试主页上的变化。
A/B 测试结果比较了英文 Nelio A/B 测试主页上的变化。

此示例再次向您展示了 A/B 测试登录页面的重要性。 在您对其进行测试之前，您无法知道任何更改会对您的网站产生什么影响。

特色图片

在网站第一折中最能影响访问者感知的元素中，我们使用的特征图像是关键。 因为这是他们看到的第一件事，如果来访者的普遍感觉是拒绝，我们就会失去他们。 此外，当内容在社交媒体上共享时，特色图片也发挥着重要作用。

出于这个原因，当您看到转换结果时，像创建特色图像的 A/B 测试这样简单的事情可以让您微笑。 在 Nelio Contents 登陆页面上，其转化目标是我们的用户最终访问定价页面，我们对其特色图片进行了 A/B 测试。

在此页面上，第一折包含一张特色图片，显示一个微笑的男人，额头上贴着便利贴，胡须浓密，在电脑前。 在电脑显示器上，我们看到了 Nelio Content 的编辑日历。 我们决定创建一个包含两个额外变体的 A/B 测试：第一个替代方案是更传统的图像，显​​示一组人员在笔记本电脑前工作。 在第二个选项中，我们展示了编辑日历的屏幕截图，我们对其应用了模糊效果以使其上方的文本更具可读性。

  • 人非常高兴地发现 Nelio Content
    快乐的人。
  • 一个男人和两个女人评论他们电脑内容的股票图片
    一个男人和两个女人评论他们计算机内容的股票图像。
  • Nelio Content 编辑日历截图
    Nelio Content 编辑日历的屏幕截图。
我们在页面测试中测试过的不同特色图片。 第一个是我们目前使用的图像。

在这种情况下，有没有比其他图像更好的图像？ 你怎么看？ 大胡子绅士能否击败其他两个特色图像变体？

好吧，奇怪的是有一个获胜的形象。 这是完整的测试结果页面：

不同特色图片的 A/B 测试结果。
西班牙文版不同特色图片的 A/B 测试结果。

具体来说，计算机前的那群人的图像的转换率比对西班牙文版有近 90% 的信心的大胡子男子高 25%，在获胜的英文版中提高了近 15% 的百分比，现在有一个甚至更高的统计可靠性，超过 95%。

英文版网站的 A/B 测试结果。
英文版网站的 A/B 测试结果。

如您所见，如果您没有创建 A/B 测试来证实您的假设，那么很难猜测哪种方法最有效。 您将在此处找到有关此测试的更多详细信息。

就像我们测试不同的特色图像一样，另一种有趣的测试类型是为视频更改图像是否更好。 在这篇文章中，我们解释了关于这个实验的更多细节。

号召性用语按钮

您应该在登录页面上尝试的另一种测试类型是测试其上不同样式的号召性用语按钮。 您测试按钮的大小、样式和文本。

根据一些关于什么颜色最适合号召性用语按钮的理论，决定对 Nelio Content 登录页面上的按钮颜色进行 A/B 测试。 在本例中，我们使用 Nelio A/B 测试执行了 CSS 样式测试。

下面是从 CSS 样式编辑器查看我们执行的每个 A/B 测试变体的操作按钮的样子。 首先你有原始版本，按钮是橙色的。 其他两个变体包括分别将按钮设置为绿色和红色的 CSS：

  • 页面的原始版本。
    页面的原始版本。
  • 带有绿色操作按钮的版本。
    带有绿色操作按钮的版本。
  • 带有红色操作按钮的版本。
    带有红色操作按钮的版本。
在 CSS 测试中要测试的版本：橙色（原始）、绿色（第一个变体）和红色（第二个变体）。

在这种情况下，我们获得的结果（您可以在此处查看有关此实验的更多详细信息）是绿色是最适合 Nelio 内容页面的英语受众的颜色。 然而，对于我们的西班牙观众来说，我们还没有找到一种比我们已经拥有的颜色更好的颜色。

如何创建这些 A/B 测试？

如果您使用 A/B 测试工具，创建 A/B 测试非常容易。 特别是，如果您使用完全集成的 WordPress 插件 Nelio A/B 测试，您将能够像使用块编辑器修改页面一样轻松地创建任何测试的变体。

Nelio A/B 测试中的测试选择器
Nelio A/B 测试中的测试选择器。

此外，正如您在之前的一些图片中已经看到的那样，您也可以在 WordPress 本身中获得结果，您无需具备任何编码知识或使用 WordPress 外部的工具。

在这个完整的指南中，我解释了如何使用 WordPress 块编辑器创建 A/B 测试。

开始改善电子商务的转化

提高电子商务的转化率与增加网站访问量一样或更重要。 登陆页面是您的访问者到达的页面，让他们转换应该是您的主要优先事项。 您已经看到它们都有一些共同的特征，但只有创建 A/B 测试，您才会知道如何改进它们。 我们已经展示了一些示例，但不要复制它们，而是做出自己的假设并开始实验。

我们不断创建 A/B 测试的经验使我们能够毫不费力地增加销售额。 您还在等什么来提高您网站的转化率？

Igor Miske 在 Unsplash 上的特色图片。