Came across this today. Those of us (re)implementing billing may find this interesting.
It’s called “Skeuocard”, and it’s a different take on the credit card info input form. It makes the input fields appears as they appear on the card, and it does AJAXy value-added things behind the scenes.
It’s on GitHub under an MIT license. The project URL is http://kenkeiter.com/skeuocard/
Very cool. Reminds me of bit of this one:
http://zdfs.com/toscani/paymentInfo/index.html
Once you have entered a valid CC number, it moves on to expiration, CVV and zip code. Try the example VISA number of: 4444 4444 4444 4444 to see what I mean.
Would definitely like to see some kind of flip or fade animate but seems infinitely more usable than most. For starters you wouldn’t have to explain what the CVV or CV2 is.
As a matter of interest, Stripe offer a similar kind of thing, without the nice visuals: https://stripe.com/blog/jquery-payment. It would be pretty easy to build your own on top of this if you wanted.
When @patio11 posted this on Twitter, I immediately thought of linking it on the forums.
We use Stripe’s query-payment to show the card type inside of the CC input.
I also plan on using it to modify tool tips for CVC code help (it’ll pop up after a few seconds not immediately).
You can see what we did here: https://test.ioffertory.com/your-campaign
And use 4242 4242 4242 4242 as the card number.
I kinda like it. Makes the user experience less boring.
It’s cool if you can insure it only on desktop for users that use the mouse, but for mobile or accessibility it does break a lot.
But, at the same point, a lot of users are now used to tabbing through forms which isn’t supported with the form (could be something that is shimmed in).
After reading more on accessibility guidelines, I generally take the point of view that accessibility features on forms benefit everyone (comfortable submit sizes, tab through, semantic input types, input keyboard type for phones/tablets).
This is a great thread! Thanks for the links!
It’s cute, but it comes at the expense of a more visually complex task which involves more clicking on arbitrary targets. I wouldn’t expect it to perform as well as a clean & simple form with clearly labeled fields and good instructions.
It might be interesting as verification beside a more traditional form.
Good looking stuff. Perhaps too good … I have a feeling I’m as a user not in control of this beastie. Not in control = scared and lost, likely to abandon it before it formats my hard drive and infects my coffee machine with its virus core.
TAB order also should be improved.
I feel it is a work of a good designer, but not an UX designer.
@rfctr I agree, it’s fun. But not a great UX in my opinion. It’s more “look what I can do with jQuery” than usable.
From my market research on checkout rates this would seem to fall into the category of driving down conversion rates.
Not to belittle the effort this took, but I wouldn’t use such a control on my own billing sites because of a fear that it may drive off a certain number of customers who may, perhaps, be “put off” by things that are not the norm during the checkout process.
Are there any specific (A/B testing, cohorted for B2B / B2C) data on efficiency comparison of these with the normal (4 textboxes) UI?
I tried playing with this for a bit the other day when @patio11 posted it on Twitter and found it to be too buggy for serious use. I like the idea I just don’t think it’s fully baked yet.
Another CC entry form I saw recently that caught my eye was the one on the sign up page at growthhacker.tv. It would need some tweaking for use with a less technical audience but the visual difference from the norm is quite appealing.
It’s great! Intuitive and beautiful.