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).

Hi Ken, it looks great!

Unfortunately, for unrecognised card types it makes it impossible to proceed. I have just tried a maestro card number (beginning 6759) and am unable to enter any of the additional details (expiry, etc).

It may be worth adding a generic fallback for cards that are not recognised to account for unexpected edge cases.

Keep up the good work!

GREAT CATCH! Thank you. I totally missed Maestro Card as a product. I'll get it added ASAP. The fallback is a good idea, too!

Glad you liked it :)

Ken, have you seen this [1] Wikipedia page?

http://en.wikipedia.org/wiki/List_of_Issuer_Identification_N...

This list of BINs/IINs is not very accurate beyond the first two digits identifying card network.

Don't forget UnionPay either then :)

I like it I feel that this is one instance where skeumorphism goes well. I can look at my actual card and visually match what info goes where without having to be told. One thing, I think it would be simpler for a user if the card showed both sides at once, rather than requiring the user to flip it to fill out the other side.

The spirit of your post on the topic and the execution of the idea are just awesome.

I hope that came across in my original comment - appreciate you giving us testers more fuel for the fire!

One minor improvement I would make is to prefetch the backgrounds for the specific card types (Visa, MC, Amex) so that the swapping appears seamless. This is a great idea and I will totally keep it in mind for future projects.

The "flip to the other side" to fill out the CVV is great. I might provide a second button/link, appearing once the CVV is completed, that says something to the effect of "valid input, next step"

Another minor improvement (if possible) would be to load the bank's logo, when that can be determined by logo.

Great product, I'd use it if I had a shopping cart!

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.

That message seems to be intended for developers looking at this example site, thus the casualness. If you were to use this on your own site there would be no error message at all.

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!

> Agreed, I stumbled for a second before realizing I could type a name in the card

I didn't realize this until I read your comment.

This was the primary weak point in the implementation. Expecting users to recognize that they can click on the static-looking fields on the card (or relying on them to use tab to move between fields) does not pass the grandma test. It'd be great if you detected when a field had been fully filled out and moved to the next one automatically.

I think blind people / screen readers might have difficulty with this interface, too. It's important to keep accessibility in mind when designing futuristic interfaces.

If you press tab, it at least cycles through all of the input boxes on the front side in an appropriate manner, and you could probably design it to flip over on the next tab press. I'm fairly certain that would make it work with screen readers (but not positive).

It doesn't tab between the input boxes or even show the boxes until it's detected the card type based on first four digits. On initial load you get an input box with "XXXX XXXX XXXX XXXX" and nothing else. It does not look like an average credit card form and a lot of people will be confused "where do I put in my name" when they first see it.

I don't know. The current convention is always to enter the credit card number first, then the name later (usually as part of the billing address). Once you start entering your card, the rest of the information is explained nicely.

Yeah I really could have done with the tab order being a bit better. And flipping the card when tabbing would definitely help.

Those of us familiar with data entry get really used to tabbing.

It doesn't tell you if you go wrong either.

I surprisingly liked the idea and execution though (putting the other issues aside.)

Personally, sites that auto-tab to the next input drive me crazy. It makes it nearly impossible to edit if you make a mistake. Try explaining to grandma why the cursor doesn't stay where she put it!

I'm sad that I (a professional web developer for the past 7 years) failed the grandma test.

That's more of an indictment of the software than it is of you. FWIW it took me a moment too.

I'm forever failing to grok some websites, even though I've been working with and looking at them for years.

Showing real inputs until the user fills them in may be a nice compromise.

My experience on an iPad. Typed first 4 numbers of my VISA. Realized I could type in the MM and YY, then realized I could enter the name. It was a very smooth process for me - and I didn't read any text above or below before trying.

I wonder if trying it on a touch device made it more natural or not.

> 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.

Not sure why the author included that. You can easily preload the images or settle for a text-only implementation.

Or use a CSS sprite and shift the image based on the card that should be displayed.

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

A good example of data stunting a product.