当客户进入结账页面时,他们已经决定要购买。接下来会发生什么取决于他们面前的界面。精心设计的结账 用户界面 (UI) 可推动用户毫不犹豫地向前推进。而设计不佳的用户界面可能会让用户过于疑虑,并导致他们离开。下面,我们将解释结账用户界面的工作原理、它对转化率有哪些影响,以及结账中应包含哪些要素。
本文内容
- 什么是结账用户界面?
- 为什么结账用户界面设计会影响转化率?
- 有效的结账用户界面包含哪些要素?
- 版面配置、表单和视觉层级会在哪些方面影响结账体验?
什么是结账用户界面?
结账用户界面是客户用来完成购买的界面。它由页面或一系列屏幕组成,供客户输入收货地址、选择付款方式,然后点击“下单”或类似词汇的按钮。结账 UI 的目的是帮助客户完成交易。
用户界面是购买过程中最敏感的环节之一。如果版面配置混乱、表单字段过多或存在任何感觉不对劲的地方,都可能阻止客户完成交易。良好的结账用户界面可以让客户集中注意力,并推进至付款阶段。
为什么结账用户界面设计会影响转化率?
结账是购买过程的最后一步,也是许多交易也可能在这里止步。购物者已准备好购买,结账用户界面可以帮他们快速完成购买,也可能成为他们的拦路虎。
电商的平均购物车放弃付款率徘徊在 70% 左右。在许多情况下,用户离开是因为结账体验让他们困惑,或者感觉结账过于麻烦而难以完成。设计和可用性问题通常是购物者放弃结账的唯一原因。这些客户之所以离开,不是因为他们改变了对产品的想法,而是因为界面中的某些元素让结账变得过于麻烦。
结账用户界面中常见的问题包括:
表单过长或过于复杂
没有剩余步骤的提示
糟糕的移动版面配置,导致难以点击或阅读相关信息
强制创建账户
过时的设计或陌生的格式
未添加可见的安全 标识(如安全套接层[SSL]徽章或可识别的付款标志)
直到最终屏幕才显示价格,缺乏透明度
这些问题可能会让购物者感到沮丧,或引发其对网站无法正确处理其付款信息的担忧。即使他们仍然想要购买产品,如果他们对您的商家没有信心,他们也可能会停止完成购买过程。
有效的结账用户界面包含哪些要素?
强大的结账用户界面应兼具安全、易用两大特点,且不会降低用户体验。以下是一些让您的结账流程更顺畅的方法:
最少必填字段: 每个结账字段都可能会增加潜在的障碍,因此只应要求填写必要信息。例如,收货地址、联系方式和付款详情为必填字段,而大多数其他信息(如商家名称 或送货说明)应设为可选项或隐藏。
直观的表单顺序: 字段顺序应符合用户的预期,例如先显示联系方式,然后是收货地址、开单地址,最后是付款信息。应保持标签一致,除非有充分的理由,否则应避免拆分相关的输入项。应使用间距或章节标题将地址详情与付款输入项分开,以提高清晰度。
访客结账选项: 强制创建账户是导致销售流失最快的一种方式。许多购物者,尤其是首次购物者,只想购买商品然后离开。如果想鼓励用户创建账户,可在订单完成后进行,这样就不会减慢结账流程。
多种付款方式: 购物者希望有更高灵活性。如果他们首选的付款方式不可用,有些人会直接放弃购买。应接受所有主要的银行卡支付,并至少包括一种数字钱包(例如,Apple Pay、Google Pay)。如果有跨境销售,可考虑添加特定于某个地区的付款选项。
完整的订单摘要: 显示完整的订单明细,包括产品名称、数量、价格、运费、税费和最终总额。当用户更改运送选项或输入折扣代码时,应实时更新总额。将摘要信息放在一个固定位置,例如放在桌面右侧,或移动设备中的可折叠部分。
可见的进度指示条: 如果结账流程跨越多个屏幕,应让客户清楚地了解他们所处的阶段。可使用一个简单的步骤跟踪器,例如“发货 → 付款 → 审查”,让客户了解流程的范围有限,从而减少放弃率。在单页结账 中,清晰标记的部分也具有相同的作用。
精心设计的操作按钮: 结账流程中的每个步骤都应以一个明确的下一步操作结束。使用醒目颜色和尺寸的主要操作按钮(例如“继续付款”或“下单”)。辅助链接(例如“返回购物车”)在视觉上不应当醒目。在移动设备上,可考虑将最后一个按钮设置为粘性,以便在滚动时随时可见。
简易的错误处理: 用户界面应帮助客户快速而自信地纠正错误。在字段旁边以内联方式标记错误,并提供具体消息(例如,“请输入有效的邮政编码”,而不是“输入无效”)。使用实时验证及早发现问题,例如在提交之前检测到无效的卡号。避免在重新加载或刷新页面时清除用户输入。
可见的信任标志: 付款时的保障信号非常重要。即使是细微的差异,也会影响用户是点击“下单”还是放弃购买。在付款部分附近使用安全超文本传输协议 (HTTPS) 锁定图标、SSL 徽章或诸如“安全结账”之类的文字。在客户会注意到的地方显示已知的品牌徽标,例如 Visa、Mastercard 或 Apple Pay。
可用的支持选项: 如果有任何不清楚的地方,用户也不应为了寻找答案而放弃购物车。应在结账流程中包含指向常见问题解答或联系方式(聊天、邮箱、电话)的链接。即使仅仅在页脚中添加诸如“有疑问?请联系我们”之类的简短文字,也可以增强客户信心,向其保证在需要时可以获得帮助。
退货和取消政策: 结账时,客户经常会问自己:“如果这个商品不行怎么办?” 简要地在适当的时候重申您的退货期限或保证。只要在最后一个按钮附近添加诸如“30 天免费退货”之类的简短文字,就可以消除疑虑并减少最后一刻的犹豫。
版面配置、表单和视觉层级会在哪些方面影响结账体验?
设计可影响用户行为。版面配置、表单结构和视觉层级决定了结账用户界面的是否可用、是否可信,以及是否高效。以下是它的工作原理:
版面配置
优秀的版面配置应具备实用性。它能创建从开始到结束的清晰路径,帮助用户明确方向,并减少出错的几率。优化良好的结账流程通常采用单一垂直流,因为多列格式可能会降低用户速度并增加错误。版面配置还应将相关的输入和部分(例如,账单信息、付款信息)分组,并以直观的方式对包含的字段进行排序。
桌面端和移动端结账 应分别进行优化。例如,在桌面端,右侧栏中的订单摘要常见而有效。而在移动端,这种版面配置会造成滚动问题,而摘要在用户可以点击打开的可折叠部分中效果更好。
表单设计
结账表单中的每项决定(例如,字段数量、字段名称以及字段的行为方式)都会影响用户是继续操作还是放弃。不应包含非绝对必要的字段,应使用用户需要输入的明确内容来标记每个字段,并以内嵌示例显示每个条目应采用的格式(例如,信用卡 号的 16 位数字序列)。如果出现问题,应实时标记错误,并创建错误消息,准确解释需要在相应字段旁边修复的内容。
视觉层级
视觉层级意味着创建有目的的注意力流,以便用户始终知道下一步该做什么、其处于流程中的哪个位置,以及需要注意哪些信息。设计良好的页面会利用各部分之间的间距、清晰的部分标题和一致的节奏来引导视线。订单总额、所选发货方式和付款摘要应予以加粗、略微放大或固定在最终按钮附近。同样,“下单”或“继续”应该是屏幕上视觉上最醒目的元素,通过应用大小、颜色、间距或所有三种方式来实现。其他所有内容(例如,“使用优惠券”、“返回购物车”、“更改地址”)都应对上述元素起辅助作用,而不是抢占注意力。
结账流程中不应出现促销横幅、追加销售框和不必要的链接。在这个阶段,用户是在执行购买决策,而不是在浏览。不要打断他们。
当版面配置、表单和结构层级协同工作时,即使需要收集所有必要的信息,结账流程也会显得很简单。每个设计决策都应减少歧义,防止出错,并推动用户离完成购买更进一步。
本文中的内容仅供一般信息和教育目的,不应被解释为法律或税务建议。Stripe 不保证或担保文章中信息的准确性、完整性、充分性或时效性。您应该寻求在您的司法管辖区获得执业许可的合格律师或会计师的建议,以就您的特定情况提供建议。