在电子商务设计中,结帐路径是用户旅程中最高度审查的部分之一。并定制如此:它直接影响品牌感知,返回访问倾向,以及组织在网上推动收入的能力。凭借越来越多的用户智能手机购物,必须设计一个移动付款流程,不仅要遵循电子商务用户体验的最佳实践,而且还要针对移动设备的功能和限制进行优化。

在这篇文章中,我们将使用我们最近的研究发现为第四版电子商务用户体验报告系列概述并讨论最佳移动结账体验的一些最重要的设计指南。

移动购物车和结帐选项

通常,签出过程从重新访问购物车并对其进行编辑,使其仅包含将在当前会话中购买的项目。以下指南确保用户在移动结账的早期阶段不会感到痛苦:

  • 提供对移动购物车的快速访问。点击购物车表示希望继续前进,所以要尽可能快地让用户进入购物车。避免与性能相关的延迟,并消除用户在尝试访问购物车时可能遇到的任何不必要的障碍。
这个Jcrew.com设计代表了轻松访问购物车的一个很好的例子。当一个项目被添加到购物车时,购物车顶部的徽章图标给用户提供了即时反馈.点击购物车图标将用户带到购物车页面,无需任何额外的点击、弹出窗口或添加步骤。
PSSW强制用户点击按钮进入购物车
在PSSW上,点击购物车图标显示一个移动迷你购物车。然后用户必须点击查看购物车结账访问其全购物车和订单详细信息。这种额外的水龙头是不必要的;当用户点击购物车图标时,将它们直接带到他们的购物车。
  • 方便用户更新购物车的内容。人们经常改变他们的思想,了解产品或意外地将物品添加到购物车两次。允许用户轻松更改购物车的内容。
  • 给用户一个清晰的消除按钮旁边的每个项目旁边。不要为了从他们的购物车中删除产品而强迫他们将数量更改为零。

在HP网站上购物时,一名研究参与者因不知道如何从购物车中取出不需要的打印机墨盒(她本应将数量设置为零)而感到沮丧。因此,她从以下公司购买了打印机墨盒:亚马逊相反

惠普强制用户将数量更改为零以删除项目
惠普不包括清晰消除按钮旁边的每项项目旁边,并要求用户将数量更改为零,以从购物车中删除项目。这种设计是不行性的,导致挫折感。
  • 不要使用A.更新用于提交对购物车的更改的按钮。一些网站强迫用户点击更新按钮用于购物车的任何更改生效。因此,想要改变购物车中项目数量的人必须指示新的数量,然后按更新提交更改。

此设计是次优,有两个原因:(1)用户必须执行两个操作(更改数量,然后点击更新按钮)更改项目;(2)人们经常无法轻拍更新按钮 - 要么是因为他们忘记或因为他们没有意识到他们应该这样做。

记住的内容要求用户选择“更新”以编辑数量。
ThingsRemembered.com:用户必须点击步进然后更新链接以更改项目的数量。这种设计是次优的。
  • 支持多种设备的购物体验的连续性。随着品牌继续发展渠道,用户在购物时对方便访问、灵活性和一致性的期望持续上升。而且,由于用户在购物时往往会在不同渠道之间来回切换,所以为他们提供可靠的购物车访问渠道、桌面、移动网络和移动应用程序就显得尤为重要。

Apple设备的用户可以从一个调用的功能中受益切换允许它们(1)在iPhone上使用Safari的网站和(2)然后,当他们移动到iPad或Mac计算机时,在该设备上打开同一页面(或反之亦然)。

Apple切换使跨设备签出变得简单
切换允许苹果用户在iPhone、iPad和Mac设备之间切换。该功能支持无缝的购物体验,允许相同的会话在不同的设备上继续。在这种情况下,用户开始在MacBook Pro电脑上购物,但转而使用iPhone结账。

应用程序还可以将用户的会话转移到不同的设备。因此,使用iPhone上的应用程序结账的人可以在iPad上无缝地继续这个过程,如果该应用程序的开发人员已经利用了切换功能。不幸的是,许多应用程序(亚马逊是一个值得注意的例子)不要使用切换 - 损害他们的用户。

支持Apple生态系统以外的用户的无缝交叉设备过渡,或者那些不熟悉切换的人,确保在登录后可以在不同的设备上恢复其会话.然而,这还不够:用户在第一次创建帐户时必须意识到这个特性。为了帮助用户记住之前在不同设备上的购物过程,可以考虑添加标签,表明商品何时添加到购物车以及添加到哪个设备或渠道上。

