So…

* Didn't realize I had the name and expiration field to enter as well. I thought it was just show casing the number entry. It wasn't until I came back here to HN to read comments that I realized that there was more to the demo.

* Tab order was wrong.

* 1Password couldn't fill in the data.

* No indicator telling me what credit cards you accept.

* CVV was hidden. There were several cases where I'd finished filling out the form, but couldn't change the CVV.

* Errors are not displayed. Try 10/10 expiration, and you are basically stuck. Without additional information, there is nothing to indicate anything is wrong.

* You can tab from the date to the hidden CVV and enter information there, but you don't see it. This is easily done because the automatic progression is inconsistent, so I've had to tab twice before getting to the year, and because it automatically moves me there, I end up on the CVV. This makes things really awkward.

* Overall, this was fairly confusing. I failed at entering the CC data the first time.

I spent 10 years handling CC processing, and basically living on the payment page. Keep the page clean, quick, and simple. You don't want to do anything confusing. Let them enter the CC data and move on. That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert.

The more friction you place between a customer willing to pay and the actual transaction, the less chance you have of making a sale.

Upvoting because this is so beautifully executed and I'd love to see people test this out on their checkout process.

That said, my experience indicates that this is not going to convert well.

To mirror the author's own quote:

"Every question a user has to ask themselves during the checkout process is another reason for them not to complete it."

What's presented here is a drastically different experience from the norm.

It doesn't behave the way you'd expect if you've ever bought anything else online.

Beyond that it has to load images dynamically based on card type which, on a slow or interrupted connection, will create even more confusion.

I love the concept, I love the execution, I just don't think this is going to be a conversion driver.

But I'll test it anyways.

It's a cute interaction, but for credit-card forms you want to be obvious rather than cute. Showing all the fields a user expects to fill out instills confidence and prevents questions like "where do I input my name and card expiry date?" "what about the security code?" "where is the billing address?" etc. People would typically not start filling out their credit-card details with those doubts in their minds.

One additional nitpick - it says "YourBank" at the beginning, so while I was aware this was supposed to a credit-card form because of the title of the submission, it can also be mistaken for a bank account number submission.

[Edit: original thread title was "why isn't every CC form like this?"]

Because it's completely unneeded.

Typical web designer wet dream. Fancy-schmancy visual design fluff, robbing screen real-estate and bandwidth for a freaking "credit card" background image, and will it still work even 2 or 5 years from now when all web dev standards have once again turned 180° and future browsers render stuff like this way-off or not at all? Oh it won't, but you web designer dude will happily fix this at a charge of only 1.5 man-days? Well, neat!

Don't get me wrong, it's fun to spend a week or three "optimizing" an approximate 0.000001% of your web app's UX with ideas like this. I get it. Been there, too.

I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.

