* 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.
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).
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.
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.
The goal of this design is to reduce the friction -- granted, it sounds like you had a difficult first experience, and this isn't (by far) a finished product. There are bugs: 13 of them open right now.
I know you probably won't use it -- and that's okay. I just wanted you to know I heard you :) All of the things you mentioned are things I'm actively working now to address.
> The goal of this design is to reduce the friction
And I applaud you for that!
> All of the things you mentioned are things I'm actively working now to address.
Awesome!
I should make it clear, I'm not posting this as a "OMG He's wasting his time!" As I said, I spent a decade working with this, and I can appreciate the difficulties of a frictionless payment process. I wanted to share my experience with you just in the hopes that you can do exactly what you are doing: improve it.
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.
> 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?
>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.
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.
> 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.
Unfortunately, I've never published anything to any official standard. I can only go by my experience. That experience involves transactions north of $100M.
> Any other credit card form I've seen does nothing to convert either -- and it's not it's job
Perhaps I worded it poorly. However, a CC form's job is to convert a potential customer into a paying customer. Just because you've entered your CC details does not make you a paying customer. You'd be surprised as the number of people who do enter information, and then never actually complete the transaction. It it's a recordable amount.
In the end, a credit card form that creates friction will cost sales. The more friction, the less sales. The amount of problems with this setup will stop sales from going through, even if just the bugs are fixed.
> Most of the objections are dead simple to fix
They aren't objections as much as they are a report of what is wrong. Consider them a list of problems that need to be addressed.
> and address nothing inherently wrong with the core idea.
Correct, the idea is fine, and should be explored. Keep in mind, this isn't the first time I've seen someone use a credit card layout as a form. The CVV on the back is new, but than I'm going to say that's a bad idea the way it's implemented.
Anyways, I already replied to the author of the form, and made it clear I'm not arguing against his attempt. Hell, I applaud him. I just wanted to share my experience because that is what's needed.
Being a little less "blunt" may help a bit. I generally don't start my criticism off with "So..." followed by a list of everything that is wrong with it and then a "THIS WON'T CONVERT" in caps.
I think more likely the reason is people with "north of $100M" in transactions are scared to try something new on their form. When there form clearly works fine as it is. But that doesn't mean exploring new methods is a bad idea. I know a lot of people who are still unsure of what a CVV is. And having a replication of their credit card so they know exactly what goes where would work very well.
I was trying to be clear. Judging by the OP's response, I think I was successful. But agreed, I could have avoided the So… part. There was really didn't mean anything by that part. Mea culpa.
> I think more likely the reason is people with "north of $100M" in transactions are scared to try something new on their form. When there form clearly works fine as it is.
That's actually far from the truth, at least in my experience. You are constantly looking at how to improve the experience at every level. Between the amount of time a person spends entering in each field, to the errors they get back, and even where the person lives. Everything is scrutinized. Not everything matters, but you keep looking.
> I know a lot of people who are still unsure of what a CVV is.
Yep. And there are ways you can go about resolving that. Hiding the field from the start is a bad idea. There is nothing to suggest that you couldn't also display the back of the credit card below the front.
The most important thing you can do when designing something like this is get real feedback and data. Just because it looks nice doesn't mean it will help.
>>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.
>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.
The "biggest hurdle to conversion is friction in the purchasing process". We're talking about the "enter credit card details" stage here. Which is hardly the "biggest hurdle to conversion" -- it's where conversion has mostly already been made.
You first need (a) a decent product, (b) to present it nicely on the web page, (c) good copy, (d) appropritate calls to action, (e) a pricing strategy, (f) to get the customer to decide to buy. Only then the "friction in the purchasing process" (with respect to entering credit card details) comes into play. At the very last stage of conversion.
But that's beside the point.
In my question I didn't specifically doubt that the "biggest hurdle to conversion is friction in the purchasing process".
I merely asked the parent to qualify why he thinks this specific form will "stop people for paying".
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
* 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.