5 ms·

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 he

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).
- sturmeh 13y ago
  You might even say, it's skeuomorphism.
  - deleted 13y ago
    [deleted]
- Volpe 13y ago
  > Exactly. This isn't a usability improvement, it's fluff. Do you have any data that backs that up? (excluding call-to-authority and anec-data)
  - wikwocket 13y ago
    If you Google "checkout conversion remove field," you should see a number of articles on this, including some with A/B tests. The trend seems to be that the fewer fields shown or required, the better conversion is.
    - Volpe 13y ago
      Doesn't that make this field better? Not worse. So the data says this field will convert more?
  - jalfresi 13y ago
    Sure, he's called Jacob Neilson and he wrote a shit tonne of books on the subject about ten years ago. Although I understand that its the norm to ignore previous computing history for the illusion of inventing something, more so if it's pretty.
    - hussong 13y ago
      It's Jakob Nielsen. While he can be a bit of a smartass sometimes and is not undisputed in the usability community, his books are definitely worth reading.
    - Volpe 13y ago
      Guess you ignored the "excluding call-to-authority" part of my post. No one has tested this form. So just putting it down seems premature. I'd prefer people to be data driven, than just cargo culters.
kenkeiter 13y ago
The goal of this design is to reduce the friction -- granted, it sounds like you had a difficult first experience, and this isn't (by far) a finished product. There are bugs: 13 of them open right now. I know you probably won't use it -- and that's okay. I just wanted you to know I heard you :) All of the things you mentioned are things I'm actively working now to address.
- jasonlotito 13y ago
  > The goal of this design is to reduce the friction And I applaud you for that! > All of the things you mentioned are things I'm actively working now to address. Awesome! I should make it clear, I'm not posting this as a "OMG He's wasting his time!" As I said, I spent a decade working with this, and I can appreciate the difficulties of a frictionless payment process. I wanted to share my experience with you just in the hopes that you can do exactly what you are doing: improve it. =)
coldtea 13y ago
>That fancy CC form will NOT sell a single thing. It will however stop people from paying. Citation needed. >It does nothing to convert. Beside the point. Any other credit card form I've seen does nothing to convert either -- and it's not it's job: by the time I'm entering my credit card details, I'm already "converted". Most of the objections are dead simple to fix (tab order, 1password), and address nothing inherently wrong with the core idea.
- MiguelHudnandez 13y ago
  > by the time I'm entering my credit card details, I'm already "converted". No, when you finish entering your credit card information, you're "converted." I have been ready to purchase but abandoned orders because I was doing multiple things. By the time I remembered to go back, I didn't feel as strong a compulsion to purchase the product. In some of these cases, if checking out were easier, I would've been done and I wouldn't have felt strongly enough to cancel the order. Shitty forms cost you money even when it's the last form you have your users fill out.
- jamieb 13y ago
  Hi. My team is responsible for the checkout process at a large company. I won't give exact numbers, but more than $100m goes through our teams two pages. >by the time I'm entering my credit card details, I'm already "converted". Our numbers say otherwise. Optimization of our checkout page is a huge deal any change, even text, comes under scrutiny, and for good (i.e. measurable) reason. Would I put this demo on our page? If the bugs and confusion can be fixed, I might try it for a very small test group and see what happens. Not sure the confusion can be fixed though.
- jalfresi 13y ago
  >>That fancy CC form will NOT sell a single thing. It will however stop people from paying. >Citation needed. I'm getting pretty tired of this attitude. Don't get me wrong, I'm all for healthy skepticism, but if you can't grasp the basic understanding that the biggest hurdle to conversion is friction in the purchasing process then your in the wrong business mate. This isn't rocket science.
