12 ms·

Skeuocard

1066 points by gooddelta 13y ago

pjg 13y ago
I like what you guys are doing. I had this same idea when I started Noca (www.noca.com ) - precursor to stripe.com, braintree.com etc. The idea was to show the card logo bank from the BIN as the customer types the card number. Go for it. The payments User Experience needs improvement and glad you guys are doing it
fusiongyro 13y ago
It's very good, but the OCR font is going a little too far for me.
virgil_disgr4ce 13y ago
SO MUCH WHINING! Holy shit people, if you have a problem, fork the damn thing and do something about it! shakes head
kylelibra 13y ago
This is fantastic.
ape4 13y ago
Perhaps existing forms make you select the type of card as an extra check.
- larrykubin 13y ago
  I believe you can tell the type of card with a regular expression: http://stackoverflow.com/questions/72768/how-do-you-detect-credit-card-type-based-on-number http://stackoverflow.com/questions/72768/how-do-you-detect-c...
- infogulch 13y ago
  Not a very good reason, if you mistype a cc number it will most likely be completely invalid anyway.
dictum 13y ago
>Every question a user has to ask themselves during the checkout process is another reason for them not to complete it. (http://kenkeiter.com/2013/07/21/redesigning-credit-card-inputs/ http://kenkeiter.com/2013/07/21/redesigning-credit-card-inpu...) "Wait, where do I put the CVC, name and expiration date?"
- ChrisLTD 13y ago
  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.
  - tb303 13y ago
    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
- FireBeyond 13y ago
  And for bonus points, the card issuer is known from the first digits. But perhaps a copyright issue to display logos.
  - jack-r-abbit 13y ago
    I've seen the Visa, MC and AmEx logos on too many CC forms so far to think that showing their logo is a no-no.
    - rallison 13y ago
      I'm assuming he means the issuing bank, not just the Visa/MC/AmEx logos, as those ARE already displayed on the skeuocard.
      - jack-r-abbit 13y ago
mratzloff 13y ago
I really like this EXCEPT for the awful image loading. It should preload the images up front as a single sprite and swap them in and out as needed.
- nkorth 13y ago
  Yes, especially since the card type is typically in the bottom corner of the card, so for a while it just looks like it's reloading the same image.
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 ago
  A 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 ago
    Not sure why the author included that. You can easily preload the images or settle for a text-only implementation.
    - 13y ago
pytrin 13y ago
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.
marknutter 13y ago
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?
- Fuzzwah 13y ago
  So that when it detects which type of card it is the date and name fields can be placed where they are on that type card.
  - marknutter 13y ago
    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.
- deleted 13y ago
  [deleted]
- jchin 13y ago
  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?
  - frogpelt 13y ago
    If you fill in valid data for everything on the front, a "flip the card" button appears.
  - JelteF 13y ago
    You should try out the mastercard one, that one has te CCV on the back. Some others have it on the front. EDIT: And fill out the entire front.
  - ohazi 13y ago
    The flip doesn't appear to be working on Linux/Chrome. It mirrors the front side, but whatever's supposed to show up on the back never does.
0x0 13y ago
Can't ctrl+a to select the whole card number input textfield and type over it :-/
jlgreco 13y ago
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.
Camillo 13y ago
If you paste "4111 1111 1111 1111" (with the spaces, from the very same page) it breaks.
- kenkeiter 13y ago
  Thanks for the feedback, Camillo! I've got a ticket in on it, and am working on it right now. https://github.com/kenkeiter/skeuocard/issues/22 https://github.com/kenkeiter/skeuocard/issues/22
- deleted 13y ago
  [deleted]
pat2man 13y ago
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.
andrewmunsell 13y ago
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.
antidaily 13y ago
The order feels off.
andrewjshults 13y ago
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.
taspeotis 13y ago
On my iPad the auto progression doesn't work properly and the keyboard is hidden after each field. You have to tap all over the credit card. 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.)
- kenkeiter 13y ago
  That's really good feedback. I actually hadn't tested on iPad, believe it or not -- I created a ticket on it! https://github.com/kenkeiter/skeuocard/issues/28 https://github.com/kenkeiter/skeuocard/issues/28
  - jalada 13y ago
    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!)
    - taspeotis 13y ago
      This [1] suggests it can be done, but in circumstances that aren't applicable here. [1] http://stackoverflow.com/a/16601288/242520 http://stackoverflow.com/a/16601288/242520
- hrktb 13y ago
  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.
jaredsohn 13y ago
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.)
- kenkeiter 13y ago
  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.
dictum 13y ago
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.
JeremyMorgan 13y ago
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.
wmeredith 13y ago
Because it's really hard to use due to a lack of affordance letting the user know how they are supposed to interact with it.
FreshCode 13y ago
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. [1] Don't Make Me Think, Steve Krug: http://www.sensible.com/dmmt.html http://www.sensible.com/dmmt.html
nonchalance 13y ago
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)
flexd 13y ago
This looks great, but is it great for us that are good with technology or will it work for your parents too? And what happens if javascript is disabled?
bluetidepro 13y ago
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.
tonydiv 13y ago
I love the idea, but since nobody does this, the average user would be skeptical. If it were used on the iPad, people might be more comfortable, since the iPad is a new medium and (most) people accept new concepts like Square as acceptable and secure.
jasonlotito 13y ago
So… * Didn't realize I had the name and expiration field to enter as well. I thought it was just show casing the number entry. It wasn't until I came back here to HN to read comments that I realized that there was more to the demo. * Tab order was wrong. * 1Password couldn't fill in the data. * No indicator telling me what credit cards you accept. * CVV was hidden. There were several cases where I'd finished filling out the form, but couldn't change the CVV. * Errors are not displayed. Try 10/10 expiration, and you are basically stuck. Without additional information, there is nothing to indicate anything is wrong. * You can tab from the date to the hidden CVV and enter information there, but you don't see it. This is easily done because the automatic progression is inconsistent, so I've had to tab twice before getting to the year, and because it automatically moves me there, I end up on the CVV. This makes things really awkward. * Overall, this was fairly confusing. I failed at entering the CC data the first time. I spent 10 years handling CC processing, and basically living on the payment page. Keep the page clean, quick, and simple. You don't want to do anything confusing. Let them enter the CC data and move on. That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert. The more friction you place between a customer willing to pay and the actual transaction, the less chance you have of making a sale.
- timdorr 13y ago
  > That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert. Exactly. This isn't a usability improvement, it's fluff. If you want to see an actual usability improvement, look at what Stripe has done with jQuery.payment: https://github.com/stripe/jquery.payment https://github.com/stripe/jquery.payment A good example is in their Checkout javascript component: https://stripe.com/docs/checkout https://stripe.com/docs/checkout
  - jasonlotito 13y ago
    Even that form fails. The expiration date is where it falls down, failing to allow for auto-completion. Also, again, it doesn't show you the accepted credit cards. The error checking is delayed until you click on the button (which also means the error correcting is delayed as well). I didn't spend too much time with it. I should also point out that this seems to be just one part of the checkout process, so there are cases where it would not work (though that's probably not the intended use-case for modal form).
untangle 13y ago
I think that this is very clever. Part of the value is the entertainment that it provides in a nominally soulcrushingly-dull task. The major flaw (fail) for me is that LastPass doesn't know what to do with it. Still, I passed to our dev team for consideration.
NittLion78 13y ago
Diner's Club still exists??
umsm 13y ago
I feel like if we were to implement this on our ecommerce site, we would loose millions. That said, it does have potential for displaying saved credit card information in a nice layout. As for the input, the standard forms that we grew used to are probably here to stay for a little longer.
kin3tic 13y ago
Because there's no indication that I can click in those other fields? My mother would look at this and be instantly confused.
aasarava 13y ago
I love the concept. I love that it's smart enough to use a regex to figure out the card type. As others have said, some minor instructional text would help people get started. Also, making the name and expiration fields more obvious from the start (more obvious that they're fields and more obvious that they will need to be filled out) would also be helpful. Having to click to flip the card is probably the biggest problem (though fixable). Typically when filling out a form, I suspect most people use the tab key to go from field to field. Having to go back to the trackpad/mouse and click on a spot slows things down. Maybe have the card automatically flip if you hit tab after the expiration field?
- kenkeiter 13y ago
  Definitely a good idea! I've got a ticket in on it, and will spend some time thinking about a well-designed solution: https://github.com/kenkeiter/skeuocard/issues/25 https://github.com/kenkeiter/skeuocard/issues/25
