在电子商务网站的设计,结帐过程是t之一he most highly scrutinized parts of the user journey. And rightfully so: it directly influences brand perception, propensity for return visits, and an organization’s ability to drive revenue online. With more and more users在智能手机上购物，设计移动结账流程是必不可少的，这不仅遵循电子商务用户体验的最佳实践，而且还针对移动设备的功能和约束进行了优化。

In this article, we’ll use findings from our recent research for the fourth edition of the电子商务User Experience report seriesto outline and discuss some of the most important design guidelines for an optimal mobile-checkout experience.

Mobile Shopping Cart and Checkout Options

Often, the checkout process begins with revisiting the购物车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:

  • Provide quick access to the mobile shopping cart.点击购物车表示欲望前进，因此尽快将用户提供给推车。避免与性能相关的延迟，并在尝试访问购物车时删除可能在用户的方式获得任何不必要的障碍。
This JCrew.com design represents a good example of easy access to the shopping cart. When an item was added to cart,购物车图标顶部的徽章为用户提供即时反馈。在购物车图标上攻丝将用户带到购物车页面，而无需额外的点击，弹出窗口或在顺途中添加步骤。
PSSW forces users to tap an button to get to their cart
On PSSW, tapping the cart icon revealed a mobile mini-cart. Users then had to tap查看购物车orCheckoutto access their full shopping cart and order details. This extra tap is unnecessary; when users tap the shopping cart icon, take them directly to their cart.
  • Make it easy for users to update the contents of their shopping cart.People often change their minds about purchasing a product or accidentally add an item to the shopping cart twice. Allow users to easily change the contents of their shopping cart.
  • 让用户清晰Remove按钮旁边的每个项目在他们的购物车。不要强迫它们将数量更改为零，以便从购物车中删除产品。

While shopping on HP’s site, one study participant became frustrated when she couldn’t figure out how to remove an unwanted printer cartridge from her cart (she was supposed to set the quantity to zero). As a result, she purchased the printer cartridges fromAmazoninstead.

HP强制用户将数量更改为零以删除项目
惠普没有明确的Removebutton next to each item in the cart and required users to change the quantity to zero to remove items from the cart. This design was unintuitive and caused frustration.
  • 不要使用更新button for committing changes to the shopping cart.Some sites force users to tap an更新按钮的任何更改，以使他们的购物车生效。因此，想要更改购物车中商品数量的人必须指示新的数量，然后按更新致力于改变。

This design is suboptimal for two reasons: (1) users must perform two actions (change the quantity, then tap the更新button) to change the item; (2) people often fail to tap the更新button — either because they forget or because they don’t realize they are supposed to do so.

事情记得需要用户选择更新to edit quantity.
ThingsRemembered.com: Users had to tap the stepperandthen the更新link to change the quantity of an item. This design is suboptimal.
  • 支持跨多个设备的购物体验的连续性。As brands continue to develop across渠道，用户在购物继续上升时轻松访问，灵活性和一致性的期望。而且，因为用户在购物时倾向于在频道之间来回反弹，所以很重要，可以让他们可靠地访问他们的购物车，桌面，移动网络和移动应用程序。

Users of Apple devices can benefit from a feature calledhandoff, which allows them to (1) use a website in Safari on their iPhone and (2) then, when they move to their iPad or Mac computer, open up the same page in Safari on that device (or vice versa).

Apple Handoff makes it easy to checkout across devices
切换允许Apple用户在iPhone，iPad和Mac设备之间移动。此功能支持无缝的购物体验，允许在不同的设备上继续相同的会话。在这种情况下，用户在MacBook Pro计算机上启动购物，但移动到iPhone以结账。

An application can also hand off the user’s session to a different device. Thus, someone checking out using an application on an iPhone could seamlessly continue the process on the iPad,前提是应用程序的开发人员利用了切换功能。不幸的是，许多应用程序（Amazon就是一个著名的例子）不使用切换——这对用户不利。

为了支持苹果生态系统之外的用户或不熟悉切换的用户无缝跨设备切换，make sure that their session can be resumed on a different device once they are logged in。但是，这是不够的：用户必须在首次创建帐户时了解此功能。为了帮助用户记住在不同设备上的早期购物次会话，考虑包括指示当项目添加到购物车时的标签，并在其上添加任何设备或频道。

