UX designers hate designing forms as much — or more — than users hate using them. But when developers tell you that your super-simple form won’t work, you might feel stuck. So let’s answer:
“Why can’t credit card numbers include spaces?”
Just starting the Crash Course? Start here!
****
Credit card forms are one of my favourite examples of usability because they are super simple and super complicated at the same time.
The fundamental requirements for a credit card form are pretty simple. The card number, the expiry date, the security code, and a smile.
Everything else is details. But in this case, those details might be the difference between buying an authentic Harry Potter wand made of real wood from Hogwarts, or going to Comicon in muggle clothes like an idiot.
i.e. — completing the purchase or not.
The real number that is printed on the plastic credit card includes spaces, so why can’t the user include those spaces when they type it in?
****
The stupid/lazy answer:
“Our database isn’t set up to handle the spaces.”
****
The real answer:
A credit card number can ABSOLUTELY include spaces.
There is no technical reason why your form cannot be built to accept spaces in the credit card number. That’s just not the way that input field works by default.
When you add intelligence like that to your forms it takes extra development time, but it will also help more people complete their purchase.
Your credit card form can be built to save the number without spaces.
It can be built to add spaces as the user types.
It can be built to automatically detect the type of credit card when you enter the first few numbers (Visa starts with 4, Mastercard with 5, AmEx with 3, etc.)
It can be built to display the information directly in a digital version of the card, so you can compare them side-by-side!
All of these “upgrades” just take time. You need to consider the time versus the benefit. As all good developers say: “anything is possible, but everything isn’t realistic.”
****
Why this isn’t a stupid question:
Sometimes UX and code work against each other.
When you design a simpler exerience, sometimes that creates a more complex project for the person coding it.
In the same way that designers are often motivated to simplify their own lives by hiding things in the UI, developers are often motivated to simplfiy their own lives by saying it “can’t be done” instead of “I would prefer not to do that, because it annoys the fuck out of me.”
When you are told that your design can’t be done, just ask why. It is quite ok to ask “which part of this design is impossible to build?”
The answer usually starts with “well, it’s not impossible to build, but…”
Then you can have a smart discussion about the trade-offs.
It is probably worth it to allow spaces and remove any stupid typos a user might make. It prevents mistakes.
It might not be worth it to allow users to add a picture of their own face to the digital version of the card, using their webcam.
****
Remember: developers and UX designers can help each other, and neither of you should lie to get what you want. It’s not about you. It’s about the user.
****
Tomorrow we will answer: “How do you make a design responsive?”