eli 13y ago
I wouldn't use a form where the fields displayed change as you enter things. That said, I totally agree with the premise. I'm totally baffled why so many forms require you to unnecessarily select a card type or insist that you enter a number with spaces or only without spaces.
dredmorbius 13y ago
Enough with the grey text. #contrastrebellion http://www.contrastrebellion.com/ http://www.contrastrebellion.com/
- DArcMattr 13y ago
  And the ultra-lightweight typeface hurts readability even more.
jakub_g 13y ago
One issue I see is that very frequently on many pages there's not only distinction between say Mastercard or Visa, but also between different types of them. If you have Mastercard FooCompany Partner Card, then you pay less commission etc. Not sure if those partner types can be confronted with a regex (anyone from CC company there? :) Usually those granular types are on a select list, if one chooses badly, she gots "transaction refused" without any more info (clearly not nice).
pdenya 13y ago
I like it except for the card flip with the hidden field on the back. Maybe show back and front at the same time with 2 cards.
gohrt 13y ago
"simply enter your card number" It's horribly wrong to even suggest that. The instructions should say "type 4111.... I don't want your credit card number", and should pop up an error if a valid checksummed card number is entered. Don't miss an opportunity to help people lean safe habits.
lmkg 13y ago
I think this is a great concept that will need a few rounds of feedback and some live testing before it's ready for prime time. Many commenters here are saying the current format will lower conversion rates, and I agree with that, but I think the problems are correctable. I would love to see conversion rates on this thing, although that's sort of a chicken-and-egg problem. My general attitude: it's trying too hard to look exactly like a credit card, and that makes it not enough like a normal form. Dial it back a notch or two. Have the fillable areas look like normal form fields, don't be afraid to explanatory or error labels on the form, and show front & back at the same time rather than a "flip" interaction.
iloveyouocean 13y ago
We implemented a form very similar to this about 7 years ago. (our form had light red borders around all the required fields that turned green when they had been filled, as well as some other differences). I was personally very enthusiastic about the beautiful design and thought that users would appreciate the skeuomorphism. Well, they didn't really care. If anyone was delighted by the design, it was offset by having to figure out how to use a new format of form. The form was also more difficult for us to maintain and test against different browsers. So, in the end we went back to a standard form type.
debian69 13y ago
I found it awkward and annoying to use , so not a winner. Its a good idea but unfortunately it just doesn't come off , keep on trying though.
atsaloli 13y ago
That's beautiful. Good job!
kposehn 13y ago
Fantastic. I can think of all sorts of ways for it to drop conversions if it fails, but it is so perfectly done that I kind of don't care. I'm going to keep an eye on this because it has the potential to really increase the comfort people have when entering a credit card. And because it is beautiful.
- kenkeiter 13y ago
  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.
sarme 13y ago
Looks nice and I'm glad to see someone rethinking this interface. Not something I'd use right now. It's too clunky compared to just having some textboxs on the page. I'm not a fan of skeuomorphism in general though, so I'm probably a hard sell. Doesn't mean you shouldn't keep trying. Thanks for putting this out there. I love the article, btw.
cyrilga 13y ago
I love this idea and I will test it for sure! I will let you know when I do. For consistency I will also add a letter background to get the billing address. Nice work mate!
tomasien 13y ago
Stripes form for iOS is the GOAT
jaredstenquist 13y ago
I agree with many that this is very well done. I would like to see some usability tests to see if there would be as much confusion as I expect. Without great experiments like these, there would be no progression. Kudos to Ken.
rorrr2 13y ago
The main problem, and many designers make that mistake, is that you're modeling a physical thing inside an app for no good reason. Other than the nice visuals it doesn't help anything. As a designer, you should think of how to make the process of entering the CC more efficient and less distracting, so your conversions don't go down the drain. A simple clean design with standard input fields will outdo your pretty design any day of the week. p.s. Does your design even work if JS is disabled?
- josho 13y ago
  > The main problem ... is that you're modeling a physical thing inside an app for no good reason. There is a very good reason to model the physical card. On the assumption that most folks enter their CC information by taking the card out of their wallet & copying the information from the card into the form. Then for those folks following the physical object makes it easier for the user to locate the expiry date & CCV code on the back. I assume that folks like us that use CC auto-fill tools are a minority. And yes for us this is totally unnecessary. PS. Do any non-tech savvy people disable JS? And if so, why?
  - jarek 13y ago
    The number of people who don't know where the CVV code is located is dwarfed by the number of people who are roughly familiar with their card and would instead be confused by an unfamiliar-looking form. You learn where the CVV is the first time you successfully buy something online. You learn how this specific form design works the first time you enter a website that uses it. Which do you think is going to be happening more frequently?