>Every question a user has to ask themselves during the checkout process is another reason for them not to complete it. (http://kenkeiter.com/2013/07/21/redesigning-credit-card-inpu...)

"Wait, where do I put the CVC, name and expiration date?"

I think this is a great concept that will need a few rounds of feedback and some live testing before it's ready for prime time. Many commenters here are saying the current format will lower conversion rates, and I agree with that, but I think the problems are correctable. I would love to see conversion rates on this thing, although that's sort of a chicken-and-egg problem.

My general attitude: it's trying too hard to look exactly like a credit card, and that makes it not enough like a normal form. Dial it back a notch or two. Have the fillable areas look like normal form fields, don't be afraid to explanatory or error labels on the form, and show front & back at the same time rather than a "flip" interaction.

On my iPad the auto progression doesn't work properly and the keyboard is hidden after each field. You have to tap all over the credit card.

I gave up after the fourth extraneous tap.

So I guess "why aren't all credit card forms like this" is because people use iPads.

(In all seriousness, great idea but disappointing first impression.)

We implemented a form very similar to this about 7 years ago. (our form had light red borders around all the required fields that turned green when they had been filled, as well as some other differences). I was personally very enthusiastic about the beautiful design and thought that users would appreciate the skeuomorphism. Well, they didn't really care. If anyone was delighted by the design, it was offset by having to figure out how to use a new format of form. The form was also more difficult for us to maintain and test against different browsers. So, in the end we went back to a standard form type.

I dislike this UI because it adds more questions[1] than it takes away. "Why did it tab? Why is it loading, did I accidentally submit? Why did the tab ordering jump down, then up?" Just show me a web form and put a picture of a VISA card somewhere static.

[1] Don't Make Me Think, Steve Krug: http://www.sensible.com/dmmt.html

The part for me where it breaks down is when you have to flip the card to the back to fill in the CVC. I also hate when fields auto-tab for me. Also, why does it hide the expiration date and name fields initially?

If you paste "4111 1111 1111 1111" (with the spaces, from the very same page) it breaks.

I'll be sending you a pull request in a day or two. I work with dead, blind, hard of hearing, and visually impaired folks. I see a few places where accessibility could be improved with respect to screen readers.

Would you be open to a patch like that?

I like the general concept, but I think it relies on specific behavior to the point of being confusing.

* As others have mentioned, there's no advertising of accepted cards

* None of the empty inputs look like inputs until you tab into them. They also cease looking like inputs when you tab out. Correcting data that is not objectively invalid (e.g. expiration in the future, but wrong month) is kind of unintuitive. Someone who clicks into form fields will likely be entirely stumped by this form.

* It doesn't seem to work on mobile. On my iPhone the series of inputs were positively irritating to interact with, somehow each one only took three characters instead of four, and the lack of a tab meant I had little direction on where to go when the first four digit input disappeared.

* The CVV is clumsily poorly handled. You can actually tell in that you're breaking away from skeuomorphism to get the user to that input. It might be a better idea to show the "back" next to the card when you do the initial breakout.

I have always wanted card entry systems to know what kind of card it is - given that it's trivial to tell from the first few digits I never understood why not.

This is a great step up from that. The one thing I felt was not perfect was the multiple entry boxes for the different card types. Erasing/backspacing is not so easy. I would suggest a single entry field, and do something about adding padding spaces automagically. This also plays in to the auto-complete/form fillers these days. A credit card number is a single number, not 4 groups of numbers you copy and paste independently.

I don't think the UX is good as you think for the average user. For example, my mom (who is pretty good with a computer) would be so confused by this. I don't think she would understand that the credit card is interactive, especially after she maybe got past the first part of the credit card numbers.

I agree with others - I love the concept. However, I think for customers who are less enthusiastic and trusting in general, having a physical representation of their card built before their eyes will make them more acutely aware of the information that they're sharing, and be nervous that they're sharing it (even if they have limited reason to be nervous). In short, it will spook average customers. Maybe for a site that sold to a technology-focused crowd it would have more success though. Just my hunch.

It has the feeling of literally giving away my credit card to someone. I'm not sure that's a good thing.

Plus, I don't know anyone anywhere anymore that's confused by a few credit card fields.

Plus, tabbing from the number goes to the name field and not the expiration.

Then you'll still have the problem of probably having to enter a valid billing address on separate fields.

I don't know if this really improves anything other than the aesthetic is very pretty.

I love it. Couple of suggestions:

You should use data urls or sprites for the CSS, then you don't have the the loading image coming in with delay.

Changing stuff once you have filled out the number is hard. You have to navigate your way back through the 4 blocks, and the auto-tab and the way it reacts to arrow keys means that the cursor doesn't end up where I anticipate it.

Interesting idea.

One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them.

More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic.

I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.

This reminds me of an habit I developed: I usually input the credit card number last. I usually start selecting the card issuer, then fill out my name, billing address, expiry date and CVV.

I love the concept. I love that it's smart enough to use a regex to figure out the card type.

As others have said, some minor instructional text would help people get started. Also, making the name and expiration fields more obvious from the start (more obvious that they're fields and more obvious that they will need to be filled out) would also be helpful.

Having to click to flip the card is probably the biggest problem (though fixable). Typically when filling out a form, I suspect most people use the tab key to go from field to field. Having to go back to the trackpad/mouse and click on a spot slows things down. Maybe have the card automatically flip if you hit tab after the expiration field?

Enough with the grey text.

#contrastrebellion http://www.contrastrebellion.com/

Can't ctrl+a to select the whole card number input textfield and type over it :-/

Most non-American cards use something like "Expiry" instead of "Good Thru", but apart from that minor string difference, it's pretty awesome.

Maybe you could get rid of the text entirely, MM/YY should be enough of a cue.

Backspacing in the middle of a number triggers a behavior which is very counterintuitive, particularly with the examples provided.

Thank you for being willing to test it! This isn't something I'm making money off of, nor is it something I feel the need to ram down people's throats -- I just wanted to try something people hadn't seen before.

If it works, and people like it, great! I'm glad to have helped a little. Please let me know if you run into any trouble (my Twitter and email are on the site).

Tester #3420 here, reporting in:

Your message for disabled Javascript is really, really weird.

> Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades... > Never tell me the odds! Enable it anyway.

Write like this instead:

> You can still use this form if you have Javascript disabled or an unsupported browser. For a better experience, enable Javascript or upgrade your browser.

- You can have invalid inputs in the month field. "20" or "00" are not months.

- You can put invalid inputs in the year field.

- Tab order is wrong. Go from top left to bottom right.

Agreed, I stumbled for a second before realizing I could type a name in the card, but I would love to see stuff like this become popular.

Also, on Chrome 28/Mac, the validation flow seems to have some issues. I can put invalid months like "22" or "00" on the card without it highlighting the month. But it looks like the month needs to be accurate before it will show me my Luhn checkdigit is wrong. After playing with it, I'm not sure what exactly the flow needs to be, but I'm able to get green "Back to the other side..." messages with invalid data fairly consistently.

Other than that though, very neat!

> But I'll test it anyways.

Please do. It's true that "it doesn't behave the way you'd expect if you've ever bought anything else online", but the (somewhat rational in a business sense) fear of it is why we're stuck with things that suck, the "first designs" that got popular and that now we're too afraid to change.

Upvote for presenting a hypothesis and then committing to testing it. The only way to know for sure how well something works is to test it.

"Every question a user has to ask themselves during the checkout process is another reason for them not to complete it."

It depends what you are trying to sell. If you have used all known tricks to convince user to buy "lose 50 pounds in 2-weeks" product, then yes unusually good looking CC form nothing circa 97 can discourage user from converting. On the other hands, many times you offer product that user truly wants, and when your checkout is broken, they will send you a long explaining email, showing you how far they would go to get what they want.

>Beyond that it has to load images dynamically based on card type which on a slow or interrupted connection

I noticed that too, but thats mostly because this post > 420 upvotes. All you have to do is load them all in div style = "display: none" on body onload and viola! all are preloaded and hidden, waiting for your browser to use one from your cache.

I'm going to guess that this will actually convert better because it helps answer the most important question a user asks:

Did I enter my freaking CC number right?

For those hunt and peck typists, the larger size, the proper handling of spaces, and the ease of comparing to the actual card makes that so much easier, even for the average users.

I will note that the expiry and name input could be highlighter better - I missed the expiry until I accidentally clicked on it.

For those power shoppers who've memorized their card number, this will still work for them too.

I'd be grateful if you would be kind enough to share results after testing. Happy to sign-up to a mailing list to be notified.

>"Beyond that it has to load images dynamically based on card type which, on a slow or interrupted connection, will create even more confusion."

This actually happened when I refreshed the page while playing with it and it was replaced by a normal form. Pretty handy. I think I will also be testing it out.

Could the cards be styled via CSS to eliminate the dynamic loading of the card layout?

A good example of data stunting a product.