9 个弹出窗口设计最佳实践,让客户继续购买

已发表: 2022-06-29

围绕弹出窗口仍然存在很多争议。 有些人不喜欢它们,而另一些人则喜欢使用它们; 但有一件事是肯定的,弹出窗口会转换,它们会一直存在!

弹出窗口 - 如果使用得当 - 很难被忽视,因此是让全新或回访者对您的号召性用语 (CTA) 采取行动的最佳方式。

好消息是,您不必成为该领域的专家,创建最佳弹出式设计即可吸引更多访问者并改善您的用户体验。

您可以遵循某些规则和做法来制作出色的弹出广告系列。

popup-design-best-practices-cover-showing-two-popup-overlays

弹出式设计最佳实践指南

遵循弹出窗口设计最佳实践并使用可靠的弹出窗口构建器应用程序可以很容易地为您的品牌/商店创建具有高度吸引力的弹出窗口。

这就是为什么我们要与您分享设计具有视觉吸引力和说服力的弹出窗口的九种最佳实践。 此外,我们还提供了一些来自不同品牌的弹出式设计示例,以展示这些技巧是如何发挥作用的。

使用有效的弹出式设计提高转化率的 9 个技巧

如果您想知道如何改进弹出式设计、提高转化率和业务增长,以下是一些有用的提示:

1. 确定你的目标并采取行动

simpson-character-opening-life-goal-notebook-to-see-the-goals

首先,你应该弄清楚你的目标是什么。 事实是,如果您不知道自己想要什么,您的弹出式设计就不可能准确。

在开始设计弹出窗口之前了解您的业务目标非常重要,这样设计才能与它们保持一致。

你需要确定你的目标,然后采取相应的行动。

  • 增加销量。
  • 不断增长的电子邮件列表。
  • 推广产品/服务。
  • 减少购物车遗弃。

您可以为每个弹出窗口设置不同的目标,但请遵循某些策略来优化它们以获得最佳结果。

在本文中,我们将介绍这些策略中的每一个,并提供一些技巧以最有效地将它们实施到您的弹出窗口中,所以让我们深入研究吧!

2. 确保您的号召性用语引人注目

让它简单而有趣!

在弹出式设计方面,您的号召性用语 (CTA) 是转化的关键

这是您的弹出窗口的一部分,它鼓励客户采取特定行动,例如输入他们的电子邮件地址或将产品添加到他们的购物车。

什么是号召性用语按钮?

如果 CTA 不引人注目,您的潜在客户很可能会忽略它——这首先违背了使用弹出窗口的全部目的。 例如,这个 Hubspot 推广其博客的弹出式设计就是一个简单但引人入胜的号召性用语的好例子。

Hubspot-email-listing-Popup-example-for-CTA-as-Popup-Design-Best-Practices

您可以采取一些措施来确保您的 CTA 脱颖而出:

  • 使用按钮而不是文本; 按钮很容易看到,并且在背景颜色的映衬下显得格外醒目。
  • 包括动画或动态图形; 这将吸引访客并鼓励他们采取行动。
  • 保持简短; 添加激发行动的词语,以确保网站访问者确切地知道您希望他们做什么。
  • 确保按钮或链接易于找到; 您不希望访问者必须搜索它。
  • 增加紧迫感; 使用诸如“现在”或“仅限今天”之类的短语会产生紧迫感和 FOMO。

3. 文案要简短但有说服力

说得少但说得好!

由于您只有几秒钟的时间给访问者留下印象,因此简洁对于成功的弹出式设计至关重要。

用你的文案有说服力; 专注于您的产品或服务的好处,并使用有力的词语来吸引注意力。

利用社会认同和社区参与来宣传您的信息,并清楚您所提供的内容。

通过精心设计的弹出窗口设计,您可以说服人们采取行动并提高转化率。

这是乐高的一个简短而有说服力的弹出窗口的示例。 当您第一次访问其网站时会出现一个导航弹出窗口,邀请您访问电子商店或游戏区。

Brief-Lego-popup-design-navigating-users-to-two-different-sections-of-the-website-with-two-CTA

没有销售,只有有用的信息和简短的信息! 此外,虽然 CTA 不同,但它们都很醒目,并且具有相同的指示方向的目的。

4. 应用对比以吸引更多注意力到您的信息

确保您的弹出式设计被看到并采取行动的最佳方法之一是应用对比

在色轮上使用相互对立的颜色,使您的弹出窗口最重要的元素在您的查看器中弹出。

ultra-beauty-contrasting-floating-bar-pink-popup-design-best-practices

这种技术的一个很好的例子是 Ultra Beauty 浮动栏弹出窗口。

此弹出窗口的粉红色与网站的白色背景形成鲜明对比,但与网站风格相协调。 此外,标题“不要错过乐趣!” 简短但触发。

因此,如果您想确保人们看到您的消息,请考虑为您的号召性用语按钮或整个弹出窗口使用对比色

这可能只是引起关注和被忽视的区别!

5. 使用创意图片并充分利用它们

