So the two options I am considering is a drop down for months, showing the number followed by an abbreviated month, e.g. 02 Feb. Or a text field, that splits the numbers into the format MM / YY. With a placeholder MM / YY.
Which is the most likely to convert for an expiry date, open to other options.
How are expiry dates displayed on a credit card? 05/07
How do you convey that date verbally? 0507
It makes sense to have people enter it in some that replicates those behaviours...
So, the text input with MM/YY is probably the best. Automatically add the slash after they have entered the month, and ignore any non-numeric character they manually enter (because some will type MM/YY instead of MMYY - or even type MM-YY and MM YY).
Drop-downs are a lazy implementation for developers who don't want to add client side validation behaviour on text inputs, and are not great for entering dates (or partial dates).
It is generally considered a rule of good usability to stick to a single input method as much as possible. Don't force users to switch between mouse and keyboard unnecessarily.
For this reason...drop downs are bad practice in credit card forms.
Consider: Before you enter the expiry date you have already typed in a whole bunch of numbers for your card number. Why then switch to a drop down for these last 4 numbers?
A drop down where you select the name of the month is particularly bad practice- if it's the middle of January then an awful lot of people may not know off by heart what number month July is. Cue: rattling off the months in order and counting on your hands. A major usability drawback.
Ideally entering card details should be done purely with typing. To improve efficiency even more, finishing entering one field should automatically take you to the next field (a big win when it comes to people using a mobile- for whom drop downs are even worse!).
For an even bigger mobile usability win, make the site so that it automatically calls the 'dial pad' keyboard rather than the standard keyboard for these boxes.
http://baymard.com/blog/mobile-form-usability-single-input-fields
Stick with the way the date is presented on the credit card itself.
When the user reads the expiration date on the card and it is said 07/05, it will be easy for them to just type 07/05 in an input field.
Dropdowns are annoying because you have to click it open, maybe even scroll and search for your date. The placeholder you showed in your second example MM / YY is a clear example for the user. It's shown in a way that the user recognizes on its credit card. Add the slash automatically after entering the month.
This is a great article about desigining credit card forms: https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb#.um6o9fffd
If there are indeed some exceptions, I'd still stick to the most common format which is the example above.
– Luchadora Sep 08 '16 at 12:51There are many other variations around
– ThaSaleni Sep 08 '16 at 14:45I don't think you will ever go wrong with this, even for people with different formarts on their physical cards, it's very easy to understand which is the month and the year, and the months are clearly numbered for both cases. PS: I was just lazy to type more years, you should have more in your form.
download bmml source – Wireframes created with Balsamiq Mockups