awj 13y ago
I like the general concept, but I think it relies on specific behavior to the point of being confusing. * As others have mentioned, there's no advertising of accepted cards * None of the empty inputs look like inputs until you tab into them. They also cease looking like inputs when you tab out. Correcting data that is not objectively invalid (e.g. expiration in the future, but wrong month) is kind of unintuitive. Someone who clicks into form fields will likely be entirely stumped by this form. * It doesn't seem to work on mobile. On my iPhone the series of inputs were positively irritating to interact with, somehow each one only took three characters instead of four, and the lack of a tab meant I had little direction on where to go when the first four digit input disappeared. * The CVV is clumsily poorly handled. You can actually tell in that you're breaking away from skeuomorphism to get the user to that input. It might be a better idea to show the "back" next to the card when you do the initial breakout.
kinkora 13y ago
I have all 3 cards (AmEx, Visa, Mastercard) and I can see the full form and along with the validations, given an AmEx card. Is there any particular reason why the same can't be done with the Visa and Mastercard? Regardless, fantastic piece of code! Will definitely think of incorporating this.
njloof 13y ago
Too long to load. Failed loading first time on iPhone. Keep It Simple.
dhruvkaran 13y ago
Thank you for sharing this. It's beautiful.
pascalo 13y ago
I love it. Couple of suggestions: You should use data urls or sprites for the CSS, then you don't have the the loading image coming in with delay. Changing stuff once you have filled out the number is hard. You have to navigate your way back through the 4 blocks, and the auto-tab and the way it reacts to arrow keys means that the cursor doesn't end up where I anticipate it.
dualogy 13y ago
[Edit: original thread title was "why isn't every CC form like this?"] Because it's completely unneeded. Typical web designer wet dream. Fancy-schmancy visual design fluff, robbing screen real-estate and bandwidth for a freaking "credit card" background image, and will it still work even 2 or 5 years from now when all web dev standards have once again turned 180° and future browsers render stuff like this way-off or not at all? Oh it won't, but you web designer dude will happily fix this at a charge of only 1.5 man-days? Well, neat! Don't get me wrong, it's fun to spend a week or three "optimizing" an approximate 0.000001% of your web app's UX with ideas like this. I get it. Been there, too. I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.
- mnicole 13y ago
  Agreed. As a designer, I don't want to waste space with this for two form inputs, not including the CVV. On pages asking for your CC information, there's generally a lot more than just this going on, and the possibility it creates confusion for those who think it is merely a graphic representing a card, and not part of the process itself, during the most important aspect of the sale just doesn't fly with me.
- PhasmaFelis 13y ago
  I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it. Isn't it a good thing, if people are more responsible with their money? I mean, yes, most web merchants would be much happier if all their customers spent the diaper bill and the mortgage payment on product, but I don't think you're supposed to say that out loud on a public forum. It's considered gauche.
dools 13y ago
The field formatting stuff is great, but I think the interface to fill in the data on the card is monumentally confusing. I do, however, like the idea of offering a "live preview" of data filled in via a normal credit card form (using the stripe checkout library for example which does all the nice card type detection and input formatting stuff for you). This type of "preview" could also be useful in a confirmation step, ie. show the front and back of the card so the user can confirm it looks okay (I don't think there would be much advantage in "flipping" back and forth between front and back, though).
sergiotapia 13y ago
I'm 23 years young and I cannot read your text. Why is your background white and your text light-gray?
artag 13y ago
I love this. couple of things you may want to test - either show all the fields (cc number, exp, name etc) by default, or dont show the name, expiration fields until the credit card number has been filled... its slightly surprising that the other fields show up after entering 5 or 6 digits... also, it is not very clear that I can click and enter the name, expiration date (as it was for cc number)... you may want to move the user directly to the next field after they have entered the previous field.
andrewhillman 13y ago
After the last number is entered, you should auto focus the NAME field, then EXP DATE or the purchaser won't know what to do. People may think... hey, it guess my card type, how come it's not automatically showing my name?
smiddereens 13y ago
Naysayers aside I think it'd be neat if it went even further and switched to an IIN-specific layout.
yackob03 13y ago
You could two-way bind this with a traditional payment form and end up with something that's useful in the traditional case (feedback about whether the data you're typing is going in the right place), and may delight users who understand what they're seeing and choose to interact with it.
renownedmedia 13y ago
It likes my month of 99
brento 13y ago
The security code on the backside could use some improving on how it looks. Other than that, this is a really cool idea!
kingi 13y ago
FYI: http://ux.stackexchange.com/questions/33411/what-are-the-pros-and-cons-of-skeuomorphic-design-in-payment-transactions http://ux.stackexchange.com/questions/33411/what-are-the-pro...
analog31 13y ago
I never thought of this before, but the first 4 digits of my credit card number revealing the issuing bank seems insecure to me. That's not a fault of the op's program, of course.
JoshTriplett 13y ago
Interesting idea. One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them. More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic. I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.
bsimpson 13y ago
I have a bit of a pet peeve for apps that try to customize form fields, because they almost always get the corner cases wrong. Here, for instance, select all doesn't work as expected. (In fact, selection doesn't work at all. Skeuocard, like many overly-clever widgets, will overwrite your selection to put the cursor where it thinks it should go.
yuletide666 13y ago
Looks great, but having to flip the card over to enter the CVV code is a huge usability hit for me.
bsimpson 13y ago
I believe there's an algorithm to determine if a card number is valid (before determining if the other credentials are correct). Implementing that would probably be the most useful thing you could do in Skeuocard, as it helps people find typos in an otherwise inscrutable list of numbers.
- roryokane 13y ago
  It already does that. The credit card number has a red outline (box-shadow) if it is invalid. At least it did for me with the number 4555555555555555.
- nwh 13y ago
  It's called the Luhn algorithm, and no, the site doesn't seem to use it. https://en.wikipedia.org/wiki/Luhn_algorithm https://en.wikipedia.org/wiki/Luhn_algorithm
aneth4 13y ago
Beautiful project. I agree with others who don't think this will drive conversion - who knows... I would be concerned about reducing conversions though. Unfamiliarity can be scary. One annoyance for me - I can't hit Command-A to select everything and start over. I'm also annoyed generally by auto-advancing text fields, though this implementation seems to work around some of the issues.
sytelus 13y ago
Entering CC info is last thing user does and that's the step you don't want to mess up - ever! This is one scenario where you want to stick to boring, well-accepted, well-known, highly familier UX and avoid performing fancy tricks because there could always be some case where it doesn't work as expected. For example, I tried to enter random numbers in this UX and I did not got any response that numbers were bad. Even worse, it did not enabled MM/DD. For some unknown CC this would mean loss of customer that you worked so hard to compete and ultimately acquire.
gboone42 13y ago
I'm pretty sure Bonobos uses something like this. Really slick.
ChrisNorstrom 13y ago
Very nice! To make it better: - ALL of the inputs should look like inputs and only after a user has put in their information should the input ui disappear and the text be shown as it is on a real credit card. Otherwise the ability to enter your name and expiration is ambiguous. - I don't like how AFTER you enter your full credit card number, the input fields become segregated, trying to change the credit card number becomes difficult as you now have to click on each of the 4 new text fields to enter a new credit card number. (If a card fails to go through a user might try to use a new one). Yes you can just hold down BackSpace and it will travel from field to field deleting the number but that's not obvious for a user to figure out. Don't segregate the numbers into separate fields just leave them in one.
ryanobjc 13y ago
I have always wanted card entry systems to know what kind of card it is - given that it's trivial to tell from the first few digits I never understood why not. This is a great step up from that. The one thing I felt was not perfect was the multiple entry boxes for the different card types. Erasing/backspacing is not so easy. I would suggest a single entry field, and do something about adding padding spaces automagically. This also plays in to the auto-complete/form fillers these days. A credit card number is a single number, not 4 groups of numbers you copy and paste independently.
205guy 13y ago
There's a lot of negative reactions on here, and some of them might be valid (unfamiliarity, any friction reduces sales). But I liked the concept. The "flip over for CVC" worked for me on Firefox, and that was an elegant solution. I think a lot of the criticism could be avoided by just making it static: don't load the image and redraw the card based on the input numbers. It then boils down to, essentially, the image of a generic card with some generic fields on it. Add some red text for fields that require input, and I think it's an elegant way to guide people when entering CC info. I'd be interested if anyone did A/B testing with this variant (and others) against regular forms.
- jarek 13y ago
  > The "flip over for CVC" worked for me on Firefox, and that was an elegant solution. What problem is it a solution for?
