礼品卡 UX 和 UI 最佳实践

礼品卡成为电子商务的热门话题也就不足为奇了。 它们不仅非常适合表达感激和喜爱，而且当您没有时间想出一个聪明的礼物创意时，它们也是解决一些令人毛骨悚然的购买困境的有效解决方案。

目录

• ‍ ‍ 为礼品卡设计单独的购买路径
• 创建一个单独的登录页面，列出所有送礼选项
• 为客户提供单独的部分以检查礼品卡状态
• 在多个空间推广礼品卡
• 设计礼品卡购买旅程
• 选择礼物类型
• 选择卡片格式
• 选择交货日期（可选）
• 选择礼品卡金额
• 提供收件人信息
• 个性化礼品卡代码
• 选择礼券模板
• 上传照片以自定义卡片
• 结帐流程
• 通过多个渠道向收件人发送卡片
• 想出一个有效的电子邮件设计
• 兑换礼品卡‍
• 允许部分赎回
• 设计礼品卡输入字段
• 创建成功和错误消息
• 设计礼品卡到期通知
• 概括
  

仅在 2019 年，就有近 30 亿美元的礼品卡现金未使用。 与此同时，2019 年礼品卡总支出为 986 亿美元。 来源

知道礼品卡是一种非常有效的工具，因此有必要简化礼品卡的购买和兑换流程。 但是应该如何设计输入字段呢？ 应该在哪些子页面上推广？ 基于 UX 原则的卡购买和兑换应该如何看待？

这篇博文收集了为网站和移动设备设计礼品卡 UX 和 UI 的最佳实践和灵感。 我们将涵盖整个客户旅程，从在您的网站上推广礼品卡到完成购买流程、与幸运接收者分享礼品卡、最后在您的商店兑换礼品卡。

{{电子书}}

{{ENDEBOOK}}

注意：所有桌面截图都是在 Mac、Chrome 上制作的。

注意：这篇文章的主要焦点是可购买的礼品卡，无论是数字代码还是印刷卡。 如果您想了解有关使用礼品卡作为促销工具和激励措施的更多信息，我强烈建议您查看我们的UX 优惠券和促销指南。

为礼品卡设计单独的购买路径

礼品卡的购买路径可能与标准客户旅程有很大不同，尤其是在您提供数字礼券的情况下。 这就是为什么它应该被设计为您网站的一个单独模块的原因。 大多数礼品卡的购买路径将归结为几个需要反映在您的 UI 设计中的关键步骤：

• 首先，在您的商店中找到礼品卡部分。
• 选择礼品卡格式和模板（推荐）。
• 选择卡值。
• 设置交货方式和日期。
• 填写收款人信息以及将随卡发送的信息。
• 查看。
  

如您所见，此过程不同于将产品添加到购物车的标准产品购买，并且不需要提供额外的详细信息。 这就是为什么您需要为此部分开发与标准产品视图页面不同的不同设计。 但稍后会详细介绍。

这篇文章主要是为电子礼品卡写的。 如果您只在实体店提供礼券，以下是实体卡的 UX 最佳实践列表：

• 让它们引人注目——设计可能会决定客户是否会注意到它们并考虑购买。
• 把它们包起来——把卡片放在信封里，并为顾客提供一个空间，让他们写下个性化的信息或祝福。
• 把它们展示出来——把它们放在任何地方，让它们不能被忽视（例如，收银台）。
• 让它们适合移动设备- 确保移动兑换并允许客户兑换显示在移动设备上的礼品卡。 例如，通过使用可以扫描并保存在移动设备上的二维码或条形码。
  

但是，如果您采用数字化方式，以下是一些重要指南，可确保您的礼品卡旅程从 UX 和 UI 角度进行适当设计。

创建一个单独的登录页面，列出所有送礼选项

既然您知道在设计礼物模块上投入更多时间的必要性，很明显您还需要一个登录页面。 您的礼品卡登陆页面应清楚地说明可用的礼品卡选项。 它应该展示不同的卡片设计（如果您提供很多）并提供不同的卡片交付选项（如果您同时提供电子邮件和打印）。 还建议在此处放置一些常见问题解答或 T&C，以便为潜在买家提供更多信息。

例子：

Zalando 有一个专门的登陆页面来推广他们的礼品卡。 从这个视图中，潜在买家可以看到所有可能的个性化选项，并在标准卡片和礼品盒之间进行选择。

