To that point, I would consider putting borders on all the entry fields to make it clear where user data goes. It wouldn't be as pretty, but it might be more usable.
Yes, and then I'd consider arranging them on a grid, with predictable tab order, and then I'd consider remove distracting visual ornamentation, and then...
...we have a usable, familiar, industry-tested form of data entry. =D
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.
>"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.
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.
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.
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!
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.
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"
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.
"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.
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.
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?
I wonder how important it is that the name and expiration date match up exactly where they do on the actual credit card. I think people are able to at least figure out where the name and expiration date on their CC is.
Wait, the card actually flips? I completely didn't realize that the first time around. As for the second time around, I still don't know how to flip the card. What am I missing?
I didn't realize it either, there was no indication that my expiration date wasn't valid.
By the way on the Mastercard on Chrome 28 on Win 7 it shows the CVC on the top left corner of the card so that the text overlaps with the border. On my Mastercard atleast the CVC is in the middle of the card.
My only complain is that it auto-progresses across sections of inputs (between month and year in the expiration for example) it does not auto-progress when you reach the end of one form. I found that jarring. If you are going to auto-progress in one place, you probably should across the board.
Square on iOS has had a similar input since it first came out. Its a great way to enter credit card numbers on a mobile phone where you don't have a tab key etc.
Making the whole thing look like a credit card doesn't seem necessary at all.
FYI: 4147 2011 1111 1111 triggers the special Chase Sapphire layout (number is on the back of the card, front just has your name + the Chase Sapphire (Preferred)).
I actually find the lack of any label on the CVV field a bit confusing, but maybe that's just me.
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!)
Second this. My bank does also splits the entry fields for the digits when there is a specific format, and it's a real PITA.
For those not on a ipad now, what happens is when trying to tap 5 digits in a row for 4 digit field: the keyboard disappears at the fourth tap, and the fith tap misses it's target and lands on the page.
If the 'somewhere' happens to be a link (i.e. the 'view on github' link on the left if right below the '4' when the keyboard is displayed) you get out of the page, and have to start over again. Trying to enter important information is stressful enough, getting out of the page every pack of digits and start over all again is a punishment in itself.
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.
It's a bit gimmicky but I think the subconscious (or even conscious) association people make with the card they're holding in their hand makes it less prone to mistakes and a bit easier to use. I like it.
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.
American Express used to do this when you mistyped passwords a few times and were locked out of your online account (they may still do it for membership rewards). It put text boxes in the areas for the CVV and the card number (with an Amex card in the background)
It looks good, but is completely broken when using a password manager such as Dashlane. The icons indicating auto-populating fields move all over the place, etc.
One thing lacking in this design is that without extra supporting content, it doesn't tell the user upfront what kinds of credit cards are supported. So if a user prefers to use American Express, they have to find the card and start entering a few digits before being told they have to try a different card (and then they may have some apprehension about if that other type of card is supported or not.)
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.
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.
205 comments
[ 3.1 ms ] story [ 245 ms ] threadhttp://stackoverflow.com/questions/72768/how-do-you-detect-c...
"Wait, where do I put the CVC, name and expiration date?"
...we have a usable, familiar, industry-tested form of data entry. =D
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.
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.
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.
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!
I didn't realize this until I read your comment.
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.)
I wonder if trying it on a touch device made it more natural or not.
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).
I hope that came across in my original comment - appreciate you giving us testers more fuel for the fire!
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!
Glad you liked it :)
http://en.wikipedia.org/wiki/List_of_Issuer_Identification_N...
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"
Great product, I'd use it if I had a shopping cart!
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.
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.
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.
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: And fill out the entire front.
By the way on the Mastercard on Chrome 28 on Win 7 it shows the CVC on the top left corner of the card so that the text overlaps with the border. On my Mastercard atleast the CVC is in the middle of the card.
Making the whole thing look like a credit card doesn't seem necessary at all.
I actually find the lack of any label on the CVV field a bit confusing, but maybe that's just me.
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.)
https://github.com/kenkeiter/skeuocard/issues/28
[1] http://stackoverflow.com/a/16601288/242520
For those not on a ipad now, what happens is when trying to tap 5 digits in a row for 4 digit field: the keyboard disappears at the fourth tap, and the fith tap misses it's target and lands on the page.
If the 'somewhere' happens to be a link (i.e. the 'view on github' link on the left if right below the '4' when the keyboard is displayed) you get out of the page, and have to start over again. Trying to enter important information is stressful enough, getting out of the page every pack of digits and start over all again is a punishment in itself.
[1] Don't Make Me Think, Steve Krug: http://www.sensible.com/dmmt.html
And what happens if javascript is disabled?