anigbrowl 13y ago
It made perfect sense to me and I would far rather use this. So there are bugs, who cares? It's an alpha, of course there are going to be bugs.
nkurz 13y ago
Jason: Certainly the "standard" form still has some friction and loss. Could some other arrangement have less? And isn't it great that someone else is experimenting to try to find it, so you only have to switch once it's established to actually be better? Adding to Jason's issue list: * Fill out everything including CVV on back, erase everything on front, option to switch to the blank back persists. * Not sure where it's supposed to be, but backside CVV for Mastercard seems positioned partially off the top left of the card on Chrome/Mac. * Card numbers highlights existing digits when tabbing/shift-tabbing, but expiration date does not. * If you Tab to a card number field with less than 4 digits, they are selected and typed over. If it autoadvances, they are not selected and your cursor is placed before them. This then does not autoadvance. * D/DD in expiration followed by Tab appears to be accepted but does not work. * Entering complete invalid Mastercard number, then clicking and entering expiration date (without name), then Tab leaves you apparently nowhere. But it's actually on the CVV, so if you type something to see where it goes, odd things happen. * Invalid date format, or expired date is not highlighted until you type the first character of name. If out of order, you have to erase previously entered name completely before highlighting recurs. * Tab from last field takes you off the form with no resolution. * Enter four digits in card number field, position cursor in middle, then tab to next field. Pressing delete erases the number where you last had the cursor, not the last digit. * Enter 4 numbers in card field, autoadvancing to next field. Shift-tab back. Tab forward. Delete erases all 4 number in previous field, rather than last as expected. I think it's a nifty idea, visually pretty when it works, potentially useful as a standard, but right now I feel like I hit bugs faster than I can type them up. Hard to say how useful it will be when actually working, but seems worth finishing to see.
- jasonlotito 13y ago
  > Certainly the "standard" form still has some friction and loss. Yes. > Could some other arrangement have less? And isn't it great that someone else is experimenting to try to find it, so you only have to switch once it's established to actually be better? Yes. I say as much in a reply to the OP here: https://news.ycombinator.com/item?id=6143898 https://news.ycombinator.com/item?id=6143898
pbreit 13y ago
I wanted to like it but I'm not sure it's really better and could be much worse merely from being so different from every other method. That said, there are some problems: * Amex CVV doesn't allow the proper 4 digits * Tab-order is weird * Confusing because sometimes you tab to next field, sometimes you don't * Name usually not needed since already entered elsewhere (inexplicable why so many checkout forms do this) * Difficult to change card number

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).
sturmeh 13y ago
You might even say, it's skeuomorphism.
- deleted 13y ago
  [deleted]
Volpe 13y ago
> Exactly. This isn't a usability improvement, it's fluff. Do you have any data that backs that up? (excluding call-to-authority and anec-data)
- wikwocket 13y ago
  If you Google "checkout conversion remove field," you should see a number of articles on this, including some with A/B tests. The trend seems to be that the fewer fields shown or required, the better conversion is.
  - Volpe 13y ago
    Doesn't that make this field better? Not worse. So the data says this field will convert more?
- jalfresi 13y ago
  Sure, he's called Jacob Neilson and he wrote a shit tonne of books on the subject about ten years ago. Although I understand that its the norm to ignore previous computing history for the illusion of inventing something, more so if it's pretty.
  - hussong 13y ago
    It's Jakob Nielsen. While he can be a bit of a smartass sometimes and is not undisputed in the usability community, his books are definitely worth reading.
  - Volpe 13y ago
    Guess you ignored the "excluding call-to-authority" part of my post. No one has tested this form. So just putting it down seems premature. I'd prefer people to be data driven, than just cargo culters.

kenkeiter 13y ago

The goal of this design is to reduce the friction -- granted, it sounds like you had a difficult first experience, and this isn't (by far) a finished product. There are bugs: 13 of them open right now. I know you probably won't use it -- and that's okay. I just wanted you to know I heard you :) All of the things you mentioned are things I'm actively working now to address.

jasonlotito 13y ago
> The goal of this design is to reduce the friction And I applaud you for that! > All of the things you mentioned are things I'm actively working now to address. Awesome! I should make it clear, I'm not posting this as a "OMG He's wasting his time!" As I said, I spent a decade working with this, and I can appreciate the difficulties of a frictionless payment process. I wanted to share my experience with you just in the hopes that you can do exactly what you are doing: improve it. =)

coldtea 13y ago