葡萄酒电子商务公司 Winc 在其礼品卡登录页面上包含一个常见问题解答部分，并附有巧妙的副本。

您不仅可以使用登录页面来展示您的优惠，还可以让客户查看他们当前的卡余额。 一些公司还利用这个空间让用户重新加载他们已经拥有的卡。

为客户提供单独的部分以检查礼品卡状态

无论您提供礼品卡作为奖励还是可购买的产品都没有关系，仍然建议为用户提供单独的空间来验证他们的卡状态。 您可以让客户检查卡的有效性、当前余额，甚至可以为卡充值或将积分转移到另一张卡。

例子：

Shein 在他们的礼品卡部分有一个小部件，允许客户检查他们的礼品卡余额，使这个空间成为任何与礼品卡相关的地方。

星巴克允许用户在页面的单独部分查看余额、转移余额、报告任何问题或重新加载卡片。

在多个空间推广礼品卡

除了为您的礼品卡创建登录页面外，您还应该让任何潜在客户都可以轻松访问商店的这一部分。 如果客户无法在您的网站上轻松找到卡片，您将不会从送礼中获得多少收入。 有关礼品卡的信息应放置在页面导航栏和页脚中。 如果礼品卡是新事物，或者送礼季即将开始，您可以考虑发起一项特别促销活动，对礼品卡进行折扣以提高客户意识。

例子：

Home Depot 除了导航栏外，还有一个带有附加服务的顶部栏。 他们决定利用这个空间来推广礼券。 它遵循良好的用户体验实践，因为客户将始终在页面顶部看到此产品。

他们还在页脚处添加了礼品卡。

Zalando 在导航栏和页脚中通知礼品卡。 但是，在这种情况下，礼品卡被列在“配件”类别下，这使得它们比在 The Home Depot 中更难找到。

除了网站或移动应用程序导航，您还可以将礼品卡添加到电子邮件的页脚。 此外，您还可以将它们纳入客户旅程的特定阶段。 例如，您可以在购买后的感谢邮件中提及礼品卡，以鼓励购物者向您的商店购买礼品卡，因为他们已经喜欢使用您的品牌购物。 另一个想法是将卡片添加到购物车视图附近的推荐项目部分。

说到电子邮件，您还可以考虑在一年中的某些时候发送单独的消息来推广礼品卡。 例如，针对圣诞节或母亲节等假期，使用专门的电子邮件来告知您商店中的送礼可能性。

示例：

Winc 发送了一封单独的电子邮件，提醒订阅者有关母亲节的信息并推广礼品卡。

Alloy Apparel 在圣诞节前一天对所有实体礼品卡发起了折扣活动，让客户有机会在最后一刻购买礼品卡。

设计礼品卡购买旅程

选择礼物类型

既然我们知道如何确保客户找到我们的报价，我们就可以设计最佳的购买途径。 当然，您的购买路径可能与我将在下面介绍的路径不同。

例子：

PrettyLittleThing 仅提供一种礼物类型和格式。 这就是为什么他们的客户旅程从选择礼券模板开始。

让我们从选择礼品卡类型开始。 有很多可用的礼物选择，从个人数字代金券到公司卡和团体礼物。 此阶段的设计将根据您要提供的礼品卡范围而有很大差异。 确保无论有多少选项，它们都清晰地列出 - 强烈建议保持您的信息架构平坦，除非您只想强调一个礼物选项。

示例：

家得宝提供多种送礼选择。 单独的卡片在同样重要的奖励选项网格上方的顶部横幅上进行推广，使用户可以理解布局并且所有选项一目了然。

Zalando 还提供了更多自定义选项，但选择了垂直布局，客户需要向下滚动才能查看所有可用选项。 由于 Zalando 仅提供单独的卡片，因此它们不需要平面布局。 相反，他们使用页面将焦点切换到不同的模板和选项。 页面底部提供了额外的选项（礼品盒），明确表明它不是主要产品。

选择卡片格式

如果您同时提供数字和实体礼券，那么购买路径的下一步应该是在这两个选项之间进行选择。 请注意，此步骤和以下步骤应全部显示在一个页面上。 将用户引导至新页面以完成购买过程可能会损害体验并导致他们退出。