Crateandbarrel让用户在设备上访问他们的购物车
CrateandBarrel.com displayed a message on the empty–shopping-cart page to let users know that they could access their shopping cart from all devices by signing in.
  • Make guest checkout prominent and easy to find.Even people who have an account forget passwords; in many cases, it will be easier for them to check out as guests than to recover their password on their mobile device. 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.
陶艺谷仓让客人结账更容易
Pottery Barn did a good job of placing the guest checkout prominently in the viewport so the user doesn’t have to waste time looking around to find it. The guest checkout was prioritized over authenticated checkout and made it easy for on-the-go mobile shoppers to get through the checkout process quickly.

订单摘要和拾取选项

Shoppers do not appreciate inaccuracies or unclear prices and grow frustrated when costs unexpectedly increase during the checkout process. Often when this happens, users will abandon their carts and seek out the items elsewhere to avoid excess fees, particularly when it comes to shipping and delivery charges. Two important details ensure that users can see and understand the information in the order summary on mobile:

  • 使订单摘要易于在移动布局中找到。While the详细信息我们在订单摘要中显示，（包括小计、税金、费用、折扣和运费）对于任何结帐流程都很重要，我们必须特别注意移动结帐订单摘要的放置。由于屏幕空间有限，这些额外费用在页面上可能显得很低，可能会被用户忽略。为了避免以后在流程中出现不愉快的惊喜，请在结帐页面的顶部突出显示订单摘要。不要让购物者滚动到页面底部来查找此信息。
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. Users had to scroll to the very bottom of theReview & Paypage, right above the mobile footer, to see their final order summary information. The information was also collapsed in an accordion, which made it difficult to see the price composition; instead, it should have been placed higher on the page and expanded to show each line item contributing to the order’s total.
Jet.com makes it easy to see your order summary
On Jet.com’sReview & Pay页面，订单摘要突出到页面折叠之上。用户可以在拨打订单之前清楚地看到每个行项目，而无需向下滚动。
  • 使用用户的当前位置确定销售税，交付成本和可用的任何拾取选项。Shipping costs and tax usually depend on the shipping address associated with the order, which is typically entered late in the checkout flow. Whenever possible, 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, if desired. 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.

表单字段和输入交互

Filling in forms on mobilecan be time-consuming and error-prone. Reducing the total number of form fields and automatically filling in fields for the user (based on the knowledge that the system has about that particular user) can dramatically ease the checkout process. Here are a few guidelines for checkout forms:

  • For each field, present the correct keyboard.Use a numeric pad for numeric data such as credit-card numbers or phone numbers. For email-address fields, use a keyboard optimized for entering email addresses, which prominently features email-specific characters like “@” and “.”. Keyboards should also include up and down arrows to facilitate quick transitions to the next (or previous) form field.
Nike uses the correct mobile keyboards
Nike.com showed the correct keyboards for email (left) and phone-number (right) fields.
  • 根据用户先前的输入自动计算字段。Fields such as credit-card type, address, city, or state can be automatically calculated based on other data entered by the user (the credit-card number and, respectively, the ZIP code). Instead of asking users to type this information explicitly, do the work for them. Our research showed that asking for a user’s ZIP code and then populating the city and state, while still allowing the user to correct the occasional error, worked well.
