如何设计可转换的电子商务结账流程

您的电子商务结账流程就是资金所在。 想想看。 随机访问者在进入结账漏斗之前就离开了网站。 有动力的买家来这里完成他们的订单。

结帐用户体验中的任何小设计改进通常都会直接影响您网站的收入。

我最近分析的一个电子商务网站有一个支付页面，其中 84.7% 的流量用于购买。 我计算出，如果我们能将其提高到 90%，这将增加 461 个订单和每月额外的 87,175 美元——收入增长 23.9%。 “小”收益可以是巨大的。

所以，问题是，“我们如何让更多的人通过我们的结账流程并完成购买？ 具体策略取决于您的网站，但提出答案的原则是通用的。

考虑电子商务结账的框架：Fogg 行为模型

底线是这样的：行为 = 动机 x 能力 x 触发。

这是模型：

你想瞄准图表的右上角——积极性高、容易做、触发到位。 如果你有高动机和低能力（很难做到），你会得到的是挫折。 如果动机不强但容易做（例如倒垃圾），你会很烦恼。

亚马逊如何使用 Fogg 行为模型

当亚马逊向您发送一封包含产品促销信息的电子邮件时，这就是动机和触发因素。 人们点击链接并进入产品页面。 他们阅读副本和评论，并查看图片，所有这些都增加了动力。 “添加到购物车”是启动结帐过程的触发器。

能力呢？ 完成结帐过程有多容易？ 这就是亚马逊踢屁股的地方。 您只需要输入密码并单击几次。 结账流程无摩擦。

以下是亚马逊移动商务应用程序的实际工作流程：

大功告成。 让我们一步一步地完成整个结账流程，看看什么才是好的结账流程。

注意：您可以从我们的综合电子商务指南报告（专门针对电子商务的 247 项指南）中获得大量其他电子商务提示。

如何设计“加入购物车”功能和购物车页面

这一切都始于人们向购物车添加一些东西。 访问者将第一件商品添加到购物车的那一刻，他们不是在浏览，而是在购物。

“加入购物车”应该是什么样子的？

当人们在您的产品页面上向购物车添加商品时，会发生什么？

我不应该愚蠢地明显他们已经向购物车添加了一些东西。 清除确认。 荒谬的是，有多少网站通过不显示正确的确认或通过显示难以注意到的微小动画或确认文本来搞砸这一点。

您不能错过 Bonobos 中的购物车添加。 单击“添加到购物车”后，购物车会出现一个小动画，这很好，因为人眼会对运动做出反应。 这是一个微妙的视觉提示，表明从访客到买家的转变。

购物车内容和“结账”按钮也保持可见，直到用户点击其他地方。 那挺好的。 我会将“Checkout”按钮颜色更改为蓝色以外的颜色——它不够醒目。 视觉层次结构中的主要内容是“添加到购物车”按钮，但产品已经在购物车中。

ASOS 也显示了一个小动画。 他们打开购物车的内容，然后在几秒钟后将其折叠起来。 “添加到购物袋”按钮也会变为“已添加”，这对买家来说是一个很好的确认：

我会一直打开购物车内容，直到用户通过单击某处来做出选择。 这样，“结帐”按钮就会一直盯着他们看。

虽然我们总是希望他们购买更多东西，但改进购买一件商品的流程也能带来巨大的改进。 将他们推向结账处总是一个好主意。

一旦产品进入购物车，然后呢？

主要有两种方法：

1. 显示“购物车添加”确认并使用户保持在同一页面上。 优点：人们没有要求移动到另一个页面，所以没有惊喜。 他们也可能会考虑在结账前将更多商品添加到购物车中。 缺点：他们已经在购物车中拥有他们现在正在关注的产品。 如果他们看看他们可能想买的其他东西，那对你会更有用。
2. 将用户转移到购物车页面。 优点：您使他们离付款更近了一步。 这也是进行追加销售的绝佳机会。 缺点：您可能会失去最大化“每个购物车的物品”的机会。

亚马逊将您带到购物车页面，确认您已将产品添加到购物车，并向您显示追加销售。 亚马逊做得好的是缩小购物车内容，因此加售脱颖而出：

潜在策略的正确平衡取决于您的行业和目标，您肯定想对此进行测试。

要记住的指标：

• 平均交易价值；
• 每笔交易的平均数量。

我们不想单独增加交易数量，也不想增加每笔交易的花费。

很好地显示购物车内容

有效显示购物车内容的关键原则是清晰和可控。

• 明晰。 了解购物车中的物品和最终成本（包括运费和税费）非常容易且显而易见。 线下的惊喜成本使人们放弃购物车。
• 控制：很容易进行更改，例如更新数量或删除产品。

ASOS 对购物车页面有很好的理解：

他们做对了什么：

