Navigation
Navigation
Chapter Introduction & Benchmark Analysis
Cart & Checkout: Credit Card Form
Credit card payment is the preferred payment method for the majority of users in most countries. Despite the credit card being a commonly typed input and only constituting a small part of the overall amount of typing during the checkout flow, it’s by far the most complex and error prone input during the checkout flow. Some users are anxious about their sensitive card data, they have to transfer long strings of numbers printed on a physical card into an online interface, and if just a single character is mistyped or misplaced they will often get notoriously generic validation errors returned by the payment processing networks.
While typically just 3-5 fields long, the list of details in order to achieve a credit card form that causes as few abandonments as possible requires extensive consideration. While most of the solutions in this topic chapter are simple changes to the field descriptions and design, their impact should not be underestimated, as any doubt, slight input inconsistencies, or validation errors in the credit card form are far more likely to result in abandonments than most other fields during the checkout flow.
The UX Performance of ‘Credit Card Form’
Benchmark UX Performances
Poor
Mediocre
Acceptable
Decent
Good
Credit Card Form
10 Guidelines
While the {{ chapter-name }} is still among the weakest aspects in the checkout flow of many sites, the 2019 benchmark data shows a dramatic improvement since 2016. In particular, while no more than a few sites had a decent performance in 2016, we find that 30% of sites are now performing from decent to well, and 7% have implemented a state-of-the-art Credit Card Form.
Read more
While the Credit Card Form doesn’t constitute the highest amount of typing during the checkout, the 3-5 credit card fields are by far the most complex inputs in the average checkout. During testing, when the test subjects ran into issues at the credit card interface, e.g. due to an unclear field label or error message, their recovery rate was considerably lower than any other checkout input. In essence, even a slight ambiguity or a lack of assisting features for the credit card fields can result in a surprisingly high degree of abandonments — abandonments that can be prevented with reasonable investments, for example:
- While our testing shows that front end Luhn validation can drastically reduce submitted typos and prevent needlessly poor error experiences (observed to be a direct cause for abandonments), 66% of sites do not utilize front end Luhn validation for the card number field (#582);
- 51% of sites do not allow spaces in the card number field, despite this being how the number is printed on the physical credit card and we observe it to reduce typos (#594);
- 36% of sites have a sequence for their credit card fields that do not match the sequence of how it’s printed on the physical card, making it needlessly hard for users to seamlessly transfer the information from card to screen (see #664);
- 38% of sites don’t clarify what “Name on Card” even is, or that the “Cardholder Name” is to be typed exactly as it’s printed (#588);
- 67% sites have a format for their expiration date drop-downs that don’t actually match what is printed on the physical card, making the input needlessly prone to errors and make keyboard inputs impossibly difficult (something that 24% of user try) (#577).
For general inspiration, see the Page Design tool where we have collected 120+ design examples of Credit Card Form implementations.
Summary of Guidelines
Luhn Validate the Credit Card Number Field Issue: When a user’s card number input isn’t checked for typos before it’s submitted to the payment processor needless data-loss validation errors are likely.
Key Findings
- Typing 15 or 16-digit credit card numbers without errors can be challenging.
- Allowing users to type spaces can improve the experience.
- Luhn validation is an extra opportunity to alert users errors.
- 53% of sites don’t Luhn validate the credit card number field.
Key Takeaways
- First bullet
- Second bullet
- Third bullet
Best Practice Examples
Autoformat Spaces in the ‘Credit Card Number’ Field Issue: Users have difficulty typing and verifying the 15–16 digit long credit card number.
Findings
- The credit card number is inherently difficult to type.
- We observed subjects struggling with both correctly typing their credit card number and verifying that it was correctly typed.
- Subjects were more likely to correctly type ther card number on sites that autoformat the user’s card number with spaces.
Takeaways
- Make entering the credit card number as easy as possible
- Use an input mask for the appropriate card type after it’s been autodetected
- Another bullet
- Another bullet
Best Practice Example
Visually Emphasize the Security of the Credit Card Fields Issue: Users are concerned about the security of their payment information, yet have very little understanding of the technicalities of form security.
Issue Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Findings
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
- Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
The Takeaways
- At vero eos et accusamus et iusto odio
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
- Temporibus autem quibusdam et aut officiis debitis aut rerum
- Ut aut reiciendis voluptatibus maiores alias consequatur aut
Save Guest Users’ Credit Card Information for the Entire Checkout Session Issue: Being forced to reenter credit card details is time-consuming and can lead to validation errors if details are entered incorrectly — which can cause users to abandon the checkout.
Save Guest Users’ Credit Card Information for the Entire Checkout Session
Clarify that ‘Cardholder Name’ Is to Be Typed Exactly as It’s Printed Issue: It’s often unclear what should be entered in the ‘Name on Card’ field and some users don’t understand the purpose of the field.
Clarify that ‘Cardholder Name’ Is to Be Typed Exactly as It’s Printed
Use a 2-Digit Month and Year Format for the Expiration Date Drop-Downs Issue: Many users will have needless validation errors or a disruption to their form-filling process if forced to translate what’s printed on their physical cards to what they see in the virtual expiration date fields.
Use a 2-Digit Month and Year Format for the Expiration Date Drop-Downs
Provide a Dynamic Thumbnail Hint or a Tooltip for the ‘Security Code’ Field Issue: A significant portion of users hesitate or come to a stop when asked to input their credit card ‘Security Code’.
Provide a Dynamic Thumbnail Hint or a Tooltip for the ‘Security Code’ Field
Autodetect the Credit Card Type Based on the Card Number Issue: It adds unnecessary friction to the checkout process when users are required to manually select their credit card type.
Autodetect the Credit Card Type Based on the Card Number
Make Credit Card Icons Secondary in the Payment Interface Issue: Users misinterpret the credit card icons as buttons they have to click rather than static images.
Make Credit Card Icons Secondary in the Payment Interface
Make Credit Card Icons Secondary in the Payment Interface Issue: When typing info into credit card fields, users take their form-filling cues from the physical card, and if site’s field sequence is out of order with the physical card’s information they’re more likely to make mistakes.
Match the Credit Card Field Sequence to the Physical Card’s Information Sequence
Best Practice Examples
Video: ‘Credit Card Form’ UX Pitfalls
In the below video training module, we provide a walkthrough of the most important UX findings for {{ chapter-name }} – it’s a good way to start this research topic before diving into the specific guidelines.
Every 4th week we host a live webinar in Baymard Premium focusing on one of the 69 research topics – see the next upcoming webinars
Assess your own website
Assess your own site (or someone else’s) to see how well its implementation aligns with the user behavior described in this topic:
The 10 ‘Credit Card Form’ Guidelines
This chapter on “Credit Card Form” consists of the 10 guidelines listed below.