Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

     分类 [产品经理]
2026/1/12 16:12:17 浏览量  489 喜欢  9
导读:本文提供了 10 种方法,来改善桌面网站、移动网站和应用程序的交易结账界面的用户体验,提升交易转化

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

01
让“访客结账”更显眼
(62% 的网站没有这样做)

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Room & Board酒店,许多顾客在只看到“新顾客”“老顾客”选项后,误以为自己必须创建账户。

 

这位顾客仔细查看后,在“新顾客”部分下方发现了一个“以访客身份结账”按钮,从而无需创建账户即可完成结账:“原来有‘以访客身份结账’这个选项。我错过了。我一直在找这个。这正是我想要的。”

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Sephora 的移动网站上,“访客结账”选项以文本链接的形式显示在帐户选择页面的最底部,这可能会导致用户忽略它。

 

允许用户以“访客”身份结账是避免不必要的放弃购买的关键,因为许多用户不会仅仅为了结账而创建帐户。

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

报道曾对过去 3 个月内进行过网上购物的 1026 名美国成年人进行的调查显示,19%的受访者表示,他们因为不想创建账户而放弃了订单

 

然而,如果在结账的账户选择步骤中很难发现“访客结账”选项,如果用户看不到“访客结账”选项,那就跟根本没有提供该选项一样糟糕。

 

因此,许多用户在结账的账户选择步骤中会停下来寻找“访客结账”选项——而一部分用户由于操作速度快,可能永远找不到该选项,从而增加了放弃结账的风险。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“好的,我决定以访客身份继续购物。我现在不想注册账号。”

 

这位Etsy用户继续从购物车结账,很容易就在账号选择界面的顶部找到了“访客结账”选项。

 

总结:请在帐户选择步骤中将“访客”选项设为突出的选项,以确保用户可以轻松找到它。

 

 

02

简化密码创建要求

(65% 的网站没有这样做)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“哦,因为密码不够。咱们随便编一个吧。”

 

这位用户在Target的移动网站上尝试创建账户,但因为密码不符合众多要求而被阻止。

 

为了通过账户创建步骤而随意设置一个复杂的密码,可能会让用户在以后的访问中更难登录。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Cabela's,用户必须应对一长串密码要求,这需要花费大量精力来创建密码。

 

在测试过程中,我们观察到,广泛而严格的密码规则可能会导致现有帐户用户在登录遇到困难时放弃结账的比例达19%

 

特别是,密码重置电子邮件是“忘记密码”流程中非常薄弱的环节,因为密码重置过程中的任何问题都会导致用户无法登录,此时用户很可能会放弃账户。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Dollar Shave Club,密码的唯一要求是至少 6 个字符。

 

鉴于过于严格的密码规则会对可用性造成严重影响,导致账户所有者在尝试重置密码时放弃账户,网站应该尽可能减少密码要求。

 

事实上,如果网站想要尽可能减少账户登录和密码重置的麻烦,我们建议将密码长度限制在6-8 个字符以内。

 

(注:对于电子商务网站而言,降低密码要求(例如低于设备密码的通常建议值)通常是可行的,因为还有其他必要的安全措施可用。此外,诸如双因素身份验证和“魔法链接”之类的无密码安全措施可以更方便、更安全地登录。)

 

03

使用“交货日期”而不是“交货速度”

(48% 的网站没有这样做)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“所以,他们说4-7个工作日内送达。那么,今天都快结束了,还有四天,也就是下周三,5月4号左右?”

 

这位Snowe公司的参与者参考日历估算了实际的订单到货日期,因为提供的预计送达时间并不明确。


 

此外下面三个例子进一步说明了——用户在配送速度方面最关心的问题——“我什么时候能收到订单?” 是如何得不到解答的:

 

  • 梅西百货只提供醒目的快递名称和“运输时间”

    Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

  • 约翰·刘易斯百货则迫使用户考虑“工作日”和公共假期;

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

  • H&M仅仅提供一个预计送达日期范围(“2-3天”),很多用户会将其理解为“我会在2到3天内收到订单”,而没有考虑到周末和节假日。

    Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

用户对配送速度最关心的问题是:“我什么时候能收到我的订单?”

 

电子商务中历来采用的解决方案是明确说明每种运输选项的运输速度;例如, “标准:2 个工作日 - 4.95 美元”

 

然而,这是一种非常以商业为中心的传达信息的方式。

 

显示“发货速度:2 个工作日”迫使用户进行研究、计算,有时甚至需要猜测他们何时才能真正收到订单。

 

