Format the “Expiration Date” Fields Exactly the Same as the Physical Credit Card (72% Don’t) (2024)

In Baymard’s large-scale UX testing of Cart & Checkout, transferring credit card expiration dates from a physical credit card to input fields on a website was observed to be a task necessary for a subgroup of users — notwithstanding the fact that many users rely on browser autofill to input their credit card data.

Moreover, testing revealed that some participants entering their expiration dates into form fields experienced friction when the presentation of their physical card’s expiration date didn’t conform to the numerical format used by the site.

To assist users entering their credit card information into expiration date form fields, sites should format the input fields to exactly reflect the presentation on most physical credit cards.

However, our e-commerce UX benchmark shows that a surprising 72% of sites don’t match the formatting of their expiration date input fields to the credit card information, slowing down users’ progress through the payment flow — or even causing transcription inaccuracies that further provoke validation errors once users submit their data.

This article will discuss our latest Premium research findings on how to display “expiration dates” for checkout payment:

• Why users have difficulty entering expiration date data into payment form fields

• How formatting the month and year for the expiration date helps users input their information

• How using an open text field facilitates entering credit card info for users

Why Users Have Difficulty Entering Expiration Date Data into Payment Form Fields

For those users who don’t use autofill, entering expiration date information prior to checkout can often be a tedious and frustrating task, as expiration date form field designs diverge greatly from site to site.

Indeed, throughout multiple rounds of checkout usability testing, a small subgroup of participants accidentally entered erroneous “expiration date” information due to nonstandard number formatting in the form fields.

This issue was observed to cause unexpected delays and interruptions for participants trying to input their expiration date.

This issue stems from users attempting to transfer expiration date information contained on their physical card to the corresponding form fields within the payment flow.

During testing, participants were observed having to stop their progress through the payment flow because they had to mentally adjust the formatting of their card info to enter it into the expiration date form fields — with issues only becoming apparent to some of them when they tried to submit their checkout form for payment validation.

This can be a more critical issue for a small subgroup of users, as a simple user error such as a wrong digit in an expiration date field can result in sites giving generic, nondescript validation error messages (see Improve Validation Errors with Adaptive Messages) and potentially even clearing out all of the user’s previous entries in the form fields (e.g., credit card number, expiration date, etc.; see How to Preserve Credit Card Details on Form Errors.)

How Formatting the Month and Year for the Expiration Date Helps Users Input Their Information

Therefore, sites should use the current financial industry standard format for expiration dates — a 2-digit month and a 2-digit year (e.g., “MM / YY”) — agnostic of users’ input method (e.g., drop-down menu, open text field, etc.).

This was observed during testing to generally make it easier for participants to enter the correct input because most didn’t need to translate the information on their card to the corresponding fields.

One deviation from the financial industry standard of “MM / YY” that has not been observed thus far to cause usability issues is if the month name comes after the 2-digit month number in the month drop-down (e.g., “03-March”).

This will still allow users to input the expiration month and select the numbers they see printed on their card without having to mentally calculate the month number.

Consider Using an Open Text Field for the Expiration Date

Importantly, an increasing number of sites have switched to using open text fields for the expiration date field.

Text fields are a more accessible alternative to drop-down menus, as this allows keyboard users to simply tab into the next field and easily enter their expiration date — or use the arrow keys to select an option from the drop-down menu — without having to take their hand away from the keyboard (see also 5 Common Usability Pitfalls of Custom Designed Drop-Downs and ).

Ideally, expiration date form fields should be presented to users as 2 separate fields (for month and year) that are placed sequentially (i.e., one right after another, on the same line) and with a forward slash in between, or else use a single input field with an input mask (visually separating the values within the same form field; see Consider Using Localized Input Masks for ‘Phone’ and Other Restricted Inputs).

In either case, the field length should match the expected input length (see The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces).

Note, though, that the open text fields will need to restrict the user’s input to avoid users typing invalid values, while still allowing some degree of input flexibility.

For example, “03” and “3” are valid input values for month, as is “1”; and while “10, 11, 12” are also valid inputs, “13” is an invalid one.

Provide Users with the Formatting They Need to Enter Their Data

By formatting the expiration date form fields using a 2-digit month and a 2-digit year, sites can remove the friction for users entering their expiration date information.

However, 72% of e-commerce sites fail to adapt their input fields to the formatting on physical credit cards.

This risks that users experience unnecessary delays in placing their order, and increases the overall friction of the checkout process.​‌‌‌‍‌‌‌‌‌‌‌‌‌‍‌‌‌‌‌‌‌‌‌‍‌‌‌‌‍‌‌‌‌‌‌‌‎

This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

If you want to know how your desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site or app.