The best credit card checkout UX practices

The credit card payment is essential factor for website’s abandonment rate. So, if it designed in a way that makes red flags
go up in customer’s mind, you will lose them at the end of the selling process. And the entire effort that you put into
attracting that customer will be gone to waste.

1. Forget multi-column forms.

The thing is that people don’t notice fields in multiple columns. And they interpret forms with two or more fields in
various ways.

One column field lets users’ eye to go natural direction.

There are, however, few exceptions when you can put several fields in the same raw without confusing users. For
instance, asking for credit card details in a linear form doesn’t cause users’ confusion and comes with minimal issues.
This can happen when the fields logically belong to the same category.

What people also find helpful when it comes to card payments, is also when the field sequence resembles one that is
printed in the physical card.

2. Reduce the number of fields.

Payment forms on most websites have twice as many fields as they need to. A checkout flow for non-registered users
should have a maximum of 6-8 form fields for a physically shipped product. Every additional field means lover
conversion. For instance, it’s better to create a single “full name” field then separate “first name” and “second name”
fields.

3. Arrange the field from easiest to hardest

A good practice is to arrange the easiest form fields first (name or email address) to make people to eager to take action –
this way there’s bigger chance that they will complete the credit card checkout process. Time consuming questions should
go at the end of the checkout.

4. Provide auto-complete and auto-filled form fields

For instance, you can use geo-targeting and pre-fill the fields with a city name and state. You can also ask for ZIP-code
first and then auto fill fields with address details.

5. Indicate required or optional fields

Asterisk still isn’t obvious sign for customers as a required field indicator, So, another solution for marketing such field is
placing placeholder required (outside or inside the field). Another method is to make asterisk red, but it’s not necessary.
However, making them pale gay or in low-contrast colors isn’t expedient, especially when target audience consists of
elderly people. As there are usually more required fields then optional ones, it’s better to mark optional fields, so it can
cause less confusion and risk of errors.

6. Use radio buttons instead of dropdown boxes

People complete forms with radio buttons quicker then ones multi-select buttons. Radio buttons are also more practical
when there are less then 5 options in the form, as it makes users scan them and select much faster instead of opening a
dropdown menu. It also works well when you offer various options, so users see all of them at a glance and can make a
quicker decision.

As for, dropdown menu, it can be used when there’s a recommended option to choose, so there’s a smaller chance that a
user will change the default option. Displaying all options, will take longer for a user to decide, or they will choose
something different.

7. Don’t shine a spotlight on coupon fields

Coupon code boxes usually causes customers to leave page to fins some kind of offer that they can use, the result can be
leaving whole site and choose service of another provider. Other than that, invalid codes also cause problem So, if you
rarely offer coupon codes, better hide the box or use a text link, so it doesn’t stick out. Or, instead of displaying it for
everyone, you could just show the coupon box to your targeted audience — for instance, when they come to your site via
a promotional email or landing page.

8. Use clickable images

9. Add progress bar on long forms.

Progress indicators increase customers’ motivation to complete the purchase. People feel they have more control over the
process if they know when it’ll be completed.

10. Improve checkout speed and performance

more than half of online users won’t wait more than 3 seconds for a page to load. Avoiding load time delays is especially
important on mobile, as people expect quick shopping possibilities on the go, so it’s best to remove all of the things that
can harm the page’s loading speed. Here’s what you can do:
Remove extra elements and distractions from the checkout form, such as non-related links, social buttons, graphic
elements, etc.
Keep the design clear and uncluttered, remove the footer and header elements from the checkout page.
Keep customers on the same page during the entire checkout process. Don’t redirect them to an external service to pay,
as it may severely hurt conversion.
Reduce the number of form fields, only ask for necessary information.

What can also speed up the process is the “remember me” option in the checkout, so customers don’t have to type in their
credit card number each time they want to buy something. 

11. Design with a unique feeling

A fast checkout form should also come with a beautiful design that matches the website’s layout. It needs to look like it
belongs on the site.

12. Use a clear call to action

Label the buttons with a clear message to be sure that people understand exactly what will happen when they click on
them. This can be a simple “Pay”, “Give me access”, or “I’m ready to pay”. Just don’t try to create button text that is hard
to understand like “Go” or “OK”.
 13. Display the price

