Live data from Hacker News

Skeuocard

kenkeiter.com

61–70 of 206 posts

Re: Skeuocard

#61
post #43

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?

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?

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.

Re: Skeuocard

#62

One thing lacking in this design is that without extra supporting content, it doesn't tell the user upfront what kinds of credit cards are supported. So if a user prefers to use American Express, they have to find the card and start entering a few digits before being told they have to try a different card (and then they may have some apprehension about if that other type of card is supported or not.)

Great point. I'm working on coming up with something to indicate this better -- but the responsibility for that may fall to the form which contains the input, too. Not sure if it's the job of the card to indicate which types it can be.

Re: Skeuocard

#63
post #51

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…

> 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 A good example is in their Checkout javascript component: https://stripe.com/docs/checkout

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

Re: Skeuocard

#64

Earlier quoted context omitted.

And for bonus points, the card issuer is known from the first digits. But perhaps a copyright issue to display logos.

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.

I'm assuming he means the issuing bank, not just the Visa/MC/AmEx logos, as those ARE already displayed on the skeuocard.

Re: Skeuocard

#65
post #5

>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-inpu... ) "Wait, where do I put the CVC, name and expiration date?"

And for bonus points, the card issuer is known from the first digits. But perhaps a copyright issue to display logos.

[deleted]

Re: Skeuocard

#66
"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.

Re: Skeuocard

#67
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.

Re: Skeuocard

#68
post #8

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…

Thank you for being willing to test it! This isn't something I'm making money off of, nor is it something I feel the need to ram down people's throats -- I just wanted to try something people hadn't seen before. If it works, and people like it, great! I'm glad to have helped a little. Please let me know if you run into any trouble (my Twitter and email are on the site).

The spirit of your post on the topic and the execution of the idea are just awesome.

I hope that came across in my original comment - appreciate you giving us testers more fuel for the fire!

Re: Skeuocard

#69
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.

Re: Skeuocard

#70

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…

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

Post reply on HN