“Details create the big picture,” said Sanford Weill, former chairman of Citigroup. In the e-commerce arena, this is most true at the pinnacle of your funnel: the checkout.
Checkout is online retail’s make-or-break moment. It's the culmination of the customer journey — the moment when a shopper either feels comfortable enough to take out his or her (virtual) wallet, or (virtually) walks away.
The importance of checkout makes it the ideal place to quibble, nitpick, split hairs and otherwise get really fussy about details. There’s no shame in it. Brick-and-mortar retailers do it, and online retailers large and small have long appreciated the importance of doing it. However, only recently have user experience solutions caught up to this awareness.
Today, we have the tools to microscopically examine, step-by-step, how visitors react to our checkout process — where they breeze through, where they get stuck and (ouch!) where they drop off.
In my work at Clicktale, I’ve had the opportunity to work with multiple large-scale websites, from Wal-Mart to Microsoft, serving tens of millions of visitors. Here are a few of the less-intuitive things I’ve learned about making the checkout process smoother:
1. Provide a clear distinction between "Sign In" and "Sign Up" forms. Customers can be easily frustrated and confused by sign-in and sign-up forms, especially if page layout doesn’t clearly differentiate between them. New visitors trying to sign in to nonexistent accounts may abandon your site altogether; returning visitors may inadvertently create duplicate accounts.
By way of example, on an online takeaway site I recently examined, the log-in form and registration form were placed one on top of the other. Thirty-seven percent of new visitors who actually wanted to create a new account started interacting with the “existing member” form.
The reason? Filling out forms from the top is a normal pattern of behavior, and this is what visitors did. So, what should you do? If you decide to position your registration and log-in forms on the same page, avoid placing them one on top of the other. A better solution is positioning forms side-by-side, with a clear distinction between the two.
2. Add "Show Password" on log-in page forms. Returning visitors attempting to log in frequently mistype passwords. On mobile and touch devices, such typos are far more common.
Watching Clicktale’s Session Replays, I found that after more than a minute of struggling with the forms, many returning visitors switched to Guest checkout. Although a conversion is a conversion, Guest purchases do not facilitate the personalization and upsell options that can enhance margins.
What should you do? On any device, but especially on mobile devices with smaller screens, form functionality must be crystal clear. To make it easier for visitors to sign in, provide a “show password” option on password fields. Spare your visitors the hassle of retrieving or changing forgotten passwords with confirmation emails that may take them out of the checkout funnel just because they mistyped.
3. Allow in-cart product editing. In the checkout process, any extraneous navigation is dangerous, and can remove buyers from the funnel. At the same time, last-minute changes are inevitable and must be accommodated.
Directing visitors back to the product or shopping cart page to change product size, color or quantity can divert them from completing their purchase. Instead, keep customers moving forward to conversion by adding an option to edit products in the cart directly from the cart summary page via a pop-up window.
4. Remove below-the-fold product recommendations and offer one-click "Add to Cart." Product recommendations can dramatically raise margins by offering complementary or impulse-driven products just before checkout. However, Clicktale’s heat maps show that visitors don’t usually scroll down on the cart summary page, ignoring product recommendations positioned below the fold. Therefore, if you want to include product recommendations on the cart summary page, make sure they appear above the fold.
Also, don’t encourage consumers to exit the cart and return to a product page. Allow them to add products to their cart in one click, directly from the product recommendation. Keeping consumers on the shopping cart page helps keep conversions up.
5. Auto-format all number inputs. In one recent Session Replay, I watched a visitor spend four full minutes on a credit card form trying to enter a credit card number. What was this visitor’s “crime”? She entered special characters as separators in the credit card number — dashes or spaces.
Visitors don’t perceive spaces or dashes as special characters for the simple reason that this is the way the number is printed on the credit card itself. Instead of notifying visitors that they have entered their credit card number incorrectly, accept all input formats and auto-format them. This isn't technologically complex, but if it isn’t possible, at least provide visitors with a clear format example within the field itself or in close proximity to the field.
These are just a few of the many, many ways we can make the checkout process smoother by digging deep into user experience. Leveraging emerging technologies, site stakeholders now have the tools to quibble, nitpick and split hairs, effectively analyzing and tweaking the checkout process in ways that can dramatically impact conversions.
Michal Harel is the director of consulting services at Clicktale, a customer experience analytics platform.