克鲁奇菲尔德在表单中使用移动自动填充。
Cruckfield使用户可以轻松输入他们的地址。该站点提示用户首先输入其邮政编码（左）并使用此信息来完成可编辑表单字段（右）的城市和状态。用户可以在数据库中出现的城市名称不同的情况下更改这些字段。
  • 浏览器自动填充和保存的数据应该在表单字段上工作，如姓名、地址、电子邮件地址、电话号码、密码和信用卡。可用性测试参与者很感激他们可以在Tiffany的移动网站上使用浏览器自动填充。这种形式与Safari的完美结合AutoFill Contactfeature, which delighted a user who was not looking forward to typing out her contact info. She said, “It autopopulates. Thank you, Apple. Apple autopopulated my information.” This remark sums up most users’ feelings about autofill: a poor autofill experience is blamed on the website, whereas a properly working experience is attributed to the phone manufacturer. Ensure that your site is coded to work properly with browser autofill functionality.
  • 在要求用户输入其州和信用卡到期日期时，请使用“打开”表单字段，而不是选择列表。长dropdown列表对于移动用户来说尤其困难，尤其是iOS上的用户。iOS picker控件（用于实现下拉列表）占据了半个屏幕，一次只显示几个项目。如果列表很长，用户必须滚动很多次才能获得列表末尾的值。在我们的研究中，用户经常努力从这些列表中选择正确的项目，犯下许多需要反复尝试的错误。虽然减少用户在移动设备上的输入量通常是有意义的，但下拉列表是错误的解决方案。用户可以更快地键入代表其所在州的两个字母和信用卡到期日期的4位数字。
Staples forces users to scroll through a long list of state abbreviations.
上的用户斯台普斯网站必须在一个长长的下拉列表中滚动选择代表其状态的两个字母。对于用户来说，输入字母要比向下滚动从下拉列表中选择一个状态快得多。
TM Lewin让用户输入他们的信用卡到期日期和安全代码。
TM Lewin correctly used a text-input field for the credit-card expiration date, rather than a cumbersome dropdown menu. It also switched the keyboard to the number pad on mobile, to make entering this information easy.

Easy Payment on Mobile

输入信用卡的详细信息是劳动密集型的，令人讨厌，而且特别是在移动设备上，容易出错；此外，移动用户可能并不总是手边有信用卡。我们的许多研究参与者利用了简单的支付方式，如PayPal或applepay。这些服务不仅为用户省去了输入信用卡信息的麻烦，而且比直接向网站提供信用卡号码更安全、更可信。

  • 提供移动友好的付款方式，但不要压倒用户有太多选择。Recognizable third-party checkout options such as Paypal or Apple Pay can be helpful, but too many options can cause选择过载。对于所提供的每种付款选项，使每个付款选项都明确。最常见的结账过程应该是页面上最突出的，或者在其他选项中列出。对于用户向用户发出信号也很重要，因为他们将暂时从网站上带走，以便在结束时暂时进入他们的付款服务细节。使用PayPal等媒体，如结账，以及这些服务的标准品牌按钮。为了最大限度地减少用户输入的信息，请在结帐流程开始时提供这些选项;但是，请确保您在最初可能错过了它们的那些用户的付款页面上还要重复它们。
Vineyard Vines offers mobile friendly payment methods
葡萄园葡萄园在购物车（左）中提供了许多移动友好的付款方式，并在您在购物车（右）中可能错过了那些可能错过的人的付款页面上展示PayPal。
  • 允许用户拍摄信用卡照片以填充信息。我们研究中有几个人使用了自动填充信用卡feature that’s offered in Safari, instead of typing in their credit-card information. This option enables users to take a photo of the credit card; the details are scanned and the information is then added to the website’s credit-card field.

While checking out on Tiffany’s mobile website, one user complained when she noticed that the site didn’t offer a PayPal or Apple Pay option. “I’m like, ‘ugggggh’ why is there not a PayPal or Apple Pay associated with this?” Then, she noticed that the site supported the built-in,自动填充信用卡option and, though she still had to get her credit card out of her wallet, her frustration decreased after she was able to scan her credit card to input the details.

蒂凡尼网站允许用户用信用卡拍照付款。
蒂凡尼网站：的自动填充信用卡Safari中的功能（左）允许用户拍摄信用卡的照片来填充他们的支付信息（右）。

结论

最好的移动结账体验与标准结账体验的区别在于对细节的额外关注。以移动为中心、以用户为中心的UI元素可以帮助您的用户快速轻松地体验移动。虽然经常被忽视和容易忘记，这些看似很小的设计细节，在您的手机结帐将创造一个体验，取悦您的用户。

For more on how to design an optimal ecommerce shopping cart, checkout and registration process, explore our report,Vol. 04: Shopping Carts, Checkout and Registration, part of the recently updated fourth edition of our电子商务用户体验报告系列。