I was buying pet food the other day (online of course) and stumbled upon one of the strangest flows in checkout process history: you had to provide different parts of your credit card details at different steps during checkout.
It’s a great example of how a chain is no stronger than its weakest link, and that you shouldn’t do “something new” just for the sake of it when designing a form flow.
The checkout process consisted of five steps: 1) Registration, 2) Address, 3) Payment, 4) Account, and 5) Review.
Step 1 and 2 were fairly simple, getting some of the basic checkout usability guidelines right. In step 3 you were asked for your credit card number, card expiration date and cardholder name. At step 4 you provided account details such as password.
However, at step 5, things went awry. The step looked like this:
Take a close look. What’s the next action? On most sites, you’d normally expect that you were supposed to review the order details and then click “Place order”. But doing that at ZooPlus.com resulted in this error:
Why? Well, it turns out that you have to provide the credit card CVV code / security code at the review page. This is despite that fact that you entered credit card number and expiration date two steps earlier in the checkout process!
There are many reasons this results in a really poor user experience:
Okay, so placing the CVV field on the “Review” page instead of the “Payment” page is a bad idea. This isn’t exactly a revolutionary insight.
Let’s abstract this into 2 more general observations about designing user experiences:
ZooPlus had a pretty decent checkout process usability-wise up to the “Review” page, yet orders are more likely to be abandoned due to this one poorly designed element.
There is no point spending a whole lot of time and money, tweaking and polishing your design, if you get basic elements wrong. You simply lose more by getting a basic element wrong than you gain by getting three details right.
Jakob Nielsen have a great saying “users spend most of their time on other sites” – that is, users expect your site to behave the same as most other sites. This also include tasks where there’s a high risk of abandonment, such as filling out forms and navigating flows.
Sure, doing what everyone else is doing can be boring. It’s more interesting to invent a new and “revolutionary” design, but when it comes to form design and flows you should generally stick to the convention unless you have a very compelling reason not to. And whenever you do divert from the standard approach, at the very least perform a quick small-scale usability study before launching, so you avoid major usability problems.
Join 24,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Another important takeaway from this is that by necessity, zooplus are actually storing your credit card details, when they should be passing the directly to the payment gateway and having nothing more to do with them.
Storing credit card details will make the customer wonder why, and it’s a huge risk for the merchant. Just ask Lush: http://www.abc.net.au/news/stories/2011/02/15/3139342.htm
Great addition. Thanks for sharing Simon.
While I agree on principal, even Don Norman knows that sometimes UX has to compromise with business needs…
I am wondering if this was the result of poor UXD or a conscious decision to use the CCV code as some sort of “digital signature” (along with accepting the terms) for security purposes…
Still, the user has likely already pocketed the card by this step and is now likely annoyed at this process, which could lead to order abandonment. Not a chance — regardless of how slim — I would be willing to take.
Zooplus’ decision was most likely a technical and compliance one. Reglementation allows storing cc details, but not cvv, not even in cache, afaik. They saved the cc details in step 3, so the form can be refreshed, but they needed the cvv for the final server request to the payment processor. They needed the request only at this point, AFTER user reviewed his order.
The solution was to have the entire payment step at the end of the flow.
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 firstname.lastname@example.org