#75: How Not To Design a Checkout

You'll have to forgive me here folks, this isn't a very constructive screencast. I was frustrated at the crappy checkout process for a software product I was trying, so I thought I'd screencast it as a lesson to us all on how not to design a checkout. It was confusing, frustrating, error-prone, and make me feel unsafe about even going through with the transaction. If you are designing a site to sell something online, nothing is more important to your success than the checkout process and it deserves to be made as simple and pleasurable as possible.

Running Time: 11:17

Comments

One point I didn’t make in the screencast… One thing Navicat has going for it is that it’s a product targeted at web people. Us web people are far more willing to struggle through a checkout process like that, because we consider ourselves saavy enough to understand what is going on.

If they were selling shoes, I wouldn’t be surprised if they lost half or more of their customers during checkout.

Wow! What a pain. I’m just going to pass on Navicat. Have you checked out Sequel Pro? MYSQL database management for Mac OSX. I just downloaded it for free the other day and I really like it. Plus you can get it in 2 clicks!

While you were frustrated with the tabs for picking the software title specific to your needs, it is an upsale technique. Offer your best title. Yes, it should have been very clear with what title you were choosing, and make it clearer how to change editions.

The table of choices was the worst offender of the whole thing, bar-none. Yes, they will lose sales, and yes, they will not get as much as what they should get. Why? Well, They don’t help you pick what you need. Eliminate a step altogether by detecting via your browser what OS you’re on and start you there (with the option to change of course). Then you can pick your edition (With clear licencing reasoning too), then pick CD or download, then offer an assortment of payment options. The table of WTF is NOT the way to sell your product. As with you, I would have likely chosen the cheapest edition, not knowing what each one meant. And let’s be serious: Who is going to by a program for non-commercial purposes who would normally fall under that typical category anyways? There isn’t a lot of ‘non-commercial’ uses for the application.

While yes, they may have chosen not to use PayPal for one reason or another, you did make it feel like WorldPay was a bad option because it redirects you. Unfortunately, PayPal does the same thing; Redirects you for most websites to PayPal’s site. This isn’t so much a flaw of Navicat, but a flaw with who they picked. There’s a reason PayPal is above WorldPay in North America; Simplicity and an implied level of security via branding on PayPal (Showing the merchant’s logo/name/etc)

Yes, the whole site payment system was awful. I have seen worse, but yes, there is a lot of issues there. I agree with you up to the point of the Verified By program.

Obviously you don’t know about the Verified By program by VISA or MasterCard’s program. These systems were developed by these companies to offer another added layer of security on the internet. Obviously you hadn’t used Verified By before on this card, because they wanted you to verify who you were before creating your password for the first time. From hereon in, Verified By VISA will only ask your password. It’s not a perfect system, and still only covers sites which support the Verified By system, but if it’s one more step to protect you from fraud, I would accept it. Yes, it is less than ideal to do, but it is one of those evils now.

So much else could have been done with that site to improve the performance. A lot of ideas like if you use the Buy Now button in the app, it should give you your key, and maybe even a little downloadable app to auto-fill your key. At minimum, give the steps on how to fill in the information quickly, put the key in a field that is silly-easy to copy and so forth.

I agree on the part that most payment systems work with redirectign you to it and then backling back to the store. But letting the payment-site appear in a popup or warning before hand, or being able to customize the site you’re going to will make it a lot better.

The Verified system has been in place for years, and has sucked for years. The big problem of the whole experience u went through was 1) navicat 2) worldpay 3) RBS 4) another company whose name i forget now, the one that popped up when u had to verify. 4 different brand names being used on a CC transaction does not inspire consumer confidence. when i saw the RBS name pop up i began to understand. british banks are notorious for hopeless e-services. rbs is probably at the bottom of the pile. the bank hopelessly overextended, effectively went bankrupt, and never managed to integrate their it systems. why navicat did not use paypal is weird. it’s not as if the alternatives were better. ironically, there is a big navicat promo being run on another site now.

Lol thats funny but not entirely those guys fault the visa verify is fairly common at least it is here in the UK and its only a total ball ache the first time you use a card once you’ve proved your identity and set up a password for a card the first time its alot simpler and removes about 3 of those screens… world pay is terrible tho!!

I have to agree with Chris !
I bought NaviCat a few months ago .. and a very similar experience (I just happened to pick ShareiT !!)
The only reason I did all of it.. was because NaviCat is in fact a GREAT piece of software ;-)

Also, since I *build* e-comm sites for a living, their checkout process was particularly painful to me !

thats horrific, I have to ask though even if they fixed their end of the deal, maybe 90% of the suck factor was from the gateway.

