At times, the most minor of tweaks and optimizations go a long way in reducing friction for your customers. The credit card form can be easily optimized by presenting the data as it appears on the physical card yet 36% still fail to do this according to Baymard.

 

Confusing

Typically, credit card fields are ordered as below:

  1. Credit card number
  2. Expiration date
  3. Cardholder name
  4. Security code at the back

 

The first three are often at the front of the card while the security code is at the back (except American express). Since people don’t always know information like their credit card numbers from memory, they have to read it from their card and type it into their phones or computers. Therefore, having “Cardholder name” as the first field instead of card number will be confusing. Customers may enter data in the wrong field.

Failing to order fields as they appear can also lead to unnecessary action. If you don’t have the security code as the last field, shoppers will be forced to flip their credit card over and back again which just causes unnecessary friction.

 

Newer cards

Some of the newer cards put all the info on the back, for example:

  1. Security code
  2. Name
  3. Business name
  4. Card number
  5. Expiration

 

My recommendation

Go with an order that fits the credit cards that most of your users have. For now, that is the standard layout of Card number > Expiration date > Cardholder name > Security code