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.
#75: How Not To Design a Checkout
Chris Coyier
on
(Updated on )
” Kay… I didn’t know that you could buy anything other than Navicat on Navicat.com… ”
Hilarious!
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.
There’s no excuse for poor usability.
I’m pretty tech savvy, and as such, I would have just pirated the software by this point.
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!
I enjoyed this thoroughly. Lighthearted enough to be nice but right on. Selfishly I’d love to see more checkout videos!
Highlight of the video was:
“AHHHH shit, I don’t know….”
Excellent overview of the checkout, it looks like a total mess, blahh. It’s like they’re actively trying to discourage people from buying.
Wow! I would have quit half way through, thinking it was malicious. Seem REAL shady. :-/
Wow excellent video,
I can’t believe the hoops you had to jump through to give them your money, almost like they didn’t want it.
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.
Hilarious! Chris, this was truly soooo funny! I worry about Shopify when it goes from the merchants store to their standard checkout… let alone 3 or 4 different websites! Good grief!
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!!
World Pay has always been a pain in the butt. Some ecommerce sites prefer it as it will allow “high-risk” and “socially unacceptable” products through its system. Not that reflects on Navicat.
The verified by visa thing is truely terrible. It regularly forgets my password. I try to avoid it like the plauge.
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
Classic. I love your commentary through the whole process.
And yes, even though it is targeted at the web community, still doesn’t excuse the poor UX of their checkout process. If anything, they should be more usable than most other checkout sites.
For everyone who doesn’t know Sequel Pro: Check it out: http://www.sequelpro.com/
I use Sequel Pro and it’s pretty solid!
What is the benefit in using these types of software?
I have a number of WordPress sites, how would I benefit from using sequelpro?
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.
Sequel Pro just makes it easier
Thanks for the link. I didn’t know this App. Going to give it a try.
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! :(
Can you do a tutorial or link me to a tutorial other than the word-press code on how do blog roll good?
That was one good entertaining screencast :)
Funny…if only companies would listen to interface designers more! O well, I guess this is job security right…hopefully they’ll learn to update their site eventually and hire one of us :)
Like you said…this wasn’t very constructive. So do you have any examples of a good design process that sells a similar type item?
Absolutely shocking. I would have quit during that process…I got way too many bad vibes during that shady process.
“Shit..I don’t know!?”
Had me laughing out loud man. Nicely done!
If I hate to type my credit card more then 2 or 3 times, I’d quit in the middle. It looks very suspicious.
Also the entire process is extremely painstaking. With the last purchase I made which didn’t use paypal, I had to click 3 times, write my data, and click 2 more times.
If I ever build an ecommernce site, I’ll definitely remember NOT to build it like that :P
This is awesome. I was serious laughing the entire time. I have had meetings with companies using similar checkout flows. Very sad. Keep up the great work!
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.
I was laughing all alone .. my dog was puzzled ;-)
I can imagine the “wtf-look” look on his face !
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 video! An easier way, short of making a video, would just be to show screenshots of the GoDaddy checkout process.
The craziest part, is that I believe I can do better than that in less than 1 days work. (being fair, I implement payment gateways for a living.. so I do have a lot of practice ;-)
Still, I am quite sure that they have the money resources to use a proper payment gateway (in which the user would NEVER leave their site) !
I love how you left the link to the download visible. And it actually works. I just checked. ;)
you will still need the serial !
just get Sequel Pro….and its free…
haha, they should really just use PayPal. Much less confusing for people, also more people trust a PayPal checkout screen.
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.
@Chris:
I’d say make them an offer, you’ve got ground to stand on, and a legion of users here to confirm the lack of their store.
Give them redesign and fix the shop in the procces ;-)
Loved the screencast. The App looks pretty interesting but after seeing you going through the check-out I’m not sure if I wanna go through the same.
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 ?!?!?!?!
Great Screencast though – love this site.
I loved this screencast.
I’d love even more if they gave you a gig to overhaul their checkout process!!
More in-the-trenches videos please :P
The visa thing is from visa not the site. I was on newegg and it did that too.
You can’t complain too much about bad checkout pages.
Every online store should include checkout with Paypal as well as one other well known payment gateway.
But I guess for some companies PayPal just isn’t ritzy enough.
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.
great cast. (great site!).
Good message, i am absolutely appreciate such a screen cast, most of the time (Most higher companies GUI team is suks, some time they take them because of an influence or cheep employees)
i suggest to show this for some fu***g management over the world, including some of my clients who are looking foreword for cheep solutions.
Chris thumbs up for u!
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
Seriously!?!?
All I’m hearing is ‘Wha wha wha! They didn’t make it easy!’
Well life is not easy mister!
Hey Chris, Navicat needs to protect their download location, I simply typed in the .dmg link, and got the program…think you should blur those too?
They have a free trial, that download doesn’t matter unless you have the code, which I didn’t share.
Haha, great & hilarious screen-cast Chris!
they are lucky the product is worth buying OMG what a mess.
“Some people like worldpay and they oughtta be able to have the choice!”
“Hilarious”
Absolutely bang on. Your comments did make me laugh so hard I cried, but you’re absolutely right.
For me the worse thing was that “Your payment is not yet complete” … ?! As a dyslexic … I know what I would have done upon reading that. Closed the browser…
(As if it wouldn’t have been easier for them to have just forwarded me to the Verify by Visa screen … !)
this is the longest check out I have ever seen, I would have said ‘screw it’ by the third page.
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.
Very True. A great example on how not to design a checkout.
Do you still Like FoxyCart as much as you used to?
I loved this screen cast. I checked the Navicat website and it seems that they have redesigned at least once the last eight years. That’s promising. What I was thinking with those tiny icons to differ between CD and download, was that I bet they hadn’t clear and concise alt tags on those icons for the visually impaired. And to have a dozen buttons, all named “Buy now!” is atrocious.
I want to tell those who reads this about a great MySQL tool that I use both on my Windows machine and my Linux machine. It’s available for Mac OS X, too. It’s MySQL Workbench (https://dev.mysql.com/downloads/workbench/). Very easy to use if you like me don’t find it working with a MySQL database via the terminal very comfortable.