弹出式用户体验设计:最佳实践、提示和示例

已发表: 2022-04-14

每个专注于利润的网站也都专注于从访问者那里获得更多转化:鼓励他们购买……或至少订阅。

弹出窗口是提高转化率的最佳工具。 开始使用弹出窗口的电子商务商店看到的结果不言而喻:

  • Kiss My Keto将他们的购物车放弃率降低了 20%
  • Christopher Cloos将他们的转化率提高了 37%
  • 繁荣! 作者 Cindy Joseph在短短一个月内将他们的电子商务收入增加了 148,297 美元

上述活动成功的秘诀在于它们与每个网站的整体用户体验 (UX) 相结合。 这些公司在显示弹出窗口时从不打扰用户,而是巧妙地将它们设置为在他们可以在正确的时间提供有用且相关的内容时出现。

如果你能在你的网站上实现这一点,你不仅可以避免破坏你的用户体验,而且你实际上会改进它

在本文中,我们将介绍 5 种方法可以做到这一点,首先是……

捷径✂️

  1. 不要使用烦人的条目弹出窗口。 相反,根据参与度显示弹出窗口
  2. 细分您的访问者
  3. 创建个性化消息
  4. 一次只专注于一个价值主张和目标
  5. 不要要求太多信息

1.不要使用烦人的条目弹出窗口。 相反,根据参与度显示弹出窗口

条目弹出窗口可能会造成极大的破坏。

这些是网站加载后立即出现的弹出窗口。 就像访问者开始了解自己的方位并了解您网站上的所有信息一样,他们会被突然出现的弹出窗口打断。

条目弹出窗口还:

  • 阻止访问者访问所需内容
  • 经常包含不相关的内容
  • 迷惑游客

总而言之,它们几乎总是比有用更烦人,而且它们会降低您网站的用户体验。

与其用传统的条目弹出窗口来打扰您的访问者,不如让他们先了解您的网站。 然后,您可以在他们的行为表明他们已准备好查看辅助消息时显示您的弹出窗口。

以下是一些基于用户参与度触发弹出窗口的典型方法:

  • X 秒后显示弹出窗口:此选项让您的访问者有时间浏览他们正在查看的页面。 他们在页面上花费了一些时间后,您可以引起他们的注意。
popup ux design 01 - Popup UX Design: Best Practices, Tips & Examples
  • X% 滚动后显示弹出窗口:您可以将弹出窗口设置为在访问者向下滚动网页的特定百分比后显示。

    例如,您可以设置在访问者到达博客文章末尾时出现的弹出窗口,这意味着他们已经准备好接受一些新内容(也许通过提供免费电子书来换取他们的联系信息)。
popup ux design 02 - Popup UX Design: Best Practices, Tips & Examples
  • 在退出意图上显示您的弹出窗口:这样,您将引起即将离开您网站的访问者的注意。

    通过退出意图弹出窗口,您可以阻止某人离开而不进行转换,并说服他们继续购物或订阅电子邮件列表。
popup ux design 03 - Popup UX Design: Best Practices, Tips & Examples

注意“频率”也很重要,即弹出窗口设置出现的最大次数。 通常,您希望将其限制为每位访问者 1 或 2 次。

显示多个弹出窗口是可以的,(我们将在下面看到)但是一遍又一遍地看到相同的弹出窗口会让你的用户发疯。

popup ux design 04 - Popup UX Design: Best Practices, Tips & Examples

这是一个很好的例子,说明如何根据用户参与度使用弹出窗口。 Obvi 的退出意图弹出窗口仅向放弃该站点的访问者显示。

popup ux design 05 - Popup UX Design: Best Practices, Tips & Examples

2. 细分您的访客

没有一个神奇的弹出窗口与您的所有访问者相关。 这是因为不是每个人都需要同时看到相同的关键信息或折扣优惠。

不幸的是,您无法确定每个人的问题的解决方案并在弹出窗口中向他们展示解决方案。

相反,您可以将访问者分成具有相似需求和特征的组。

这些细分市场因行业和商店销售的产品类型而异。 但是,所有企业都可以根据他们在购买过程中所处的阶段将他们的访问者分组。

想想您的“客户旅程”:人们如何首先了解您的品牌,他们如何到达您的目标网页,以及他们如何找到他们想要购买的产品。

客户旅程不同阶段的细分市场有不同的需求,您向他们展示的弹出窗口需要反映这一点。

现在,让我们看看您可以用来细分客户的其他一些因素。 我们还将在客户旅程的不同阶段为不同的访客分享一些活动创意。

2.1。 冷与热的前景

“热门潜在客户”是指现在就想买东西的客户,而“冷门客户”仍在探索他们的选择,还没有准备好购买任何东西。