• 产品照片；
• 产品名称及价格；
• 能够删除、保存以备后用或更改大小等细节；
• 显示他们接受的付款类型；
• 显示总价并确认免费送货；
• 清除“结帐”号召性用语；
• 通过突出“轻松回报”来减少不确定性。

Indochino 以令人愉悦的极简主义方式呈现购物车内容。 也就是说，该页面仍然存在一些问题，例如突出的优惠券盒和无法更改数量：

获得正确的视觉层次结构

视觉层次结构中的第一件事应该是继续结账。 （测试不同的 CTA。）。 应该有两个号召性用语：一个在购物车上方，一个在购物车下方。

像这样——两个结账按钮很明显：

自我们上次审查以来，Modcloth 已经改进了此页面。 以前，更新数量需要打字。 现在，您可以使用步进器来增加或减少数量。

请注意，Modcloth 还提供了 PayPal 选项。 虽然大多数人更喜欢用信用卡支付，但提供 1-2 种替代支付方式（例如 PayPal、亚马逊）是一个好主意，并且已被证明有助于转化。 然而，太多的选择是有害的。

Modcloth 还提醒您，订单超过 75 美元，他们可以免费退货和免费送货。

不要让优惠券显眼

当人们看到“在此处输入优惠券代码”字段时，他们会觉得不那么特别。 “我怎么没有？” 许多人去谷歌寻找优惠券； 许多人永远不会回来。 离开网站寻找优惠券是购物车放弃的常见原因。

所以，这不是一个好主意：

相反，有一个文本链接，上面写着“有优惠券吗？” 或类似的东西。 当有人单击链接时，会出现一个输入字段（如上面的那个）。 文字链接不那么突出，所以很少有人会关注它们。

已经拥有优惠券代码的客户将寻找一种输入方法。 除非你把它隐藏得很好，否则他们会找到它并能够应用他们的优惠券代码。

提醒购物者注意好东西：运输、退货和安全

他们什么时候能收到他们的货物？ 运费是多少。 是免费的吗？ 交易会安全吗？ 提醒人们。

这是一个示例，显示了结帐按钮下方的三个关键消息，其中还显示了“立即安全支付”：

持久推车 FTW

当人们向购物车添加东西时，不要让购物车内容过期。 使用放弃购物车的电子邮件和重新定位的广告，让人们在下周或下个月回来，以便他们可以从上次中断的地方继续。

注册过程：要不要创建帐户？

许多电子商务网站都希望买家在购买前先注册。 有些甚至强制注册（即不注册就无法购买）。 长话短说：不要这样做。 它伤害了转换。 很多。

由于强制注册，四分之一放弃在线购买。 强制注册是“贪婪营销者综合症”的一部分。 很容易理解为什么电子商务营销人员想要这样做——他们希望用户被“锁定”并会因为他们有一个帐户而购物更多。

真的是这样吗？ 哦拜托。 您在多少个网站上注册了帐户？ 出于这个原因，你现在对他们忠诚吗？ 我敢打赌，您没有多次登录其中的大多数。

这是一个关于强制注册的好故事，由可用性大师 Jared Spool 讲述：

很难想象一个表单可以更简单：两个字段、两个按钮和一个链接。 然而，事实证明，这种形式阻止客户从主要电子商务网站购买产品，每年高达 300,000,000 美元。 更糟糕的是：网站的设计者甚至不知道存在问题。

表格很简单。 这些字段是电子邮件地址和密码。 按钮是登录和注册。 链接是忘记密码。 它是该站点的登录表单。 这是用户经常遇到的一种形式。 他们怎么会有问题呢？

问题不在于表单的布局，而在于表单所在的位置。 用户在他们的购物车中装满他们想要购买的产品并按下结账按钮后会遇到它。 在他们实际输入信息以支付产品费用之前。

该团队认为这种形式可以让回头客更快地购买。 首次购买者不会介意注册的额外努力，因为毕竟，他们会回来购买更多产品，并且他们会欣赏后续购买的权宜之计。 每个人都赢了，对吧？

我们对需要从网站购买产品的人进行了可用性测试。 我们让他们带上他们的购物清单，我们给了他们购买的钱。 他们所需要做的就是完成购买。

我们对首次购物者的看法是错误的。 他们确实介意注册。 他们对遇到该页面时不得不注册感到不满。 正如一位购物者告诉我们的那样， “我来这里不是为了建立关系。 我只是想买点东西。”

通过取消强制注册，他们的销售额增加了 3 亿美元。

Spool 的团队还发现大多数人在系统中拥有多个帐户。 人们忘记了他们已经有了账户。 当他们尝试使用标准电子邮件创建一个时，他们收到错误消息，因此他们不得不使用替代电子邮件来创建更多帐户。

你应该怎么做？ 始终提供客人结帐。 您可以在售后进行注册：