cheesylard 13y ago
This is really good. However, there is a few things that makes me not want to use it. Firstly, no security code. Secondly, it's hard to tell which fields aren't being filled out. Especially the YOUR NAME in particular. Maybe you should make these fields red, or when you complete a field it automatically goes to the next field. For example, when you finish typing in your credit card number the cursor automatically goes to the expiration date, and when you finish typing the expiration date it automatically goes to the name. Just a suggestion.
dpcan 13y ago
It has the feeling of literally giving away my credit card to someone. I'm not sure that's a good thing. Plus, I don't know anyone anywhere anymore that's confused by a few credit card fields. Plus, tabbing from the number goes to the name field and not the expiration. Then you'll still have the problem of probably having to enter a valid billing address on separate fields. I don't know if this really improves anything other than the aesthetic is very pretty.
keerthiko 13y ago
This is amazing. I do think there's a lack of breaking the norm in web practices (for several good reasons, but not enough), resulting in us not taking advantage of what the most amazing newest iterations of the internet can offer. This is a good change in the right direction. I'm sure there'll be kinks, but fixable kinks. NB: I comment on amazing HN submissions (Show HNs usually) primarily so that I can find these tools again by browsing my comments from my profile when I feel the need to use them. This is primarily a comment to that end. Thank you so much for this Ken!
baronwen 13y ago
hellow
baronwen 13y ago
hellow
justinph 13y ago
Very nice work. I've done lots of work with credit card fields because I work for a large non-profit that depends on credit card donations. I might just use this in the next iteration of our form. Good idea doing the detection in realtime. My only gripe would be that it doesn't innately explain which cards are acceptable... E.g., you might not accept Diners Club and Discover, but do want to accept Visa, MC, and Amex. Having little icons there make that more explainable. We did it like that on our contribution form: https://contribute.publicradio.org/contribute.php https://contribute.publicradio.org/contribute.php
Ackley 13y ago
I don't think it's a good idea... but at least it should look exactly like my credit card.
robflynn 13y ago
I'll be sending you a pull request in a day or two. I work with dead, blind, hard of hearing, and visually impaired folks. I see a few places where accessibility could be improved with respect to screen readers. Would you be open to a patch like that?
- YcombRegBroken 13y ago
  I swear I'm not a grammar nazi, but I did just spend the past 10 minutes thinking about ideal user interfaces for zombies and vampires. Thanks for that...
  - dragonwriter 13y ago
    Not to be a word choice nazi, but I think you mean either "word choice nazi" or "spelling nazi" rather than "grammar nazi", as the post you responded to was grammatically correct but apparently used "dead" in place of "deaf".
  - robflynn 13y ago
    Hahaha.... I was half asleep when I wrote that. That's pretty amazing. Thank you for the laugh. :)
georgebonnr 13y ago
I agree with others - I love the concept. However, I think for customers who are less enthusiastic and trusting in general, having a physical representation of their card built before their eyes will make them more acutely aware of the information that they're sharing, and be nervous that they're sharing it (even if they have limited reason to be nervous). In short, it will spook average customers. Maybe for a site that sold to a technology-focused crowd it would have more success though. Just my hunch.
starmole 13y ago
Small bug report: This works very poorly (not useable) in Chrome Version 21.0.1180.90, which is the last one available on macosx 10.5. You probably want to fall back to form fields on untested browsers.
Qantourisc 13y ago
Failure on copy-paste. Fix it ! :) And try to keep it in 1 box. Perfectly possible without hurting functionality: Just use css word-spacing. (And auto-add spaces where needed.)
jlengrand 13y ago
What suprise me most is why the heck has it not been the DEFAULT way to do this for years!? Disruptive, so it might frighten some users. But so awesome. .. .
BasDirks 13y ago
Nitpick: the backgrounds are a whopping 992 × 624, ~180 KB. This makes loading and rendering not as smooth as it could be.
SeanLuke 13y ago
Backspacing in the middle of a number triggers a behavior which is very counterintuitive, particularly with the examples provided.
andygates 13y ago
That's so clever it ticks my "creepy" box. Well done... sorta.
srinivasanv 13y ago
Most non-American cards use something like "Expiry" instead of "Good Thru", but apart from that minor string difference, it's pretty awesome. Maybe you could get rid of the text entirely, MM/YY should be enough of a cue.
asselinpaul 13y ago
I had this idea a while back, didn't execute well: https://github.com/asselinpaul/cc_validate https://github.com/asselinpaul/cc_validate
- reledi 13y ago
  From your experience, why didn't it execute well?
  - asselinpaul 13y ago
    I didn't execute it well, it looked bad but I was 15 or 16 back then.
kokakola 13y ago
does this work for custom cards?
Gonzih 13y ago
Really nice idea and implementation. Lovely thing. But I will never use it on real product. Makes easier to match on request (since you know what library will be required from server) and patch it on the fly. So credit card data can be stolen.
nfoz 13y ago
This is really cute. But I hope noone ever actually uses it :) Too much guesswork and dynamism, violating important design principles IMO. But a nice demo.
zawaideh 13y ago
Nice work Ken!
6cxs2hd6 13y ago
Awesome idea. Beautiful design. Small bug: Amex cards have 4 digit CCV. Although you do show "XXXX" (4 digits) before I start typing, when I get to that field I can only type "123" (3 digits).
- 6cxs2hd6 13y ago
  Oh it's already logged as issue 34. https://github.com/kenkeiter/skeuocard/issues/34 https://github.com/kenkeiter/skeuocard/issues/34
AUmrysh 13y ago
My only suggestion is to use hinting once the card number input is complete to suggest the user then fill out the name and expiration date. Also I think when pressing tab to go to the next input, you should have the order be: card number -> expiration date -> name instead of the current order of number, name, date. It's a really slick implementation, I love the flipping animation, I used an extremely similar animation setup (face front/face back, and a flip property) on a site I built.
Nux 13y ago
Nice. Works without javascript, too!
jpswade 13y ago
It was a bit flaky on Android.
ihsw 13y ago
There's a distinct lack of support for the num pad.
nej 13y ago
Doesn't seem to be working using the keyboard numpad.
Too 13y ago
On my android with firefox it very was easy to see that the XXXX was an input-box that had to be filled in because each field had a small frame around it, i was surprised to see so many having trouble understanding it. Then i tried in my desktop browser (firefox, chrome and ie) and there there is no frame around the unfocused input fields, the numbers stand alone making it look like a static image of a credit card, except when the fields are focused. This little change made the experience much worse, i suggest always showing the frames around the fields.