CrateandBarrel允许用户跨设备访问购物车
CrateandBarrel.com在“空购物车”页面上显示了一条消息,让用户知道他们可以通过登录从所有设备访问他们的购物车。
  • 使客人的结账更加突出,易于查找。即使有账户的人也会忘记密码;在许多情况下,他们作为客人退房比在移动设备上恢复密码更容易。通过将客人结帐置于折叠上方以及登录或创建帐户的选项上方,使客人结帐成为您结帐选项中最突出的选项。
陶器谷仓可以轻松结账作为客人
Pottery Barn很好地将客人结账台放在了视口的显著位置,这样用户就不必浪费时间四处寻找了。客人结账优先于经过认证的结账,这使得移动购物者能够轻松快速地完成结账过程。

订单摘要和提货选项

购物者不欣赏价格不准确或不明确的价格,在结账过程中意外增加时,令人感到沮丧。经常发生这种情况,用户将放弃他们的推车并寻找其他地方的物品,以避免超额费用,特别是在运输和运输费用时。两个重要细节确保用户可以在移动程序上看到和了解订单摘要中的信息:

  • 在移动布局中易于查找订单摘要。详细信息显示在订单摘要中(包括小计,税费,费用,折扣和运费)对于任何结账流程都很重要,我们必须备份对移动结账订单摘要的额外关注。由于屏幕空间有限,这些额外费用可能会在页面上显示出低,用户可能会被用户忽略。为了避免在流程后面的令人不快的惊喜,在结账页面的顶部突出显示顺序摘要。不要让购物者滚动到页面的底部以查找此信息。
adidas的订单摘要在页面上太远了
阿迪达斯网站:页面上的订单摘要太低,无法轻松查看。用户必须滚动到页面的最底部审查和支付页面,在移动页脚上方,查看最终订单摘要信息。该信息也在手风琴中崩溃,这使得难以看到价格成分;相反,它应该在页面上放置更高,并扩展以显示为订单总量的每个行项目。
Jet.com可以轻松查看您的订单摘要
在Jet.com的审查和支付在页面上,订单摘要放置在页面折页的显著上方。用户可以在下单前清楚地看到每一行的项目,而不必向下滚动。
  • 使用用户的当前位置来确定销售税、配送成本和任何可用的提货选项。运输成本和税费通常取决于与订单关联的运输地址,该地址通常在结帐流程中输入较晚。只要有可能,零售商应在用户输入发货地址之前,使用其客户的当前位置估算发货费用和税费。如果需要的话,当前位置还可以用来定位最近的物理位置,用户可以在那里取订单。始终向用户请求使用其当前位置的权限,并允许他们轻松更改或更新其位置。
目标使用用户当前位置
塔吉特的移动结帐流程使用位置检测来提供商店提货选项,以及在订单汇总中估计税收。

表单字段和输入交互

在流动电话上填写表格可能非常耗时且容易出错。减少表单字段的总数并自动为用户填写字段(基于系统对特定用户的了解)可以极大地简化签出过程。以下是结帐表单的一些指导原则:

  • 为每个字段提供正确的键盘。使用数字垫进行数字数据,例如信用卡号码或电话号码。有关电子邮件地址字段,请使用优化的键盘以输入电子邮件地址,突出显示特定于“@”和“。”的电子邮件特定字符。键盘还应包括向上和向下箭头,以便于快速转换到下一个(或以前)的形式字段。
耐克使用正确的移动键盘
Nike.com向电子邮件(左)和电话号码(右)字段显示了正确的键盘。
  • 根据用户的先前输入自动计算字段。可以根据用户输入的其他数据(信用卡号码和邮政编码)自动计算诸如信用卡类型、地址、城市或州等字段。与其让用户显式地输入这些信息,不如为他们做这些工作。我们的研究表明,询问用户的邮政编码,然后填充城市和州,同时仍然允许用户纠正偶尔的错误,效果很好。
