3

I'm currently attempting to employ the single-form credit card input solution similar to the one on Brad Frost's website (link below) but I'm facing some reluctance from others on this project due to questions about usability.

Thus far, the most high-profile implementation of this I've seen is on Uber's mobile app, where it works quite well. I've been pressed to find any other e-commerce sites utilizing this.

LukeW apparently published testing results last year regarding this but the link to his report is no longer active.

Has anyone had any experience with this single-form payment solution or experienced any implementations on any other sites/applications? We currently do not have the time or resources to test this (the test results mentioned earlier were apparently quite good) so I'm attempting to gather as much research - both anecdotal and data - about this as possible.

Thanks for your time.

http://bradfrost.com/blog/post/single-field-credit-card-input-pattern/

Improve this question
4
  • Have you talked to your team about why you want to use this form over a standard credit card form? Since you are proposing something that deviates from the norm, you are responsible for showing it is better.
    – Bowen
    Commented Apr 6, 2015 at 22:57
  • are you referring to this write up/report? lukew.com/ff/entry.asp?1579
    – Poyi
    Commented Apr 6, 2015 at 22:59
  • Yes. The majority are quite excited about it but there's a bit of reluctance from two members, mostly because it is different. That's why I'm seeking any experience or data.
    – CATL
    Commented Apr 6, 2015 at 23:01
  • 1
    Thanks, but it's actually the testing report linked here in section 2. smashingmagazine.com/smashing-newsletter-issue-113
    – CATL
    Commented Apr 6, 2015 at 23:03

2 Answers 2

Reset to default
3

This isn't the answer you are looking for, but if you don't have time to test, don't try something out of the ordinary.

I personally think that solution looks great, it's clean and clear, and the progression makes a lot of sense. However, I don't know your user base, and it could throw someone off. I also foresee some random Android phone that handles forms differently giving you problems, and then some users can't finish the form.

Here is a really good article that covers a lot of different aspects of a CC form:

http://designmodo.com/ux-credit-card-payment-form/

Improve this answer
1
  • 1
    +1 for this fantastic advice: "...if you don't have time to test, don't try something out of the ordinary."
    – Ken Mohnkern
    Commented Oct 1, 2015 at 18:04
2

We recently used the single-field credit card input on a high profile donation campaign that raised 2.4 million in one month. You can check out the form here: https://freezemnd.com/donate/

The most difficult thing for us came after the client asked to add conditional logic to the form for some raffle tickets. This created some trouble with the javascript and jQuery validation and security. Took a little extra time, but worked through it in the end.

Also, we hit some trouble with Android and Windows browsers as they handle the masking a little differently and essentially don't allow the user to input content. So we ended up putting in a fallback that changed the form to your more standard style, which worked well.

Improve this answer
1
  • If you can could you put up a wireframe / cropped screenshot of the form. The form won't be there for ever.
    – Mayo
    Commented Jul 3, 2015 at 4:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.