Name on card, or Card number first?

Question

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 1

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:

• http://www.cruxcollaborative.com/2-keys-to-unraveling-user-expectations/
• http://infinvision.com/familiarity-in-user-experience/
• http://www.uxmatters.com/mt/archives/2011/07/how-cognitive-fluency-affects-decision-making.php
• http://www.creativebloq.com/web-design/ux-design-patterns-work-91516961

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.

Answer 2

Option 3 is the obvious choice.

Both other options involve including an input that is not required for the majority of interactions. (Assuming most cards meet the definition "not Amex")

Including unnecessary inputs breaks (the updated and revised version of) Steve Krug's first law of usability:

Don't make users think or act unnecessarily

It increases the chances of the user stopping to think "Do I really need to complete the name field?" or wasting time and effort completing it when it's not needed.

Credit card inputs that detect card type are a common design pattern and interaction. Leverage this and have the "Name on Card" field appear under the the card number input as soon as the system detects am Amex.

This approach also invalidates the arguments about the position of the Name field, as having it appear after the Card Number input simply becomes a logical requirement.

Answer 3

Moonmeth shows some valid points about expectancy why you should ask for the name after the number

Rule of least surprise:

I would not hide the name-field completely and only show it when the number matches, instead I would always show the name field at second position. But when you enter a complete Number which is not american express, I would disable the field and display a Text inside "Name not needed"

In this way you get the benefit of reducing unnecessary input, but the user will clearly see that the name is not needed and will not be confused why the field is missing. The layout of the whole form will not "jump"

Answer 4

I've never seen a card form that doesn't have a name field. Usually the name field goes first, and to me that is logical because one naturally thinks of something's name before one thinks of its attributes (e.g. "name, date of birth, address" for a person, "name, model number" for a product, "name, description, date" for a programme listing in a TV guide).

Answer 5

This started as a comment:

Empirically, my card has the number on top.

It's also the most significant source of both information and possible errors. I type my name fairly often, and am intimately familiar with it. The expiration dates are less common, sure, but at least I have a 1 in 12 chance of getting it right even by accident. The CVV is 3-4 digits, so that's also really easy.

By placing the most complicated bit of information first you can give them that feedback a lot quicker that they fat-fingered a number because the checksum doesn't match (of course they could accidentally produce a valid, but incorrect number, but IIRC companies have some tricks to reduce that likelihood). If you leave it until later there's a bit more chance that they could miss your warning message (or worse, you don't have a warning message until after they submit, and now all that form data has been cleared and they get frustrated and don't complete the purchase!)

Answer 6

My vote is "Idea 2", for the reason provided (match the card).

Namely, I wanted to point out why I am not choosing idea 3 (hide form, for simplicity)? It sounds like the popular option when you do such a slick job of presenting it. However, I've one concern with that approach.

You should not hide the field. What if I am waiting for my spouse* to deliver the card to me?

*(hypothetical scenario. I'm actually spouse-less, so that was just one example, of which there could, of course, be many possible reasons why a person may not have a card handy when they start filling out part of the form.)

If the form is available (visible, and not disabled/greyed out), I can do something useful, by starting to type my name. The alternative is idea #3, which involves testing my patience, by making me wait to enter an approved number before I can begin to get my job done. Don't tell me how to fill in the info. Just show me all of the forms that I need to be concerned with, and let me choose whether I fill them out in order or not.