forms - Name on card, or Card number first?

We have a fairly simple credit card form on a public website for users to add a new card, but in the process of adding support for American Express we found they require the collection of the "Name on [the] card" and validate this data.

┌─────────────────────────────────┐
│                                 │
│   Card number                   │
│  ┌───────────────────────────┐  │
│  │                           │  │
│  └───────────────────────────┘  │
│                                 │
│   Expiry date                   │
│  ┌────────────────┐ ┌────────┐  │
│  │ 1 - January  ▼ │ │ 2016 ▼ │  │

│  └────────────────┘ └────────┘  │
│                                 │
│   Security code                 │
│  ┌───────────────────────────┐  │
│  │                           │  │
│  └───────────────────────────┘  │
│                                 │ 
└─────────────────────────────────┘

While adding this, we actually ran into a bit of a debate about what the most user friendly way to collect this information was.

Idea 1

The first group argued that the "Name on card" field should go before every other input in this set so that numerical inputs were all grouped together rather than having a numerical input, then an alphabetical input, then numerical inputs again.

Idea 2

The second group argued that "Name on card" belongs after the card number because that's the way it physically appears on many cards.

Idea 3

The final group argued that taking the second idea a step further, the "Name on card" field should be hidden until a card number matching American Express has been typed, then immediately appear bellow the card number field (by javascript) to help reduce the amount of input for cardholders who don't actually need to enter this extra information.

---

So I pose the question, where is the most user friendly place to ask for the "Name on card" in the ordered process of filling out such a form. What makes that way superior to other methods? Is it better to modify the form adding fields conditionally and minimize the amount of input required in the general case?

Answer

Short Answer

Ask for the name after asking for the credit card number, adopting either idea 2 or 3.

Long Answer

I recently did some admittedly basic research into this question.

The reason for this research was that I had noticed the incidence of online credit card forms not requiring the "name on card" field seemed to be on the increase. This pattern was curious to me from a UX perspective because we had been getting feedback from users that not having the "name on card" field was a little offputting because it was unexpected (that is, they expected to be asked for the name that appears on the card).

This topic also interested me because I was wondering whether not asking for the name on the credit card would in fact create a perception among users that the site was not as secure?

Anyway, I did an online search of sites (119 in total) that sold products/services online, and the results are summarised below:

• 52.94% of sites (i.e. 63 of the 119) required that a name was provided


• 47.06% of sites (i.e. 56 of the 119) did not ask for the name

Of those sites that did ask for a name:

• 77.78% (i.e. 49) asked for it after the credit card number


• 22.22% (i.e. 14) asked for it before the credit card number

Because most sites that are asking for a name seem to be doing so after the credit card number, there will be an increased familiarity with this approach. As such, that's how I would do it also. Why? Because familiarity breeds expectation, and this usually leads to a better user experience because it matches what users are expecting. Here is some further reading to back this assertion up:

I would argue that you don't want to step away from a familiar approach unless you have something that is significantly better and therefore warrants the change. Plus or minus one field probably doesn't mean a lot in the end.

Note

• Unfortunately I did not measure how many of the sites accepted American Express cards, and that would have been more applicable to your situation because American Express cardholders may have a different user experience to other cardholders.


• All sites were based in either the US, Canada, UK, Australia or New Zealand, so there is an inherent bias in the results in that all sites were based in western english speaking countries. That is, I cannot verify whether these findings would be repeated if selecting sites in, say, Asian countries for example.


• In a number of cases, the sites asking for a name did so in a separate step to the one asking for the credit card number. That is there was a separate step that asked for details such as Name, Billing Address, etc. In these cases, the order of the steps dictated whether they counted as asking for the name before or after the credit card number but only if the field actually asked for the "name on card" or something similar. If it was just asking for your name, then this was not counted as wanting the name on the credit card.


• I suspect that the increased incidence of sites not asking for a name is due to the fact they're only accepting Visa or MasterCard. So, from this perspective, you could implement your third option and when doing so, ask for the name after the credit card number.