Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Are you waiting for additional information on this question before accepting an answer? If so, can you please let us know so we can improve our answers accordingly? Otherwise, please accept an answer. –  Kit Grose Dec 5 '13 at 1:40
add comment

4 Answers

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

share|improve this answer
    
For the same reason, you should prefix the month with a zero for single-digit months (since cards are in the form MM/YY, users should be more likely to type 05 than 5 for May). –  Kit Grose Oct 24 '12 at 2:03
add comment

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.

share|improve this answer
add comment

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

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.

share|improve this answer
    
What kind and level of research did you do into this? –  Fraser Oct 26 '11 at 18:58
    
@Fraser, I did it in two steps. First i looked at a large number of credit cards to determine the format of the expiration date. We are required to keep carbon copies of credit card imprints for 6 years, so that part was easy. The second part involved looking at large e-commerce sites. I inspected sites such as Amazon and Apple (the usual suspects). I can't remember all the sites i looked at, but it was not more than 10. –  Emil Oct 26 '11 at 19:17
    
So what did you find from looking at the eCommerce websites? Were they mostly how you've designed it? The reason I ask is I can't remember seeing it like before (with the month name and YYYY format). Thanks for your comments. –  Fraser Oct 26 '11 at 19:20
    
@Fraser, if i remember correctly the common format was mm yyyy. I added the abbreviated month for clarity, but i have not done any tests on that. You may consider omitting that part. –  Emil Oct 26 '11 at 19:34
add comment

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.

share|improve this answer
1  
Why read out the months? They're shown as numbers only on every credit card I've seen, I would keep the input as similar to what the user's reading the data from as possible. –  Ben Brocka Oct 26 '11 at 13:51
    
I want to say I've seen them with names, but maybe I'm completely making that up. What I don't like is the name-only lists, as you state, cards typically use the number date. –  DA01 Oct 26 '11 at 14:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.