The anatomy of a credit card form
medium.com
The anatomy of a credit card form
1–10 of 129 posts
Re: The anatomy of a credit card form
#2> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format.
They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,._") but ignore them when submitting the form. That way, users can type in the number any way they want. Using spaces to group digits makes it much easier to check the number after you've entered it (not that it's necessary, but I still often do it).
Edit: they seem to stick to this failure mode with other inputs as well, e.g. with the postal code input. In almost all circumstances, it's better to allow users to enter anything, and give feedback on whether it's correct or not (either when the focus moves to the next input, or better yet in realtime when the user is entering information, as long as you make sure that partially entered, potentially correct information is not labelled an error). For bonus points, reformat the entered information to some standard format (e.g. grupped dogits for card number) after the focus moves away.
Re: The anatomy of a credit card form
#3> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…
Another example of doing it wrong is when the form splits the cc number into 4 separate boxes, and automatically skips along merrily to the next box as you type it in. This might look nice and everything, but usually breaks if you try to backspace your entry, or paste etc
Re: The anatomy of a credit card form
#4> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…
Do they still (automatically) insert a gap in-between groupings of numbers?
Re: The anatomy of a credit card form
#5> ZIP code: Length must be minimum 5 characters, maximum 10 characters
There goes Australia and their 4 digit zip codes...
Re: The anatomy of a credit card form
#6> ZIP code: Length must be minimum 5 characters, maximum 10 characters There goes Australia and their 4 digit zip codes...
I wonder if they have customer beyond US/Canada that they mention. Otherwise this would fail spectacularly in other countries in general (eg, UK: both letters + numbers, Taiwan: 3 digit zip code)
Re: The anatomy of a credit card form
#7> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…
I personally like it when the form inserts a space for me after every 4 digits and has a maximum length of the field set to (number of digits + spaces between). For some reason I rarely see websites that have such forms. Maybe it is actually confusing for the majority of users.
Re: The anatomy of a credit card form
#8> We realized that users may enter the ZIP code associated with their personal address, instead of the code associated with their cards. To add clarity, we added a note in a tooltip, which asks for the code from the credit’s card billing address.
By the time some people start typing, they are looking at the keyboard and not at whatever is changing in the UI. The people who might need this tooltip won't be the ones to see it.
Re: The anatomy of a credit card form
#9> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…
Another example of doing it wrong is when the form splits the cc number into 4 separate boxes, and automatically skips along merrily to the next box as you type it in. This might look nice and everything, but usually breaks if you try to backspace your entry, or paste etc
Also, dealing with AMEX screws up a lot of forms.
15 numbers, 4 then 6 then 5. Yes, only 3 groups. And the CVV2/CVC2/CID is on the front and four digits, not three.
Re: The anatomy of a credit card form
#10> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…
Judging from the screenshots with filled inputs, they automatically add spaces making the card number look exactly like it is on the physical card.
https://medium2.global.ssl.fastly.net/max/800/1*QzxyS4KGIvCw...
