7 ms·
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 th
by aresant 13y ago
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.
- TeMPOraL 13y ago> 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.
- Jormundir 13y agoA good example of data stunting a product.
- wf 13y ago>"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.
- grimtrigger 13y agoNot sure why the author included that. You can easily preload the images or settle for a text-only implementation.
- elliottcarlson 13y agoOr use a CSS sprite and shift the image based on the card that should be displayed.
- Hannan 13y agoAgreed, 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!
- jontas 13y ago> 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.
- EricMuller22 13y agoThis 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.
- sillysaurus 13y agoI think blind people / screen readers might have difficulty with this interface, too. It's important to keep accessibility in mind when designing futuristic interfaces.
- xymostech 13y agoIf 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).
- kenkeiter 13y agoThank 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).
- aresant 13y agoThe 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!
- supermatt 13y agoHi 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!
- kenkeiter 13y agoGREAT 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 :)
- seanmcdirmid 13y agoDon't forget UnionPay either then :)
- jhalstead 13y agoKen, have you seen this [1] Wikipedia page? http://en.wikipedia.org/wiki/List_of_Issuer_Identification_Numbers http://en.wikipedia.org/wiki/List_of_Issuer_Identification_N...
- chrisgoodrich 13y agoUpvote 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.
- echohack 13y agoTester #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.
- etler 13y agoThat 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.
- krmmalik 13y agoI'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.
- ibelimb 13y agoCould the cards be styled via CSS to eliminate the dynamic loading of the card layout?
- deleted 13y ago[deleted]
- joering2 13y ago"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.
- fragmede 13y agoI'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.