Credit card field placeholder text

Question

There has been a lot of discussion around Stripe 'Elements' default credit card field placeholder text.

Their default is '4242 4242 4242 4242' as shown below:

There are a few vocal users complaining that they can't change it to something else. Stripe were seeking feedback from the users along the lines of 'Well, what would you change it to' - and replies varied like so:

• "****-****-****-****"
• "0000 0000 0000 0000"
• "CREDIT CARD NUMBER HERE"
• "Let me set it to whatever I like!"

The latest activity is a user threatening to change payment providers because they cant change the default placeholder text, because their users are complaining about it.

Personally, I couldn't give a rats either way, but I can understand if your customers are complaining then perhaps you would like it changed.

So UX.SE - from a UX perspective, what should Stripe do in this situation?

Answer 1

Placeholders gone terribly wrong

tl;dr
When a placeholder doesn't clarify anything, it shouldn't be there.

This is a great example of the negative impact of placeholder text pointed out by NN/g quite some time ago.

Summary: Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.

In this case, Stripe isn't adding any information by including the fake number. Users know what a credit card number looks like. The only thing it does is contribute to confusion when the user sees a number that isn't their own.

Keep the credit card icon and drop the placeholder text altogether. I'd start by testing something like this ...

Answer 2

I simply can't believe they did this. First of all, it shows a definite bias. Cards starting with 4 belong to VISA, so I can imagine all other CC card companies complaining.

Another thing: 4 groups of 4 digits, equalling 16 digits number. It sounds nice.... if it wasn't because I'm an AMEX owner. AMEX cards use the format NNNN NNNNNN NNNNN (4 digits + 6 digits + 5 digits= 15 digits number). btw, all AMEX starts with number 3, just in case.

Finally.... CC number and expiration date in the same field... wow... talk about confusing users.

What I would do

I really don't know if this sample is just a test drive or what, it really doesn't look as if they gave any thought at all, it took me literally 30 seconds to see the flagrant mistakes listed above, so I have to assume this is just a test.

Anyways, first thing first:

• Differentiate fields: there's no way anyone will convince me that different data in the same field won't confuse users. Simply because I have tested this before! So I'd make both fields visible and clearly labeled.

• Remove biased placeholders and hints: just take that placeholder and use text like "Enter credit card number here" . K.I.S.S. approach, so to speak. Most important part is NOT to use any number format, since there are differences between brands.

• Give users control: If research shows complaints by users, and a desire to have control over the placeholder text, then it's quite obvious the system should have that feature available for their users. This being said, a neutral placeholder should be in place by default unless user changes it. After all, Stripe has knowledge and resources not many users have.

Disclaimer: like anything UX, recommendations should be based on real data, research and best principles. This example clearly ignores best principles, but on the other hand I don't have any research, only Stripe has it. Thus take this with a pinch of salt.

Answer 3

UPDATE: Stripe have listened to user feedback and rolled out the following changes:

After a lot of research, more in-depth testing and many discussions with the team, with end customers, and with users (including some of you!), we’ve made a couple of changes to placeholders in Elements.

(1) The card Element now uses “Card number” and “ZIP” (and their localized equivalents) as placeholders. As mentioned above, we decided to make this change after testing revealed that “Card number” was more likely to result in successful payments than “4242 4242 4242 4242”.

(2) The cardNumber, cardCvc, cardExpiry & postalCode Elements now accept a placeholder option that allow you to set a custom (or empty) placeholder, as previously reported. If our default options do not fit your needs, we want to make sure you have the flexibility to build exactly the form you’d like.

Thank you all for pushing on this, for your patience, and for your suggestions along the way.

New placeholder: