Reducing Friction in Checkout

by / Wednesday, 02 April 2014 / Published in E-Commerce, Experience Design, Interaction Design
Customers hate to fill out forms.  There, I said it!  No matter how beautiful your form design is, or how well it follows best practices, forms will always add a barrier to successful checkout experiences (particularly on mobile devices, where chances of errors are abundant with tiny touch screen keyboards.)

Here are three suggestions to help reduce friction for first time users in your checkout experience.  These recommendations are tailored to getting your customers to the finish line faster and with as little friction as possible:

1. Use Smart Defaults

This is one of my favorite rules to follow when it comes to designing checkout experiences.  The 80/20 rule is a great one to follow here.  Using smart defaults will allow your checkout to be as streamlined and simplified as possible.  First, make sure that “use my shipping address as billing” is checked by default because we know that the vast majority of shoppers will ship to their billing address (particularly on their first visit).  Setting this as a default allows us to hide the billing address fields completely unless they uncheck it, effectively eliminating almost half the form fields on the page and dramatically reducing the perception of “work” to be completed at first glance.

Other popular smart defaults are hiding less often used forms of payment by default (like gift certificates, store credit or promo codes) on the payment step unless the user selects to display them, and gifting options.

2. Use Inline (Client Side) Form Validation

I honestly cannot stress enough how valuable this type of feature can be when filling out checkout forms.  Giving customers real honest-to-goodness real-time feedback as they are filling out your form will not only increase the chances that they will be successful on their first attempt to submit that form, but also has been proven to increase speed of form completion times, reduce eye fixations, and dramatically reduce the dreaded “pogo-sticking” behavior that comes as a result of poor error handling in forms. (Pogo-sticking is when a customer tries and fails to submit a form successfully multiple times, essentially bouncing back and forth until they give up in frustration and abandon.)

3. Get Rid of Your Checkout Login Page

When ASOS announced that they cut their cart abandonment by 50% by removing any reference to account creation on their checkout login page. It got us all thinking… why do we even need checkout login pages?  What purpose do they really serve other than to annoy the customer who just wants to get in, buy their stuff, and get out as fast as possible?  When the vast majority of customers (particularly first timers) will automatically click to “Checkout as a guest,” the smart default would be to remove this barrier completely and just land them right on the first step of checkout from the shopping bag. We can still provide customers with a link to login at the top of the page, and give them the option to create an account by adding a password alongside their email address (which they are already filling out).  Asking for this in the context of filling out the forms generates less friction and becomes part of the natural checkout flow, rather than creating a potential disruption on a login page.

There are many other recommendations that could be discussed, but these three recommendations are proven to have a tremendous impact.  With the use of a few smart defaults and some TLC to form design, it can become a much simpler and streamlined process that will not only get your customers through checkout faster, but even encourage repeat usage because simpler = better.