与其将所有访问者视为准备立即购买的“热门潜在客户”,不如为热门和冷门潜在客户创建不同的转换目标。

对于热门潜在客户,转换目标很简单:立即购买。 您的信息需要使用限时折扣或交易将这些潜在客户推向立即销售

您需要为冷淡的潜在客户设置一个次要转换目标,这通常是让他们注册您的电子邮件列表。 获得他们的联系方式后,您将能够随着时间的推移与他们沟通并培养这种关系,直到他们准备好购买。

出于这个原因,您需要向冷酷的访问者展示让他们想要订阅的内容,例如可下载的电子书。

让我们看看它是如何工作的。 这是BOOM! 的几个广告系列中的一个很好的例子

他们提供了一本电子书,作为对他们的产品线感兴趣但尚未准备好购买的冷漠潜在客户磁石

popup ux design 06 - Popup UX Design: Best Practices, Tips & Examples

对于他们最热门的潜在客户(他们对 BOOM! 的内容表达了最大的兴趣或即将放弃他们的购物车),他们使用 10% 的优惠券作为现在而不是以后购买的激励。

popup ux design 07 - Popup UX Design: Best Practices, Tips & Examples

2.2. 地理定位

如果您在国际上销售,基于位置的定位或地理定位可能是提高转化率的好方法。 通过地理定位,您可以根据需要为尽可能多的目标国家/地区创建尽可能多的不同消息。

根据访问者的位置对其进行细分,您可以为他们提供特定国家/地区的优惠,例如运输优惠。 这是一个例子:。

popup ux design 08 - Popup UX Design: Best Practices, Tips & Examples

2.3. 根据购买过程中的阶段定位访问者

您的每个客户都会经历以下意识阶段:

popup ux design 09 - Popup UX Design: Best Practices, Tips & Examples

这 5 个认知级别描述了客户在与您的网站互动时将采用的不同心态。 刚刚得知您的品牌存在的客户会以与忠实客户截然不同的方式查看同一页面。

这就是为什么您需要通过弹出窗口将不同的辅助消息传达给这些细分市场。

以下是为这些组之一量身定制的消息示例。

1. 有问题意识的访客知道他们有问题,但他们仍在努力寻找解决问题的最佳方法。 因此,在这一点上,您的目标是帮助他们更好地了解他们的问题(无论是护肤问题还是需要一双新跑鞋)并提供可能的解决方案。

一种方法是通过博客文章和电子书。 例如,如果您有一篇关于“初学者的跑步技巧”的文章,您还可以推广一本电子书,其中提供有关跑步 10K 的“操作方法”提示。

2.具有解决方案意识的访问者知道哪种类型的产品可以解决他们的问题并积极权衡他们的选择(使他们成为比我们刚刚讨论的具有问题意识的访问者更“热门”的潜在客户)。 这使您的目标变得简单:帮助他们在您的网站上找到最适合他们的产品。

一种行之有效的方法是向他们展示他们正在浏览的类别中最受欢迎的产品(或“趋势”产品)。

3.最有意识的访客找到了他们喜欢的特定产品,可以解决他们的问题。 他们需要做的就是点击“立即购买”并完成结帐流程。 即使这些客户是您“最热门”的潜在客户,他们也经常需要最后的推动才能进行购买。

仅在有限时间内提供的不可抗拒的特别优惠是说服该细分市场现在而不是以后购买的最佳方式。

2.4. 高级细分

您还可以考虑访问者的现场行为,从而创建越来越具体的用户细分。 您的细分越具体,您的消息传递就越相关。

您可以使用以下特定于用户的行为来进一步细分访问者:

  • 已在当前子页面停留至少 X 秒
  • 来自特定的流量来源
  • 当前正在浏览特定页面
  • 以前访问过特定页面
  • 在他们的购物车中有特定的物品
  • 购物车价值大于特定阈值

这使您可以:

  • 向来自不同流量来源(例如,Facebook 与 Google Ads)的访问者显示不同的弹出窗口。
  • 向访问过特定页面但尚未购买的潜在客户展示某些广告系列。
  • 根据已添加到购物车的商品(用于追加销售和交叉销售)来定位访问者。

3. 创建个性化消息

正如我们一直在说的那样,“如果你向所有人销售,那么你就没有向任何人销售。” 您可以通过个性化将其提升到一个新的水平。

一旦您根据访问者的兴趣、人口统计或地理变量以及他们在购买过程中的阶段将访问者分成几个部分,您就可以向他们展示最相关的消息。

例如,如果您销售电子产品并且知道特定访问者对智能手机感兴趣,“25% OFF Smartphones”是比“25% OFF Selected Products”更有效的信息。

popup ux design 10 - Popup UX Design: Best Practices, Tips & Examples

