Illustration of making doing ecommerce checkout

Ecommerce Checkout Best Practices: Improving Design & UX

Checking out. It’s the final step between you and your profits. Therefore, it is vital that every step along the way be fully optimized for UX, aesthetic appeal, and efficient conversions. This means you’re likely to run into some common problems along the way. The most prominent of which has to be cart abandonment.

Customers abandon carts for all sorts of reasons, but the various reasons can mostly be boiled down to friction. They run into an unexpected step, task, or cost that rubs them the wrong way, causing them to bounce just out of reach. This is even more common with mobile checkouts—and if you’ve been paying any attention to what’s happening in the world of mobile commerce, you’ll know that it’s an unacceptable state of affairs for your bottom line.

So when you run into common problems, it’s best to look for simple solutions. Solutions to design problems such as the ones we’ll be discussing today are called design patterns. These are effective methods to circumvent the friction website visitors usually come across while interacting with a web site. Generally speaking, eCommerce design patterns for optimal checkouts can be categorized in a few different ways:

  • Shopping Cart/Bag Patterns
  • Account Creation Patterns
  • Web Form Patterns

Today we’ll go over a few examples of each and let you know what works best, and why.

Optimize Checkout Design: Shopping Cart/Bag Patterns

This category can be described as the patterns which help users enjoy the browsing and shopping experience. Little design quirks and cues that allow the shopper to easily keep track of what they’re buying and how much it’s going to cost them. The latter bit of information is especially important as unexpected or unknown costs showing up at checkout is the number one reason for cart abandonment. So let’s begin with that.

Avoid User Frustration by Showing Costs Up Front!

Nothing frustrates customers more than thinking a product is going to cost one thing and finding out after they’ve entered all their info that it costs way more than they expected. This is actually a dark UX pattern that we went over in a recent article.

The quick fix for this is to just include all your costs up front. This can mean including them at the top of the checkout page or even on the product page before users decide to checkout. You may even decide to just roll whatever ancillary costs you incur into the product’s price and never let the customer see what taxes, handling, service, or shipping costs are in the first place.

If you go that route, go ahead and advertise your products as having free shipping.

optimize checkout design
(Source. Walmart shows shipping costs upfront, rather than having customer put in payment method first)

It’s hardly a surprise that Walmart, an absolute eCommerce behemoth, has this part of the checkout process down pat. On the first step of their checkout process, they clearly list every charge the customer will incur, rather than waiting until the payment page.

Provide Customers with Easy Checkout Options

By Using Persistent Shopping Carts With Count

Our next design pattern should be pretty familiar. It’s easy enough to lose track of what’s in your shopping cart at a brick and mortar store. However, when you’re shopping online, there’s no physical reference point for you to examine and assess. That’s why so many online stores have setup a persistent shopping cart or bag symbol in the headers of each page.

These icons follow you from page to page and help you recall how many items you’ve decided to buy at a quick glance. Moreover, they make it much easier to transition to the checkout process with a single click any time you’re ready.

You can take it even a step further by not only showing all the items in a persistent cart, but also showing the total cost of all the items in the customer’s cart along with a one-click checkout button.

optimize checkout design

Increase Mobile Conversion Rates with “Save Items for Later”

Another very handy feature that not nearly enough eCommerce sites implement is the “Save for Later” button. This could also be a “Wish List” or “Items You’ve Browsed” or anything else of the same ilk. These buttons allow users the time to consider their purchases and make for easy return purchases. Moreover, this design pattern works extremely well for cross platform selling.

According to research performed by Google, 3 out of 4 mobile searches will trigger a follow up action of some kind. Such as:

  • Continued research
  • Visiting a retailer’s website
  • Sharing information on a social network
  • Making a purchase
  • Or calling a business

So while mobile conversion rates aren’t stellar (about 30% of conversions take place on mobile vs. 70% on desktops or laptops) mobile devices can still be used to drive up conversion rates. That’s why it’s vital to have a Save for Later button on your site. Though a mobile user may not feel comfortable making a purchase on their mobile device, they feel no compunction at all about researching products to buy later on a more “secure” platform such as their PC.

Online clothing retailer ASOS has this feature implemented on their beautifully designed mobile site:

optimize checkout design
ASOS makes it easy to favorite a product which saves it for later
ASOS allows users to access saved-for-later products from navigation menu
ASOS creates an omnichannel checkout practice. The product was initially saved via mobile as seen in earlier screenshots. The latest screenshot shows the item in our ‘saved items’ list as accessed via desktop.

The ASOS website is actually a fantastic model to emulate if you’re at all concerned about an efficient mobile commerce strategy. Everything from their typography on down to the responsive layouts is conversion and mobile optimized. Give the site a once over when you’re in need of inspiration.

Optimize Your Checkout Design with Account Creation Patterns

Beyond the various ins and outs of the shopping cart design patterns, there’s one major point of contention in the eCommerce world, and that’s how to handle registration. Clearly, gaining a customer’s contact information and express permission to use it in your business is an incredibly powerful tool in your arsenal. It allows you to run email campaigns, individually target your offers, and establish a relationship with your supporters.

However, as we’ll shortly learn, it’s also the biggest obstacle to a clean conversion.

Don’t Force Sign-in Before Checkout

… Unless You’re Willing to Risk Losing ⅓ of Your Customers

Clearly, account creation is an enormous part of your eCommerce business. However, forcing the issue up front can have serious consequences to your cart abandonment rate.

According to Kissmetrics, the first step in the checkout (the registration barrier) results in the largest spike in cart abandonment. Up to 1/3 of your total customers may decide to jump ship if you’re forcing a sign in before checkout begins. In light of this, you may want to make it the very last step in the process, in order to increase the chances of a conversion.