Mobile forms and checkout optimized to convert

The checkout page on mobile should be as simple as possible without menu links, a search bar, or social media links that
can drive users away. Also, keep text input to the minimum and eliminate extra steps to reduce typing effort. It’s hard to
write on a small screen, so remember: the bigger the form, the better.

14. Consider field focus

Auto focus the firs input field, this saves additional click and enhances payment form UX. Focus should be clear, for
instance, with darker border or highlighted box.

15. Provide single-column forms

16. Eliminate scrolling in multi-step forms

Multi column forms require more pages to road, that can be very burdensome for users with weaker connection. However,
if you need to implement a multi-step form, replace scrolling with sections that will fit smartphone window.

17. Write clear labels

Labels above the field are easier to scan.

18. Adjust font size for mobile

Mobile users love large texts on screen to clearly see everything without having zoom in, standard body text font size is
16px. The bigger font size the better. For forms it’s recommended to use all uppercase letters, this guarantees faster
reading.

19. Provide touch-target size

The tule of thumb is to create a design for touch – mobile elements must be large enough to seamlessly click with one
hand. Touch targets that are to small make users take longer to tap, average size of human finger is 1cm x 1cm.

20. Automate whenever possible

For example, auto-capitalize (especially the name and address fields) auto-complete, auto-fill, or auto-detection (for
location).

21. Limit dropdowns

Mobile forms with dropdowns take longer to complete and make it harder to choose items from the list on small screens.
Not to mention that this requires extra taps, making users more likely to abandon the checkout process.
Instead of a dropdown, you can consider steppers (+/- controls), segments (or radio buttons), or date pickers (if
your form requires choosing a date).

22. Use input masks

Field masks help users correctly format the input text, for instance, a phone number or ZIP code. Unlike
placeholders, the proper format is displayed automatically, as the user types in the information, so it’s more
responsive. This way, users don’t have to bother adding dashes, slashes, or any other elements, as masks are
designed to ignore invalid inputs.

23. Optimize input for keyboard

Typing on mobile is usually slower than on desktops where it is carried out via keyboards, and thumbs aren’t as
precise as a computer mouse.  Also, you should optimize input for touch keyboards in order to avoid validation
errors. This could be, for example, disabling auto-correction (e.g. to minimize mistakes with filling out the
address) or not using validation for fields such as name, phone, or credit card number.
Moreover, it’s important to use the right keyboard to match the input type — e.g. display a dial-pad when
asking for a credit card number and a text-pad for a name or address field to reduce typos.

24. Add a screen-wide CTA button in a contrasting color

users use both their right and left hand to operate smartphones, so make it equally easy to tap the button from
both sides of the screen.

Form validation and errors

25. Use microcopy to address errors

add a short prompt next to the labels and extra descriptions, such as “Card number without dashes or spaces”.
Communicate errors clearly and avoid messages, such as “Some fields are incorrect”. Your customers need to
easily understand how to fill in the form.
 26. Use inline form validation
27. Communicate errors the right way

Overall, users don’t like error messages, so you should communicate them in clear and simple terms. Also,
avoid using a negative tone (e.g. words like failed, wrong etc.). Your message should contain direct and short
information to make users understand the reason why they can’t complete the purchase. But, don’t use technical
jargon and don’t lose the message by over-communicating.

28. Use input masks

Input masks help to control what should be typed into a field and can automatically notify users of an error, if
the input doesn’t match your requirements. 

Security and trust badges

Customers need to know that the merchant they buy from is reputable and that their personal information will
be protected. Using the words Secure Checkout will help put them at ease.

29. Display trust badges

Firstly, your website should have a high-encryption security certification. Secondly, think about outsourcing
your payment process to a trusted payment provider with PCI Compliance in place.

Display a trust mark and security logos during the checkout process in order to gain your customer’s trust and
increase sales. You can also improve credibility by putting testimonials and reviews on your website.

30. Add recognizable logos

It’s also good to display familiar logos for accepted payment methods, so your customers don’t need to consider
whether their cards are accepted or not. You can also show the relevant logo when the customer starts to type in
their card number — Visa always starts with a 4, Mastercard with a 5, AMEX with a 34 or 37, etc. Save your
users’ time and show the card type automatically instead of making them pick their card type from a dropdown.