菜单 关闭

手机结账体验

通过 安娜凯利12月2日,二千零一十八

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


在电子商务设计中,manbetx官方网站手机版结账路径是用户旅程中最仔细的部分之一。正因为如此:它直接影响品牌认知,回访倾向,以及一个组织在网上推动收入增长的能力。越来越多的用户在智能手机上购物,必须设计一个移动结账流程,不仅要遵循电manbetx官方网站手机版子商务用户体验的最佳实践,但同时也针对移动设备的功能和限制进行了优化。

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

移动购物车和结账选项

经常,签出过程从重新访问购物车并将其编辑为仅包含将在当前会话中购买的项。以下指导原则确保移动结账的早期阶段对用户来说是免费的:

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

在惠普网站购物时,一位研究参与者因为无法从手推车中取出不需要的打印机墨盒而感到沮丧(她应该将数量设置为零)。因此,她从亚马逊相反。

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

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

记住的东西需要用户选择更新来编辑数量。
ThingsRememberd.com:用户必须点击步进器然后更新 用于更改项目数量的链接。这种设计不manbetx官方网站手机版太理想。
  • 支持跨多个设备的购物体验的连续性。随着品牌的不断发展渠道,用户对轻松访问的期望,灵活性,购物时的一致性持续上升。而且,因为用户在购物时往往在渠道间来回走动,重要的是让他们能够可靠地使用他们的推车,桌面上,移动Web在移动应用程序中。

苹果设备的用户可以从一个叫做越区切换,允许他们(1)在iPhone上使用Safari的网站,(2)然后,当他们移动到他们的iPad或Mac电脑时,在该设备上的Safari中打开同一页(反之亦然)。

Apple Handoff使跨设备结账变得容易
切换允许苹果用户在iPhone之间移动,iPad,和Mac设备。此功能支持无缝购物体验,允许同一会话在不同的设备上继续进行。在这种情况下,用户开始在MacBook Pro电脑上购物,但转到iPhone结账。

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

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

板条箱和桶允许用户通过设备访问他们的购物车
crateandbarll.com在空的购物车页面上显示了一条消息,让用户知道他们可以通过登录从所有设备访问他们的购物车。
  • 使客人的结帐突出且容易找到。即使是有账户的人也会忘记密码;在许多情况下,他们作为客人结账要比在移动设备上恢复密码容易得多。让客人结帐成为最突出的结帐选项,方法是将其放在折叠上方和登录或创建帐户的选项上方。
陶瓷谷仓让客人很容易结账
陶仓把客人的结账单放在观察窗的显眼位置,这样用户就不必浪费时间四处寻找。客人结帐优先于经过认证的结帐,使移动购物者很容易快速完成结帐过程。

订单汇总和提货选项

购物者不欣赏不准确或不清楚的价格,并且在结帐过程中成本意外增加时会变得沮丧。通常在这种情况下,用户将放弃手推车,在其他地方寻找物品以避免额外费用,尤其是在运输和交货费用方面。两个重要的细节确保用户可以在手机上查看和理解订单摘要中的信息:

  • 使订单摘要易于在移动版面中查找。我们在订单摘要中显示的详细信息,(包括小计,税,费用,折扣,以及运费)对于任何结帐流程都很重要,我们必须特别注意移动结账的订单摘要的放置。由于屏幕空间有限,这些额外费用可能在页面上显示得很低,用户可能会忽略不计。为了避免不愉快的意外发生,在结帐页顶部突出显示订单摘要。不要让购物者滚动到页面底部来查找此信息。
阿迪达斯的订单摘要太低了
adidas.com:订单摘要太低,无法轻松查看。用户必须滚动到回顾与薪酬 页就在移动页脚的正上方,查看他们的最终订单摘要信息。信息也被折叠成手风琴,这使得我们很难看到价格构成;相反,它应该放在页面的更高位置,并展开以显示每个行项目对订单总额的贡献。
jet.com使您可以轻松查看订单摘要
关于Jo.com的回顾与薪酬 页订单摘要放在页面折叠上方的显著位置。用户在下单前可以清楚地看到每一行项目,不用向下滚动。
  • 使用用户的当前位置确定增值税,交付成本,以及任何可用的取货选项。运费和税金通常取决于与订单相关的装运地址,通常在结帐流程的后期输入。只要可能,在用户输入送货地址之前,零售商应使用客户的当前位置来估计送货费和税费。当前位置还可以用于查找用户可以接收订单的最近物理位置,如果需要的话。请始终向用户请求使用其当前位置的权限,并允许他们轻松更改或更新其位置。
