菜单 关闭

移动结账体验

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

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


在电子商务设计中,manbetx官方网站手机版结账路径是用户旅程中最受关注的部分之一。理所当然地:它直接影响品牌感知,回访倾向以及一个组织在网上收入的能力。越来越多的用户智能手机购物,设计一个不仅遵循电子商务用户体验的最佳manbetx官方网站手机版实践的移动结账流程势在必行,但也为移动设备的能力和约束进行了优化。.

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

移动购物车和结账选项

经常,结账过程从重新开始。购物车并且编辑它只包含将在当前会话中购买的项目。以下指南确保移动结账的早期阶段对于用户是无痛苦的:

  • 提供快速访问移动购物车。在购物车上敲击表示前进的欲望,因此,尽快让用户进入购物车。避免与性能相关的延迟,并移除在试图访问购物车时可能妨碍用户前进的任何不必要的障碍。.
这个j船员。COM设manbetx官方网站手机版计是一个易于访问购物车的好例子。当项目添加到购物车时,,购物车图标上的徽章给用户即时反馈.点击购物车图标将用户带到购物车页面,没有任何额外的点击,弹出窗口,或者在他们的道路上增加一些步骤。.
PSSW迫使用户点击按钮到达他们的购物车。
在PSSW上,轻拍购物车图标显示移动迷你车。用户不得不点击检视车 结帐 访问他们的完整购物车和订单细节。这种额外的抽头是不必要的;当用户点击购物车图标时,把他们直接送到他们的手推车。.
  • 方便用户更新购物车的内容。.人们经常改变购买商品的想法,或者两次意外地将一个商品添加到购物车中。允许用户轻松地改变他们购物车的内容。.
  • 给用户一个明确的说明去除按钮旁边的每一个项目在他们的购物车。.不要强迫他们把数量变为零,以便从他们的购物车中删除一个产品。

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

HP迫使用户将数量更改为零以移除项目
惠普没有明确规定去除 按钮旁边的每个项目在购物车,并要求用户改变数量为零,以删除项目从购物车。这种设计是manbetx官方网站手机版不直观的,并造成挫折。.
  • 不要使用更新按钮,用于更改购物车。.一些网站强迫用户点击更新按钮为任何改变他们的购物车变得有效。因此,想要更改购物车中物品的数量的人必须指示新的数量,然后按更新做出改变。.

