This Is Your Card: Skeuomorphism in creditcard 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 for 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 goes where?

What info goes where is completely self-explanatory if the on-screen creditcard is the same as the one the user has in his/her hand. I started wondering if UX would benefit from this skeuomorphism in forms that have a real-life counterparts like creditcards, drivers licenses or other ID cards. I did some comparison and found that almost every website has stuck to what we now call a ‘default’-layout for creditcard forms; it looks like this:

We all perceive this ugly beast of a form as ‘the norm’, riddled with icons, stars, tooltips and tons of over-explaining. Notice how the form labels have to go into great detail of where you can find the information on the actual card. I have made a proof of concept of a form that visually represents your card, which looks like this:

The skeuomorphic card approach:

No over-explanation anywhere; this is your creditcard, and all you need to do is make the numbers on the screen match the ones you see on your actual card. Not that hard, right? It’s also roughly the same size as the standard form, so no trouble there either. Oh, and in case you hadn't noticed: the example above actually works...