这不仅使订单何时送达变得不那么透明,而且还在用户选择送货方式时,给结账过程引入了很多选择复杂性

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

“我希望送货上门。‘周四送达’。”这位在苹果商店购买礼物的顾客很容易就通过每个配送选项旁边列出的预计送达日期确定了他的订单会在期望的日期送达。

 

总之,提供交货日期或日期范围可以让用户立即了解他们何时会收到订单(例如,“4 月 4 日交货”“4 月 4 日至 8 日交货”)。

 

 

04

将截止时间显示为倒计时

(83% 的网站不这样做)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“现在这里快3点了,也就是说加州那边是中午12点……‘太平洋标准时间上午11点前下的订单当天发货’。所以这件商品明天才能发货?”

 

这位Stance论坛的用户停下来,在心里仔细计算着他的订单什么时候能到,认真思考着固定的截止时间以及它与他所在时区(东部时间)的关系。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

American Eagle 网站上,静态文本会告知用户以美国东部标准时间 (EST) 列出的截止时间,因此不在同一时区的用户需要自行计算相关时间。

 

除了送货日期外,许多用户还想知道他们必须在什么时候下单才能确保包裹在该日期前送达。

 

这一点对于选择加急配送选项并支付更多费用以更快收到订单的顾客来说尤其重要。

 

如果网站不提供下单截止时间,用户可能会选择送货方式,但错过未指定的截止时间,导致订单送达时间比预期晚。

 

但仅仅设定截止时间并不能完全解决问题。

 

与所呈现时区不同的参与者必须手动考虑时区差异(例如,将“美国东部时间下午 1 点”转换为中部标准时间),这导致他们完全停滞不前,并且在尝试在脑海中转换时间时容易出错。

 

另一组参与者在快速浏览页面时,误将静态截止时间理解为“预计送达日期” 。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“它能告诉我‘如果在规定时间内下单,就能在指定时间收到’,这真的很好。”这位在百思买购物的顾客注意到了精确的截止倒计时,这帮助他快速了解自己还有多少时间做出购买决定,以便在预计的送达日期前收到订单。

 

因此,截止时间应该以倒计时的形式显示,而不是以固定时间的形式显示。

 

例如,“在接下来的 43 分钟内下单,即可在 4 月 4 日星期二收到您的订单”, 而不是 “美国东部时间上午 9 点前下单,即可在 4 月 4 日星期二收到您的订单”

 

05

用按钮(或)加文本来变更购物车数量

(97% 的网站未这样)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

“哎呀,不对,我们不需要 21……等等,我们再试一次。”

 

这位在Williams Sonoma网站上的顾客本想把数量从 1 改成 2,但即使她开始输入想要的数量,默认数量“1”仍然保留,导致输入了错误的“21”。

 

West Elm 网站上,用户点击或轻触数量字段后,需要先删除现有数量,然后才能输入所需的更新值,这既繁琐又容易导致输入错误。

 

增加或减少购物车中商品的数量看似是一件简单直接的事情。

 

然而,在我们进行的大规模测试中,一部分参与者在完成这项看似简单的任务时遇到了很大的问题。

 

事实上,一些订单数量变更并未被参与者登记——这导致订单中的产品数量不正确。

 

此外,由于视口较小以及输入错误风险普遍增加,移动用户可能会更频繁、更严重地受到未优化数量选择器的挑战。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

沃尔玛的移动网站上,数量字段可以通过加/减按钮或在文本字段中输入新数量进行调整。

 

将数量字段的 UI 调整为按钮或带文本字段的按钮,通常可以解决用户在购物车中使用数量选择器时遇到的问题。

 

06 

在配送方式选择界面中包含所有配送选项

(52% 的用户未这样做)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“我正在尝试看看……他们是否允许我直接从这里选择‘门店自提’,但看来不行。至少我没看到这个选项。”

 

尽管产品详情页上显示了门店自提选项(第一张图),但这位 Madewell 用户在结账时却无法切换到此选项,因为她想避免支付运费(第二张图)。

 

需要返回购物车或产品页面才能查看可用的其他配送方式并进行切换,这给试图比较不同选项的用户带来了不必要的麻烦。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“我试着点击‘门店自提’,但好像不行。”这位用户在使用Target手机App购买杂货时,想在结账过程中(图一)将取货方式从门店自提切换到本地配送,但却找不到切换选项。她只好返回购物车选择其他配送方式(图二):“所以我又得用红色箭头点击……‘切换配送方式’,搞定了。”需要返回购物车切换配送方式会减慢用户的结账速度。

 