• 甚至不要提到“注册”这个词。 说“新客户”或类似的词。
• 他们结帐后，在“谢谢”页面上提供帐户创建。 您已经在结帐时获得了他们的姓名、电子邮件和地址，因此只需单击几下即可创建一个帐户。 询问他们想要的密码（或提供自动生成密码的选项）并确认创建他们帐户的权限。

根据我的经验，电子商务网站上最常见的方法仍然不是最佳选择。 总体来说，太忙了，要求新客户做出选择，导致犹豫：

有几个更好的选择。

结帐注册选项 1

给用户两个选择，新的或返回的：

Asos 并不总是采用这种方法。 这是他们之前的注册页面，有三个选项：

取消这种方法并改用精简版将购物车放弃率降低了 50%！

它仍然（基本上）是强制注册，但它的包装方式不同。 使用社交登录选项也更容易。 一个典型的可用性问题被简化为只需点击几下。

结帐注册选项 2

放弃购物车是一个主要问题。 预先询问您的电子邮件可以轻松启动废弃的购物车恢复过程。 此外，还有两个简单的选择——没有感官超负荷：

结帐注册选项 3

另一个好方法是完全跳过登录屏幕。 相反，只需默认为客人结帐。 已有账户的人可以通过链接登录，新客户付款后可以创建一个账户：

Diamond Candles 做得好甚至不可见。 他们会自动为您创建一个帐户，但不会提及。 假设您使用相同的电子邮件地址进行了四次访客结账，然后最终决定创建一个帐户（基本上是输入密码）。

您之前使用该电子邮件地址的所有订单都将为此帐户合并，因此您新创建的帐户带有正确的订单历史记录。

结帐注册选项 4

使用此选项，在完成购买时提供帐户注册和奖励。 下面是 Speedo 的一个例子：

人们在向您付款之前不会为任何帐户注册而烦恼。 如果您必须选择，对您来说哪个更重要：帐户注册还是购买？

通常，“谢谢”页面不是很有用，但在这里并非如此。 他们为您提供了一个简单的优惠：输入密码并获得优惠券（加上订单跟踪、更快的购买等）。 这里新用户的帐户创建百分比通常超过 75%。

电子商务结帐页面

这是钱页。 您最终结帐页面上的任何提升都会对您的银行帐户产生很大影响。 这里有一些原则可以帮助您在结帐流程中创建更好的最后一步。

最后询问信用卡信息

让人们在开始计费之前完成运输信息。 这将西奥迪尼的承诺和一致性原则付诸行动。 一旦人们开始做某事，他们就会觉得自己应该完成。

他们已经被要求输入他们的姓名、电子邮件和送货信息，理想情况下，这些信息与账单地址相同，因此他们不需要再次输入。

相同的原则，有时称为踏入门技术，适用于表单域。 首先从更简单的字段开始，例如名称。 信用卡号字段是“最难的”，所以应该放在最后。

这是你不应该做的：

这个更好。 （您可以从发货页面到达这里。）

优点：它有一个清晰的 1-2-3 步流程。 姓名字段位于卡详细信息之前，无需再次输入帐单地址（如果与送货地址相同）。

坏处：主要的 CTA 是“保存并继续”。 继续哪里？ 它应该是具体的，比如“继续审查”，或者下一步行动是什么。

使用看起来像真实信用卡的付款表格

通过以这种拟物化的方式设计支付表单来添加现实生活的触感：

您可以免费获得一个名为 Skeuocard 的接口（！）以在您的系统上实现。 在此处尝试演示。

使付款过程看起来安全

安全是一个严重的问题。 除了实际使用 SSL 确保支付安全之外，还可以告诉人们它。 这是一个看起来安全的表单示例：

它起作用的一些原因：

• 信用卡号字段的不同背景颜色。
• SSL 标志。
• 书面声明：“安全的信用卡付款。 这是一种安全的 128 位 SSL 加密支付。”
• 到期和安全代码的说明。

请注意，如果您的听众不精通技术，他们可能不知道 SSL 或 HTTPS 是什么，所以说得通俗易懂。

将信用卡存储在您的系统中

当然，您必须处理 PCI 合规性，并且存在被黑客入侵的风险，但是您将从回头客身上赚到更多的钱。 当人们不需要输入他们的账单信息时，购买就变成了一个一键式的过程。

亚马逊正在扼杀它，主要是因为退货买家的摩擦几乎已完全消除！ 结账流程只是一个流程——它是一个单击事件。

回访者比新访客更有可能购买，但这与回访者相比不算什么。 让他们轻松。

结论

在结帐流程中开始您的电子商务优化工作。 这里的相对收益将导致非常好的绝对和。

改善结账流程的用户体验：

• 明确“加入购物车”功能。
• 使访问者可以轻松更改或删除购物车项目。
• 简化注册流程——让新买家在购买后注册。
• 在结帐页面上，首先询问最简单的信息。