交付方式之间的选择应该是明确的。 您可以尝试使用对比色或图标来强调两个选项之间的差异。 还建议使用清晰的副本——“通过电子邮件发送”和“通过邮寄”之间的对比应该足够透明。 如果有天赋的人通过电子邮件收到它但想把它带到商店打印，您还可以提供一个选项，即除了完全数字格式之外，还有可打印的设计（电子邮件附加的 PDF）。 您还可以在电子邮件中加入礼品二维码，以便在 POS 快速扫描。

例子：

维多利亚的秘密从选择交付方式开始其客户旅程。 UI 对这两个选项的重视程度相同。 但是，我会推荐更多对比鲜明的 CTA——“通过邮件发送”和“通过电子邮件发送”可能会让人感到困惑，尤其是对于非英语母语人士而言。

选择交货日期（可选）

为了提高礼券的用户体验，您可以通过允许用户选择何时发送卡片来为您的数字卡添加更多个性化。 从可用性的角度来看，这是有道理的，因为卡片通常作为礼物发送——在大日子前五天发送生日礼物很糟糕，对吧？

例子：

PrettyLittleThing 使用户有必要设置所需的交货日期和时间。 他们使用了一个简单的下拉列表。 我建议改用日历日期选择器，它可以让用户更好地查看他们选择的日期（例如，星期几）。

选择礼品卡金额

在下一步中，您应该允许用户选择礼品卡金额。 建议值和可单击值与自定义输入字段的组合效果最佳。 这样，您就可以为用户提供有关礼品价值应该是多少的线索并使其易于选择，同时如果客户想要购买非标准卡值，则可以提供自定义字段。

例子：

Saatchi Art 是一个在线艺术市场，它使用建议值和自定义输入字段来不施加任何限制。 如果用户超过最大礼品卡价值，他们将收到一条错误消息，通知他们页面顶部的错误详细信息。

Zalando 对礼品卡的价值施加了限制，可能的价值在 50 到 100 英镑之间。 从经济角度来看，这种方法是有意义的。 但是，它极大地限制了您的代金券的灵活性，并且如果他们想要获得更昂贵的礼品卡，可能会导致用户离开您的网站。

Tiffany & Co. 不提供自定义卡值。 相反，它们提供预定义的卡片值。 值得注意的是，默认卡值是 500 美元，即使有更低的值可用。 通过这种方式，Tiffany & Co. 设法引导客户专注于价值更高的卡片，使它们更受欢迎并被视为标准价格。

提供收件人信息

这是设计过程中的关键步骤，尤其是在数字代金券的背景下。 您应该在这里至少填写两个输入字段——收件人的电子邮件地址和电子邮件应包含的礼品卡信息。 一些公司还提供主题行自定义选项，以使卡片交付更加个性化。 关键是只需要必要的信息（收件人姓名和电子邮件地址）。 不要包含太多额外的字段。

另一件事是卡片信息——最好提供预先写好的信息，以便客户更容易更快地发送卡片。 但是，如果用户不喜欢预先编写的文本，您应该让他们更改或自定义消息。 此外，使消息字段可选。

示例：

星巴克为收件人和发件人的信息提供了一个简单的 UI。

亚马逊为用户提供了一个简单的预先编写的消息，让他们了解消息的外观。

个性化礼品卡代码

如果礼品卡是您业务的重要组成部分，您可能会考虑进一步增强其个性化潜力。 您的礼品卡软件应允许您自定义礼品卡代码以匹配收件人的名字或包含卡片所连接的特殊场合（例如，HAPPYBIRTHDAY7593）。 这个简单的技巧将使卡片更令人难忘。 由于排除了混淆字符或适当的长度，独特的图案还将使在结账时更容易应用卡代码。 转到此处了解有关改进代码验证体验的更多详细信息。

选择礼券模板

由于礼品卡通常作为礼物发送，因此最好使它们在视觉上令人愉悦并与场合相关。 例如，想象得到一张全是灰色且没有生日祝福的生日贺卡。 那不会是最好的礼物吧？ 这就是为什么建议至少提供几个礼券模板的原因。

例子：

亚马逊提供了大量的卡片模板，用户可以按场合购物，简化卡片的购买路径。 他们的礼品卡引擎为许多场合提供礼物。 而且，通过多种设计，让预付卡看起来就像是量身定做的礼物。

上传照片以自定义卡片

