E-commerce companies are on a constant quest to reduce the friction between shopping and buying online. And you don’t need analytics to tell you that entering credit card information is the part that sucks.
A new open source payments framework called Skeuocard thinks that displaying the fields in a different way visually could help ease the anxiety people feel when presented with a form full of blank text fields. “Basically, Skeuocard is an attempt to better match the user’s mental model and cognitive biases,” says developer Ken Keiter.
Skeuocard payments require the user to enter numbers so that the image of their credit card on the screen matches the actual card.
“My hypothesis is simple,” says Keiter. “People are relatively good at determining consistency, visually. Skeuocard’s use of dynamic constraints depending upon the card product reduces its flexibility vs. usability trade-off, and the mimicry of the card’s layout–especially the loss of field labels–reduces the amount of context-switch overhead that’s produced by having to associate names of fields with the corresponding information on the card.”
As you can see from Skeuocard’s online demo, and indicated by the name itself, this project is an attempt to skeuomorphize your online payment process in hopes of cutting down on mistakes from users, frustration, and thus abandoned shopping carts. The project is available to fork or contribute to on GitHub so any business with merchant needs should be able to take advantage of Skeuocard.
On Keiter’s blog introducing the project he lists real-world things he’s heard people say in regards to inputting their credit card online, “Am I supposed to enter my card number with the spaces?” “Okay, the month on the card is 7… So that’s January, February, March, April, May, June, July…,” and “What’s a CCID? Is that the same as a CCV?” among other things.
If there’s any question of “why” still left in your mind, consider what Keiter described to me in an email: “Skeuocard isn’t meant to be a grand gesture, nor a redesign simply for the sake of change. My highest hope was that this would get people to ask themselves two simple questions (perhaps in this order): Does the card on my screen look like the card in my hand? And why has this been done any other way in the past?”
[Image: Flickr user Jorge Franganillo]