4

This question already has an answer here:

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.

drop down format

Expiry date options

marked as duplicate by Devin, Mayo, SteveD, Graham Herrli, Ken Mohnkern Sep 12 '16 at 13:14

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

4

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).

  • I agree. Having a single text input is easier for mobile users, as they don't have to awkwardly deal with drop downs, and they only have a single keyboard prompt for input. – Tory Sep 8 '16 at 15:33
2

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

1

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

  • Not all credit cards have the same expiry date format – ThaSaleni Sep 8 '16 at 12:45
  • Do you have some examples of that? I tried to find it but I only found one format so far, although I can imagine that in some countries it can be different (also because of the language, e.g. from right to left). If there are indeed some exceptions, I'd still stick to the most common format which is the example above. – Luchadora Sep 8 '16 at 12:51
  • ibubestfriend.com/wp-content/uploads/2016/01/… There are many other variations around – ThaSaleni Sep 8 '16 at 14:45
1

I 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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • maybe jQuery to create a year/date constant gap ;-) – FrozenButcher Sep 14 '16 at 8:54

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