Not saying they cant elect to change gateways, but this is a hell of a pitfall for people starting out in e-commerce.

hint hint, would love to see some screencasts aimed at getting a working payment system in place. Maybe something that would happily tie in with foxycart casts you have done in the past.

For me personally getting a working gateway taking payments for you has been the most intimidating factor, and this cast just goes to prove it’s potentially hazardous too.

Found myself spending hours learning how to code up paypal IPN response system to get our site accepting subscriptions on a recurring basis. While its well documented its still quite an effort just to be able to accept some money from your website.

generating paypal buttons on the fly is really simple too, but infinitely complicated by the encryption certificate process.. that too would make a nice topic of screencast.

Heck if you build a nice bit of php to sit in wordpress pull a custom field for product information and generate an encrypted paypal payment link, that would be a hell of a screencast right there!

ok I’m just making a screencast christmas list, enjoyed this one dude :) good stuff

I don’t really use it much to work with WordPress databases, but mainly applications I build for clients. It saves the database information and allows me to quickly make a change without logging into the phpMyAdmin control panel.

Nice screener, just goes to show once again that even after all these years of Worldpays existance it should still be avoided like the plague!

Systems such as Protx (now Sagepay) integrate with their Direct system right into your own site without any hassle whatsoever, and even the Form system looks professional, why people put up with the crappy Worldpay system, not to mention their exorbitant prices is beyond me.

Again nice screencast with a totally honest PoV.
Also love your comment about the “submit button being waaaaaaaaay over here” from the quantity box. :D

Only on the Interweb do such things seem sooo far away!

I’ll be back in a couple of days, I gotta go all the way over to the fridge to get a beer! :(

lol. I was laughing the whole time too! Chris’ narration of that terrible process was very humorous. Everyone around me thought I was crazy for laughing at a video of someone buying a product, but they were laughin too after they watched it.

After watching this video I filled out a urgent support request on the poorly designed checkout process. The support page is also funny, the form states only some fields are required when actually they all are.

I am still a little shocked at the checkout process flow since Navicat really is a great product and I am guessing many developers would like to pay.

Great screencast. Being in the middle of putting together the e-commerce side of a site for my company, it’s interesting to see an example of how it can all go so wrong. Some of the frustration seems to have been with Navicat’s site, which is wholly within their control to address. And I would have punted on the WorldPay side of the transaction. Frustrating to have to enter info multiple times. “They really want me to start over” :) Definitely some grievous user experience crimes committed here.

I’d agree with Greg Ausland above, would love to see some screencasts by people that have put it together right. We’re going to use Paypal, but the first time trying to put everything together with IPN looks a bit daunting, even with their documentation. Any places to look for examples/tips?

Enjoy your software Chris (once you copy/paste to download), and thanks again for the screencast.

Jeez !! That so an eye-opener for sure! I thought I’d seen a lot of bad check-outs but really takes the biscuit !

I have noticed of recent times that the Visa Verify thing is appearing more and more – I think it may be that there has been a big uptake in debit cards using Visa Electron… in the UK many banks have ditched ‘MAESTRO / SWITCH’ in favour of Electron ?!?!?!?!

Fantastic. You’re a brave man for putting your card into that morass of payment gateway madness. What the hell?

They had a piece of software installed on your machine. That button should have led you to a BUY A LICENSE FOR THIS EXACT FUCKING PRODUCT YOU ALREADY HAVE NOW page with credit card forms and maybe a ‘sign up for a newsletter’ checkbox at the most. then return a license key.

wow. and this is not a rare type of payment flow. i have seen this plenty of times for products and services, but maybe not as bad as this one.

So true.. These kind of messy systems just discourages the buyer. Specially, that redirects to a different site. When we get a redirect to Paypal site, its different because its very well known and there is a sense of security. But when it get’s redirected to other less popular sites, one gets skeptical and aborts the whole buying process. To be honest, I never heard of that World Pay site and I would have thought 10 times before filling in my credit card details there. I once faced a similar situation while booking an airlines ticked. There were so many redirections, I finally ended up cancelling the whole online booking process lol

I encounter that sort of ambiguity and lack of clarity quite often when trying to download software from various sites. And my downloads are all free, so I can only imagine the frustration of those purchasing stuff. The least Navicat could have done should have been to make those download links at the end of the process clickable and stated what each contained, even if they just used tooltips.

A simple feedback form or virtual suggestion box, if you will, with a heading along the lines of “How can we serve you better?” would help many entities that mess up like that. Because even though something may seem obvious to us, it may not to the entity offering the widgets or whatever.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.