4 tips to improve your credit card form UX

I have a confession to make. I use Amazon to buy just about everything I need, but not because of the two-day shipping. And it’s not because of competitive pricing, either. The real reason? I never have to input my credit card information.

I didn’t realize how much I loathed the act of entering my credit card details until I put off sending my mother flowers for her birthday until the last minute. Several weeks before her birthday I scoured the web for the perfect arrangement. I’d find the perfect one, write my message for her card, input all her delivery details, and then when it came to the credit card portion of the transaction, I bailed.

All that effort was wasted in an instant, just because entering my credit card info felt like asking a bit too much.

This went on several more times. Either the florist asked for my card too early, or I was tired of filling out forms by the time they asked me at the end. The result was a hurried (and subsequently botched) flower delivery to my mother.

This got me thinking about the UX of credit card input forms. The Baymard Institute lists the average shopping cart abandonment rate is over 68%. And the number one reason shoppers abandon their carts? The checkout process.

Credit card input is a major point of friction for users, but if you can improve that experience even just a little bit, imagine what that could do for your users and your bottom line? In this post I’ll review a few tips for credit card forms that will help make it easy for your users to make a purchase.

1. Ask for essentials only

If you’re thinking mobile first, this part will be a lot easier. The essentials are just what they sound like: the information you absolutely need to process the sale.

But there’s another layer to this that can help you reduce friction even more. Take a look at the information you’re requesting, and find out if there’s any way you can eliminate those fields. In-field validation can help quite a bit in these areas:

Credit card type

The first four digits of a credit card identify the type of card. Save your users from having to choose, and have the form detect it automatically. In the example below, you can see that MasterCard his highlighted after the user entered in the first two digits, which are used for this type of card.

City and state

If you need to verify billing information, nix the city and state fields and just have users input the zip code. The city and state can easily be populated with that information.

2. Use smart error notifications

One of the most irksome error messages I get when filling out my payment information is the ridiculously vague, “Some fields are incorrect,” without any supporting guidance telling me where I messed up.

Errors will happen. But you can reduce your user’s frustration by telling them exactly what went wrong so it’s easier to fix. In the example below, it’s pretty clear what the user needs to verify before moving forward.

3. Use input masks

Luke Wroblewski wrote about this several years ago, and it’s still a fantastic solution for credit card forms. Input masks help limit what can be input into a field, based on the information you’re trying to acquire. It will automatically notify you of an error if the input doesn’t match the requirements, and will require correction before the user can proceed.

Additionally, it allows you to consolidate several pieces of information into a single field, which is especially helpful on mobile. Take a look at a demo of Square Wallet’s credit card input, created by Zachary Forrest:

4. Offer card scanning options

Recently Apple released a new feature with iOS8 that enables users to scan their credit cards rather than input the number when completing a purchase on their mobile device.

And for non iOS devices, there are several options available to integrate card scanning into your app’s payment process. Companies like Uber are using PayPal’s scanning feature to make adding payments easier for customers.

No one likes having to fill out credit card forms. But they’re important because that’s how your customers get your awesome product, and how you collect some hard-earned revenue. Any improvements you can make to this portion of your checkout process will have a direct impact, not only on improving the user experience, but your sales too. Keep these tips in mind to reduce friction, and make it easy for your users to get what they want, quickly and easily.