目标使用用户的当前位置
Target的移动结帐流程使用位置检测提供商店取货选项,并在订单摘要中估计税金。

表单域和输入交互

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

  • 对于每个字段,提供正确的键盘。对数字数据(如信用卡号码或电话号码)使用数字键盘。对于电子邮件地址字段,使用经过优化的键盘输入电子邮件地址,其中突出的特点是电子邮件特定字符,如“@”和“.”。键盘还应包括上下箭头,以便快速转换到下一个(或上一个)表单字段。
Nike使用正确的移动键盘
nike.com为email(左)和phone number(右)字段显示了正确的键盘。
  • 根据用户以前的输入自动计算字段。信用卡类型等字段,地址,城市,或者状态可以根据用户输入的其他数据(信用卡号和,分别邮政编码)。不要求用户明确键入此信息,为他们工作。我们的研究表明,询问用户的邮政编码,然后填充城市和州,虽然仍允许用户更正偶尔出现的错误,工作得很好。
Crutchfield在表单中使用移动自动填充。
Crutchfield让用户很容易输入他们的地址。网站提示用户首先输入邮政编码(左),然后使用此信息在可编辑表单字段(右)中完成城市和州。用户可以更改这些字段,以防其城市名称与数据库中显示的名称不同。
  • 浏览器自动填充和保存的数据应适用于表单域,如“名称”,地址,电子邮件地址,电话号码,密码,还有信用卡。可用性测试的参与者很欣赏他们可以在Tiffany的移动网站上使用浏览器自动填充。该表与Safari的完美结合自动填充联系人特征,这让一个不想输入联系信息的用户感到高兴。“它会自动繁殖。谢谢您,苹果。苹果自动填充了我的信息。“这句话概括了大多数用户对自动填充的感受:网站上的自动填充体验不佳,而正确的工作经验则归功于手机制造商。请确保对网站进行了编码,以便使用浏览器自动填充功能正常工作。
  • 使用打开的表单域,当要求用户输入其状态和信用卡到期日期时,不是选择列表。下拉列表对于移动用户来说特别困难,尤其是iOS上的。iOS选取器控件(用于实现下拉列表)占据屏幕的一半,一次只显示几个项目。如果列表很长,用户必须滚动多次才能到达列表末尾的值。在我们的研究中,用户经常难以从这些列表中选择正确的项目,犯了许多需要反复尝试的错误。虽然减少用户在手机上的输入量通常是有意义的,长列表的下拉列表是错误的解决方案。用户输入代表其状态的两个字母和4位数的信用卡到期日期更快。
Staples强制用户滚动浏览一长串状态缩写。
Staples.com上的用户必须滚动浏览一个长长的下拉列表,选择代表他们状态的两个字母。用户输入字母要比向下滚动从下拉列表中选择状态快得多。
tm lewin允许用户输入他们的信用卡到期日期和安全代码。
tm lewin正确使用了信用卡到期日期的文本输入字段,而不是繁琐的下拉菜单。它还将键盘切换到手机上的数字键盘,以便于输入此信息。

手机支付方便

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

  • 提供移动友好的支付选项,但不要用太多的选项压倒用户。可识别的第三方结账选项,如PayPal或Apple Payes可能会有帮助,但是太多的选择会导致选择过载.对于提供的每个付款选项,明确区分每一个。最常见的结帐流程应该是页面上最突出的,或列在其他选项中的第一个。同样重要的是要向用户发出信号,让他们暂时离开网站,在最后返回之前输入他们的支付服务详细信息。使用VayBeas,比如与PayPal结账,以及这些服务的标准品牌按钮。为了最小化用户输入的信息,在结帐流程开始时提供这些选项;然而,确保在付款页面上为那些可能在开始时错过的用户重复这些操作。
葡萄园葡萄藤提供移动友好的支付方式
葡萄园藤蔓提供了许多移动友好的支付选项在购物车(左),并再次显示PayPal的支付页面上的那些谁可能错过了在购物车(右)。
  • 允许用户对其信用卡拍照以填充信息。我们研究中有几个人使用自动填充信用卡Safari提供的功能,而不是输入他们的信用卡信息。此选项允许用户对信用卡拍照;扫描详细信息,然后将信息添加到网站的信用卡字段中。

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

Tiffanys.com允许用户为自己的信用卡拍照付款。
蒂凡尼网站:自动填充信用卡 Safari(左)中的功能允许用户对其信用卡拍照以填充其付款信息(右)。

结论

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

有关如何设计最佳电子商务购物车的更多信manbetx官方网站手机版息,结帐和登记流程,浏览我们的报告,卷。04:购物车,结帐和登记,我们最近更新的第四版电子商务用户体验报告系列。