Menu Close

手机结账体验

通过 安娜凯利on December 2,二千零一十八

总结:通过考虑移动设备的优势和局限性,优化移动电子商务渠道的结账体验。目的是尽量减少步骤和键入的数量,利用地理定位和相机等功能。


In ecommerce manbetx官方网站手机版design,结账路径是用户旅程中最仔细的部分之一。正因为如此:它直接影响品牌认知,回访倾向,以及一个组织在网上推动收入增长的能力。越来越多的用户在智能手机上购物,必须设计一个移动结账流程,不仅要遵循电manbetx官方网站手机版子商务用户体验的最佳实践,but is also optimized for the capabilities and constraints of mobile devices.

在本文中,我们将使用我们最近的研究结果,为第四版电子商务用户体验报告系列概述和讨论一些最重要的设计指南,以获得最佳的移动结账体验。manbetx官方网站手机版

移动购物车和结账选项

经常,签出过程从重新访问购物车and editing it to contain only the items that will be purchased in the current session.The following guidelines ensure that the early stages of the mobile checkout are pain-free for users:

  • 提供对移动购物车的快速访问。轻敲购物车表示想要前进,因此,让用户尽快进入购物车。避免与性能相关的延迟,并消除用户在尝试访问购物车时可能遇到的任何不必要的障碍。
这个jcrew.com设计代表manbetx官方网站手机版了一个很好的例子,可以很容易地访问购物车。购物车图标上方的徽章可立即为用户提供反馈。.点击购物车图标将用户带到购物车页面,没有任何额外的点击,弹出窗口,或者以他们的方式添加步骤。
pssw强制用户点击一个按钮进入购物车
在PSSW上,点击购物车图标显示一个移动迷你购物车。然后用户必须点击检视车 结帐 访问他们的完整购物车和订单详细信息。这种额外的抽头是不必要的;当用户点击购物车图标时,直接把他们带到他们的手推车上。
  • 方便用户更新购物车的内容。人们通常会改变购买产品的想法,或者不小心在购物车上添加了两次物品。允许用户轻松更改购物车的内容。
  • 给用户一个明确的去除购物车中每个项目旁边的按钮。Don't force them to change quantities to zero in order to delete a product from their shopping cart.

While shopping on HP's site,一位研究参与者因为无法从手推车中取出不需要的打印机墨盒而感到沮丧(她应该将数量设置为零)。因此,她从亚马逊相反。

HP强制用户将数量更改为零以删除项目
HP did not include a clear去除 购物车中每个项目旁边的按钮,要求用户将数量更改为零以从购物车中删除项目。这个设计不manbetx官方网站手机版具有说服力,引起了挫折。
  • 不要使用更新用于将更改提交到购物车的按钮。一些网站强制用户点击更新按钮,使其购物车的任何更改生效。因此,想要更改购物车中商品数量的人必须指出新数量,然后按更新提交更改。

这种设计不manbetx官方网站手机版理想的原因有两个:(1)用户必须执行两个操作(更改数量,then tap the更新按钮)更改项目;(2)人们经常不按更新按钮——要么因为他们忘记了,要么因为他们没有意识到他们应该这样做。

Things Remembered requires users to select update to edit quantity.
ThingsRememberd.com:用户必须点击步进器然后更新 用于更改项目数量的链接。This manbetx官方网站手机版design is suboptimal.
  • 支持跨多个设备的购物体验的连续性。随着品牌的不断发展渠道,用户对轻松访问的期望,flexibility,购物时的一致性持续上升。而且,因为用户在购物时往往在渠道间来回走动,重要的是让他们能够可靠地使用他们的推车,桌面上,移动Web在移动应用程序中。

Users of Apple devices can benefit from a feature called越区切换,允许他们(1)在iPhone上使用Safari的网站,(2)然后,when they move to their iPad or Mac computer,open up the same page in Safari on that device (or vice versa).

Apple Handoff使跨设备结账变得容易
切换允许苹果用户在iPhone之间移动,iPad,和Mac设备。此功能支持无缝购物体验,allowing the same session to be continued across different devices.在这种情况下,用户开始在MacBook Pro电脑上购物,但转到iPhone结账。

应用程序还可以将用户会话移交给其他设备。因此,有人在iPhone上使用一个应用程序,可以在iPad上无缝地继续这个过程,前提是应用程序的开发人员已经利用了切换功能。不幸的是,许多应用程序(亚马逊就是一个著名的例子)不使用切换,这会损害用户的利益。