一个额外的 UX 快速获胜将是允许用户上传他们的照片以个性化卡片。 但是请注意，添加此功能需要您提出照片使用条款，以保护自己免受侵犯任何第 3 方知识产权的侵害。

例子：

Zalando 允许用户创建他们的卡片设计。 但是，为了确保一切都在法律方面得到解决，Zalando 要求用户遵守其使用条款。

结帐流程

当用户填写所有必要信息时，进入结帐步骤，设计为您的标准结帐。 确保用户可以快速更正他们提供的信息或对卡片进行更改，而无需删除整个购物篮，并且每次进行更改时都从头开始。 还建议在此视图中适合卡详细信息。 您可以使用默认隐藏的可展开文本，并在用户单击指定图标或将鼠标悬停在卡片上时显示。

示例：

PrettyLittleThing 是一个糟糕的礼品卡结账 UX 示例。 用户将卡添加到购物篮后，没有简单的方法可以更新卡的详细信息，例如收款人信息或优惠券价值。 唯一的方法是从购物车中取出卡片并重新开始整个过程​​。

Winc 允许用户在购物篮视图中更新卡值。

通过多个渠道向收件人发送卡片

有多种选项可以与收件人共享卡片。 这里是其中的一些：

• 通过电子邮件发送。
• 以可打印的 PDF 格式发送给买方，可以与收件人进行物理共享。
• 通过邮寄方式将实体卡交付给买方或收件人。
• 通过社交媒体发送，例如 Messenger、Whatsapp。
  

就 UI 设计而言，我们将专注于通过电子邮件发送给收件人的数字卡片。 如果这是收件人第一次听到您的品牌，您可能会在您的电子邮件中实施几个信任信号。 以下是一些关于如何拒绝垃圾邮件的提示：

• 明确的发件人身份是一个重要的信任标记——您可以考虑在附有礼品卡的电子邮件的主题行中包含发件人的姓名以增强信任。 例如，使用主题行“凯蒂刚刚给你送了礼物！”
• 利用个性化- 如果您有收件人的姓名，您应该将其添加到您的电子邮件中，以改善用户体验并使消息更值得信赖。
• 不要在主题行中夸大礼品卡的价值——尽量避免在主题行中使用诸如“优惠券”、“代码”、“交易”或数字卡价值之类的短语。 收件人的电子邮件提供商可能会将您的邮件视为垃圾邮件或将其放在邮箱的“促销”选项卡中。
  

想出一个有效的电子邮件设计

说到邮件内容，需要涵盖以下几点：

• 包括卡的价值。
• 包括指向特定条款和条件的链接或有关卡兑换限制的其他信息（如果有）。
• 易于复制到剪贴板的礼品卡代码，最好一键复制。
• 将收件人带到您的商店的 CTA。
  

请记住，用户可以在桌面设备和移动设备上阅读您的邮件。 为确保您的礼品卡适合移动设备使用，您可以在 CTA 中包含深层链接，以确保用户使用已添加到其数字钱包中的礼品代码直接访问您的电子商务应用程序。 如果您只决定电子邮件格式，请确保包含易于缩放的条形码或具有高对比度的二维码，以确保 POS 的扫描设备可以兑换它。

例子：

Watsi 是一家慈善医疗机构，在涉及到正确的礼品卡电子邮件设计时，会标记所有复选框。

亚马逊将礼品卡视为可以保留在帐户中的商店信用。 在他们的电子邮件中，他们包含了一个深度链接，该链接将用户直接带到亚马逊网站或应用程序（取决于设备），该应用程序自动将积分应用到接收者的帐户。

兑换礼品卡

正如 Kim Salazar 所建议的，优惠券和礼券的有用性与其在网上商店的易用性成正比。

您应避免对礼券兑换施加任何限制，例如最低订单金额。 另一个普遍的良好用户体验实践是记住礼品卡接收者将对交付和产品成本信息更加敏感。 这样的客户比平时更加​​注意配置购物车内容。 这是因为担心卡面值和订单金额的差额可能会丢失。 这就是为什么您还应该将用户旅程视为一个整体并引入修复程序以提供最佳的用户体验。

{{顾客}}

{{终端客户}}

允许部分赎回

