We’re living in an era of creative disruption, and no thing – however big or small – is immune.
A small one, out of the millions of things being disrupted, is the credit card form. After years of suffering the old and boring credit card input form, I’m glad to see designers and developers attempt new UI patterns for the payment form.
Some of the new attempts are really beautiful. Others make filling the forms much easier. A few manage both. I like them. I like the attempt to remove a painful hurdle to payment (as a user) / conversion (as a business manager).
Yet, could they be just creating a new hurdle while removing the old ones?
I use LastPass everywhere. Including to fill in credit card forms for purchases (from an almost always empty bank account).
While I’ve disliked the old credit card forms ever since I first encountered them, with LastPass, they aren’t much of a hindrance any more. Just click a button, enter a long, meaning-less password, and voila! LastPass fills the form, I get new running shoes and sink deeper into bankruptcy.
I’m sure quite a few other people too, irrespective of their bank balance status, use software like LastPass, 1Password, etc to fill in their credit card details on web, and, maybe, even in apps.
The newer variants of the credit card forms need to ensure that they’re not just easier to fill for those who type in details manually, but also for users like me who use other software to fill the forms for them, specially on the desktop. They could do this by the showing a new or old version of form, after checking whether Lastpass, 1Password, or other similar Chrome extensions are installed. Or they could have a full form hidden on the page, with fields only made visible one at a time. There must be quite a few technical solutions. All of them more elegant than the two I just shared.
But my point is that care needs to be taken. Else a variant that was meant to slightly ease the pain of one set of credit card form fillers, would end up significantly increasing the pain for another set.
Posted from WordPress for Android
While I’m not sure about the new designs on the desktop, I’d more than welcome them on the portable devices – both mobile web, and apps. Square’s app is a great example, and a motivation for Brad Frost’s design:
Also, if you are considering credit card form design for payment on your website/app, this article by Marcin Treder is a great starting point.
Other Links:
- Ken Keiter’s SkeuoCard – http://kenkeiter.com/skeuocard/
- Brad Frost’s Single Field Credit Card Form – http://bradfrostweb.com/blog/post/single-field-credit-card-input-pattern/