Cruckfield在他们的形式中使用移动式自动夹。
科兰驰菲尔德让用户很容易地输入他们的地址。该网站提示用户首先输入邮政编码(左),然后使用该信息在可编辑表单字段中完成城市和州的填写(右)。用户可以更改这些字段,以防他们的城市名称与数据库中显示的不一致。
  • 浏览器AutoFill和已保存的数据应在表单字段上工作,例如姓名,地址,电子邮件地址,电话号码,密码和信用卡。可用性测试参与者赞赏他们可以使用浏览器自动填充,同时在蒂芙尼的移动网站上签出。表格完美无瑕地与Safari的工作Autofill联系方式这项功能让一位不想输入联系信息的用户感到高兴。她说:“它是自动生成的。谢谢你,苹果。苹果自动填充我的信息。”这句话总结了大多数用户对自动填充的感受:糟糕的自动填充体验归咎于网站,而正常的工作体验则归功于手机制造商。确保您的网站已编码为可以正常使用浏览器自动填充功能。
  • 当要求用户输入他们的状态和信用卡到期日期时,使用一个开放的表单字段,而不是选择列表。下拉列表列表对于移动用户尤其困难,特别是iOS上的难题。iOS选择器控件(用于实施下拉目)占用一半屏幕,一次仅显示几个项目。如果列表很长,则用户必须在获取列表末尾的值之前滚动多次。在我们的研究中,用户经常努力选择从这些列表中选择正确的项目,从而制定需要重复尝试的许多错误。虽然它通常是有意义的,但减少用户必须在手机上进行的键入量,虽然长名单的下拉列表是错误的解决方案。用户键入为其状态的两个字母以及信用卡到期日期的4位数键入两个字母更快。
Staples强制用户滚动到长期的状态缩写列表。
Staples.com上的用户必须滚动长目无限列表,以选择代表其状态的两个字母。用户键入字母比向下滚动以选择从下拉列表中的状态更快。
TM Lewin允许用户输入信用卡的截止日期和安全代码。
TM Lewin正确地使用了用于信用卡到期日期的文本输入字段,而不是一个麻烦的下拉菜单。它还将键盘切换到移动电话号码上,以便进入此信息。

在移动设备上易于付款

输入信用卡详细信息是劳动密集型,讨厌的,以及易于移动的,容易出错;此外,GO的用户可能并不总是有信用卡方便。我们的许多学习参与者利用了易付款的选择,例如PayPal或Apple Pay。这些服务不仅可以从中信卡信息中输入的麻烦,但它们也被视为更安全可靠,而不是直接向网站提供信用卡号码。

  • 提供适合移动设备的支付选择,但不要给用户过多的选择。识别的第三方结账选项,如PayPal或Apple Pay可能会有所帮助,但也可能导致太多选择选择过载.对于提供的每一种支付方式,都要区分清楚。最常见的结帐过程应该是页面上最突出的部分,或者在其他选项中列在最前面。同样重要的是,要向用户发出信号,让他们暂时离开网站,输入他们的支付服务细节,然后在最后回到网站。使用诸如“用贝宝付款”之类的措辞,以及这些服务的标准品牌按钮。为了减少用户输入的信息,在结账流程的一开始就提供这些选项;但是,你也要确保在付费页面上为那些可能一开始就错过的用户重复这些内容。
Vineyard Vines提供移动友好的支付方式
Vineyard Vines在购物车中提供了许多移动支付选项(左图),并在支付页面再次显示PayPal,以帮助那些可能在购物车中错过它的人(右图)。
  • 允许用户拍摄信用卡照片以填充信息。我们研究中的几个人使用了自动填充信用卡而不是输入他们的信用卡信息。这个选项允许用户拍一张信用卡照片;详细信息被扫描,然后信息被添加到网站的信用卡字段。

在查看Tiffany的移动网站时,一个用户在注意到该网站没有提供PayPal或Apple Pay选项时抱怨。“我就像,'Ugggggh'为什么没有与此相关的PayPal或Apple支付?”然后,她注意到该网站支持内置,自动填充信用卡此外,尽管她仍然必须从钱包中取出信用卡,但当她能够扫描信用卡输入详细信息后,她的挫败感减轻了。

Tiffanys.com让用户拍摄他们的信用卡的照片来支付。
tiffanys.com:自动填充信用卡Safari(剩余)允许的功能允许用户拍摄他们的信用卡照片以填充他们的付款信息(右)。

结论

什么区分了标准的最佳移动结账经验是额外关注细节。以手机为中心的,用户居中的UI元素可以通过速度和轻松来帮助您的用户移动。虽然经常被忽视,并且很容易被遗忘,但这些看似小的设计细节在您的移动结账中会创建一个让您的用户享受的体验。

欲了解更多关于如何设计最佳电子商务购物车、结账和注册流程的信息,请浏览我们的报告,卷。04:购物车,结帐和注册,是最近更新的第四版电子商务用户体验报告系列。