>That fancy CC form will NOT sell a single thing. It will however stop people from paying. Citation needed. >It does nothing to convert. Beside the point. Any other credit card form I've seen does nothing to convert either -- and it's not it's job: by the time I'm entering my credit card details, I'm already "converted". Most of the objections are dead simple to fix (tab order, 1password), and address nothing inherently wrong with the core idea.

MiguelHudnandez 13y ago
> by the time I'm entering my credit card details, I'm already "converted". No, when you finish entering your credit card information, you're "converted." I have been ready to purchase but abandoned orders because I was doing multiple things. By the time I remembered to go back, I didn't feel as strong a compulsion to purchase the product. In some of these cases, if checking out were easier, I would've been done and I wouldn't have felt strongly enough to cancel the order. Shitty forms cost you money even when it's the last form you have your users fill out.
jamieb 13y ago
Hi. My team is responsible for the checkout process at a large company. I won't give exact numbers, but more than $100m goes through our teams two pages. >by the time I'm entering my credit card details, I'm already "converted". Our numbers say otherwise. Optimization of our checkout page is a huge deal any change, even text, comes under scrutiny, and for good (i.e. measurable) reason. Would I put this demo on our page? If the bugs and confusion can be fixed, I might try it for a very small test group and see what happens. Not sure the confusion can be fixed though.
jalfresi 13y ago
>>That fancy CC form will NOT sell a single thing. It will however stop people from paying. >Citation needed. I'm getting pretty tired of this attitude. Don't get me wrong, I'm all for healthy skepticism, but if you can't grasp the basic understanding that the biggest hurdle to conversion is friction in the purchasing process then your in the wrong business mate. This isn't rocket science.

anigbrowl 13y ago

It made perfect sense to me and I would far rather use this. So there are bugs, who cares? It's an alpha, of course there are going to be bugs.

nkurz 13y ago

Jason: Certainly the "standard" form still has some friction and loss. Could some other arrangement have less? And isn't it great that someone else is experimenting to try to find it, so you only have to switch once it's established to actually be better? Adding to Jason's issue list: * Fill out everything including CVV on back, erase everything on front, option to switch to the blank back persists. * Not sure where it's supposed to be, but backside CVV for Mastercard seems positioned partially off the top left of the card on Chrome/Mac. * Card numbers highlights existing digits when tabbing/shift-tabbing, but expiration date does not. * If you Tab to a card number field with less than 4 digits, they are selected and typed over. If it autoadvances, they are not selected and your cursor is placed before them. This then does not autoadvance. * D/DD in expiration followed by Tab appears to be accepted but does not work. * Entering complete invalid Mastercard number, then clicking and entering expiration date (without name), then Tab leaves you apparently nowhere. But it's actually on the CVV, so if you type something to see where it goes, odd things happen. * Invalid date format, or expired date is not highlighted until you type the first character of name. If out of order, you have to erase previously entered name completely before highlighting recurs. * Tab from last field takes you off the form with no resolution. * Enter four digits in card number field, position cursor in middle, then tab to next field. Pressing delete erases the number where you last had the cursor, not the last digit. * Enter 4 numbers in card field, autoadvancing to next field. Shift-tab back. Tab forward. Delete erases all 4 number in previous field, rather than last as expected. I think it's a nifty idea, visually pretty when it works, potentially useful as a standard, but right now I feel like I hit bugs faster than I can type them up. Hard to say how useful it will be when actually working, but seems worth finishing to see.

jasonlotito 13y ago
> Certainly the "standard" form still has some friction and loss. Yes. > Could some other arrangement have less? And isn't it great that someone else is experimenting to try to find it, so you only have to switch once it's established to actually be better? Yes. I say as much in a reply to the OP here: https://news.ycombinator.com/item?id=6143898 https://news.ycombinator.com/item?id=6143898

pbreit 13y ago

I wanted to like it but I'm not sure it's really better and could be much worse merely from being so different from every other method. That said, there are some problems: * Amex CVV doesn't allow the proper 4 digits * Tab-order is weird * Confusing because sometimes you tab to next field, sometimes you don't * Name usually not needed since already entered elsewhere (inexplicable why so many checkout forms do this) * Difficult to change card number