Let’s talk about credit card inputs

Whenever I add a debit or credit card when singing up to a new service, I closely observe how far the company taking my details, has gone to creating a great experience at such a critical point in the workflow.

The best input I continue to use is Google. More specifically, Google Apps for Work. I think Google have always created great user experience around their forms, but the card input form I found to be world class.

When you go to add a payment method you’re given a simple screen. The user knows why they’re there. They just clicked on an action button to arrive there so it’s kept simple. Google want you to proceed as quickly as possible and as they already have a bit of context about you, they go ahead and assume your name will be the name on the card.

Once active, you’re informed on what card type it accepts. Make note you’re not told in the photo above, as it’s not currently relevant. There’s already enough going on.

Input view once active

As you being to type your number any number that’s does not start with a valid card number that’s accepted (i.e not 3, 4 or 5 or a non-integer) returns an error straight away. As you begin to type a valid card number you are shown what card number you are beginning to type, such as VISA, MasterCard or AMEX. This is a good experience as it assures the user at the beginning of entering the 16 digit number that they’re on the right path.

The most important and most overlooked aspect of credit card input is the correct formatting for the number. This is usually 4, 4, 4, 4 or for an Amex 4, 6, 5. This is almost always overlooked as it more so the exception, not the rule.

A lot of credit cards are already difficult to read, so assurance through entering the number is always a good user experience.

Note: This is in reference to desktop experiences only.