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

By admin

Key Takeaways
ORG

When the site’s credit card expiration field doesn’t match the formatting on the user’s physical credit card, the user’s progress through checkout is slowed


72%
PERCENT

of e-commerce sites in our benchmark failed to match expiration date fields to how they’re printed on credit cards, causing users to input erroneous info

Correctly formatted

month
DATE

and year inputs allow users to seamlessly enter their credit card info into the expiration field

In

Baymard
FAC

’s large-scale UX testing of

Cart & Checkout
ORG

, 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%
PERCENT

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
DATE

for the expiration date helps users input their information

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

At

Hayneedle
ORG

, a participant began typing the

2-digit year
DATE

instead of the full

4-digit year
DATE

(i.e., “

29
CARDINAL

” instead of “2029”), slowing her progress through checkout.

“And what was it? ‘04/29’, okay.” A participant at

Best Buy
ORG

took a while to select the expiration date from within the drop-down menu options, slightly slowing her progress through checkout. Note the discrepancy between what the participant stated was

the expiration year
DATE

(“

29
CARDINAL

”) and the input for the field (“2029”).

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

“MM / YY”: This is the most common formatting for the expiration date printed on credit cards, resulting in a

1:1
FAC

mapping between the physical card and the virtual fields, and which is good for understanding the input, minimizing deciphering issues, and also for supporting keyboard entries. (To perfect this implementation at

Birchbox
PERSON

, the drop-downs should be clearly labeled as “month” and “year” when open, as the relevant label is covered when the drop-down menu is activated).

​​“So I would enter the…expiration, ‘

0429
CARDINAL

’.” At

the Container Store
ORG

, a participant was easily able to enter the expiration date on his card — which was displayed using the industry-standard format.

Therefore, sites should use the current financial industry standard format for expiration dates — a

2-digit month
DATE

and a

2-digit year
DATE

(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
CARDINAL

deviation from the financial industry standard of “MM / YY” that has not been observed thus far to cause usability issues is if

the month
DATE

name comes after the

2-digit month
DATE

number in

the month
DATE

drop-down (e.g., “

03-March
DATE

”).

This will still allow users to input

the expiration month
DATE

and select the numbers they see printed on their card without having to mentally calculate

the month
DATE

number.

“Yeah, usually they are drop-down menus, but I think it’s easier for me just to go ahead and type it and let it pop up.” A participant at

CVS
ORG

tabbed into the

first
ORDINAL

of the

2
CARDINAL

-part “

Expiration Date
DATE

” form fields and began typing

the expiration month
DATE

. Note that the site accepted both mouse input — in the form of the drop-down menu shown above the field — as well as text entries from the keyboard.

A participant at

Walgreens
ORG

was easily able to use the keyboard to enter the expiration date in

the “Expiration Date
EVENT

” text field.

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
CARDINAL

Common Usability Pitfalls of Custom Designed Drop-Downs and The Current State of Checkout UX – 18 Common Pitfalls & Best Practices).

Ideally, expiration date form fields should be presented to users as

2
CARDINAL

separate fields (for

month
DATE

and year) that are placed sequentially (i.e.,

one
CARDINAL

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
ORG

).

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
CARDINAL

” are valid input values for

month
DATE

, as is “

1
CARDINAL

”; and while “

10
CARDINAL

,

11
DATE

,

12
CARDINAL

” are also valid inputs, “

13
CARDINAL

” is an invalid one.

Provide Users with the Formatting They Need to Enter Their Data

At

Everlane
GPE

, a participant had no issues entering the expiration date in the form field — which followed the industry-standard numbering format for credit card expiration dates.

By formatting the expiration date form fields using a

2-digit month
DATE

and a

2-digit year
DATE

, sites can remove the friction for users entering their expiration date information.

However,

72%
PERCENT

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
CARDINAL

of the

650
CARDINAL

+ UX guidelines in

Baymard Premium
ORG

– 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
PERSON

to conduct

a UX Audit
LAW

of your site or app.