虽然许多网站在产品页面或购物车中提供了到店自提和其他替代配送方式的选项,但这对于那些在结账过程中改变主意的参与者来说还不够。

 

实际上,根据用户的具体情况和可用的配送方式,他们最终可能会选择到店自提、本地配送或仓库发货来完成订单。

 

然而,要求在选择配送方式步骤中改变主意的用户返回到结账流程的早期阶段会造成负担,并且可能会使用户感到困惑。

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

宜家英国将所有订单履行选项列在一个结账页面上,默认选择“点击提货”(Click and collect),这是既能节省成本又能兼顾可持续性的理想选择。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

在测试亚马逊全食超市的移动网站时,参与者可以在订单履行步骤中轻松切换本地配送和门店自提,从而避免返回购物车,节省时间和精力。

 

相反,所有可用的配送和履行方式——包括传统的仓库配送方式、本地商店配送和店内自提——都应该直接在结账的配送选择界面中提供。

 

正如一位测试参与者分享的那样,“有时候我会遇到这种情况:在结账的最后阶段,我本来想买点东西,但后来因为某种原因,我又决定不买了,而是选择送货上门。所以我很喜欢即使在这个阶段仍然可以更改选项,而不用手动返回购物车自己修改。”

 

在配送选择界面中同时呈现全面的配送选项,不仅可以帮助那些在最后一刻改变主意的用户,还可以让网站突出展示替代配送选项,以此作为其相对于纯粹的在线零售商的优势。

 

例如,全渠道在线商店可以将门店自提作为“免费送货方式”,即使是最小的订单也可以享受此服务,从而提供比纯在线竞争对手更具吸引力和竞争力的优惠,同时吸引顾客到实体店(顾客可以到店自提商品)。

 

07

明确标记必填字段和选填字段

(61% 的网站没有这样做)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

“我通常不太喜欢透露我的电话号码,因为担心收到垃圾邮件之类的……所以我想/希望,如果我不输入电话号码,他们会直接把信息发送到我的邮箱。”

 

这位在Everlane购物的顾客犹豫不决,在输入电话号码之前一直在纠结,最终还是决定试一试(结果成功了)。

 

即使只有必填字段(而非选填字段)被明确标注,用户仍然可能会因为隐含的选填信息而感到焦虑。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

尽管Wayfair 网站上的所有字段都是必填项,但根本无法判断情况是否如此。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

沃尔玛让您可以轻松快速地确定哪些字段是必填项(用星号表示),哪些字段是可选的(用括号中的文本表示)。

 

在我们的大规模用户体验测试中,当遇到仅标记可选字段的表单时,32% 的参与者没有填写至少一个必填字段。

 

对于标记了必填字段而未标记选填字段的表单,性能并没有提高。

 

没有字段被标记时(通常是因为所有字段都是必填项),用户往往不会注意到表单开头的“所有字段都是必填项”的字样,因此会留下一些空白,以为它们是可选的。

 

简而言之,最好在表单中明确标明必填字段选填字段,以确保不会产生混淆。

 

 

08

为可选输入选择合适的接口类型

(32% 的网站未选择)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Backcountry,结账表单显示了“公司”(第一张图片)和“地址第二行”(第二张图片)的可选字段,这减慢了用户向下浏览表单的速度。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

在 OBI 系统中,收货地址选项采用互斥的单选按钮形式(“送货至账单地址”“送货至其他地址”,或“送货至账单地址”“送货至其他地址” ),使得用户难以快速浏览和理解这一二元选项。更合理的做法是,将“使用账单地址作为收货地址”改为复选框。

 

在结账过程中设置可选字段和选项似乎相对“没有风险”,因为如果这些可选字段与用户无关,他们只需跳过即可。

 

但在测试过程中,很明显,可选字段和值往往是导致某些参与者结账流程中断的唯一原因。

 

具体来说,这些字段会导致各种各样的问题,从参与者不必要地与完全无关的字段交互,到导致参与者完成结账步骤的时间延长 5% 到 30%,再到怀疑订单数据的正确性,收到验证错误消息,或者提交包含错误信息的订单。

 

这些领域中最常见的问题是使用了不正确的接口类型

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

Lowe's,一些不适用于所有用户的可选字段,例如“公司名称”“地址行 2”“添加公寓、套房、建筑物等”),都隐藏在链接后面,以便用户可以轻松访问,但又不会过于分散注意力。

 

