In ecommerce design, the checkout path is one of the 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 shopping on smartphones, it’s imperative to design a mobile checkout flow that not
only follows the best practices for ecommerce user experience, but is also optimized for
the capabilities and constraints of mobile devices.
In this article, we’ll use findings from our recent research for the fourth edition of
the Ecommerce User Experience report series to 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 shopping cart 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. Tapping on the shopping cart
indicates a desire to move forward, so get users to the cart as quickly as possible.
Avoid performance-related delays and remove any unnecessary obstacles that may
get in users’ way when trying to access the cart.
This JCrew.com design represents a good example of easy access to the shopping cart. When an
item was added to cart, a badge on top of the cart icon gave users immediate feedback. Tapping on
the cart icon took users to the shopping-cart page, without any extra clicks, popups, or added steps
in their way.
 On PSSW, tapping the cart icon revealed a
mobile mini-cart. Users then had to tap View Cart or Checkout to 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.
• Give users a clear Remove button next to each item in their cart. 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, 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 from Amazon instead.

HP did not include a clear Remove button 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.
• Don’t use an Update button for committing changes to the shopping
cart. Some sites force users to tap an Update button for any change to their
shopping cart to become effective. Thus, someone who wants to change the
quantity of an item in the cart will have to indicate the new quantity and then
press Update to commit the change.
 This design is suboptimal for two reasons: (1) users must perform two actions
(change the quantity, then tap the Update button) to change the item; (2) people
often fail to tap the Update button — either because they forget or because they
don’t realize they are supposed to do so.

ThingsRemembered.com: Users had to tap the

stepper and then the Update link to change the quantity of an item. This design is suboptimal.
• Support the continuity of the shopping experience across multiple
devices. As brands continue to develop across channels, users’ expectations for
easy access, flexibility, and consistency while shopping continue to rise. And,
because users tend to bounce back and forth between channels while shopping, it’s
important to give them reliable access to their carts, on desktop, mobile web, and in
mobile apps.
 Users of Apple devices can benefit from a feature called handoff, 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).

Handoff allows Apple users to move between iPhone, iPad, and Mac devices. This feature supports
a seamless shopping experience, allowing the same session to be continued across different devices.
In this case, the user started shopping on a MacBook Pro computer but moved to the iPhone to
checkout.
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, provided that the developers of the app have taken
advantage the handoff feature. Unfortunately, many apps (Amazon being one
notable example) do not use handoff — to the detriment of their users.
To support seamless cross-device transitions for users outside the Apple ecosystem
or those who are not familiar with handoff, make sure that their session can be
resumed on a different device once they are logged in. However, that is not
enough: users have to be aware of this feature when they first create an account. To
help users remember earlier shopping sessions on different devices, consider
including labels that indicate when items were added to the cart and on which device
or channel they were added.
 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.

Order Summary and Pickup Options

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:

• Make the order summary easy to find in mobile layouts. While the details we
display in the order summary, (including subtotal, taxes, fees, discounts, and
shipping charges) are important for any checkout flow, we must pay extra attention
to the placement of the order summary for mobile checkout. Due to limited screen
space, these extra fees may appear low on the page and may be ignored by users.
To avoid unpleasant surprises later in the flow, 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.
on the page to be easily viewed. Users had to scroll to the very bottom of the Review & Pay page, 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.

On Jet.com’s Review & Pay page, the order

summary is placed prominently above the page fold. Users can clearly see each line item before
placing their order, without having to scroll down.
• Use the user’s current location to determine sales tax, delivery costs, and any
pickup options available. 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.

Form Fields and Input Interactions

Filling in forms on mobile can 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.com showed the correct keyboards for email (left) and phone-number (right) fields.
• Calculate fields automatically based on users’ prior inputs. 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.

Crutchfield made it easy for users to enter their address. The site prompted users to first enter their ZIP
code (left) and used this information to complete the city and state in editable form fields (right). Users
could change these fields in case their city name differed from what appeared in the database.
• Browser autofill and saved data should work on form fields such as name,
address, email address, phone number, password, and credit card. Usability-
testing participants appreciated that they could use browser autofill while checking
out on Tiffany’s mobile site. The form worked flawlessly with Safari’s AutoFill
Contact feature, 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.
• Use an open form field, not a selection list when asking users to enter their
state and credit card expiration date. Long dropdown lists are especially difficult
for mobile users, particularly those on iOS. The iOS picker control (which is used for
implementing dropdowns) occupies half the screen and displays only a few items at
a time. If the list is long, users have to scroll many times before getting to values at
the end of the list. In our studies, users frequently struggled with selecting the
correct item from these lists, making lots of errors that required repeated attempts.
While it usually makes sense to reduce the amount of typing that users must do on
mobile, a dropdown for a long list is the wrong solution. It’s faster for users to type
the two letters that stand for their state and the 4 digits of credit-card expiration
dates.
 Users on Staples.com had to scroll through a
long dropdown list to select the two letters that represent their state. It is much faster for users to type in
the letters than to scroll down to select a state from the dropdown.
 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

Entering credit-card details is labor-intensive, annoying, and, especially on mobile, error-
prone; moreover, users on the go may not always have their credit card handy. Many of
our study participants took advantage of easy-payment options such as PayPal or Apple
Pay. Not only did these services save users from the trouble of typing in their credit-card
information, but they were also perceived as more secure and trustworthy than providing
their credit-card number directly to the site.

• Offer mobile-friendly payment options, but don’t overwhelm users with too
many options.Recognizable third-party checkout options such as Paypal or Apple
Pay can be helpful, but too many options can cause choice overload. For each
payment option offered, make the distinction between each one clear. The most
common checkout process should be the most prominent on the page, or listed first
among the other options. 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. Use verbiage such as Checkout with Paypal, together with
the standard branded buttons for those services. To minimize the information
entered by the user, offer these options at the very beginning of the checkout flow;
however, make sure you repeat them also on the payment page for those users
who may have missed them in the beginning.
Vineyard Vines offered many mobile-friendly payment options in the shopping cart (left) and again
displays PayPal on the payment page for those who may have missed it in the cart (right).
• Allow users to take photos of their credit cards to populate
information. Several people in our study used the AutoFill Credit Card 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, AutoFill Credit Card 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.
 Tiffanys.com: The AutoFill Credit Card feature within Safari (left) allowed users to take photos of their
credit card to populate their payment information (right).

Conclusion
What distinguishes the best mobile checkout experiences from standard ones is the extra
attention to detail. Mobile-focused, user-centered UI elements can help move your users
through the experience with speed and ease. Though often overlooked and easily
forgotten, these seemingly small design details in your mobile checkout will create an
experience that delights your users.
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 Ecommerce User
Experience report series.