ProFlowers actually does this very well. They allow for easy guest checkouts and then only ask you to create an account after the purchase has been completed.

optimize checkout design
ProFlowers lets you start the checkout process without a need to sign in, however they make it easy for previous customers to sign-in to speed up the checkout process.

You can also ask customers to create an account when you send them a transactional email with the shipping details or you could do it when sending a future promotional email. Unfortunately, there’s really no clear answer to when the best time to make the email ask actually is. Requiring it up front certainly can be detrimental, however, it can also be so valuable to have that information that you may want to do it regardless. The best approach here is to try multiple things and test to see which method gives you the best results on a case by case basis.

One thing’s for sure though, you must give your users the option to hang on to any information that isn’t necessary to the end purchase. This brings us to our next design pattern which is, in fact, closely related to this point.

Guest Checkouts

25.6% of Online Consumers Will Abandon Your Cart if You Force Them to Register First

Stats from Econsultancy clearly show that people don’t want to create an account before they make a purchase.25.6% of online consumers would abandon a purchase if they were forced to register first:

Guest checkouts are an imperative addition to any online store. There’s no argument for it. Requiring a sign-in simply loses you conversions as we covered above. Registration requires a level of psychological commitment that many users simply aren’t prepared to make. That’s why examples like the one shown above are extremely educational.

The Charlotte Rouse website offers three distinct paths forward for its online shoppers.

  1. Sign in for current members
  2. Account creation for new visitors
  3. Guest checkout for anybody that wants to maintain a semblance of anonymity.

This is an extremely typical approach and it works very well. Many designers feel that by offering neatly presented options to their customers for making a purchase, they can eliminate some of that apprehension associated with giving away email addresses and other personal data. Note that the online seller has a checkout page which is near identical to the Charlotte Rousse page:

Though this is an effective approach, it’s hardly the only way you can choose to handle it. There is that pesky cart abandonment statistic we mentioned above to consider. While it’s an old piece, it’s still worth checking a fantastic review from Carissa Ganelli on what she considers “The Absolute Best Mobile Checkout in the Whole Entire World,” that is very compelling indeed.

The article goes into detail about all the data that ISN’T required in the guest checkout process in question. It’s essentially an appeal to the customer’s impulse to maintain personal privacy, and as we’ll discover in our next point, that can be a powerful motivator indeed.

Put Your Customers at Ease with Info Buttons for Sensitive Data

As mentioned above, most users don’t want to go out of their way to give a ton of personal detail when creating online accounts for retailers to hold indefinitely. In point of fact, the very process of account creation is a little unwieldy. Just remembering multiple login/password information can be a little exhausting. That’s why it’s important to let people know what you’re doing with their data: to put them at ease.

One very effective way of accomplishing this is with the “info” button. If you need important data like email addresses, phone numbers, and so on you can help reassure your users by having hidden text available at the click  (or tap) of an “i” button right next to the field. Just like Home Depot does during their checkout process:

Web Form Patterns

For our final category we’re going to dig a little deeper into the data collection aspect of online selling. User data is primarily collected through the use of web forms. This may not be news to you, but web forms are boring. They’re no fun to fill out, they take too long, and they are often the site of multiple opportunities for either user or device error. This means they can be a major point of cart abandonment.

Let’s look at some of the best ways to make web forms a little more user friendly.

Save Your Customers’ Time by Providing Clear Labeling Text in Your Forms

The number one problem with web forms is the way they look. Long, boring, and difficult. By clearly and cleanly labeling each required field, you’ll ensure less work for your users. In the above example you can see each field is clearly labeled, however, you’ve got a few issues as well.

First, the form is quite small. The fields are tightly spaced, and none of them are marked as required or optional. The end result is less than encouraging. Now compare this to the example below: organized their webform into a smaller separate box, colored differently than the rest of the page. Small asterisks set the required fields apart from the optional ones. And a more diverse color scheme puts the viewer at relative ease while trying to fill out the form. There are fewer fields and less redundancy. Why does the DSW form need two lines for addresses? Couldn’t the user have just typed the whole address in a single field, as is the case with Gotags?

Small details like these can make a big difference in the mind of the customer, and make the purchase process more of a positive experience than a depressing form. And speaking of experiences…

Design Experiences Instead of Forms

Who says forms need to be forms in the first place? You do need to grab inputs from users to determine a sale, however, does it need to be text based? What if you could eliminate typing from your webform as much as possible?

Tapping (or clicking) rather than typing, is certainly preferable as it can make a mobile site more usable and generally just be more engaging to interact with. Take the Virgin Airlines website for example:

These are complex bits of data that the site is collecting. However, each bit of data can be entered without the user having to mess with their keyboard. It’s all point and click, or tap, as the device demands. This achieves a few important goals:

  • It makes the user work less
  • It makes the filling of the webform actually enjoyable
  • It provides users with a sense of flow that’s broken up by a more traditional model of webform

This brings us to our final and arguably most important point: keeping the checkout process as simple and focused as possible.

Keep it Simple with Focused Checkouts

Many online checkouts lose sight of the main goal: completing the sale. They often pack the checkout page with all sorts of uninteresting, less than useful garbage that only serves to distract the customer from their ultimate purpose. When designing your checkout pages, keep them simple: no upselling, no testimonials, and no social sharing cues. Concentrate on fewer steps and faster process to finishing. Single pages are better than multiple. Save everything ancillary for the thank you page. absolutely nails this concept with their one-click purchases:

Another example of clever form concentration is auto-populating the shipping info with the data already collected from the billing form. SweetMarias has an interesting way of accomplishing this, with a button that allows users to copy and paste all their info at the click of a button:

That’s it for our must-implement list of design patterns to optimize your checkout design. What do you think? Did we miss something important? Let us know your thoughts in the comments section.

Comments are closed.