Loading Form...
Oct 31, 2019 | 9 minute read
written by Linda Bustos
Five years ago, we posted the 10 Scariest Things that Can Happen in Checkout in honor of the year’s most frightening holiday. We thought it was high time for an update, because nothing’s more terrifying in 2019 than mobile checkout abandonment.
Don’t let any of these bone chilling boners haunt your mobile commerce site!
Many ecommerce sites still design for desktop-first, but forget that responsive layouts can reflow and resize content in an irresponsible way. Well all know that primary calls to action (CTAs) should be sized and styled more prominently than secondary CTAs such as Edit Cart, Keep Shopping or Apply Promo Code.
Things can look decent on desktop...
...but scaled down to mobile, buttons often resize to screen-width and stop looking like clickable buttons! This is especially dangerous when Checkout buttons share the same color as secondary buttons or the website’s theme and branding (below, left). And when alternative payment methods “pop” with bolder colors than primary Checkout (below, right) they can appear as the only checkout options.
Despite the popularity and convenience of express payment methods and mobile wallets, make sure they don’t choke out your primary Checkout visibility (like the examples below).
Want your customer to ghost you? Show them an open coupon box. We’ve preached why coupon boxes kill conversion for over a decade, but on mobile, the danger of triggering coupon-hunting abandonment is even higher.
Desktop layouts can hide coupon boxes off to the side, out of users’ eyeflow. But on mobile, they typically span the width of the screen and look like a required step in the process. And switching between browser tabs on mobile (from Google/coupon site back to your shop) is more difficult -- your customer may never return.
The worst open coupon box implementation I’ve ever seen (for a luxury global fashion brand!) places the promo code as the last step before submitting an order (below, left). Contrast this with the best practice of collapsing the coupon box to a discreet link that can be expanded with a tap in the shopping cart (below, right).
PayPal in partnership with HiConversion tested collapsed coupon links against open fields across a number of mobile commerce sites and found an 8% increase in revenue per visitor when boxes are discreetly collapsed.
Users shouldn’t have to scroll to Hades to unearth Guest Checkout, but 88% of merchants still bury it below Sign In according to a study by Baymard Research, with 60% of test subjects failing to find it.
Some sites take up to three full screens to find “Ghost Checkout”!
Others simply obscure Guest Checkout by letting it slip below the “portrait fold” (below, left). Even though REI is a memership co-op, it offers Guest Checkout and PayPal, the screen layout and microcopy suggest you must sign in (and no Sign Up option is visible).
Other themes hide Guest Checkout behind tabs (below, right) -- equally problematic.
At a minimum, make both Guest Checkout and Sign In options visible in the first screen (and ditch the Sign Up step and allow guests to save their information to an account within your flow).
User testing has found that open form fields trigger many users to enter input regardless of whether it’s required or appropriate (we rarely pay attention to all microcopy), so focusing text on the juicy colored buttons and collapsing open fields is a great tactic.
Cabela’s (below) expands Sign In fields and microcopy only when engaged, keeping Guest Checkout above the fold by default.
Ideally, Guest Checkout is presented before Sign In. Remember, even returning customers have trouble remembering their emails and passwords and loooooove the guest option. But beware of buttons that blend in with your site’s theme (below, left). Opt for poppin’ colors that contrast other design elements.
Or, bypass the first checkout step completely and take everyone to Shipping Address with the option to log in (below, right).
Beware of floating design elements that cover critical content and calls to action. They can also be accidentally activated when placed in the prime thumbing area (bottom right corner).
Cart icons can also distract and deceive customers. As with desktop, enclosing mobile checkout and removing header navigation links can improve conversion.
Dutch retailer Fonq used heatmapping tools to identify that mobile users were frequently clicking the cart icon during checkout, mistaking it for a stepped checkout indicator. Reducing its visibility by changing the red dot to white reduced this behavior by 40% and increased conversion by two points. However, we hypothesize removing the header completely in checkout may have been even more effective.
Autocorrect is the mobile feature we love to hate. While it can make us look better in text messages, it often trips us up in checkouts where first and last names, cities, streets and email addresses deviate from standard English.
Steve at MyWifeQuitHerJob shares an anecdote of a customer who struggled through ten minutes of pain before phoning customer service about the issue of autocorrect preventing her from correctly entering her city!
Image: MyWifeQuitHerJob
What’s worse is when autocorrection occurs on the sly and customers don’t notice.
Sure, customers can disable their own autocorrect. DO NOT FORCE THEM TO. It’s a simple fix disable it for specific fields in checkout -- use Baymard Institute’s handy cheat sheet.
Another problem you can fix with the Baymard cheat sheet is invoking the wrong keyboard. Never pull the alphabetical keyboard or its numeric toggle for fields like telephone, zipcode, credit card numbers and the like. Instead, pull the finger-friendly keypad.
Similarly, serve the email-optimized keyboard for email fields that includes the @ sign.
As said before -- users often enter empty form fields on autopilot whether they need to or not. Given mobile entry’s tediousness, the copy Shipping Address to Billing is heaven sent -- except when it’s improperly implemented.
Many mobile checkouts are presented as one page or flow, so Shipping and Billing steps (and forms) are visible from one screen. When Billing fields are open, users may not notice the copy-to-billing checkbox in the previous step (below, left), or check it and assume they’re still required if they don’t immediately collapse.
Another gotcha is pre-checking copy-to, which may prompt a customer with a different billing address to bypass and receive errors in Payment (below, right).
Alternatively, move Billing info to the Payment step and present the copy-to option there. Ulta (below, right) nails it. It pre-populates the shipping address for quick review, and provides two, clear radio button options with instructions “Choose a billing address” that you can’t miss.
Express payments (e.g. PayPal, Apple Pay, Amazon Pay) bypass the need to enter Shipping, Billing and Payment information, thus should be presented before Checkout in the Cart step. Saving them for Payment slows your customers down and often frustrates them.
That said, they should be repeated as options as some customers won’t select them from the Cart. Like Guest Checkout, express wallets should not be buried in the Payment step and should be visible as high as possible, before open credit card input fields.
Remember, content and fields are revealed progressively as a user scrolls. When PayPal is presented after the credit card form, users may already have conceded to use credit.
It’s best practice to use a mobile wallet’s most recognizable branding. If it looks like microcopy (below, left) or hides behind a tab (below, right) customers can easily overlook it.
The following two examples are soooo close to getting it nailing it. A simple swap to show PayPal first would be ideal, though payment options are presented clearly enough to suffice.
When errors happen, it’s critical to over-communicate why and where they occurred. Pinning alerts like “invalid card information” or “telephone field is required” to the top of the flow isn’t helpful -- especially for “one-page” mobile checkouts that require a lot of scrolling to locate fields in question.
There’s mixed evidence whether inline validation (catching and calling out errors as they’re input versus after form submission) helps or hinders form usability. Regardless of which method you employ, make error messaging as specific as possible.
For example, use “billing address doesn’t match card number” rather than “invalid address.” Text should appear as close to the problem field as possible, with the field highlighted in some way.
Where possible, take programmatic steps to reduce errors, such as allowing flexible formats for telephone numbers, zip and postal codes. Also leverage microcopy to show password rules such as “minimum of 8 characters” or “must contain one special character.” Inline help such as the “Security Code (CVV)” paired with the back-of-credit-card icon (above, right) can also clarify required data to prevent confusion and errors.
I’ve noticed two disturbing checkout trends this year.
The first eliminates the Review step to achieve a 3-step checkout (Shipping, Billing, Payment). While this may be perceived as a quicker flow, it increases the chances that “valid” but incorrect entries will be submitted and never noticed by the customer.
The second uses the wrong information in order review. Too many merchants reiterate the order details instead of customer information (complete with product thumbnails, pricing et cetera). This information belongs in the Cart, with consent to order contents implied with the click of the Checkout button.
As with error messaging, don’t make your customer scroll to review their details. Most won’t bother. And as shown in the test case below, it appears the only review necessary is that of the Cart Summary!
(I purposely entered the wrong credit card information into the checkout shown below (which didn’t prevent me from reaching the Review step) -- an error only catchable by scrolling back up)
Some merchants calculate taxes and shipping costs based on inputs given during the checkout process. In such cases, a final total can be confirmed before processing payment, but cart contents should be left out of Order Review, and customer information should be presented with a way to edit before placing the order.
Notice that a three-step process can be achieved without nixing Order Review by combining Billing with Payment (above, right).
Prevent the nightmare before Christmas by ensuring your mobile checkout doesn’t commit any of these horrors!