Great E-Commerce Checkout Design

Checkout usability is one of the most crucial concepts in e-commerce design. An inefficient checkout module will lose sales at a significant rate. In fact, recent checkout usability studies indicate that approximately 60 percent of potential customers start but never finish the checkout process. We can attribute some of that loss to uncontrollable factors, but the majority of it occurs because the checkout process is cumbersome, complex or seemingly insecure.

Great E-Commerce Checkout Design


An e-commerce solution must inspire confidence in the consumer at every stage. The point of sale is particularly important because this is where the customer is most likely to rethink the commitment. You achieve professionalism with a design that looks and runs as if an expert created it. The client needs to feel that they are dealing with a successful company that values their business.


The checkout process must be efficient. Ensure that there are no unnecessary steps, and recognize that any step that seems unnecessary to the shopper is equally problematic. A cumbersome checkout process poses two problems. It fosters an unprofessional image. It also provides the customer with additional time to rethink the purchase, which is particularly troubling when it comes to impulse buys.

Collect Data with Care

Data collection is an especially crucial aspect of being streamlined. Customers do not want to feel as if the business is invading their privacy. Only ask for information that is vital, and make it clear why that is. You should never sell the data from a sale, and the website should explicitly state its privacy policy.


In order to be streamlined, the checkout process must also be linear. By linear, we mean straightforward, a step-by-step process with each stage clearly expressed. Web designers do not set out to create non-linear checkouts. It tends to happen, however, when adding conditional steps and steps within steps, so these aspects should be avoided at all costs.

Registration Should Be Optional and Integrated

Registration is a common example of how checkout inadvertently becomes non-linear. Since there are benefits for both the client and the shop, sites will guide customers to register an account. The problem occurs when it is a distinct process tacked onto the checkout. The better way is to integrate it directly into the checkout process. Most of the needed details are already collected as part of the process, so you achieve both goals in a single step simply by adding optional username and password fields.


An important goal of an effective checkout process is to require as little effort as possible from the shopper. We’ve already mentioned removing unnecessary steps. It is also important to identify and correct redundancies. Some redundancies are unavoidable, but you can usually alleviate the burden on the user. A common example of where this comes into to play is with addresses. Never require the customer to fill out both the shipping and billing address unless they’re different. Once you’ve collected the billing address, have the system automatically fill out the shipping address.


Strive for simplicity in the layout as well, such as single-column form fields. In web design, there is a natural inclination to maximize screen real estate. In a checkout module, you might do that with a multi-column approach. Unfortunately, research indicates that users are much more likely to find a form confusing if it has multiple columns. There is a reason most paper forms use just a single column.


The entire process must also be entirely transparent and understandable. There needs to be an intuitive visual flow to the design. Use visual cues, support indexed and automatic tabbing, and make each item self-explanatory. Achieve that through clear, concise field labels and descriptions. Mouse-over tool tips work well, but inline description text, where possible, is even better.

Avoid Unclear Labels

Ensure that each label and description says exactly what you intend it to mean. Recognize that people in the industry, such as web designers, take terms for granted that are otherwise unclear to the average user. A common example is the term “apply.” To the developer, an apply command indicates a very particular form action, but the average user is not familiar with this kind of form behavior.

Avoid Contextual Labels

In the same vein, do not take labels for granted. For instance, a common mistake is to label a button “continue.” To the designer, continue makes perfect sense, but you cannot assume that the user will recognize the context: continue what? Read each label as question. If a question goes unanswered, then that label requires rephrasing.

Emphasize Sensitive Fields

Consumers are very aware when it comes to submitting their sensitive information online. Users want confirmation from an online store that the business recognizes the value of that information and is proceeding accordingly. The perception of security is just as important as the actual security. To create the appropriate perception, visually reinforce these sensitive fields: Highlight text and use images, such as badges and security icons, where appropriate.

Precise Credit Card Fields

Credit card forms should be precise, and the formats should reflect the card being used. For instance, American Express uses a different format than Visa and MasterCard do. Therefore, when a user chooses AmEx, the fields should update accordingly. This behavior provides a few benefits. It cuts down on mistakes. It makes it easier for the user to find the information on the card. It also provides the form, and thus the business, with a professional and legitimate appearance.

Obvious Confirmation

During the checkout process, every valid action should result in obvious confirmation. In its simplest form, this obvious confirmation can be the tab automatically moving to the next item. Whenever the user submits information, the system should clearly express success and describe what happens next.

Obvious Error Indications

Likewise, the system should clearly indicate every invalid action. This is usually achieved by highlighting the invalid field in red. Optimally, include an error message so that the user knows why the data is invalid. For instance, an invalid telephone number or zip code field may indicate that there are too few or too many digits in the datum provided.


Creating the perfect checkout module involves many subtleties and is specific to the particular website. However, the guidelines above apply to all e-commerce solutions. By following them, you will at least ensure that you do not lose sales because the process was slow, unclear or complex.

Written 2012-09-05 (Updated 2016-10-10)
david for reviews7

Written by David Walsh

David Walsh is the editor in chief here at Web Hosting Search. Having been in the industry for many years now he knows pretty much everything about everything. At least that's what he keeps telling everyone at the office. So, don't hesitate to drop him a line  if you've got a question - david(a)

Share your thoughts

Saikul Islam,  18 September, 2012

The post was really helpful. I have come up with lot more new things that I did not know before reading this post. Thanks for sharing......

Show all related articles..

Best Value Hosting 2016

Why wait? Get today's best deals now!