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.
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.
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.
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:
- The customer's name
- The customer's address
- 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.
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.
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.
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.
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.
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.
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.
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.
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.