Best practice: card expiry date on checkout

Question

What is the best format for gathering the card expiry data during the checkout process on an eCommerce website?

So we need to collect the month of expiry and the date of expiry (as standard on all web card transactions).

I have seen this done differently on websites so it would be good to know the best practice.

Answer 1

If you decide to use a month dropdown that incorporates both month name and number, make sure to put the number first:

1 - Jan
2 - Feb
3 - Mar

so that anyone using the keyboard can still just press e.g. '5' to jump to May

Answer 2

I did a research a year ago, and this is what i came up with:

The expiration day on credit cards is always in digits (at least in the US). I also inspected some of the popular e-commerce sites in my region, in order to determine if there is a convention on the subject.

I chose drop downs for both month and year.

The month drop down includes both the month digit and month abbreviation. Even though credit cards use only digits, including the month helps users know they are in the right field (i omitted the labels).

The year drop down includes options for 10 years, starting with the current. Even though credit cards usually use two digit years, i included all four digits.

The default values of the drop downs are "Month" and "Year".

The current design has been used in a production environment for about a year.

EDIT

The following article offers some useful suggestions, which are supposedly backed my usability tests.

Answer 3

There has been some great research into this realm done by the Baymard Institute. Here's their summary of their recommendations (though you should probably read the full article):

Bad. How not to format the card expiration fields (yet what 40% of top retailers do):

• March / 2012 · Completely off. Month names are difficult to decipher and year should preferably be two digits instead of four.
• March – 03 / 2012 · Difficult to scan month digits due to varying lengths of the 12 month names.
• 3 – March / 2012 · Month digit isn’t 0-prefixed.
• 3 / 2012 · Month digit isn’t 0-prefixed.

Good. Two optimal ways of formatting the expiration date fields:

• 03 / 12 · This is the most common card layout resulting in 1:1 mapping between virtual fields and physical card, but remember to clearly label each field with “month” and “year”.
• 03 – March / 12 · Adding the month name lowers the chance of mixing up month and year, but this comes at the cost of 1:1 resemblance with the credit card.

I've always been taught that this sort of information is best captured in text fields (or ideally numeric fields, as opposed to drop-down menus), such that the user can transcribe the exact information on their card in the format it's presented in on the card. They touch on this in the article linked at the bottom in a brief addendum:

Note: by using text fields instead of drop-downs (see Aéropostale and CVS) you can of course ignore most of the formatting concerns outlined in this article as the user can simply type the values as they are printed on her card.

However, such implementation has problems of its own with increased chances of mistyped input and complex server-side logic to decode the many different types of input formatting customers may use.

Answer 4

This isn't a terribly complex form of data. And, alas, I have no direct research as to 'best' but I'd suggest using two drop-downs. One being year, which is fairly self explanatory, and the other being months, labeled with some combination of both name and number:

Jan (1)
Feb (2)
Mar (3)

etc.

I'm not a huge fan of drop downs in text-field heavy forms, but I do suggestion as it's become somewhat of the norm for the expiration date fields.