1066 points by gooddelta 13y ago

pjg 13y ago

I like what you guys are doing. I had this same idea when I started Noca (www.noca.com ) - precursor to stripe.com, braintree.com etc. The idea was to show the card logo bank from the BIN as the customer types the card number. Go for it. The payments User Experience needs improvement and glad you guys are doing it

fusiongyro 13y ago

It's very good, but the OCR font is going a little too far for me.

virgil_disgr4ce 13y ago

SO MUCH WHINING! Holy shit people, if you have a problem, fork the damn thing and do something about it! shakes head

kylelibra 13y ago

This is fantastic.

ape4 13y ago

Perhaps existing forms make you select the type of card as an extra check.

larrykubin 13y ago
I believe you can tell the type of card with a regular expression: http://stackoverflow.com/questions/72768/how-do-you-detect-credit-card-type-based-on-number http://stackoverflow.com/questions/72768/how-do-you-detect-c...
infogulch 13y ago
Not a very good reason, if you mistype a cc number it will most likely be completely invalid anyway.

dictum 13y ago

>Every question a user has to ask themselves during the checkout process is another reason for them not to complete it. (http://kenkeiter.com/2013/07/21/redesigning-credit-card-inputs/ http://kenkeiter.com/2013/07/21/redesigning-credit-card-inpu...) "Wait, where do I put the CVC, name and expiration date?"

ChrisLTD 13y ago
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.
- tb303 13y ago
  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
FireBeyond 13y ago
And for bonus points, the card issuer is known from the first digits. But perhaps a copyright issue to display logos.
- jack-r-abbit 13y ago
  I've seen the Visa, MC and AmEx logos on too many CC forms so far to think that showing their logo is a no-no.
  - rallison 13y ago
    I'm assuming he means the issuing bank, not just the Visa/MC/AmEx logos, as those ARE already displayed on the skeuocard.
    - jack-r-abbit 13y ago

mratzloff 13y ago

I really like this EXCEPT for the awful image loading. It should preload the images up front as a single sprite and swap them in and out as needed.

nkorth 13y ago
Yes, especially since the card type is typically in the bottom corner of the card, so for a while it just looks like it's reloading the same image.

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 ago
A 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 ago
  Not sure why the author included that. You can easily preload the images or settle for a text-only implementation.
  - 13y ago

pytrin 13y ago

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.

marknutter 13y ago

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?

Fuzzwah 13y ago
So that when it detects which type of card it is the date and name fields can be placed where they are on that type card.
- marknutter 13y ago
  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.
deleted 13y ago
[deleted]
jchin 13y ago
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?
- frogpelt 13y ago
  If you fill in valid data for everything on the front, a "flip the card" button appears.
- JelteF 13y ago
  You should try out the mastercard one, that one has te CCV on the back. Some others have it on the front. EDIT: And fill out the entire front.
- ohazi 13y ago
  The flip doesn't appear to be working on Linux/Chrome. It mirrors the front side, but whatever's supposed to show up on the back never does.

0x0 13y ago

Can't ctrl+a to select the whole card number input textfield and type over it :-/

jlgreco 13y ago

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.

Camillo 13y ago

If you paste "4111 1111 1111 1111" (with the spaces, from the very same page) it breaks.

kenkeiter 13y ago
Thanks for the feedback, Camillo! I've got a ticket in on it, and am working on it right now. https://github.com/kenkeiter/skeuocard/issues/22 https://github.com/kenkeiter/skeuocard/issues/22
deleted 13y ago
[deleted]

pat2man 13y ago

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.

andrewmunsell 13y ago

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.

antidaily 13y ago

The order feels off.

andrewjshults 13y ago

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.

taspeotis 13y ago

On my iPad the auto progression doesn't work properly and the keyboard is hidden after each field. You have to tap all over the credit card. 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.)

kenkeiter 13y ago
That's really good feedback. I actually hadn't tested on iPad, believe it or not -- I created a ticket on it! https://github.com/kenkeiter/skeuocard/issues/28 https://github.com/kenkeiter/skeuocard/issues/28
- jalada 13y ago
  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!)
  - taspeotis 13y ago
    This [1] suggests it can be done, but in circumstances that aren't applicable here. [1] http://stackoverflow.com/a/16601288/242520 http://stackoverflow.com/a/16601288/242520
hrktb 13y ago
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.

jaredsohn 13y ago

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

kenkeiter 13y ago
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.

dictum 13y ago

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.

JeremyMorgan 13y ago

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.

wmeredith 13y ago

Because it's really hard to use due to a lack of affordance letting the user know how they are supposed to interact with it.

FreshCode 13y ago

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. [1] Don't Make Me Think, Steve Krug: http://www.sensible.com/dmmt.html http://www.sensible.com/dmmt.html

nonchalance 13y ago

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)

flexd 13y ago

This looks great, but is it great for us that are good with technology or will it work for your parents too? And what happens if javascript is disabled?

bluetidepro 13y ago

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.

tonydiv 13y ago

I love the idea, but since nobody does this, the average user would be skeptical. If it were used on the iPad, people might be more comfortable, since the iPad is a new medium and (most) people accept new concepts like Square as acceptable and secure.

jasonlotito 13y ago

So… * Didn't realize I had the name and expiration field to enter as well. I thought it was just show casing the number entry. It wasn't until I came back here to HN to read comments that I realized that there was more to the demo. * Tab order was wrong. * 1Password couldn't fill in the data. * No indicator telling me what credit cards you accept. * CVV was hidden. There were several cases where I'd finished filling out the form, but couldn't change the CVV. * Errors are not displayed. Try 10/10 expiration, and you are basically stuck. Without additional information, there is nothing to indicate anything is wrong. * You can tab from the date to the hidden CVV and enter information there, but you don't see it. This is easily done because the automatic progression is inconsistent, so I've had to tab twice before getting to the year, and because it automatically moves me there, I end up on the CVV. This makes things really awkward. * Overall, this was fairly confusing. I failed at entering the CC data the first time. I spent 10 years handling CC processing, and basically living on the payment page. Keep the page clean, quick, and simple. You don't want to do anything confusing. Let them enter the CC data and move on. That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert. The more friction you place between a customer willing to pay and the actual transaction, the less chance you have of making a sale.

