UXmas

An advent calendar for UX folk.

02 2012

Lose That Credit Card Field

By Jessica Enders

If you’ve ever had to design a paper form, you really appreciate the benefits of the electronic medium. When a form becomes electronic, we can do all sorts of clever things to make the form-filling experience much better, like asking only relevant questions, calculating totals, and providing date pickers so you never have to sing that rhyme about “30 days hath September…” again to work out what the last day of the month is.

However, for reasons that completely escape me, there’s one piece of “electronic smarts” that most web forms just don’t have.

Take a look at the screenshot below. This is the payment part of a web form to top-up Virgin Broadband. Looks pretty standard, right?

credit-card-virgin-broadband

Here’s another set of payment fields, this time from Book Depository in the UK.

credit-card-book-depository

Book Depository have been a bit clever and arranged the fields on the screen to match the layout of a credit card. That may well help users fill the form out quickly and easily. Yet there’s one way they could dramatically reduce the effort required to fill in their form. I’m going to share this little gem with you:

Credit card type can be deduced from the card number.

That’s right. If you know the credit card number, you can work out whether it is a MasterCard, Visa, American Express etc etc.

Thanks go to the international standard ISO/IEC 7812, which defines the structure of numbers on identification cards, including credit cards (read more in the official documentation). The first six digits of a card number are the issuer identifier number (IIN), which identifies the organisation that issued the card.

For the purposes of online payment, you currently mostly only need to use the first two digits to work out what type of credit card the user has, as follows:

  • Visa: first digit is “4”
  • MasterCard: first digits is a “5” and second digit is “1”, “2”, “3”, “4” or “5”.
  • American Express: first digit is a “3” and second digit is “4” or “7”.
  • Diners Club: first digit is a “3” and second digit is “6” or “8”.
  • Japan Credit Bureau (JCB): first digit is a “3” and second digit is a “5”.
  • Discover: card number begins with “6011” or “65”.

What does all this mean for our online form?

You don’t need to ask the user what type of card they are using.

You can ditch that Card Type field altogether. That’s one less field standing between you and receiving payment. And one less field for the user to fill out. Everybody wins!

It's even better if you can feed the credit card type back to the user based on their number, as positive reinforcement.

Think Geek—a great place for nerdy Christmas gifts—does exactly this. Here is how their credit card fields look when you begin:

credit-card-think-geek-initial

As soon as I have entered the number “4”, it recognises that I’m entering a Visa card number, and the Visa card logo appears to the right of the number field, like so:

credit-card-think-geek-after

If I’d been entering a MasterCard, the once the second digit has been typed, assuming the first two digits are in the range “51” to “55”, the MasterCard logo appears:

credit-card-think-geek-after-alternative

All in all, taking this approach means the business gets just as much information as they always had, with less effort required from the user, which in turn means greater conversion. Given that the behind-the-scenes programming required to do this is minimal, you’d be crazy not to collect credit card details this way from now on.

About the author

Jessica Enders

Jessica Enders

Jessica Enders has suffered from a life-long condition known as a love of designing forms, transactional applications and other interfaces for collecting information. She is attempting to minimise the adverse symptoms by running her own form consultancy business, Formulate Information Design.

Follow @formulate on Twitter

Comments

comments powered by Disqus

Sign up for regular emails and notifications about the latest articles.

UXmas is a user experience digital advent calendar.

Each day through December, enjoy a delightful little treat from some of the world's leading UX specialists. UXmas is a joint effort from the teams at Thirst Studios and UX Mastery.

twitter-icon