弹出窗口中的消息有四个基本的自定义级别:

  1. 每个人都得到相同的信息:换句话说,您向所有网站访问者广播了一般优惠。 不建议这样做。
  2. 您为热门潜在客户和冷门潜在客户提供两种不同的报价:也就是说,您根据他们的参与度将您的受众分为两个主要部分。 即使是这种简单的分割也可以产生影响。
  3. 每个主要访问者组都有几个优惠:在这种情况下,您可以根据相关变量将访问者分成几个不同的组,并为每个组使用自定义消息重新吸引他们。
  4. 每个人都使用动态文本替换获得自定义消息:这是您的弹出窗口的最高个性化级别。 每条消息都是针对看到它的特定个人量身定制的。

使用动态文本替换,弹出窗口中的文本将根据您选择的变量自动更新。

这意味着您可以创建一个模板,然后更改内容以满足每个访问者受众的需求。 使用这种方法可以减少您的工作量,并确保您的每个访问者细分都能看到最相关的内容。

回到我们上面的例子,当访问者试图从智能手机类别页面或智能手机类别中的单个产品页面离开他们的网站时,电子商店会宣传“25% OFF Smartphones”。

popup ux design 11 - Popup UX Design: Best Practices, Tips & Examples

但是,当访问者浏览笔记本电脑配件并试图离开该网站时,“智能手机”一词会自动更改为“笔记本电脑配件”——直接针对该客户的需求。

popup ux design 12 - Popup UX Design: Best Practices, Tips & Examples

4. 一次只专注于一个价值主张和目标

为了最大限度地提高转化率,您应该将每个弹出窗口限制为一个目标,并确保其价值主张具有说服力。

价值主张是客户可以从与您的弹出窗口互动或购买您的产品中获得的好处 电子邮件注册弹出窗口的价值主张可能是对某些销售或产品的独家访问,而折扣弹出窗口的价值来自访问者通过使用优惠券代码可以节省的钱。

如果您试图在同一个弹出窗口中实现多个目标,您将减少完成其中任何一个目标的机会。 最终,它会混淆您的信息并使访问者对您的报价的价值感到困惑,从而降低转化和销售的可能性。

使用弹出窗口可以实现几个目标,但请确保在每个弹出窗口中只追求其中一个目标。

以下是一些常见的电子商务目标:

  1. 推动销售
  2. 建立您的电子邮件列表
  3. 减少购物车遗弃
  4. 追加销售和交叉销售
  5. 改善客户体验

5.不要要求太多信息

正如我们刚刚看到的,弹出窗口的成功取决于它为访问者提供的价值。

但是,无论您的报价多么有价值,如果利用它太困难,那么没有人愿意经历麻烦。

这就是为什么避免询问太多信息很重要的原因。 例如,在电子邮件注册弹出窗口中显示太多字段会使大多数用户看起来工作量太大。 此外,新访问者可能不愿提供过多的个人信息。

您请求的数据越少,最终获得的转化次数就越多。 在许多情况下,只需一个电子邮件地址就足够了,如下例所示。

popup ux design 13 - Popup UX Design: Best Practices, Tips & Examples

许多网站还要求提供名字以在未来个性化他们的信息,就像来自 The Oodie 的这个例子一样。

popup ux design 14 - Popup UX Design: Best Practices, Tips & Examples

当您确实需要请求更多信息时,最好使用多步骤弹出窗口。 这样,您可以首先询问最关键的信息,然后在弹出窗口的第二页上添加其他输入字段。

Oodie 的弹出窗口有一个第二页,他们还要求输入电话号码:

popup ux design 15 - Popup UX Design: Best Practices, Tips & Examples

The Oodie 使用的这种策略被称为“特洛伊木马方法”,它在短短 30 天内为 The Oodie 带来了 190 万美元的额外收入。

如果您想“窃取”他们的策略,请观看我们的免费培训。

trojan horse training - Popup UX Design: Best Practices, Tips & Examples

不要打断用户,而是使用弹出窗口创建出色的用户体验

创建像 UX 设计师这样的弹出窗口意味着将每个访问者视为一个人,并仔细考虑他们在弹出窗口出现时的心理状态。

这就是为什么您永远不应该使用条目弹出窗口,而是根据用户对您网站的参与度来创建弹出窗口。 下一步是定义用户细分,然后显示相关优惠。 最后,您可以使用动态文本替换来个性化您的弹出窗口,以便为每个用户定制您的消息。

通过遵循这些最佳实践,您可以改善您网站上的用户体验,同时改善您的列表构建工作并促进销售!

免费开始使用 OptiMonk,并创建令人惊叹的弹出窗口,在短短几分钟内改善用户体验。

register free optimonk account - Popup UX Design: Best Practices, Tips & Examples