timdorr 13y ago
> That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert. Exactly. This isn't a usability improvement, it's fluff. If you want to see an actual usability improvement, look at what Stripe has done with jQuery.payment: https://github.com/stripe/jquery.payment https://github.com/stripe/jquery.payment A good example is in their Checkout javascript component: https://stripe.com/docs/checkout https://stripe.com/docs/checkout
- jasonlotito 13y ago
  Even that form fails. The expiration date is where it falls down, failing to allow for auto-completion. Also, again, it doesn't show you the accepted credit cards. The error checking is delayed until you click on the button (which also means the error correcting is delayed as well). I didn't spend too much time with it. I should also point out that this seems to be just one part of the checkout process, so there are cases where it would not work (though that's probably not the intended use-case for modal form).

untangle 13y ago

I think that this is very clever. Part of the value is the entertainment that it provides in a nominally soulcrushingly-dull task. The major flaw (fail) for me is that LastPass doesn't know what to do with it. Still, I passed to our dev team for consideration.

NittLion78 13y ago

Diner's Club still exists??

umsm 13y ago

I feel like if we were to implement this on our ecommerce site, we would loose millions. That said, it does have potential for displaying saved credit card information in a nice layout. As for the input, the standard forms that we grew used to are probably here to stay for a little longer.

kin3tic 13y ago

Because there's no indication that I can click in those other fields? My mother would look at this and be instantly confused.

aasarava 13y ago

I love the concept. I love that it's smart enough to use a regex to figure out the card type. As others have said, some minor instructional text would help people get started. Also, making the name and expiration fields more obvious from the start (more obvious that they're fields and more obvious that they will need to be filled out) would also be helpful. Having to click to flip the card is probably the biggest problem (though fixable). Typically when filling out a form, I suspect most people use the tab key to go from field to field. Having to go back to the trackpad/mouse and click on a spot slows things down. Maybe have the card automatically flip if you hit tab after the expiration field?

kenkeiter 13y ago
Definitely a good idea! I've got a ticket in on it, and will spend some time thinking about a well-designed solution: https://github.com/kenkeiter/skeuocard/issues/25 https://github.com/kenkeiter/skeuocard/issues/25

eli 13y ago

I wouldn't use a form where the fields displayed change as you enter things. That said, I totally agree with the premise. I'm totally baffled why so many forms require you to unnecessarily select a card type or insist that you enter a number with spaces or only without spaces.

dredmorbius 13y ago

Enough with the grey text. #contrastrebellion http://www.contrastrebellion.com/ http://www.contrastrebellion.com/

DArcMattr 13y ago
And the ultra-lightweight typeface hurts readability even more.

jakub_g 13y ago

One issue I see is that very frequently on many pages there's not only distinction between say Mastercard or Visa, but also between different types of them. If you have Mastercard FooCompany Partner Card, then you pay less commission etc. Not sure if those partner types can be confronted with a regex (anyone from CC company there? :) Usually those granular types are on a select list, if one chooses badly, she gots "transaction refused" without any more info (clearly not nice).

pdenya 13y ago

I like it except for the card flip with the hidden field on the back. Maybe show back and front at the same time with 2 cards.

gohrt 13y ago

"simply enter your card number" It's horribly wrong to even suggest that. The instructions should say "type 4111.... I don't want your credit card number", and should pop up an error if a valid checksummed card number is entered. Don't miss an opportunity to help people lean safe habits.

lmkg 13y ago

I think this is a great concept that will need a few rounds of feedback and some live testing before it's ready for prime time. Many commenters here are saying the current format will lower conversion rates, and I agree with that, but I think the problems are correctable. I would love to see conversion rates on this thing, although that's sort of a chicken-and-egg problem. My general attitude: it's trying too hard to look exactly like a credit card, and that makes it not enough like a normal form. Dial it back a notch or two. Have the fillable areas look like normal form fields, don't be afraid to explanatory or error labels on the form, and show front & back at the same time rather than a "flip" interaction.

iloveyouocean 13y ago

We implemented a form very similar to this about 7 years ago. (our form had light red borders around all the required fields that turned green when they had been filled, as well as some other differences). I was personally very enthusiastic about the beautiful design and thought that users would appreciate the skeuomorphism. Well, they didn't really care. If anyone was delighted by the design, it was offset by having to figure out how to use a new format of form. The form was also more difficult for us to maintain and test against different browsers. So, in the end we went back to a standard form type.

debian69 13y ago

I found it awkward and annoying to use , so not a winner. Its a good idea but unfortunately it just doesn't come off , keep on trying though.

atsaloli 13y ago

That's beautiful. Good job!

kposehn 13y ago

Fantastic. I can think of all sorts of ways for it to drop conversions if it fails, but it is so perfectly done that I kind of don't care. I'm going to keep an eye on this because it has the potential to really increase the comfort people have when entering a credit card. And because it is beautiful.

kenkeiter 13y ago
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.

sarme 13y ago

Looks nice and I'm glad to see someone rethinking this interface. Not something I'd use right now. It's too clunky compared to just having some textboxs on the page. I'm not a fan of skeuomorphism in general though, so I'm probably a hard sell. Doesn't mean you shouldn't keep trying. Thanks for putting this out there. I love the article, btw.

cyrilga 13y ago

I love this idea and I will test it for sure! I will let you know when I do. For consistency I will also add a letter background to get the billing address. Nice work mate!

tomasien 13y ago

Stripes form for iOS is the GOAT

jaredstenquist 13y ago

I agree with many that this is very well done. I would like to see some usability tests to see if there would be as much confusion as I expect. Without great experiments like these, there would be no progression. Kudos to Ken.

rorrr2 13y ago

The main problem, and many designers make that mistake, is that you're modeling a physical thing inside an app for no good reason. Other than the nice visuals it doesn't help anything. As a designer, you should think of how to make the process of entering the CC more efficient and less distracting, so your conversions don't go down the drain. A simple clean design with standard input fields will outdo your pretty design any day of the week. p.s. Does your design even work if JS is disabled?

josho 13y ago
> The main problem ... is that you're modeling a physical thing inside an app for no good reason. There is a very good reason to model the physical card. On the assumption that most folks enter their CC information by taking the card out of their wallet & copying the information from the card into the form. Then for those folks following the physical object makes it easier for the user to locate the expiry date & CCV code on the back. I assume that folks like us that use CC auto-fill tools are a minority. And yes for us this is totally unnecessary. PS. Do any non-tech savvy people disable JS? And if so, why?
- jarek 13y ago
  The number of people who don't know where the CVV code is located is dwarfed by the number of people who are roughly familiar with their card and would instead be confused by an unfamiliar-looking form. You learn where the CVV is the first time you successfully buy something online. You learn how this specific form design works the first time you enter a website that uses it. Which do you think is going to be happening more frequently?

awj 13y ago

I like the general concept, but I think it relies on specific behavior to the point of being confusing. * As others have mentioned, there's no advertising of accepted cards * None of the empty inputs look like inputs until you tab into them. They also cease looking like inputs when you tab out. Correcting data that is not objectively invalid (e.g. expiration in the future, but wrong month) is kind of unintuitive. Someone who clicks into form fields will likely be entirely stumped by this form. * It doesn't seem to work on mobile. On my iPhone the series of inputs were positively irritating to interact with, somehow each one only took three characters instead of four, and the lack of a tab meant I had little direction on where to go when the first four digit input disappeared. * The CVV is clumsily poorly handled. You can actually tell in that you're breaking away from skeuomorphism to get the user to that input. It might be a better idea to show the "back" next to the card when you do the initial breakout.

kinkora 13y ago

I have all 3 cards (AmEx, Visa, Mastercard) and I can see the full form and along with the validations, given an AmEx card. Is there any particular reason why the same can't be done with the Visa and Mastercard? Regardless, fantastic piece of code! Will definitely think of incorporating this.

