A sad but true fact is that users struggle to input their credit card expiration date — a seemingly simple field to complete.

In fact, users are hindered by websites that have expiration date drop-downs where the expiration values don’t match what’s printed on users’ physical credit cards — with a slowed-down checkout, needless validation errors, and abandonments as a result.

The issues caused by websites failing to match expiration date values in the checkout with what’s on users’ physical credit cards were observed during multiple usability tests and studies.

How payment fields are different from other checkout fields

As users move through a checkout form, they generally type most information from memory — their street address, phone number, etc. The credit card fields, however, are different, as users break their attention from the interface to physically remove their wallet, withdraw their card, and then input the card number, expiration date, and security code seen on the physical card into the appropriate fields in the checkout flow.

Hence, within the payment fields, users are switching their attention from the physical credit card to the checkout interface.

As a result, when users are inputting their payment information they often have two competing representations of how their data should be inputted — the interface’s fields and what appears on their physical credit cards.

Issues caused by expiration date fields that don’t match what’s on users’ credit cards

For the vast majority of users, issues caused by a mismatch between the expiration date fields on the interface and the date represented on the credit card are relatively minor, and most users during testing eventually made it past the fields.

However, depending on how the fields are implemented (see next section), many users will slow down or come to a halt at the field as they translate from what they see on their credit card to the expiration date fields, if the two representations don’t match.

For example, when the month field was implemented as a drop-down with only the name of the month displayed, some users during testing were observed to actually count on their fingers as they translated from the numeric representation of the month on their card to what they saw on the interface.

Other users — 24% in our testing — who prefer to use the keyboard to input the expiration date will come to a complete stop and revert to using the mouse. This interrupts the smoothness of the form-filling process and adds to the time it takes to complete the checkout.

How expiration date fields should be formatted

In short, all financial transaction cards should show the card’s expiration date in one of the following two formats: “MM / YY” or “MM-YY” — with the first being the by far most common for credit cards. This represents two digits for the month and two for the year — for example, “02 / 24”.

Adopting this format makes it very easy for users to enter the correct input because they don’t need to translate the numbers on the card to the corresponding month name, or worry if they’re supposed to enter another set of values altogether.

Furthermore, this standard supports keyboard users who will attempt to enter exactly what they see printed on their card using their keyboard.

Conclusion

Users shouldn’t face obstacles when entering the most basic information, such as credit card expiration date fields.

Forcing users to translate from what they see on their physical credit card, to the format preferred by a particular site for the expiration date fields, makes it unnecessarily complicated to complete the payment fields.

Adjusting the expiration date fields to match the standard is an example of “low-hanging fruit”: a UX performance boost that’s relatively easy to implement.

Attention to these sorts of details is part of what sets “State of the Art” checkout experiences apart from “the rest”.

And yet we only 10% of sites use the preferred format for expiration date fields.

Format the ‘Expiration Date’ Fields Exactly the Same as the Physical Credit Card (90% Get It Wrong)

PS. The only deviation that doesn’t make the process more complicated and still retains the automatic translation from physical to digital is a format with 2-digit month, followed by a month name, e.g. “03-March”. For this, remember to use two digits (03) instead of just (3) to be consistent with what’s on the card.