101 UX Principles

Chapter #51. Capture the Bare Minimum When Requesting Payment Card Details

The end goal for a lot of sites and apps is getting a user to pay. It's a cause for celebration: we've made something or are offering something so good that the user is happy to spend their hard-earned currency with us. So, why do we make it so hard for them to do so?

A credit or debit card number is already an unwieldy amount of data for a user to enter, so make it as easy as possible for them:

• Only collect what you need: card number, expiry and CV2 code.
• Allow the user to type the full card number into one field, but visually split it into groups of four digits as they enter it. This makes errors easier to spot but prevents the user having to move between four separate input ...