This is the fifth in a series of blog posts on UX best practices. The series shows how you can increase revenue by optimizing the customer experience — from page design to payment. Read the previous, UX Best Practices: Retail Site Navigation (Don’t Let Your Customers Get Lost in the Woods).
Most retailers are focused, rightly so, on improving cart abandonment rates. But it’s equally important to understand what happens earlier in the process, when more than one quarter of shoppers abandon a site during the checkout process.
Starting the checkout process is a greater commitment than simply adding items to the cart. Checkout abandonment happens after the purchase decision has been made, which means there’s something in the checkout process causing ready-to-buy customers to get frustrated and leave without making a purchase.
Optimizing the checkout process is a continuous undertaking that should always involve testing. This post examines best practices based on the review of thousands of websites, extensive heat mapping studies, Commerce Cloud benchmarking data and industry statistics. Keep in mind, what works for one retailer may not work for another. A/B test your checkout updates to see how your customers react and the effect it has on your overall conversion rate and checkout funnel metrics.
Position guest checkout first
According to a study by Baymard Institute, 37% of consumers would abandon a checkout if they thought the site required account creation. This is further evidenced by Commerce Cloud customer data, which shows that 85% of checkouts are made by guests.
It bears repeating – Do not require account creation for checkout. Once you overcome the hurdle of getting customers to start a checkout, converting the sale becomes more important than collecting data. Customers prefer guest checkout, so make it easy for them to find, and place it first on the page.
When the sign-in fields are at the top of the page, the other options such as guest checkout can get pushed down the screen on mobile until they are no longer visible. This can create the illusion that an account is required to continue with checkout. Mobile shoppers tend to be in a hurry and are even more averse to creating an account than web shoppers.
Re-think alternate headers
Don’t introduce your alternate header too soon. Sometimes sites will display the alternate header on the shopping cart page – this is too early. We know from click-rate data that shoppers make repeat visits to the cart to review products and pricing. The main navigation and search should be intact on the shopping cart header so that visitors can quickly re-engage with other areas of the site. Once shoppers enter the checkout funnel, it’s appropriate to display an alternate header to reduce distractions and keep the customer focused on continuing through the checkout process.
If you use an alternate header, be sure it features your logo with a link back to your homepage, customer service information, live chat, and shipping and return policies.
Note the difference in the shopping cart header (above) vs. the simplified header (below) once the shopper enters the checkout process.
Also, provide a clear way to navigate between checkout steps and show the customer that they’re making progress. See this example from .
Optimize forms
People shop online primarily because it’s convenient. That said, every step in the checkout process must not only be concise and clear, but absolutely necessary. Here are some proven strategies:
- Keep forms as short as possible — Only ask for information that is required for a transaction. According to Baymard Institute, the average checkout flow has 14.88 form fields – that’s twice as many as necessary! Remove unnecessary fields like title (Mr./Mrs./Miss) and don’t ask for both home and work phone.
- Place labels above input fields — Usability studies show that labels placed above fields are easier and faster to scan. Labels above the input fields also make localization easier because there is more space for longer translations.
- Stack input fields in one single column. Why? When fields are stacked and layed out in a single column, as below, shoppers tend to make fewer mistakes when entering information and they move through the form quicker.
- Use contextual messaging on buttons — Don’t leave any doubt as to the next step in the checkout process. For example “Continue to Billing” vs. just “Continue.” This is especially important when transitioning from the billing page to order review page, so shoppers know whether they will have the opportunity to review their order before hitting “buy.” It may be clear to you what the next step is, but it’s not always so to the person who matters – the shopper.
- Use Autofill Fields — Address assistance and autofill not only save time but also reduce errors. Use zip code lookup to autofill country, state, and city. A/B tests have shown that autofill options can have a 4.85% lift in conversion. Browsers like Chrome and Firefox also have autofill functionality, enabling shoppers to fill out standard forms in one click. For this to work, however, the browser looks for contextual label names, so make sure your fields are properly tagged with labels that a browser will recognize.
- Make error messaging stand out — Simply putting a red border around a form field (indicating an error) can be easily overlooked by shoppers. Keep in mind that some consumers are colorblind. Make errors standout with thick borders around form fields, iconography, italics, and bold text. If the shopper skips a required field, display a message right away and take them to the exact spot where the problem is. They should not discover there’s a problem after they click the call to action.
- Be sure radial buttons and checkboxes are tap-friendly — Keep in mind, the average index finger is 45 to 57 pixels. Be sure radial buttons and checkboxes are easily tappable with the fingertip but not so large they increase the page size.
- Launch contextual keyboards on mobile —Default to numeric keyboards on mobile for entering phone numbers, zip codes and quantity fields. For usability on mobile, it’s also best to use a date picker for the selection of credit card expiration date.
- Use shipping address as billing address — Allow the customer to use the same address for shipping and billing without additional typing. In the billing step, summarize shipping address as static, editable content.
- Detect credit card type — Automatically detect credit card type as the customer types their credit card number. This will eliminate a step so the customer doesn’t have to specify card type.
- Remove promo code entry from billing — Displaying a promo code entry field in the billing step can present an abandonment opportunity late in the checkout process. This is not the time we want shoppers without a promo code to leave the site to Google for one. Chances are, they won’t return even if it means they can save a few bucks.
There are rare occasions (for example, if the customer can skip the shopping cart) when brands must have promo code functionality in the billing step, but in most cases this functionality is best displayed only on the shopping cart page.
Emphasize security and guarantees
Boost customer confidence with messaging and trust icons. As pervasive as online shopping is, 20% of shoppers don’t purchase because they are concerned about security. Even the largest, most trusted brands can benefit from displaying a lock icon on buttons and labeling buttons with the words “secure checkout.”
Additionally, remind customers of your value proposition and services like risk-free shopping, your satisfaction guarantee, and free returns if you offer them.
Optimizing checkout and reducing abandonment is a process of continual improvement and testing. Making user-friendly changes in the checkout process can have a big payoff with increases in conversion and revenue. Put your current checkout process to the test with the UX best practices shared here. Remember, there are almost always opportunities to optimize on mobile and desktop and be sure to test and measure your results.
Craving more UX knowledge? Read our next post in the series: UX Best Practices: The All-Important “Add-to-Cart” Page
