23

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?

  • 1
    Related: ux.stackexchange.com/questions/31006/… – virtualnobi May 11 '16 at 7:01
  • Perhaps should have verified this before answering, does "form at my work when adding a new card" mean that this is an internal tool of some sort? i.e. this isn't a public facing form on a website? – dennislees May 11 '16 at 13:29
  • 3
    I always type my name in to the card number box when it appears first on the form (then have to copy/paste it out), so I assume I'm used to the card number being first. The name usually comes later with the billing address postal code, and any difference to that is a minor nuisance. – mpdc May 11 '16 at 14:23
  • I think the usual consensus is follow the design of cards now days, so it's easier to input while staring at your card.\ – Majo0od May 12 '16 at 11:48
44

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.
  • 2
    Upvoted for backup data! How many sites did you check? I mean, hundredths of percentages suggest a HUGE number... :-) – virtualnobi May 11 '16 at 6:55
  • 2
    @virtualnobi not necessarily, 77.78% vs 22.22% would be valid with only 9 websites. – Pierre Arlaud May 11 '16 at 8:13
  • 10
    American Express cardholders may have a different user experience - indeed, usually it's "we don't accept that" :p – Stop Harming Monica May 11 '16 at 14:17
  • 5
    What I hate is web sites where I have to choose what kind of card first; as many of you know, once you type the first digit of the credit card number, you can determine whether it is Discover, Visa (4), MasterCard (5), or AMEX(3?). – Mark Stewart May 11 '16 at 19:06
  • 2
    @MarkStewart, I like sites that tell me what sort of of card I've got. It's a quick way to check that I haven't grabbed the wrong card by mistake. – Mark May 11 '16 at 22:38
13

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.

  • One concern though is that this is a money handling form, so likely an important staple to the site. If the user has Javascript disabled they could no longer use it (correctly). Although this is an admittedly small chance it is still a risk to consider. – DasBeasto May 11 '16 at 13:25
  • 2
    @DasBeasto That's easy to work around by doing graceful degradation using Javascript. Don't have the field initially hidden and show it if needed; instead, have it initially visible, hide it immediately and then display it if needed. That way, if the user has Javascript disabled, the field remains visible (even if not strictly needed) instead of not becoming visible if needed. Much better degredation behavior, at a slight risk of flicker immediately when the form loads. This works even better in combination with Falco's suggested approach. – a CVn May 11 '16 at 15:19
  • @DasBeasto I've asked the OP to confirm (should have asked first), but I took his description of a "credit card form at my work when adding a new card" to mean that this is an internal tool, not something that's public facing, and therefore doesn't really need to designed for all eventualities. – dennislees May 11 '16 at 15:47
  • @dennislees Ah thats a good point it very well may be! Either way as Michael said there are ways around it, its just somethin OP should consider – DasBeasto May 11 '16 at 16:35
  • Although I agree with your conclusion, I disagree with your statement that having to fill in the name makes users stop and think "Do I really need to complete the name field"? They wouldn't stop and think about that any more than they would the credit card number. Option 1 does make them act unnecessarily; it doesn't make them think unnecessarily. – Bill Dagg Jun 1 '16 at 22:17
11

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"

Mockup of input with 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"

  • Also, this is the order of the information as embossed into the card, so +1. – yo' May 11 '16 at 10:48
  • 6
    Adding 'name not required' is a great little tweak that'll help users understand. Much better than merely disabling the field and potentially frustrating users that think it's broken. – PixelSnader May 11 '16 at 10:55
  • 1
    I wonder what the arguments for/against disabling the field vs. letting the user type it and not using it are. – Prinsig May 11 '16 at 12:12
  • 2
    Yes! It's so annoying to fill out a field, and then tab to the next field -- only to find that some JS /&¤%&! meddled with my input, and I'm not where I expected to be. – KlaymenDK May 11 '16 at 12:17
  • @Prinsig Arguments against letting the user type it are 1. In a corporate environment (like the OP specified) more typing equals more time needed to type and verify the name, which increases overall process time. 2.The user will most likely feel obligated to provide a name, and maybe even research it or cancel the process if the name (or its correct spelling on the card) is not easily available – Falco May 12 '16 at 12:15
2

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).

  • Agreed. Someone gave me a "prepaid" card once. It had a name on it. "GIFT RECIPIENT" – TOOGAM May 11 '16 at 18:11
  • @TOOGAM haha. I'm guessing though that the name was probably still required in order to use the card. – Micheal Johnson May 11 '16 at 18:14
  • I hope not. I accepted the physical card as payment of an approx $10 debt. I hope I get to spend the $9+ of credit on it. (I haven't actually tried it yet.) – TOOGAM May 11 '16 at 18:21
  • Well I have in fact a card which has no name on it: dropbox.com/s/8ml2rgeo7vzvjs5/IMG_20160511_223930.jpg?dl=0 - It would be a very bad experience to have a required name field if somebody wants to use such a card. – CherryDT May 11 '16 at 20:42
  • Aww... I can't see the center of the card. Can you post a different picture of the same card, held differently so that it just blocks the beginning numbers? Thanks in advance. – TOOGAM May 12 '16 at 2:27
0

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!)

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.