It could drop conversion if it fails massively, but I'm going to be pretty aggressive about intercepting and triaging bugs. The progressive enhancement side of things protects users from really bad failures, too
I'm glad you think it's beautiful. That's all I can really ever hope to hear as a designer and engineer.
Great point. I'm working on coming up with something to indicate this better -- but the responsibility for that may fall to the form which contains the input, too. Not sure if it's the job of the card to indicate which types it can be.
The goal of this design is to reduce the friction -- granted, it sounds like you had a difficult first experience, and this isn't (by far) a finished product. There are bugs: 13 of them open right now.
I know you probably won't use it -- and that's okay. I just wanted you to know I heard you :) All of the things you mentioned are things I'm actively working now to address.
> The goal of this design is to reduce the friction
And I applaud you for that!
> All of the things you mentioned are things I'm actively working now to address.
Awesome!
I should make it clear, I'm not posting this as a "OMG He's wasting his time!" As I said, I spent a decade working with this, and I can appreciate the difficulties of a frictionless payment process. I wanted to share my experience with you just in the hopes that you can do exactly what you are doing: improve it.
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).
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.
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.
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"
Good luck. Apple purposefully disables the ability to control where the keyboard is entering text. AFAIK there's no workaround (I’d love to know if there is!)
I'm glad you think it's beautiful. That's all I can really ever hope to hear as a designer and engineer.