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:

valid thru

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.


Please Note

Works best on Chrome/Desktop. I made this pretty quickly as a POC so don't judge my coding on this one...

Hi, I'm David Halford. I write code, craft pixels and annoy people by moaning about User Experience. My work (mostly the design work) can be found at