njloof 13y ago

Too long to load. Failed loading first time on iPhone. Keep It Simple.

dhruvkaran 13y ago

Thank you for sharing this. It's beautiful.

pascalo 13y ago

I love it. Couple of suggestions: You should use data urls or sprites for the CSS, then you don't have the the loading image coming in with delay. Changing stuff once you have filled out the number is hard. You have to navigate your way back through the 4 blocks, and the auto-tab and the way it reacts to arrow keys means that the cursor doesn't end up where I anticipate it.

dualogy 13y ago

[Edit: original thread title was "why isn't every CC form like this?"] Because it's completely unneeded. Typical web designer wet dream. Fancy-schmancy visual design fluff, robbing screen real-estate and bandwidth for a freaking "credit card" background image, and will it still work even 2 or 5 years from now when all web dev standards have once again turned 180° and future browsers render stuff like this way-off or not at all? Oh it won't, but you web designer dude will happily fix this at a charge of only 1.5 man-days? Well, neat! Don't get me wrong, it's fun to spend a week or three "optimizing" an approximate 0.000001% of your web app's UX with ideas like this. I get it. Been there, too. I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.

mnicole 13y ago
Agreed. As a designer, I don't want to waste space with this for two form inputs, not including the CVV. On pages asking for your CC information, there's generally a lot more than just this going on, and the possibility it creates confusion for those who think it is merely a graphic representing a card, and not part of the process itself, during the most important aspect of the sale just doesn't fly with me.
PhasmaFelis 13y ago
I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it. Isn't it a good thing, if people are more responsible with their money? I mean, yes, most web merchants would be much happier if all their customers spent the diaper bill and the mortgage payment on product, but I don't think you're supposed to say that out loud on a public forum. It's considered gauche.

dools 13y ago

The field formatting stuff is great, but I think the interface to fill in the data on the card is monumentally confusing. I do, however, like the idea of offering a "live preview" of data filled in via a normal credit card form (using the stripe checkout library for example which does all the nice card type detection and input formatting stuff for you). This type of "preview" could also be useful in a confirmation step, ie. show the front and back of the card so the user can confirm it looks okay (I don't think there would be much advantage in "flipping" back and forth between front and back, though).

sergiotapia 13y ago

I'm 23 years young and I cannot read your text. Why is your background white and your text light-gray?

artag 13y ago

I love this. couple of things you may want to test - either show all the fields (cc number, exp, name etc) by default, or dont show the name, expiration fields until the credit card number has been filled... its slightly surprising that the other fields show up after entering 5 or 6 digits... also, it is not very clear that I can click and enter the name, expiration date (as it was for cc number)... you may want to move the user directly to the next field after they have entered the previous field.

andrewhillman 13y ago

After the last number is entered, you should auto focus the NAME field, then EXP DATE or the purchaser won't know what to do. People may think... hey, it guess my card type, how come it's not automatically showing my name?

smiddereens 13y ago

Naysayers aside I think it'd be neat if it went even further and switched to an IIN-specific layout.

yackob03 13y ago

You could two-way bind this with a traditional payment form and end up with something that's useful in the traditional case (feedback about whether the data you're typing is going in the right place), and may delight users who understand what they're seeing and choose to interact with it.

renownedmedia 13y ago

It likes my month of 99

brento 13y ago

The security code on the backside could use some improving on how it looks. Other than that, this is a really cool idea!

kingi 13y ago

FYI: http://ux.stackexchange.com/questions/33411/what-are-the-pros-and-cons-of-skeuomorphic-design-in-payment-transactions http://ux.stackexchange.com/questions/33411/what-are-the-pro...

analog31 13y ago

I never thought of this before, but the first 4 digits of my credit card number revealing the issuing bank seems insecure to me. That's not a fault of the op's program, of course.

JoshTriplett 13y ago

Interesting idea. One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them. More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic. I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.

bsimpson 13y ago

I have a bit of a pet peeve for apps that try to customize form fields, because they almost always get the corner cases wrong. Here, for instance, select all doesn't work as expected. (In fact, selection doesn't work at all. Skeuocard, like many overly-clever widgets, will overwrite your selection to put the cursor where it thinks it should go.

yuletide666 13y ago

Looks great, but having to flip the card over to enter the CVV code is a huge usability hit for me.

bsimpson 13y ago

I believe there's an algorithm to determine if a card number is valid (before determining if the other credentials are correct). Implementing that would probably be the most useful thing you could do in Skeuocard, as it helps people find typos in an otherwise inscrutable list of numbers.

roryokane 13y ago
It already does that. The credit card number has a red outline (box-shadow) if it is invalid. At least it did for me with the number 4555555555555555.
nwh 13y ago
It's called the Luhn algorithm, and no, the site doesn't seem to use it. https://en.wikipedia.org/wiki/Luhn_algorithm https://en.wikipedia.org/wiki/Luhn_algorithm

aneth4 13y ago

Beautiful project. I agree with others who don't think this will drive conversion - who knows... I would be concerned about reducing conversions though. Unfamiliarity can be scary. One annoyance for me - I can't hit Command-A to select everything and start over. I'm also annoyed generally by auto-advancing text fields, though this implementation seems to work around some of the issues.

sytelus 13y ago

Entering CC info is last thing user does and that's the step you don't want to mess up - ever! This is one scenario where you want to stick to boring, well-accepted, well-known, highly familier UX and avoid performing fancy tricks because there could always be some case where it doesn't work as expected. For example, I tried to enter random numbers in this UX and I did not got any response that numbers were bad. Even worse, it did not enabled MM/DD. For some unknown CC this would mean loss of customer that you worked so hard to compete and ultimately acquire.

gboone42 13y ago

I'm pretty sure Bonobos uses something like this. Really slick.

ChrisNorstrom 13y ago

Very nice! To make it better: - ALL of the inputs should look like inputs and only after a user has put in their information should the input ui disappear and the text be shown as it is on a real credit card. Otherwise the ability to enter your name and expiration is ambiguous. - I don't like how AFTER you enter your full credit card number, the input fields become segregated, trying to change the credit card number becomes difficult as you now have to click on each of the 4 new text fields to enter a new credit card number. (If a card fails to go through a user might try to use a new one). Yes you can just hold down BackSpace and it will travel from field to field deleting the number but that's not obvious for a user to figure out. Don't segregate the numbers into separate fields just leave them in one.

ryanobjc 13y ago

I have always wanted card entry systems to know what kind of card it is - given that it's trivial to tell from the first few digits I never understood why not. This is a great step up from that. The one thing I felt was not perfect was the multiple entry boxes for the different card types. Erasing/backspacing is not so easy. I would suggest a single entry field, and do something about adding padding spaces automagically. This also plays in to the auto-complete/form fillers these days. A credit card number is a single number, not 4 groups of numbers you copy and paste independently.

205guy 13y ago