为支持Apple生态系统以外的用户或不熟悉切换的用户进行无缝跨设备转换,确保登录后可以在其他设备上恢复会话。.然而,这还不够:用户在第一次创建帐户时必须了解此功能。为了帮助用户记住不同设备上的早期购物会话,考虑使用标签来指示物品添加到购物车的时间以及添加的设备或渠道。

板条箱和桶允许用户通过设备访问他们的购物车
crateandbarll.com在空的购物车页面上显示了一条消息,让用户知道他们可以通过登录从所有设备访问他们的购物车。
  • 使客人的结帐突出且容易找到。Even people who have an account forget passwords;在许多情况下,他们作为客人结账要比在移动设备上恢复密码容易得多。Make guest checkout the most salient of your checkout options by placing it above the fold and above the options to sign in or create an account.
陶瓷谷仓让客人很容易结账
陶仓把客人的结账单放在观察窗的显眼位置,这样用户就不必浪费时间四处寻找。客人结帐优先于经过认证的结帐,使移动购物者很容易快速完成结帐过程。

Order Summary and Pickup Options

购物者不欣赏不准确或不清楚的价格,并且在结帐过程中成本意外增加时会变得沮丧。通常在这种情况下,用户将放弃手推车,在其他地方寻找物品以避免额外费用,尤其是在运输和交货费用方面。Two important details ensure that users can see and understand the information in the order summary on mobile:

  • 使订单摘要易于在移动版面中查找。details we display in the order summary,(包括小计,税,费用,折扣,以及运费)对于任何结帐流程都很重要,我们必须特别注意移动结账的订单摘要的放置。由于屏幕空间有限,这些额外费用可能在页面上显示得很低,用户可能会忽略不计。为了避免不愉快的意外发生,show the order summary prominently at the top of the checkout pages.Don't make shoppers scroll to the bottom of the page to find this information.
Adidas' order summary is too far down on the page
Adidas.com: The order summary was too low on the page to be easily viewed.用户必须滚动到Review & Pay 页就在移动页脚的正上方,to see their final order summary information.信息也被折叠成手风琴,这使得我们很难看到价格构成;相反,it should have been placed higher on the page and expanded to show each line item contributing to the order's total.
jet.com使您可以轻松查看订单摘要
关于Jo.com的Review & Pay 页订单摘要放在页面折叠上方的显著位置。Users can clearly see each line item before placing their order,不用向下滚动。
  • Use the user's current location to determine sales tax,交付成本,以及任何可用的取货选项。Shipping costs and tax usually depend on the shipping address associated with the order,通常在结帐流程的后期输入。只要可能,retailers should use their customers' current location to estimate the delivery fees and the tax before the users have entered their shipping addresses.The current location can also serve to locate the closest physical locations where users could pick up their orders,如果需要的话。Always ask the user for their permission to use their current location and allow them to easily change or update their location.
目标使用用户的当前位置
Target's mobile checkout flow used location detection to offer store-pickup options as well as to estimate taxes in the order summary.

表单域和输入交互

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

  • 对于每个字段,提供正确的键盘。对数字数据(如信用卡号码或电话号码)使用数字键盘。对于电子邮件地址字段,使用经过优化的键盘输入电子邮件地址,其中突出的特点是电子邮件特定字符,如“@”和“.”。键盘还应包括上下箭头,以便快速转换到下一个(或上一个)表单字段。
Nike使用正确的移动键盘
Nike.com showed the correct keyboards for email (left) and phone-number (right) fields.
  • 根据用户以前的输入自动计算字段。信用卡类型等字段,地址,城市,or state can be automatically calculated based on other data entered by the user (the credit-card number and,分别邮政编码)。不要求用户明确键入此信息,do the work for them.我们的研究表明,询问用户的邮政编码,然后填充城市和州,虽然仍允许用户更正偶尔出现的错误,工作得很好。
