This Is Your Card
Does UX benefit from skeuomorphism in credit card forms?
While doing some online shopping I found myself checking if I had entered my credit card details in the right input boxes. The website I was using provided a plethora of labels, informational images, tooltips and other helpful features to help me figure out if I'd entered the right info. I have done this all before, over and over. Every website tries to make the search of the right numbers on your card easy, but I was thinking about about an alternative. Why do users need all these tooltips? Surely it can't be rocket-science? Then it hit me:
Why should a user get a form riddled with labels and tooltips to explain which form field does what, when you can simply show them their credit card. What info goes where is completely self-explanatory if the on-screen card is the same as the one the user has in his/her hand.
I've decided to make a proof-of-concept to see if forms would benefit from my approach; The credit card detail form could look like this:
instead of this ugly beast over-explaining itself every chance it gets:
Funny enough, this is actually a pretty optimized version that is becoming the norm.
We as users are becoming used to this kind of information-overload.
- Skeuomorphic design reduces need for explanation/tooltips
- Entire CC-number is paste-able in the first field (spaces/dashes are automagically removed)
- credit card recognition by number. (try it: type the first few digits of your actual number)
- Auto-switching to next input-field for ease of use
- No more explaining where the CVC code is located on the card
- Full HTML+CSS, responsive, degrades pretty decent (enough for a POC)
- There are obviously still a lot of UX hiccups, this is just a proof of concept
Works best on Chrome/Desktop. I made this pretty quickly as a POC so don't judge my coding on this one...