18 May, 2017

11 Fundamental Guidelines of the Checkout User Experience

With the latest improvements in web technology and browsers, eCommerce sites have the potential to create an amazing checkout user experience. Yet, many customers often still abandon their shopping carts.

Are there some fundamental mistakes that designers are making? Are generic websites making it more difficult for users to purchase products? And is there some meaningful way to get customers to follow through with purchases?

Online stores often overlook the basic usability guidelines of the checkout process – concentrating too much on functionality and not enough on user experience.

Things like meaningful flow, good copywriting, clear instructions, simple form design, and privacy considerations go a long way to creating a great checkout experience that doesn’t leave buyers confused and frustrated.

In this article, we cover 11 fundamental guidelines of the checkout user experience, from the cart through to the completed purchase.

Create A Linear Checkout User Experience Process

It is typical for eCommerce websites to end up with a non-linear checkout process by creating steps within steps.

What we mean by this, for example, is when the customer has to ‘Create an account’ on a separate page and is then redirected to a previous checkout step upon completion.

Customers do not want to be redirected to a previous step in the checkout process, but instead, want to be directed to the next step in the checkout process.

By creating a linear checkout you are taking into consideration the thought process of a customer, giving them a logical and clear step-by-step process to purchase.

A progress bar, or process indicator, is a great way to display this step-by-step process the customer has to go through. This gives customers a sense of control, alleviates any doubt and prevents any frustration as they virtually check steps off the list.

Checkout User Experience - eCommerce Progress Bar


Use One Column For Form Fields

Customers have an amazingly difficult time understanding the relationship between forms in two columns. Many often dismissing them (because they feel they are irrelevant), simply overlooking them, or completing the form that isn’t relevant to them and after submission causes validation errors.

This is why it is best to use a single column for forms or to indicate VERY clearly which forms a customer will need to complete.

Checkout User Experience - Form | VaneDigital.com


Add Descriptions To Form Field Labels

A form field without any description can often be unclear to a customer. Customers may be confused as to what information is being asked of them, leading them to enter the wrong information. And in the case where these fields are required, entry errors can make it impossible for customers to complete the checkout process.

Therefore, you should alleviate any misunderstanding by adding short descriptions, entry examples or illustrations next to the relevant fields. But because not all customers need the extra help, you may want to put these instructions in a ‘Need more information?’ link, fade them out slightly or reduce the font size.

This can also be seen as a great opportunity to explain why you need particular information. For example, the Email Address, most people are wary about giving out their details over and over, but if you explain why you need it a customer might feel more inclined to provide it.

Checkout User Experience - Credit Card | VaneDigital.com


Avoid Contextual Words

Contextual words such as ‘Continue’ are unclear and often prove confusing.

With many customers relying only on buttons to decide what action to take next (completely ignoring any explanatory text) the buttons within your checkout process should be as clear as possible and less open to interpretation.

Depending on the context (i.e. the page) and a customer’s state of mind, a button labeled ‘Continue’ can mean one of two things: Continue shopping or Continue to checkout.

To avoid any misunderstanding, words such as ‘Check out now’ and ‘Shop more’ should be used.


Visually Reinforce Fields

Many checkouts that are abandoned occur simply because they do not appear secure enough (regardless of actual security). This is all about the customer’s perception.

Visual cues such as borders, background colours, security icons and badges around form fields go a long way in improving the perceived security of a checkout.

Checkout User Experience - Credit Card form | VaneDigital.com


Use The Correct Formating For Fields

Formatting can often be overly complicated for customers.

For example, fields for credit card expiration dates can be tricky to decipher if they aren’t written exactly as they are on the credit card. The field format for the expiration date should always match what the customers see on their credit card (i.e. numbers only). This minimises confusion and misreading because the user can easily verify the field against their credit card.

Now, websites use many different types of formatting. Which is best? We suggest you stick to the norm.

Checkout User Experience - Credit Card | VaneDigital.com


Use The Shipping Address As The Billing Address by Default

Customers typically order products to their home address. So, by default, the same address for shipping should be used for billing.

This comes with numerous advantages. Firstly, your checkout process will have far fewer fields, making it less intimidating and confusing for customers. Also, information is duplicated across the website, shortening the checkout process and decreasing the risk of misspelling – so errors will only have to be corrected once.

A simple check box asking the customer if the shipping address is also the billing address is great for this purpose.


Create Clear Error Indications

Too many websites list their error messages above the form leaving a user to identify where the problem lies. Error messages that aren’t within close proximity to their relevant fields are more likely to be overlooked or misunderstood, increasing the likelihood of purchase abandonment.

If a customer does not notice or understand your error message, they will not be able to resolve the error or proceed through the checkout process.

It is important to ensure that your error messages are contextualised, clear and concise, and stand out so customers notice them.


Don’t Require Seemingly Unnecessary Information

Customers feel that their privacy is being invaded when they are required to submit seemingly unnecessary personal information. For example, asking for a phone number in addition to an email address may make a customer feel uncomfortable.

Requiring this information may not be obvious to the customer who immediately thinks it will be used for remarketing purposes or the likes.

If the information is necessary (eg, delivery updates), it is important to explain why – add a short description under the field to ease a customer’s thinking.

Any marketing questions requiring this kind of information should be left for after the product has been ordered.


Ask For Credit Card Info Last

Many websites do adhere to this guideline, but of course, there are those special few.

The main goal of the checkout process is to get the customer to complete as many steps in the process as possible. Therefore, the most stressful step in the process (asking for credit card information) should be left to the end, where the customer is less likely to abandon the purchase.


Registration Should Be Optional

Customers strongly resent having to sign up for an account. And we can understand why.

For one, customers often have multiple usernames and passwords to remember across various sites and don’t want to create an entirely new account just to buy a few products.

Another reason is that they expect to be bombarded with marketing material, even if they explicitly declined.

And finally, many customers just don’t see the value in registering.

Waiting until the very end of the checkout process is an unobtrusive and less frustrating way to get customers to sign up for an account. The sale has been made and the customer is now mentally ready to consider the benefits of registering. Simply ask for a password.


While there are many more subtleties to creating a good checkout experience, these 11 guidelines can make all the difference to your conversion rate.

Though do keep in mind that every market varies and it is important to know what works for your audience. A/B test your checkout process to ensure that it is optimised for your target shoppers.