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
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.
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.
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......