这个设计是manbetx官方网站手机版次优的,原因有两个:(1)用户必须执行两个动作(改变数量,然后敲击更新按钮更改项目;(2)人们往往无法挖掘。更新按钮-因为他们忘记或因为他们没有意识到他们应该这样做。.

记住的东西需要用户选择更新来编辑数量。.
记住了。用户不得不点击步进器然后更新 链接以更改项目的数量。这种设计是manbetx官方网站手机版次优的。.
  • 支持跨多个设备的购物体验的连续性。.随着品牌的不断发展渠道,用户对易访问的期望,灵活性,购物持续增长的同时也保持一致性。而且,因为购物时用户往往在频道之间来回跳动,重要的是让他们可靠地使用手推车,桌面上,移动Web在移动应用程序中。.

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

苹果越区切换越容易检查跨设备
切换允许苹果用户在iPhone之间移动,iPad,和MAC设备。此功能支持无缝购物体验,允许相同的会话在不同的设备上继续。在这种情况下,用户开始在MacBook Pro电脑上购物,但移到iPhone上结账。.

应用程序还可以将用户会话切换到不同的设备。因此,在iPhone上使用应用程序结账的人可以在iPad上无缝地继续这个过程,,前提是应用程序的开发人员利用了切换特性。.不幸的是,许多应用程序(Amazon就是一个显著的例子)不使用切换——这对用户不利。.

为苹果生态系统之外的用户或不熟悉切换的用户支持无缝的跨设备转换,,确保他们的会话可以在一个不同的设备上恢复,一旦他们登录。.然而,这是不够的:用户必须意识到这个特性,当他们首先创建一个帐户。帮助用户记住不同设备上的早期购物会话,考虑包括指示何时向购物车添加项目以及将它们添加到哪个设备或通道的标签。

CRT和桶让用户通过设备访问他们的购物车
CrateandBarrel。com在空购物车页面上显示一条消息,让用户知道他们可以通过登录从所有设备访问购物车。.
  • 使客人结账显著且容易找到。.即使有账户的人也忘记密码;在许多情况下,对他们来说,作为客人结账比在移动设备上恢复密码要容易得多。通过将客户结账置于要登录或创建帐户的选项上方和折叠上方,使客户结账成为最突出的结账选项。
陶器仓库便于客人结帐
Pottery Barn在将客户结账放在视图的显著位置上做得很好,因此用户不必浪费时间四处寻找。客人退房比经过认证的退房优先,并且使外出移动购物者更容易快速通过退房过程。.

订单汇总和拾取选项

购物者不会欣赏不准确或不清楚的价格,并且在结账过程中当成本意外增加时变得沮丧。经常发生这种情况时,用户将放弃他们的手推车,并在其他地方寻找物品以避免超额费用。特别是涉及到运费和运费的问题。两个重要细节确保用户可以看到和理解移动订单摘要中的信息:

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

表单字段和输入交互

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

  • 对于每个字段,显示正确的键盘。.使用数字垫,如信用卡号码或电话号码等数字数据。对于电子邮件地址字段,使用优化输入电子邮件地址的键盘,其中突出的特点是电子邮件特定的字符,如“@和“.“.键盘还应该包括上下箭头,以便于快速转换到下一个(或前一个)表单字段。
耐克使用正确的移动键盘
耐克。COM显示了正确的电子邮件(左)和电话号码(右)字段键盘。.
  • 根据用户的先验输入自动计算字段。.如信用卡类型的字段,地址,城市,或者可以基于用户输入的其他数据(信用卡号码,以及,分别邮编)。而不是要求用户明确地键入这些信息,为他们做好工作。我们的研究表明,要求用户的邮政编码,然后填充城市和国家,同时允许用户纠正偶尔的错误,工作得很好。.
克鲁奇菲尔德使用移动自动填充在其形式。.
克鲁奇菲尔德使用户很容易进入他们的地址。该网站提示用户首先输入邮政编码(左),并使用这些信息在可编辑的表单字段(右)中完成城市和州。用户可以更改这些字段,以防他们的城市名称与数据库中出现的情况不同。.
  • 浏览器自动填充和保存的数据应在诸如名称等表单字段上工作,地址,电子邮件地址,电话号码,密码,还有信用卡。可用性测试的参与者赞赏他们在Tiffany的移动站点上结账时可以使用浏览器自动填充。形式与Safari的完美结合自动填充接触特征,这让一个不想输入她的联系信息的用户感到高兴。她说,“它自动翻转。谢谢您,苹果。苹果篡改了我的信息。“这句话总结了大多数用户对自动填充的感受:糟糕的自动填充体验归咎于网站,而适当的工作经验是由于电话制造商。确保您的站点被编码为使用浏览器自动填充功能正常工作。
  • 使用打开窗体字段,当用户输入他们的状态和信用卡到期日时,没有选择列表。下拉对于移动用户来说,列表尤其困难,特别是在iOS上。iOS选择器控件(用于实现下拉菜单)占据了屏幕的一半,一次只显示几个项。如果列表长,用户必须滚动很多次才能到达列表末尾的值。在我们的研究中,用户经常选择从这些列表中选择正确的项目,犯很多错误,需要反复尝试。虽然减少用户必须在手机上进行打字的数量通常是有意义的,一个长列表的下拉是错误的解决方案。用户输入代表其状态的两个字母和信用卡到期日期的4位数字会更快。
StPress强制用户滚动一个长长的状态缩写列表。.
订书机上的用户。COM不得不滚动一个长下拉列表来选择代表它们状态的两个字母。用户输入字母要比向下滚动从下拉菜单中选择状态快得多。.
TM Lewin允许用户键入他们的信用卡到期日期和安全代码。.
TM Lewin为信用卡到期日期正确使用文本输入字段,而不是繁琐的下拉菜单。它还将键盘切换到移动电话上的号码簿,使信息容易进入。.

轻松支付莫比尔

进入信用卡细节是劳动密集型的,烦人的,而且,尤其是移动电话,易出错;此外,在旅途中的用户可能并不总是拥有他们的信用卡。我们的许多研究参与者利用了PayPal或Apple Payes这样的简单支付选项。这些服务不仅省去了用户输入信用卡信息的麻烦,但他们也被认为比直接向网站提供信用卡号码更安全、更值得信赖。.

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

在查看蒂凡妮的移动网站时,一位用户抱怨当她发现网站没有提供PayPal或Apple Bayes选项时。“我喜欢,为什么没有PayPal或Apple的薪水与此相关?“然后,她注意到这个网站支持内置的,,自动充值信用卡选项和尽管她还得把她的信用卡从钱包里拿出来,在她扫描信用卡输入细节后,她的沮丧情绪下降了。

蒂芬尼COM可以让用户拍张信用卡的照片。.
蒂芬尼com:自动充值信用卡 Safari(左)中的特性允许用户对信用卡拍照,以填充他们的支付信息(右)。.

结论

最好的移动结账体验与标准结账体验的区别在于对细节的额外关注。移动聚焦以用户为中心的UI元素可以帮助用户快速、轻松地体验体验。虽然常常被忽视,很容易被遗忘,这些看似很小的设计细节在您的手机结账中将创建manbetx官方网站手机版一个让您的用户满意的体验。.

更多关于如何设计一个最佳电子商务购物车manbetx官方网站手机版,结账登记手续探索我们的报告,,卷。04:购物车,结帐登记,最近更新的第四版的一部分电子商务用户体验报告系列。.