There's a lot of negative reactions on here, and some of them might be valid (unfamiliarity, any friction reduces sales). But I liked the concept. The "flip over for CVC" worked for me on Firefox, and that was an elegant solution. I think a lot of the criticism could be avoided by just making it static: don't load the image and redraw the card based on the input numbers. It then boils down to, essentially, the image of a generic card with some generic fields on it. Add some red text for fields that require input, and I think it's an elegant way to guide people when entering CC info. I'd be interested if anyone did A/B testing with this variant (and others) against regular forms.

jarek 13y ago
> The "flip over for CVC" worked for me on Firefox, and that was an elegant solution. What problem is it a solution for?

cheesylard 13y ago

This is really good. However, there is a few things that makes me not want to use it. Firstly, no security code. Secondly, it's hard to tell which fields aren't being filled out. Especially the YOUR NAME in particular. Maybe you should make these fields red, or when you complete a field it automatically goes to the next field. For example, when you finish typing in your credit card number the cursor automatically goes to the expiration date, and when you finish typing the expiration date it automatically goes to the name. Just a suggestion.

dpcan 13y ago

It has the feeling of literally giving away my credit card to someone. I'm not sure that's a good thing. Plus, I don't know anyone anywhere anymore that's confused by a few credit card fields. Plus, tabbing from the number goes to the name field and not the expiration. Then you'll still have the problem of probably having to enter a valid billing address on separate fields. I don't know if this really improves anything other than the aesthetic is very pretty.

keerthiko 13y ago

This is amazing. I do think there's a lack of breaking the norm in web practices (for several good reasons, but not enough), resulting in us not taking advantage of what the most amazing newest iterations of the internet can offer. This is a good change in the right direction. I'm sure there'll be kinks, but fixable kinks. NB: I comment on amazing HN submissions (Show HNs usually) primarily so that I can find these tools again by browsing my comments from my profile when I feel the need to use them. This is primarily a comment to that end. Thank you so much for this Ken!

baronwen 13y ago

hellow

baronwen 13y ago

hellow

justinph 13y ago

Very nice work. I've done lots of work with credit card fields because I work for a large non-profit that depends on credit card donations. I might just use this in the next iteration of our form. Good idea doing the detection in realtime. My only gripe would be that it doesn't innately explain which cards are acceptable... E.g., you might not accept Diners Club and Discover, but do want to accept Visa, MC, and Amex. Having little icons there make that more explainable. We did it like that on our contribution form: https://contribute.publicradio.org/contribute.php https://contribute.publicradio.org/contribute.php

Ackley 13y ago

I don't think it's a good idea... but at least it should look exactly like my credit card.

robflynn 13y ago

I'll be sending you a pull request in a day or two. I work with dead, blind, hard of hearing, and visually impaired folks. I see a few places where accessibility could be improved with respect to screen readers. Would you be open to a patch like that?

YcombRegBroken 13y ago
I swear I'm not a grammar nazi, but I did just spend the past 10 minutes thinking about ideal user interfaces for zombies and vampires. Thanks for that...
- dragonwriter 13y ago
  Not to be a word choice nazi, but I think you mean either "word choice nazi" or "spelling nazi" rather than "grammar nazi", as the post you responded to was grammatically correct but apparently used "dead" in place of "deaf".
- robflynn 13y ago
  Hahaha.... I was half asleep when I wrote that. That's pretty amazing. Thank you for the laugh. :)

georgebonnr 13y ago

I agree with others - I love the concept. However, I think for customers who are less enthusiastic and trusting in general, having a physical representation of their card built before their eyes will make them more acutely aware of the information that they're sharing, and be nervous that they're sharing it (even if they have limited reason to be nervous). In short, it will spook average customers. Maybe for a site that sold to a technology-focused crowd it would have more success though. Just my hunch.

starmole 13y ago

Small bug report: This works very poorly (not useable) in Chrome Version 21.0.1180.90, which is the last one available on macosx 10.5. You probably want to fall back to form fields on untested browsers.

Qantourisc 13y ago

Failure on copy-paste. Fix it ! :) And try to keep it in 1 box. Perfectly possible without hurting functionality: Just use css word-spacing. (And auto-add spaces where needed.)

jlengrand 13y ago

What suprise me most is why the heck has it not been the DEFAULT way to do this for years!? Disruptive, so it might frighten some users. But so awesome. .. .

BasDirks 13y ago

Nitpick: the backgrounds are a whopping 992 × 624, ~180 KB. This makes loading and rendering not as smooth as it could be.

SeanLuke 13y ago

Backspacing in the middle of a number triggers a behavior which is very counterintuitive, particularly with the examples provided.

andygates 13y ago

That's so clever it ticks my "creepy" box. Well done... sorta.

srinivasanv 13y ago

Most non-American cards use something like "Expiry" instead of "Good Thru", but apart from that minor string difference, it's pretty awesome. Maybe you could get rid of the text entirely, MM/YY should be enough of a cue.

asselinpaul 13y ago

I had this idea a while back, didn't execute well: https://github.com/asselinpaul/cc_validate https://github.com/asselinpaul/cc_validate

reledi 13y ago
From your experience, why didn't it execute well?
- asselinpaul 13y ago
  I didn't execute it well, it looked bad but I was 15 or 16 back then.

kokakola 13y ago

does this work for custom cards?

Gonzih 13y ago

Really nice idea and implementation. Lovely thing. But I will never use it on real product. Makes easier to match on request (since you know what library will be required from server) and patch it on the fly. So credit card data can be stolen.

nfoz 13y ago

This is really cute. But I hope noone ever actually uses it :) Too much guesswork and dynamism, violating important design principles IMO. But a nice demo.

zawaideh 13y ago

Nice work Ken!

6cxs2hd6 13y ago

Awesome idea. Beautiful design. Small bug: Amex cards have 4 digit CCV. Although you do show "XXXX" (4 digits) before I start typing, when I get to that field I can only type "123" (3 digits).

6cxs2hd6 13y ago
Oh it's already logged as issue 34. https://github.com/kenkeiter/skeuocard/issues/34 https://github.com/kenkeiter/skeuocard/issues/34

AUmrysh 13y ago

My only suggestion is to use hinting once the card number input is complete to suggest the user then fill out the name and expiration date. Also I think when pressing tab to go to the next input, you should have the order be: card number -> expiration date -> name instead of the current order of number, name, date. It's a really slick implementation, I love the flipping animation, I used an extremely similar animation setup (face front/face back, and a flip property) on a site I built.

Nux 13y ago

Nice. Works without javascript, too!

jpswade 13y ago

It was a bit flaky on Android.

ihsw 13y ago

There's a distinct lack of support for the num pad.

nej 13y ago

Doesn't seem to be working using the keyboard numpad.

Too 13y ago

On my android with firefox it very was easy to see that the XXXX was an input-box that had to be filled in because each field had a small frame around it, i was surprised to see so many having trouble understanding it. Then i tried in my desktop browser (firefox, chrome and ie) and there there is no frame around the unfocused input fields, the numbers stand alone making it look like a static image of a credit card, except when the fields are focused. This little change made the experience much worse, i suggest always showing the frames around the fields.