We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

Card Payment Forms: User Friendly Design

Conversion Rate Optimisation

How you ask for card details in your online checkout can be a major source of pain for consumers. Unfortunately many online retailers make it more difficult than it has to be. Credit card forms can be simple and secure.

Follow these form design best practice rules for happier users and higher conversions.

Don’t Ask For Unnecessary Information

Most of us are perfectly used to being asked for a lot of information when entering new card details. It all seems perfectly normal, your card is unique so you must have to give a lot of information right? Actually some of the questions are entirely unnecessary.

For example, your card type can actually be deduced from other information you provide.

Add a Payment Card option

So, asking your users to tell you what sort of card they’re using is actually a completely unnecessary step. The first digits of any payment card are an indicator of what type of card it is e.g Visa debit, Mastercard etc.

Due to years of manually selecting their card type some consumers might be confused when you don’t ask for card type. Let users know that the form has detected their card type, like so:

Dynamic indication of card type

Source: Luke W

In addition users are often asked for the ‘Valid From’ date of their card but also shown that it’s not a required field.

'Valid From' form field

If it’s optional why should I provide this information?

Format Fields In The Most Recognisable Way

Payment cards generally all look the same. Why? Because there’s a standard format; long card number in the middle, expiration date underneath in numerical MM/YY format, card logo on the far right, sometimes sort code and account number on the line below and lastly, name at the bottom.

So why then do some card payment forms ask you for this common information in a different format e.g. naming the month? This takes extra effort on the part of the user to verify in their mind.

The Book Depository (www.bookdepository.com) have been a bit clever and made the input fields for card information look like a card. This could improve usability as the user knows where on their card to look at for each field they fill.

Credit card form

It’s nice to see that they’ve dropped the ‘Valid from’ field but unfortunately they’re still asking for card type. What’s more the field for this isn’t in the same position as on your card, so the concept that this looks like a physical card is flawed.

Smashing Magazine conducted user testing on checkouts that found the best format was two digits for month and two for year. Participants were also okay with month names but tests that included both the number and name of the month caused confusion e.g. “March – 03”. Select menus, such as the type used in the example from the Book Depository above, are a good way of reducing user error.

CVV, CVV2, CVC or CSC- Which Is It?

The security code or card verification code, however you refer to it, has many acronyms. Different card types name this code differently. This makes it a little tricky to know which one to refer to if you accept multiple card types.

You could pull up data on the most commonly used card type in your checkout, then use the corresponding security code acronym.

Try to be as clear as possible about what you’re asking for. This would be an excellent time to show a diagram of a payment card and to highlight where on the card to find the code. However, some cards, such as American Express, have the security code on the front. Asos deal with this rather nicely by simply asking for the ‘security code’ and then providing a link out to a full explanation.

Asos security code details

Don’t Be Too Restrictive With Formats

Don’t punish the user for inputting correct data but in a different format than you’d like.

Although the Book Depository didn’t specify the format they wanted you to give your card number in they weren’t restrictive. When I entered a card number with space in between (as it appears on a card) this was reformatted by the website to exclude spaces- nifty.

If you do want users to enter their details in a specific way then there are a couple of ways to reduce errors.

  1. Set out fields in a way that ensures data is inputted in the way you want e.g. drop downs for dates.

  2. Give an example of how you want the data formatted e.g. displaying MM/YY or MM/YYYY or an example card number without any spaces.

Provide Validation And Clear Error Messages

Using explanatory error messages is good advice that applies to forms in general. When it comes to entering card payment information users can easily makes mistakes. They’re copying information from a physical place to an online form. However you also need to strike a balance between providing a helpful message and maintaining security.

Instead of a messages such as ‘Error’, ‘Please fix’ or even ‘Please enter a valid card number’ you can write more helpful and friendly messages that will provide a better a user experience.

This error message has a negative tone:

Error message

Provide as much info as you can without giving away hints that could make the card owner vulnerable. You could cause vulnerability with a message such as ‘CVV mismatch’, so avoid being too specific.

Good error messages include ‘This card number is too short’ or ‘Please check your card and enter a valid number’.

Remember to validate inputs as the user leaves a field rather  than when the user hits submit. This allows you to display error messages as and when an error is made and to provide positive feedback for correct inputs. Keep error messages in line with the problem field for maximum visibility and ease to the user.

Tell Mobile Devices What Keyboard To Display

You can use HTML5 to prompt any mobile device to display a numerical keyboard for fields that only require numbers. This saves your users from having to change the keyboard themselves.

Numerical keyboard on Amazon app

Cool Features

Allow Users to Scan Their Card

I came across a cool feature recently that makes adding card details from your mobile so much easier. It’s the ability to fill in a form by electing to scan your payment card. Not being an iPhone user I wasn’t aware that this has been a feature of iOS8 for a while. Still, it’s quite exciting that this ability is now appearing within apps such as Amazon too.

The advantages are pretty easy to see; it’s quicker to scan your card than to type all the information out on your phone screen, it’s less effort and it eliminates the chance of errors occurring.

Card Scanning tool

Source: Jumio.com

Here it is in the Amazon app:

'Add new card' Amazon app

When I clicked ‘Scan your card’ my camera was activated with an overlay to help me line up my card correctly.

Scanning tool in Amazon app

Interactive Card Animation

Lastly, you could go for a similar idea to the Book Depository’s card-shaped form but more dynamic. Developer Jesse Pollack has designed a tool called Card. Using information the user provides the tool builds an illustration of their card. Head over to Github to try out a demo of the card.

Card, interactive credit card form

Source: levashov.biz

Credit card details are one of the most commonly corrected fields in forms.

Read more about Mistakes in forms – why do they happen and how to reduce them.