在电子商务设计中，付款路径是用户旅程中最受关注的部分之一。这是理所当然的:它直接影响品牌认知、回访倾向和组织推动在线收入的能力。用户越来越多智能手机购物，必须设计一个移动付款流程，不仅要遵循电子商务用户体验的最佳实践，而且还要针对移动设备的功能和限制进行优化。

在这篇文章中，我们将使用我们最近的研究发现为第四版电子商务用户体验报告系列概述和讨论一些最重要的设计准则，以获得最佳的手机付款体验。

移动购物车和付款选项

通常，结账过程始于重新访问购物车并编辑它以只包含将在当前会话中购买的项目。以下指导方针确保移动付款的早期阶段对用户来说是无痛的:

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

在惠普网站购物时，一名研究参与者因为不知道如何从购物车中取出不需要的打印机墨盒而感到沮丧(她本应将数量设置为零)。因此，她从那里购买了打印机的墨盒亚马逊代替。

HP迫使玩家将数量改为零来移除物品
惠普没有包括明确删除按钮，要求用户将数量更改为零，以从购物车中删除商品。这种设计并不直观，而且会让人感到沮丧。
  • 不要使用一个更新按钮，用于向购物车提交更改。有些网站强迫用户点击更新按钮的任何改变，他们的购物车成为有效。因此，想要改变购物车中商品数量的人必须指出新的数量，然后按下更新提交更改。

这种设计是次优的原因有两个:(1)用户必须执行两个动作(改变数量，然后点击更新按钮)更改项目;(2)人往往不能挖掘更新按钮——要么是因为他们忘记了，要么是因为他们没有意识到他们应该这么做。

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

苹果设备的用户可以从一个叫做切换这样一来，用户就可以(1)在iPhone上使用Safari浏览器浏览网页;(2)在iPad或Mac电脑上使用Safari浏览器浏览网页(反之亦然)。

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

应用程序也可以将用户的会话传递给不同的设备。因此，使用iPhone上的应用程序结账的人可以在iPad上无缝地继续结账过程，前提是应用程序的开发者已经利用了切换功能。不幸的是，许多应用程序(亚马逊就是一个显著的例子)不使用切换功能——这损害了它们的用户。

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

CrateandBarrel允许用户跨设备访问购物车
CrateandBarrel.com在“空购物车”页面上显示了一条消息，让用户知道他们可以通过登录从所有设备访问他们的购物车。
  • 让客人的结帐处显眼且容易找到。即使有账户的人也会忘记密码;在很多情况下，对他们来说，以客人身份退房比在移动设备上恢复密码更容易。让客人结账成为你最突出的结账选项，把它放在折叠的上方，在登录或创建账户的选项上方。
Pottery Barn为客人结账提供了便利
Pottery Barn做得很好，将客人结账处放置在视区显著位置，这样用户就不必浪费时间四处寻找。客人结账优先于身份验证结账，便于移动购物者快速完成结账流程。

订单摘要和提货选项

购物者不会欣赏不准确或不明确的价格，当成本在结账过程中意外增加时，他们会感到沮丧。通常情况下，当这种情况发生时，用户会放弃购物车，到其他地方寻找商品，以避免额外的费用，特别是涉及到运输和送货费用时。有两个重要细节确保用户能够在手机上看到和理解订单汇总中的信息:

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

表单字段和输入交互

在手机上填写表格可能非常耗时且容易出错。减少表单字段的总数并为用户自动填充字段(基于系统对特定用户的了解)可以极大地简化签出过程。这里有一些结账表格的指南:

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

便捷的移动支付

输入信用卡信息是一件费时费力、令人恼火的事，而且很容易出错，尤其是在移动设备上;此外，外出的用户可能并不总是随身携带信用卡。我们的许多研究参与者使用了贝宝(PayPal)或苹果支付(Apple Pay)等便捷支付方式。这些服务不仅让用户省去了输入信用卡信息的麻烦，而且还被认为比直接向网站提供信用卡号码更安全、更值得信任。

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

在蒂芙尼的移动网站上结账时，一名用户抱怨说，她注意到该网站没有提供贝宝(PayPal)或苹果支付(Apple Pay)选项。“我就想，‘哎呀’，为什么没有PayPal或Apple Pay与之相关呢?”然后，她注意到该网站支持内置的，自动填充的信用卡虽然她还是得把信用卡从钱包里拿出来，但在她能够扫描信用卡并输入详细信息后，她的挫折感减少了。

Tiffanys.com允许用户拍一张信用卡照片来支付。
Tiffanys.com:自动填充的信用卡Safari的功能(左)允许用户拍摄他们的信用卡照片来填充他们的支付信息(右)。

结论

最好的手机付款体验与标准付款体验的区别在于对细节的额外关注。以移动为中心、以用户为中心的UI元素可以帮助用户快速、轻松地体验。虽然这些看似微小的设计细节经常被忽视，也很容易被遗忘，但它们却能创造出令用户愉悦的体验。

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