可选输入的正确接口类型取决于多种因素,但不常用的输入(例如,“地址线 2”)通常应该隐藏在链接后面。

 

此外,应避免使用单选按钮和下拉菜单来表示完全可选的输入项。

 

09

利用自适应消息改进验证错误

(94% 的人没有这样做)

 

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

“它好像不接受这个电话号码。要我在前面加个‘+44’之类的吗?我本来以为不用,但我不知道为什么不行……我现在想换个网站试试。显然它就是用不了。” 

 

在英国Appliances Online网站进行测试时,这位参与者无法根据模糊的错误信息找到“手机号码”字段的解决方法。事实上,该网站根本不接受包含空格的输入。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

GameStop的通用错误消息表明问题在于用户没有输入电话号码——而真正的问题是电话号码不完整,位数不够,因此无效。

 

错误是不可避免的,但我们反复观察到,错误信息本身的内容对于用户能否快速从错误中恢复过来而不是放弃购买至关重要。

 

过于笼统的错误消息迫使用户自己去寻找问题,并确定如何解决问题——这原本可能只是一个小小的障碍,却变成了一个重大的阻碍。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

Away的错误信息清楚地说明了卡号的具体问题—— “您的卡号不完整” ——而不是像“您的卡号无效”这样更笼统的信息。

 

“自适应错误消息”不会为所有验证错误提供相同的通用消息,而是根据触发验证错误的确切子规则进行更改,并利用此细节向用户提供有关如何更正其输入的说明。

 

让用户知道发生错误的原因,可以让他们更容易地解决问题。

 

在测试过程中,提供具体细节的错误信息提高了所有用户的错误恢复时间——但最重要的是,它大大减少了完全卡住而不得不放弃完成购买的参与者人数。

为了合理分配资源,首先可以考虑跟踪结账流程中发生的所有验证错误。

 

通过改进错误跟踪,网站可以开始针对以下验证错误实施“自适应错误消息”: a) 最常发生的验证错误;b) 收到错误后结账放弃率最高的验证错误。

 

 

10

解释为什么需要电话号码

(49%的网站没有解释)

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

“‘继续付款’。哦,‘电话号码’。”

 

这位在苹果商店结账的顾客跳过了“电话号码”一栏,不想提供这项个人信息,但却收到了一条错误消息,因为该信息是必填项。

 

我们的大规模用户体验测试不断表明,用户非常关注其在线个人信息的安全性和保密性,在结账时普遍不愿提供电话号码。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

事实上,根据Baymard 进行的一项调查,超过70%的受访者表示不愿意提供电话号码。

 

这种抵触情绪源于多种担忧,包括接到骚扰营销电话和害怕身份被盗用。在测试中,许多人认为该网站会利用他们的电话号码进行骚扰营销。

 

当被要求填写电话号码字段而没有任何解释时,我们测试中的一些参与者提供了虚假信息,或者完全放弃了结账过程。

 

这不仅会损害客户数据的完整性,还会导致销售损失

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

 

“‘万一出现账单问题’,让我看看……‘别担心,我们绝不会将您的电话号码透露给任何人’。这很有帮助,就像他们在说,万一需要联系您,您的电话号码已经录入了。”

 

这位顾客American Eagle结账时,对店员详细解释如何使用“电话号码”来验证信用卡付款表示赞赏。

 

为了解决用户对隐私的担忧,避免虚假数据带来的问题,网站应该清楚地解释为什么需要电话号码以及电话号码的用途。

 

我们的结账测试一直表明,向用户解释收集电话号码的原因可以消除绝大多数用户的隐私担忧

 

网站可以通过提供清晰简洁的解释来说明为什么需要这些信息,或者将字段设为可选,或者完全删除该字段,从而正面解决用户的隐私问题。

 

我们的基准测试表明,结账用户体验还有很大的改进空间,因为 64% 的桌面网站和 63% 的移动网站的性能“一般”或更差。

 

Baymard最新购物车支付结算UX策略:10 坑必躲+10 招必学 (7k字收藏)

虽然移动应用得分较高,但仍有 46% 的应用表现“平庸”或更差。

此外,没有任何网站或应用程序能够提供“完美”的结账用户体验。

 

 

微信扫一扫,分享到朋友圈

微信公众号
 苹果iOS虚拟币充值(抖音钻石、快币、薯币、比心币、他趣币、陌陌币充值)

相关推荐