Put Your eCommerce Checkout on a Diet Plan

When creating an ecommerce website a lot of time is given to the design of the home and product pages to ensure a customer can find and add a product to their basket as easily as possible. If the website can get the user this far then surely the customer will simply flow through the checkout without any issue.

Checkout on a Diet Plan
Image credit: Gozalewis


I'm convinced that many simply position the checkout form within the same template used throughout the rest of the website, without giving any specific thought to it. Yet the checkout isn’t like the rest of the website and shouldn't be designed as such. By the time the customer reaches the checkout they have finished browsing for a product and the only thing left on their mind is completing that purchase; the checkout should ensure this happens. So it’s time to put your checkout on a diet.

The One Week eCommerce Checkout Diet Plan

MONDAY: Navigation & Search

Navigation areas and search boxes are essential to provide clear routes for customers to move around a website, in order to locate the product or information they are looking for. But placing these elements within the checkout only distracts the customer. This distraction could result in a customer progressing through the checkout at a slower rate or use these elements as an easy route to abandon the checkout process completely.

Canon
Canon

Some fool themselves into thinking that these design elements provide customers the ability to return back to the store in order to expand their basket, and in some cases this may be the original intention of the customer. But once leaving the checkout process, any number of offline and online distractions could result in them never returning to the checkout.

TUESDAY: Header and Footer

Although in some sites, the navigation and search fall within the header. However, both this and the footer can contain a wealth of other distractions. Elements such as the basket, banners or links are all inappropriate within the checkout.

HMV
HMV

Although many elements within the header and footer should be removed, these areas should not be blindly erased from the code as they usually provide the visual styling of a website. Although a design should be simplified for the checkout, it should still be recognisable to customers so that they will not mistakenly believe that the checkout is no longer part of the original website they were browsing.

Of all the elements that should be removed from the header or footer, two should remain. First is the logo for obvious reasons, but also a telephone number should be left visible. By allowing the telephone number to be easily located within the checkout, it provides the customer with an alternative route of purchase to fall back on if they have issues using or submitting the checkout form.

WEDNESDAY: The Form

People hate forms. This is a fact of life but many sites utilise the checkout as a place to collect information about a customer that isn’t obviously relevant to their purchase. For most online purchases, only three pieces of information are required in order to complete and deliver an order to a customer, and they are:

  1. The customer's name
  2. The customer's address
  3. The customer's payment details

Any information that does not fit in with the above information should be either optional or have an explanation as to why it is required.

Simplify The Addresses

Even entering an address can be a complicated affair. Websites try to have a variety input fields for information such as company, flat, house and street. A user actually only needs only a few input fields under the label 'Address' to enter their address as they see fit.

B&Q
B & Q

Even entering information as simple as the address can be a complicated affair as websites try to accommodate the variety of addresses customer's may have. A checkout can request information such as company, flat, house number or street in separate input fields to reduce the possibility of a customer entering their address incorrectly, even though it is a piece of information many have no trouble recalling.

Defining the address input fields so rigidly over complicates the process and can cause more problems if the form does not cover all potential forms an address may take. Instead it's best to leave a few input fields, with only one of these compulsory, under a generic label for users to enter their address as they see fit.

Hide The Shipping Address

Most checkouts' now include separate input fields for a shipping address so customers can have their orders delivered to an alternative address. The shipping address is a piece of information that is, or should, only be required if a customer does not wish their order to be sent to their billing address. Yet many sites display both forms in the checkout. This gives the impression that both addresses are required before a customer can advance through the checkout. Some sites provide systems to copy the billing address to the shipping address or disable the shipping but neither is an ideal solution.

Goldsmiths
Goldsmiths

The best method is to not display the form at all until requested by the customer; JavaScript is a good way to achieve this as you can hide the form when the page loads as this ensures the form is still accessible to those without JavaScript enabled. By hiding the shipping form, it ensures the customer is not daunted by the length of the checkout and that the design stays simple.