您可以将礼品卡视为一种付款方式，而不是促销券。 如果您使用可充值的礼品卡，例如星巴克的情况，此选项非常有用。 然后动态计算卡上的余额，使用积分作为支付方式。 类似于信用卡或借记卡。 如果您选择此解决方案，您需要确保礼品卡上没有有效期（或很长的有效期）。 这可以使您的礼品卡非常有吸引力，但与此同时，它需要高质量的基础设施来保持礼品卡的可兑换性。

例子：

使用 Zalando 礼品卡购物很容易，但入门可能会给用户带来挑战。 要按预期使用礼品卡，接收者需要设置一个帐户并找到“您的优惠券选项卡”，并将礼品卡代码放在指定的文本字段中以进行兑换。 兑换后，卡上充值的现金被视为Zalando积分，可作为购买方式。

这种方法的问题是用户可能不知道他们需要设置一个帐户来兑换卡并查看他们的余额。 通过将礼品卡代码放在凭证字段中，也可以在结帐时兑换卡。 然后将凭证金额应用于购物篮中的总金额。 我建议让收卡人清楚地知道这两种可能性。

设计礼品卡输入字段

礼品卡接收者希望尽快使用他们的礼物。 为了满足这一需求，您应该在购买过程的早期提供凭证输入字段，最好是在结帐前的购物车中。 这种方法使客户能够在输入个人信息之前尽早检查卡是否有效。

一个更好的方法是在购买过程的尽可能早的阶段提供兑换礼券的可能性，比订单的最终确定和付款要早得多。

例子：

Winc 提供简单的 UI 设计，让用户在旅程的一开始就兑换礼券，有效地减少了与无法找到兑换字段相关的任何压力或不便。

订阅美容产品品牌 Birchbox 也允许用户立即兑换礼券。 有关快速兑换卡的信息放置在页脚中。

此外，凭证输入位置应该是结帐过程的核心部分，并在网站或应用程序结构中正确显示。 确保它足够长以包含整个优惠券代码。

另一个与礼品代码相关的良好做法是明确区分付款和代金券字段，因为它们的接近性和相似性可能会让潜在买家感到沮丧。

该指南与优惠券 UI 的最佳实践相匹配。 如果您想学习如何设计凭证输入字段，请阅读。

例子：

Birchbox 是凭证输入框的一个很好的例子。 盒子的名称“促销和礼品代码”使盒子的用途一目了然。 许多电子商务网站使用“促销代码”作为此部分的名称，这可能会使礼品卡所有者感到困惑，因为卡片不被视为促销活动。 他们还为那些在购物车视图中错过的人提供了一个链接，可以在结帐视图中打开优惠券代码框。 这是保留在两个步骤中添加优惠券代码的选项的好方法。

创建成功和错误消息

显示成功消息和更改的订单总额以确认礼券代码已成功应用。 将消息放在凭证字段附近，以确保用户看到它并将其与输入的代码相关联。 让该消息显示在页面顶部或页面底部可能会造成混淆。 但是，成功消息不应该是用户获得的唯一确认信息。 在购物车和结帐视图中反映更改后的订单总额。

按照相同的逻辑，您还应该显示一条相关的错误消息，说明礼品卡问题的类型。 不要在每种情况下都显示相同的错误消息，因为它不会指示用户出了什么问题以及他们如何解决问题。 这里有些例子：

• “礼品卡代码不正确，请重试。”
• “礼品卡代码已过期。”
• “您不是礼品卡持有人（如果您将礼品券分配给个人客户）。”
• “您的订单不符合礼品卡条件（如果您为卡兑换设置了限制）。”
  

例子：

如果输入的代码无效或不符合促销条件，SummerSalt 会显示错误消息。 他们鼓励客户仔细检查他们的代码。

设计礼品卡到期通知

如果您的卡有到期日期，您需要提前计划并设置自动通知以提示用户在到期前使​​用他们的卡余额。 在这里，您应该遵循与电子邮件营销相关的最佳 UX 实践，即使视觉醒目，保持文案巧妙，添加对比鲜明的 CTA，并避免使用可标记为垃圾邮件（“折扣” 、“交易”、“销售”）。

概括

我希望这份最佳实践列表将帮助您开始设计您的网站和移动设备以使用礼品卡或改进您当前的 UI 设计。 如果您正在寻找有关建立礼品卡活动的一般建议，请务必查看本指南。

{{CTA}}

准备好让您的礼品卡更上一层楼了吗？

开始使用

{{ENDCTA}}