blog post image

Designing The Perfect Ecommerce Checkout

The goal of an effective online checkout is to provide a smooth and frictionless process that avoids cart abandonment.

The average cart abandonment rate is 68.63% suggesting we have a lot of room for improvement when it comes to getting customers to the final confirmation stage in the checkout process.

Here are 13 best practice tips for improving your checkout to overcome issues that could contribute to cart abandonment.

Design For Mobile First

With 30% of US ecommerce sales coming from mobile, having a mobile first approach to design will make sure this continuing trend is catered for.

The Baymard Institute recently conducted research into the key challenges checkouts on mobile need to overcome as:

  • - Error prone data input due to touch screen keyboards.
  • - Touch keyboards overlapping large portion of screens.
  • - Lack of user tips that would guide user on desktop, such as hover.

Focusing on these challenges presents the following ways to improve mobile checkouts:

  • - Minimise input fields by removing any optional fields.
  • - Testing for optimal type and size of touch keyboard pops up.
  • - Inclusion of detailed descriptions at regular pain points.

Input Fields Optimised For Mobile

Vertically stack input fields for the mobile screen, avoiding fields placed horizontal that require a user to scroll or zoom both across and down to complete a form.



Shipping Selection Options

Allow the customer to decide their preferred shipping method, giving them choice of the cost versus delivery time tradeoff.  Try to avoid unexpected shipping costs for the customer by either providing free shipping on all purchases or over a certain spend.

Provide Multiple Payment Methods

Give the customer choice about how they wish to pay; via bank transfer, credit card or more updated methods like Paypal or Apple Pay where available. Include credit card logos and security seals to reassure the customer of any security concerns they may have.

Baymard Research Institute's research detailed five guidelines for designing payment sections in a checkout:

  • - Place payment methods in close proximity, preferaby viewable on a single screen.
  • - Be clear about which payment method is selected.
  • - Use conditional input fields that only reveals fields relevant to the user's selection.
  • - Explain details of a selected payment method eg. 1% credit card charge.
  • - Guide the user by selecting the most popular payment method as default.

Allow For Unregistered Checkout

One sure-fire way to speed up the checkout process is to enable customers to checkout without creating an account.   This removal of what some consider a barrier to completing a purchase is now common place within today's checkouts.  Then by providing a simple tick button at the end of checkout, users can be prompted to create an account with the payment details they have entered.

For existing customers the process of signing in needs to be as simple as an email and password login, with login details able to be saved locally on the customer's computer this is a single click sign in.

Guest Checkout

Remember Customer Information Upon Sign In

Another way to remove steps from the process is to remember the customer's information upon return to create a streamlined process where minimal data needs to be entered.  By providing an editable summary at the final confirmation, customers can then change any details they need when entering payment details. 

 Place Important Features Within Thumb Reach 

With the takeover of mobile, the use of the thumb for scrolling and clicking has become the norm.  Placing the key action buttons like 'Next' or 'Confirm' within easy reach of the thumb helps to provide a smooth transition through the checkout pages.  

Research by UXMatters found that 49% of mobile users held their phones with one hand having a direct effect on the range of the phone's screen their thumb can access.  Catering for this type of user as a baseline will help cover useability for users across one and two handedness.

Holding Mobile Phones

Image: UxMatters


 Break Up Checkout Into Manageable Steps

Avoiding user overload by breaking down the tasks involved in checkout to focus on the main steps.

Online Checkout Stages

Notice the clearly colour contrasted 'Continue To Delivery' button highlighting the next step.

Include A Progress Bar

Give the user a visual marker of what steps are involved in the checkout process, highlighting where they are in the process and including a clear call to action button indicating how to advance.

This 'Next' or 'Confirm' button should be the only contrasting colour on the screen to highlight the next step. 

Checkout Progress Bar

Optimise Page Speed

Any lag on page loads will increase the chances of cart abandonment.  A checkout should be devoid of any unnessesary elements that weigh down the load speeds like image carousels or social share buttons.  

Things to consider when looking to optimise page speeds are:

  • Can you reduce the number of steps in the process to minimise page loads?
  • Look at the caching of page content for returning users.
  • Removing unnessary files sucking up bandwidth.
  • Third party services like credit card processing need to be optimised.

Provide Auto Fill Support
Including auto fill capability into your checkout form will save time particularly on mobile where it takes more careful input of information.  

Screen Shot 2016-05-24 At 5.45.44 PM

Enable Address Finder
Further to the auto fill capabilty, Address Finder functionality enables a users address to be predictably entered using Google Places API as used for Google Maps.

Click To Call Buttons
A Click To Call button included in checkout can act as a customer support option where a customer requires personal assistance in order to complete the sale.  A phone number and address could also simply reassure the customer of the legitamacy of the business.

Clearly Define Required and Optional Fields
Only including required fields would be the optimal way of speeding up the form entry process.  However if you wish customers to volunteer extra information be sure to clearly indentify which details are required and which can be skipped for quick completion. 

Screen Shot 2016-05-24 At 5.57.12 PM

Provide Clear Data Input Error Messages
 For data entry fields with specific formats required like phone numbers, email or credit card, provide clear and detail error messages for incorrect entries.  For instance rather than 'Email Is Invalid' prompt users with something explaining what they need to do to fix the error, like 'Your Email requires an @ symbol'.