Crutchfield在表单中使用移动自动填充。
Crutchfield让用户很容易输入他们的地址。网站提示用户首先输入邮政编码(左),然后使用此信息在可编辑表单字段(右)中完成城市和州。Users could change these fields in case their city name differed from what appeared in the database.
  • 浏览器自动填充和保存的数据应适用于表单域,如“名称”,地址,email address,电话号码,密码,还有信用卡。可用性测试的参与者很欣赏他们可以在Tiffany的移动网站上使用浏览器自动填充。The form worked flawlessly with Safari'sAutoFill Contact特征,这让一个不想输入联系信息的用户感到高兴。“它会自动繁殖。Thank you,苹果。Apple autopopulated my information." This remark sums up most users' feelings about autofill: a poor autofill experience is blamed on the website,而正确的工作经验则归功于手机制造商。请确保对网站进行了编码,以便使用浏览器自动填充功能正常工作。
  • 使用打开的表单域,当要求用户输入其状态和信用卡到期日期时,不是选择列表。下拉列表对于移动用户来说特别困难,尤其是iOS上的。iOS选取器控件(用于实现下拉列表)占据屏幕的一半,一次只显示几个项目。如果列表很长,用户必须滚动多次才能到达列表末尾的值。在我们的研究中,用户经常难以从这些列表中选择正确的项目,犯了许多需要反复尝试的错误。虽然减少用户在手机上的输入量通常是有意义的,长列表的下拉列表是错误的解决方案。用户输入代表其状态的两个字母和4位数的信用卡到期日期更快。
Staples强制用户滚动浏览一长串状态缩写。
Users on Staples.com had to scroll through a long dropdown list to select the two letters that represent their state.用户输入字母要比向下滚动从下拉列表中选择状态快得多。
tm lewin允许用户输入他们的信用卡到期日期和安全代码。
tm lewin正确使用了信用卡到期日期的文本输入字段,而不是繁琐的下拉菜单。它还将键盘切换到手机上的数字键盘,以便于输入此信息。

Easy Payment on Mobile

输入信用卡详细信息是劳动密集型的,烦人的,而且,尤其是在手机上,易出错;此外,在旅途中使用信用卡的人不一定总是随身携带。我们的许多研究参与者利用了PayPal或Apple Payes这样的简单支付选项。这些服务不仅为用户省去了输入信用卡信息的麻烦,但他们也被认为比直接向网站提供他们的信用卡号码更安全和可靠。

  • Offer mobile-friendly payment options,but don't overwhelm users with too many options.可识别的第三方结账选项,如PayPal或Apple Payes可能会有帮助,but too many options can cause选择过载.For each payment option offered,明确区分每一个。最常见的结帐流程应该是页面上最突出的,或列在其他选项中的第一个。It's also important to signal to users that they will be taken away from the site temporarily to enter their payment-service details before being brought back at the end.使用VayBeas,比如与PayPal结账,以及这些服务的标准品牌按钮。为了最小化用户输入的信息,offer these options at the very beginning of the checkout flow;然而,确保在付款页面上为那些可能在开始时错过的用户重复这些操作。
葡萄园葡萄藤提供移动友好的支付方式
葡萄园藤蔓提供了许多移动友好的支付选项在购物车(左),并再次显示PayPal的支付页面上的那些谁可能错过了在购物车(右)。
  • 允许用户对其信用卡拍照以填充信息。我们研究中有几个人使用自动填充信用卡Safari提供的功能,而不是输入他们的信用卡信息。This option enables users to take a photo of the credit card;扫描详细信息,然后将信息添加到网站的信用卡字段中。

在Tiffany的移动网站上查看时,一位用户抱怨当她发现网站没有提供PayPal或Apple Bayes选项时。“我喜欢,为什么没有PayPal或Apple的薪水与此相关?然后,she noticed that the site supported the built-in,自动填充信用卡选项和尽管她还得从钱包里拿出信用卡,当她能够扫描信用卡输入详细信息后,她的挫败感降低了。

Tiffanys.com lets users take a photo of their credit card to pay.
Tiffanys.com: The自动填充信用卡 Safari(左)中的功能允许用户对其信用卡拍照以填充其付款信息(右)。

结论

最佳的移动结账体验与标准结账体验的区别在于对细节的额外关注。移动聚焦以用户为中心的用户界面元素可以帮助您的用户快速、轻松地通过体验。Though often overlooked and easily forgotten,这些看起来很小的设计细节在你的手机结帐将创造manbetx官方网站手机版一个让你的用户高兴的体验。

For more on how to manbetx官方网站手机版design an optimal ecommerce shopping cart,结帐和登记流程,浏览我们的报告,卷。04: Shopping Carts,Checkout and Registration,我们最近更新的第四版电子商务用户体验报告系列。