A Closer Look At Credit Card Fields

Last updated on August 29, 2017

In the first of our Closer Look series, we’ll take one simple element of a customer’s e commerce experience and break it down to examine the nuts and bolts. This time around, we look at credit card fields – an often underestimated problem, and an area where the majority of companies can look to improve their usability.

So what’s fuss about credit card fields, you ask?

Well, for starters, the checkout process is the crescendo of the e commerce Symphony – the moment of highest drama, when the most decisive actions take place.

As this article usefully illustrates, human behavior requires motivation (the will to do something), the ability to do it, and a trigger of some sort – the opportunity to perform the action. Our concerns with credit card fields relate to the ‘ability’ side of things. We all know that the harder something is to do, the quicker motivation falls and the less likely it is that the trigger will be successful: instead of taking the opportunity to perform the difficult action, we’ll be glad to let that ‘chore’ pass us by.

customers who enter the checkout process end up abandoning their transactions before the sale is complete

Think back to the checkout process. When the customer enters this stage of the e commerce transaction, their motivation (to buy the product) is high, and the trigger (the credit card form) is right there in front of them. The variable in this situation, therefore, is ability: how easy is it for the customer to complete the process?

Research shows that this is a significant obstacle for e commerce traders. A study by the CXL Institute shows that up to 40% of customers who enter the checkout process end up abandoning their transactions before the sale is complete.

What’s wrong with my credit card fields?

In a large-scale study into check out usability, the Baymard Institute discovered that a large group of surveyed customers battled with typing their 15- or 16-digit credit card numbers into the required field, and – even if this was successfully achieved – they battled with verifying this number at a later stage in the checkout process. This was a significant contributing factor to checkout abandonment.

But, dear e commerce traders, this is not the time to wring your hands and remonstrate with these customers whose motivation failed them in the face of small-time adversity – there is something you can do to overcome this obstacle and pave the way for smooth check out usability.

This Baymard Institute report shows that 80% of companies do not include the simple feature of letting customers type spaces between the digits (as they appear on the face of the card), and/or auto-formatting these spaces for them – so that the numbers end up appearing in the credit card field in the same way they appear on the card, as 4-digit ‘blocks’.

This is a simple, easy measure to install, and it has distinct benefits.

Firstly, it provides a more ‘natural’ method of input for customers, increasing buyer confidence and maintaining levels of motivation through the checkout process. The 4-digit ‘block’ is a method of transacting with the card number that is familiar to customers (they have experience with it through regular banking practices), and this familiarity can relieve anxiety in the online context.

As well as increasing usability, allowing spaces in the credit card field (or auto-formatting them) also greatly improves functionality. Not only does this feature yield fewer input errors, but it also greatly reduces validation errors at various points in the checkout process.

Validation errors can be real motivation-killers, so this is a crucial takeaway for e commerce traders.

I’ve fixed that now… anything else wrong with them?

Visual design is another key aspect of effective credit card fields. For example, companies can directly improve their checkout usability by visually reinforcing sensitive information within the credit card fields.So much of e commerce trading boils down to trust (a downturn in trust kills off motivation), and by using visual clues to increase the perception of trustworthiness in your checkout process, you can allay the customer’s fears and minimize the risk of checkout abandonment.

customer’s fears and minimize the risk of checkout abandonment

This graphic shows how the use of contrasting colors, padlock images and branding can make the difference between a ‘secure-looking’ and a ‘less secure-looking’ form. A good way to fine-tune your checkout process is to place yourself in your customer’s shoes. Get a feel for the process. Ask yourself what you like about it and where things can be improved a little. Look at how others are doing it and test different iteration until you nail it.

At Keptify, we help e commerce business owners improve every step of the lead and customer experience for higher conversions through better performing websites. Through smart customer insights, Keptify informs your lead conversion strategies with detailed insights to what makes an average e commerce store a great one. Get in touch with us today for a free demo and discover how we can help your business grow.

FREE eBook: 7 Deadly Sins of e-Commerce that cause Cart Abandonment [with Solutions]

80% of online stores fail. Your store might be one of them.

Learn how you can avoid the deadliest sins of e-commerce with this comprehensive cart abandonment solution eBook.



Privacy Preference Center