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

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

移动购物车和结帐选项

通常,结账过程始于重新审视购物车并编辑它仅包含将在当前会话中购买的项目。以下指导方针确保移动结账的早期阶段为用户无痛苦:

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

虽然在惠普的网站上购物时,一项研究参与者在她无法弄清楚如何从购物车中删除不需要的打印机盒(她应该将数量设置为零)时,这是令人沮丧的。结果,她从中购买了打印机墨盒亚马逊代替。

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

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

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

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

Apple切换使得跨设备易于结账
切换允许苹果用户在iPhone、iPad和Mac设备之间切换。这个特性支持无缝的购物体验,允许相同的会话在不同的设备上继续。在这种情况下,用户先在一台MacBook Pro电脑上购物,然后转到iPhone上结账。

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

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

CrateandBarrel允许用户跨设备访问他们的购物车
CrateandBarrel.com在empty-shopping-cart页面上显示了一条信息,让用户知道他们可以通过登录进入所有设备来访问他们的购物车。
  • 让客人结账突出且易于找到。甚至有帐户忘记密码的人才;在许多情况下,他们将更容易退房,而不是在移动设备上恢复密码。使Guest结帐可以通过将其放在折叠之上和上方的选项上方来登录或创建帐户来结帐。
陶器谷仓可以轻松结账作为客人
陶器谷仓在视口中突出地放置客人结账,所以用户不必浪费时间来看待它。客人结账优先于经过身份验证的结账,并使其可容易的移动购物者快速完成结账过程。

订单汇总和取货选项

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

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

表单字段和输入交互

在移动设备上填写表格可以是耗时和容易出错的。减少表单字段的总数并自动填充用户的字段(基于系统对该特定用户的知识)可以显着地缓解结账过程。以下是结账表格的一些指导方针:

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

在移动设备上易于付款

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

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

在查看Tiffany的移动网站时,一个用户在注意到该网站没有提供PayPal或Apple Pay选项时抱怨。“我就像,'Ugggggh'为什么没有与此相关的PayPal或Apple支付?”然后,她注意到该网站支持内置,自动填充信用卡选项,虽然她仍然不得不从钱包中获取她的信用卡,但她能够扫描她的信用卡来输入细节后,她的挫败感下降。

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

结论

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

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