Put Your eCommerce Checkout on a Diet Plan

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.

Kean Richmond has been working as a Web Designer and Developer since 2006 after graduating with a BSc in Web Development. He strives to design and build creative and visually appealing websites that are of standards compliant and search engine friendly.

Comments

  1. / Reply

    Very well written and descriptive

    • Tanya,
    • January 19, 2010
    / Reply

    Nice post my friend, some valuable information here :)

    • Sarah,
    • January 19, 2010
    / Reply

    Just in time for my new project! Thanks :)

    • Becky,
    • January 20, 2010
    / Reply

    Great post Kean, and really good to see all these things outlined with the examples. Totally agree with what you say about providing as little distraction for the user as they pass through the checkout.
    My biggest annoyance in ecommerce checkouts is when you have to sign up / register just to buy something simple. It makes me leave the site and find the item elsewhere.

  2. / Reply

    Awesome article as always! One Extra Pixel always has some great tips, and these are really useful for starting an e-commerce business.

  3. / Reply

    To simplify forms, one of the most useful functions is to use a zip code database. Show & require the Zip Code field. No need to show or require the city & state. Once the user clicks through to the checkout confirmation page, display the City & State in the full address. Obviously, this can be utilized on both the billing and shipping windows.

    We’ve only implemented this on US sites. Further research would need to be conducted for implementation with non-US addresses.

  4. / Reply

    nice information…give me new inspiration about develop ecommerce. thank you

    • Tom,
    • January 20, 2010
    / Reply

    Kean, definitely some great checkout there. How about Apple checkout, aren’t they good too?

    • Kean,
    • January 20, 2010
    / Reply

    Thanks for the nice comments.

    @Robert Visser – You’re correct in that using a zipcode database is a good way to simplify address forms but as I mentioned above (Friday – Postcode Checker) it’s important to have a fallback for users to input their full address as their’s might not be in the database.

    @Tom – Pretty much everything that comes out of Apple is well designed, it’s just a pity you have to sign in to use their checkout.

    • Mike,
    • January 20, 2010
    / Reply

    This is one strict diet plan to follow for eCommerce checkout! Thanks Kean for sharing.

  5. / Reply

    I’ve noticed that a few of these examples are the Magento shopping cart design (for the most part). Great post, always a good idea to make the account sign-up optional. Another thing I’ve learned from working on e-commerce sites is that many customers have trouble with entering the promo codes. Make this apparent right off the bat! Don’t bury it below the items or on the last page of the checkout. It’s probably another big issue when it comes to a good checkout design and not to mention customer service!

    • Kean,
    • January 22, 2010
    / Reply

    @Sarah Lynn I confess I didn’t look at the technologies behind the examples I chose but if the good examples use Magento then it shows how useful and customisable the framework is.

    On the matter of voucher code entry I’d tend to integrate this into the basket page so that any discount can be used to amend the total of the basket so the user is presented with the correct final price before starting the checkout process.

  6. / Reply

    Nice, the idea of a fixed schedule is great, you could do this for a lot more standard systems and patterns.

    • Customer,
    • February 21, 2010
    / Reply

    Nice article.

    What is your favorite site related to checkout process.

    The new Apple store checkout process is really cool

  7. / Reply

    Buy cheap pendants, bracelets, rings, earrings, necklaces, silver jewelry, gems, jewelry, gemstone jewelry online store.www.gogulive.com
    cheap gold chain

  8. / Reply

    Buy cheap pendants, bracelets, rings, earrings, necklaces, silver jewelry, gems, jewelry, gemstone jewelry online store.www.gogulive.com
    cheap gold chain

  9. / Reply

    I think this is one of the so much important information for me. And i am satisfied reading your article. But want to statement on few normal things, The website style is great, the articles is actually great : D. Good process, cheers

  10. / Reply

    You will be not any investing cost to pick just about the most befitting the foot trouble together with the day-to-day behavior while in the Vice-pad.

  11. / Reply

    Thank you for your sharing, I like this blog, I have a strong desire, hope to be able to enjoy more articles on this subject. If you can, when you grasp the knowledge, I hope you can update your blog, even more content, which will benefit me a lot.

  12. / Reply

    MBT, where function meets lifestyle Innovator of wellness footwear that employs superior materials, craftsmanship and construction MBTs are designed to enhance and strengthen the natural physiological framework of the body.

  13. / Reply

    It’s really useful for my GF… Thanks for your useful topic …

  14. / Reply

    Just want to say your article is amazing. In your bowen clear simple spectacular and I assume you’re the expert. Good if you permission, allow me to grab your RSS abstract have to update in the post. Thank you, please keep the pleasant work.

    • Jack,
    • December 21, 2012
    / Reply

    I used to be recommended this blog via my cousin. I am now not sure whether this submit is written via him as no one else recognize such precise approximately my problem. You are amazing! Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c