What are the pros and cons of skeuomorphic design in payment transactions?

Question

The check out or payment process in an application is critical and has to perform smoothly to make the inexperienced users feel that they fill in forms correct. I’ve seen numerous of examples where user pick up a credit card and try to read the form and what goes where. Experienced user doesn’t have this problem since they’ve done this a lot and find the credit card number, valid date, name and CVC code. But to help inexperienced users I could implement a skeuomorphic GUI-design to overcome that problem and make them visually understand what goes where. I’m afraid that experienced user might not trust a payment process looking too close to the real world. This sums up to what are the pros and cons of skeuomorphic design in payment transactions?

A usual payment form looks like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The skeuomorphic equivalent form would look something like this:

^{download bmml source}

Answer 1

Interesting design, I haven't seen this before. I think credit card forms are so common that most people have few problems with them, but if you have the extra space for a form like this, I don't see why you shouldn't use this.

One thing though, I would stick with a single text input field for card number, rather than a segmented group of four. The segmented field may look easier, but introduces extra complexity during input or when making corrections (users will either have to manually advance to the next input field or fight whatever automatic behaviour you introduce when they make a mistake). With JavaScript and CSS you can easily style a single text input field so that it displays its contents segmented in blocks of four.

Answer 2

I think the pros greatly outweigh the cons (if any). Using a credit card is both visually and user friendly. I see it gaining a lot of traction in the design community, check out this link that shows a design of what you are talking about on dribbble.com:

Answer 3

If the layout on most cards is consistent (I think it is but haven't done any research) then I could see this been particularly useful to users who aren't familiar with the process. If designed and implemented in the right way I dont see it having an adverse effect on users perception of the security of the site.

One potential negative would be that the "real world" layout is not as easy to scan as it lacks alignment and proximity.

If practical I would go for a standard form with an illustration of the card layout to compliment it as this seems a happy medium that suits both expert and novice users.

Answer 4

I agree that this is an interesting concept. From a practical point of view, rather than visual design, user experience etc., remember that not all cards follow the format above. Amex for one does not have the usual 4 x 4 long number format, plus its CVC number is 4 digits long and on the front of the card. So you probably need to prompt for card type before showing the appropriate design for entering the details.

Also, most cards have more information on the front then you have detailed in your design, such as start date, issue number etc. If the layout on your design matches that on the user's card but for different fields, this could cause the wrong details to be added, e.g. start date instead of valid until date. This might be more likely with inexperienced users who will over-rely on the visual layout of your design, when these are the people you are striving to help.

I would suggest that you have a link to a more traditional web layout for those users that do not feel a benefit from your new design. (Other details such as billing address will still need to be entered in a standard forma as these are not on the physical card.)

The last thing to point out is that I'm based in the UK so what I've said above about Amex and other card details might not be true else where. Which raises the question about international and localised considerations...

Anyway, good luck and fair play for trying something new!