Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Skeuocard

kenkeiter.com

Post reply on HN
Print view View original

81–90 of 206 posts

Re: Skeuocard

#81

Post by supermatt »

kenkeiter wrote: post #37
aresant wrote: 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).

Hi Ken, it looks great!

Unfortunately, for unrecognised card types it makes it impossible to proceed. I have just tried a maestro card number (beginning 6759) and am unable to enter any of the additional details (expiry, etc).

It may be worth adding a generic fallback for cards that are not recognised to account for unexpected edge cases.

Keep up the good work!

Re: Skeuocard

#82

Post by EricMuller22 »

jontas wrote: post #73
Hannan wrote: post #33

Earlier quoted context omitted.

Agreed, I stumbled for a second before realizing I could type a name in the card, but I would love to see stuff like this become popular. Also, on Chrome 28/Mac, the validation flow seems to have some issues. I can put invalid months like "22" or "00" on the card without it highlighting the month. But it looks like the month needs to be accurate before it will show me my Luhn checkdigit is wrong. After playing with i…

> Agreed, I stumbled for a second before realizing I could type a name in the card I didn't realize this until I read your comment.

This was the primary weak point in the implementation. Expecting users to recognize that they can click on the static-looking fields on the card (or relying on them to use tab to move between fields) does not pass the grandma test. It'd be great if you detected when a field had been fully filled out and moved to the next one automatically.

Re: Skeuocard

#83

Post by echohack »

aresant wrote: 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…

Tester #3420 here, reporting in:

Your message for disabled Javascript is really, really weird.

> Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades... > Never tell me the odds! Enable it anyway.

Write like this instead:

> You can still use this form if you have Javascript disabled or an unsupported browser. For a better experience, enable Javascript or upgrade your browser.

- You can have invalid inputs in the month field. "20" or "00" are not months.

- You can put invalid inputs in the year field.

- Tab order is wrong. Go from top left to bottom right.

Re: Skeuocard

#84

Post by MiguelHudnandez »

coldtea wrote: post #70
jasonlotito wrote: post #44

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 inher…

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

Re: Skeuocard

#85

Post by anigbrowl »

jasonlotito wrote: post #44

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…

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.

Re: Skeuocard

#86

Post by etler »

echohack wrote: post #83
aresant wrote: 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…

Tester #3420 here, reporting in: Your message for disabled Javascript is really, really weird. > Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades... > Never tell me the odds! Enable it anyway. Write like this instead: > You can…

That message seems to be intended for developers looking at this example site, thus the casualness. If you were to use this on your own site there would be no error message at all.

Re: Skeuocard

#87

Post by jaredstenquist »

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.

Re: Skeuocard

#88

Post by rorrr2 »

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?

Re: Skeuocard

#89

Post by awj »

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.

Re: Skeuocard

#90

Post by kenkeiter »

kposehn wrote: post #76

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.

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.

Post reply on HN