Ecommerce Checkout Form Design: 7 Little-Known Optimization Techniques to Reduce Cart Abandonment

(1) One Column Layout, (2) Top Aligned Labels, (3) Form Field Descriptions, (4) Perceived Security, (5) Instant Field Validation, (6) Error Messages, (7) Expiration Date Format

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.

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.

Unifying the text fields can make your forms faster and easier to fill out.

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.

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.

5. Instant Field Validation

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store