Default Agreement of Terms and Conditions

When a website requires a customer agree to their terms and conditions, they often use a checkbox to do it; this is something that is often missed and results in a validation error. Most customers check these fields without much thought, and certainly without reading all the terms and conditions.

IKEA
Ikea

With this case, the need for a customer to agree to the terms and conditions in this way only serves as a barrier to completing the form. Instead the checkbox can be replaced with a statement describing that by continuing through the checkout they automatically agree to the terms and conditions.

It could be argued that the Terms and Conditions may as well be removed from the checkout altogether, but for legal reasons it is wise to keep them. However using this method means there is no impact to the user experience. By using a modal box to open any terms and conditions link, you ensure they don’t navigate away from the checkout.

THURSDAY: Registered Users

It's a well known hindrance to completing a sale. Yet many websites still require a customer to register an account before purchasing. Although for users intending to purchase from the site repeatedly, the ability to register is a useful feature. However, making it a necessary action to complete a sale frustrates many one hit buyers.

Mozilla
Mozilla

Some sites do offer both options but often over emphasise the login area in order to increase sign-ups. When navigating to the checkout, a customer should see a checkout form, not a login form. If the option exists for registered users to login, this should be visible but not distracting. A simple right aligned form or link to a modal box would be the best solution.

FRIDAY: Postcode Checker

Although in some countries, the addition of a postcode/zip code database can be a costly resource. However, it can greatly reduce the time spent manually inputting a full address. Not only can this speed up the checkout process, but it can simplify the checkout design too, making it even easier to use.

ELC
ELC

Be aware however, that when leaving the traditional method of entering an address, many postcode databases do not cover international addresses, and they are also never 100% up to date. If there’s one certain way of losing customers, it’s the inability for them to actually enter their address.

SATURDAY: Checkout Process

The checkout isn't all about taking things out in order to speed up the process of simplifying the design. At times, it's necessary to add elements to improve the user experience.

Lego
Lego

As the checkout can be a lengthy process, sometimes with multiple pages, showing a customer's progress through the checkout is a helpful feature. Providing such a feature provides the customer with an indication of their current position within the checkout, and the remaining sections of the checkout they have yet to complete.

SUNDAY: Hints and Validation

All forms are validated to ensure users don't forget to input any vital information. When done correctly, any error response should be descriptive and noticeable. Displaying an indication of an error next to an input field, as well as a description of the error at the top of the page ensures a user is quickly able to assess where errors have occurred; something that is invaluable on lengthy forms.

Teefury
Teefury

The screenshot of Teefury above shows a poor method of form validation. In utilising JavaScript to validate their form, they have then used alert boxes to display the errors. This means once the alert box is closed there is no indication of where the error exists on the page, and no reminder of what the error was. Teefury also only displays the first error it finds, if there are multiple errors in the form, the user will only know to fix each one after first trying to submit the form again.

Examples of Good Checkout Pages

Not all of the following adhere to all the points above, but they all have checkout's that have been well thought out and designed.

Microsoft
Microsoft

Chocri
Chocri

Twelve South
Twelve South

Amazon
Amazon

Patagonia
Patagonia

Play
Play

Pure and Little
Pure and Little

Dripping in Fat
Dripping in Fat

Godiva
Godiva

Redvelvetart
Red Velvet Art

Tiger of Sweden
Tiger of Sweden

Happy Webbies
Happy Webbies

Nest Living
Nest Living

Comet
Comet

Barnes & Noble
Barnes and Noble

Diet Time!

Ecommerce sites are designed and built to give users choice, but with the checkout, it's best to take away any possible thought the customer may have other than 'I must buy this product'. This might sound a bit extreme but at the beginning of the checkout process, this is what the user is thinking anyway. It's only by removing any distraction and ensuring the form is easy to complete that we ensure that thought stays with them and the purchase is made.