通过在弹出窗口中添加相关图像和不同形状,充分利用您拥有的空间。 事实上,弹出窗口越独特,它就越有可能脱颖而出。 以下是使用相关且引人注目的图像的 COVID-19 响应通知弹出示例:

covid-popup-design-showing-the-visruse-image-and-a-good-CTA

使用相关的图像和图形是吸引注意力的好方法,通常可以有效地让人们注意到你的弹出窗口。

在弹出窗口中使用图像的一些好主意包括:

  • 与您要发送的消息相关的图像
  • 您的产品图片。
  • 代表您的目标受众或理想客户的人。
  • 显示您正在使用的产品。

6.使您的弹出式设计适应您的网站风格

如果弹出窗口设计良好,可以帮助您让人们关注您的消息。 但是,您必须以风格来做!

将弹出窗口的设计与网站的整体风格相匹配对于您的品牌形象至关重要。

通过这样做,弹出窗口将显得更加精美,并且会从您页面上的其他内容中脱颖而出。

使用 Adob​​e Color,您可以创建匹配的弹出式设计。 您可以上传您的网站的屏幕截图或将出现弹出窗口的页面,Adobe Color 只会建议适用于您的网站的颜色。

然后,您可以将这些颜色合并到弹出窗口的设计中,以创建具有凝聚力的外观。

popupsmart-popup-design-matching-popup-to-site-style-showing-team-members-smiling-and-inviting-the-user-to-book-a-demo

这是Popupsmart 退出意图弹出窗口的一个示例,完美地针对潜在客户并匹配品牌的身份和网站的风格。

Popupsmart 弹出窗口构建器解决方案允许您完全自定义弹出窗口,使其与您商店的风格相匹配。

7.不要要求太多信息

当您需要联系客户的只是他们的电子邮件时,为什么还要用这么多字段来打扰他们呢?

减少弹出表单上的输入字段数量通常可以带来更好的客户体验和参与度。

一个好的经验法则是只询问您需要的信息。 这将使您的客户旅程更轻松,并且他们更有可能完成表格。

限制弹出表单上的输入字段数量有助于提高可用性并产生更好的结果。 在设计以下电子邮件弹出窗口时请记住这一点!

Forever-21-simple-email-popup-design-with-20-percent-off-andshowing-two-models-girl-and-boy-in-brand's-closs

这是一个很好的例子; Forever 21 提供 20% 的优惠券以换取此弹出窗口中的电子邮件地址。

8. 轻松关闭弹出窗口

如果使用不当,弹出窗口会很烦人,这已经不是什么秘密了。 但你知道更糟糕的是什么吗? 很难关闭弹出窗口!

许多营销人员错误地使用了小的、不明显的、难以点击的“X” ,这会让访问者感到沮丧并导致他们离开。 或者更糟糕的是,他们决定完全取消关闭按钮,希望访问者自己解决。

让访问者可以轻松关闭您的弹出窗口,让他们继续与您的网站互动。

查看著名品牌使用的 20 个鼓舞人心的弹出窗口。

仅仅因为无法关闭不断出现的烦人弹出窗口而离开网站的人无法结束。 不要冒险以这种方式损害您的跳出率!

使用 Popupsmart,您可以自定义关闭弹出按钮以匹配您网站的风格,同时仍然可供访问者访问。

9. 创建定制的移动弹出窗口

众所周知,移动流量变得越来越重要,如果您的网站没有针对移动设备进行优化,您就会错失很多潜在业务。

为不同设备定制弹出窗口可能具有挑战性,但可以确保覆盖所有可能的渠道和受众。

由于桌面用户的屏幕更大,您可以在弹出窗口中添加更多元素。 使用 popupsmart 工具创建定制桌面弹出设计

另一方面,移动用户有限,因此您必须减少弹出窗口中的因素数量。 使用 Popupsmart 工具创建定制移动弹出式设计

Popupsmart 可以轻松在桌面和移动视图之间切换,因此您可以轻松编辑需要更改的元素。

您还可以为不同的设备创建单独的弹出窗口,或者为您的移动弹出窗口使用相同的设计。

如果您希望您的移动弹出窗口有趣且引人入胜,请考虑以下提示:

  • 缩短移动设备的弹出式副本和 CTA
  • 删除任何令人困惑的背景图像
  • 最小化表单域的数量

立即开始设计您的高转化率弹窗!


通过遵循这些弹出式设计最佳实践,您可以为您的品牌创造引人入胜的体验,从而带来满意的客户。

基于这些原则的弹出窗口将增加您获得更多转化的机会,并最终帮助您实现品牌目标。

此外,这些做法并不难遵循,您可以根据自己的要求即兴创作。

然而,最好记住一切都应该朝着一个目标——帮助用户完成期望的动作

您还想在此列表中添加任何其他最佳实践吗? 让我们在评论中知道!

下面列出了一些您可能会发现对您的研究有帮助的相关文章:

  • 27 个完美优化的弹出式设计,激发 2022 年的灵感
  • 弹出式 UX 设计:常见错误和替代方法
  • 电子邮件弹出窗口:包含 15 个精彩示例的完整指南

相关术语:

  • 什么是点击率 (CTR)?
  • 什么是转化率?
  • 什么是电子邮件营销?