Ecommerce Checkout Form Design: 7 Little-Known Optimization Techniques to Reduce Cart Abandonment
Your ecommerce business is probably losing money right this very moment. An independent web usability research institute calculated an average rate of 69.57% online shopping cart abandonment based on 41 different studies.
That means for every 100 visitors who decide to buy from you, 69 of them will leave your site without paying. Think about the revenues you could make if you could turn those abandoned carts into sales.
But why do online shoppers leave? Well, there’s a lot of things to consider and where to start is another question. One thing’s for sure: your customers are going to end up in a form.
Here is a list of good UI design ideas for ecommerce checkout forms that can help your customers move forward and complete an online purchase.
1. One-Column Form Layout
In a one column layout, the user’s eyes move in a vertical direction when filling out a form instead of a zig-zag visual direction in multiple columns. A form button aligned to the left of the fields is also easier to find in a one column form layout because it is where the user’s visual path ends.
Another problem with two column form field arrangement according to a usability study is that users are likely to interpret the fields differently. A user may either dismiss the other form fields as unrelated or simply overlook the second column.
2. Top Aligned Labels
Research shows that placing labels above the input fields makes filling out forms faster in most cases. This is because top aligned labels require half as many visual fixations than left or right aligned labels and users aren’t forced to look separately at the labels and the input fields.
Top aligned labels also allow users to move down the form in a single eye movement, instead of two visual directions with left and right aligned labels.
3. Form Field Label Descriptions
Form field labels without descriptions can be ambiguous and can be critical when a user can’t understand a field required to complete a purchase. Make sure your customer doesn’t get stuck in the checkout process and save your customer support’s time in answering repeat questions simply by providing clear instructions for each field.
Speaking of ambiguity, contextual words such as “Continue” confuse your customers because it could either mean “Continue shopping” or “Continue to checkout”. Use words that doesn’t change in meaning such as “Shop more” and “Checkout now”.
4. Perceived Security
According to Statista, 17% of online shoppers abandon their carts because they are concerned about payment security. It’s for this reason that online retailers can add security seals or trust badges to bring outside credibility to their site.
However, most customers don’t understand the technical side of how forms work so regardless of the actual security of the website, customers might hesitate because of the perceived security of the fields.
The trick is to place the security seal next to the most critical fields and reinforce it with visual cues such as borders, background colors and security icons (e.g., padlock) to make it appear secure for non-technical customers.
5. Instant Field Validation
“Web forms aren’t great conversationalists. They ask a bunch of questions, then wait until you answer them all before they respond. So when you register for that cool social network or use an e-commerce site, it’s pretty much a monologue.” — Luke Wroblewski, A List Apart
Instant field validation allows users to get instant feedback by giving success or error messages immediately after they answered a question. Users can fix the errors they make faster and with less effort due to less noise and distraction on the form.
The instant field validation approach also helps your customers move forward through the checkout form without worrying about whether they entered the right information in a field or not.
Also, you don’t need to ask your customers the type of credit card they’re using. There’s a jQuery credit card validator that can detect and validate credit card numbers. It can detect the credit card type and whether the number length and Luhn checksum are valid for the type of card.
6. Less Overwhelming Error Messages
A summary of error messages on top of the form can be discouraging because it forces the users to recall and go back to the fields to correct their mistakes. Placing the error next to the field labels makes the error messages less overwhelming and easier for your customer to fix those errors.
Highlighting the error fields in orange instead of red also makes the error less overwhelming. The common color red can overstimulate users and make them feel alarmed when they see an error message, while orange are less likely to incite anxiety in users compared to red.
7. ‘Expiration Date’ Fields Format
Baymard Institute recommends two optimal ways of formatting the expiration date fields. The first one is to format the expiration date values exactly the same way they are formatted on the card (e.g., 01/14) and label each field with “month” and “year”. The second acceptable way is to include a month name as long it comes after the month digits (e.g., 01 — January, 14).
Conclusion
There are many more ways to improve the checkout experience and making it easy for customers to fill out a form is just one of them. What’s important is to test early and often to find out what works (or what doesn’t) and what you need to fix.
If you know an ecommerce checkout form design that I can add to the list, I’d love to hear in the comments below, or drop me a note at john@madebymonte.com. Also, if you know a friend who can benefit from this, forward them this article.
