A recent project we have been working on at rubyx required us to design a completely customised shopping cart. It gave me a good opportunity to look at some of the important factors in what makes a shopping cart tick, and the most effective ways in which to communicate what can often be an overwhelming amount of information.
From my broad sweeps of the e-commerce cross-section I selected, there are some examples of excellent, and not-so-excellent, checkouts out there from which to draw inspiration. Of course, the bad examples are usually the best educators, so we'll start there. Plus, train-wrecks are just more fun!
Too many checkouts today suffer from data-overload. Whether from following 'accepted standards', or just a lack of consideration, the biggest pitfall I've seen is websites capturing way more information than they actually need to. If you ran a retail store, would you ask every customer for their full name, address, date of birth, email address, phone number, dog's name etc? And the worst example of this is the infamous "log in or sign up to complete this transaction" link we've all run into at one time or another. Absolutely unnecessary, and a pain in the arse! The last thing you want as the owner of an online store are irritants like these stopping future transactions (or even the current one).
Simply put, if shopping in your store is a difficult process, people will be less likely to return. Roadblocks make shopping difficult, whereas incentives will help your customers shop and (more importantly) bring them back for more. So here are a few points I summarise for you based on my research and experience:
1) Keep information simple
What is the absolute minimum amount of information you need to capture to take an order? As I mentioned above, you really don't need a whole lot of information from your customers to complete a transaction. Why did you make a company name a required field exactly?!
2) Be clear about what's involved
Let the customer know from the start how long the process is going to take. A simple header with "This checkout will be completed within 60 seconds" or something similar goes a long way towards building user confidence in a process.
3) Question accepted standards
This is a biggie, and an idea which should be built into every design decision you make on a website. Sometimes, ideas which once made a lot of sense get left behind in the wave of new, more efficient processes, or were simply not such a great idea to begin with. Too many checkouts seem to have points of data because 'everyone else has it'. A great example of this is in the fact that almost all checkouts list billing information first, when shipping information is clearly the more important of the two. Of course, sometimes a standard exists for a very good reason, so knowing when to innovate and when to just use the wheel that already exists is important.
4) Don't make them enter the same information twice
Just don't. It's boring, repetitive and unnecessary. Give them the option to copy billing information from what they've already entered into shipping. Or better yet, pre-populate those fields and then they can just change it if they wish.
5) Offer signups, but don't force customers into it
If you have some kind of customer loyalty program, that's fantastic! If the incentives are good enough, and the signup is simple enough, people will want to join anyway without feeling coerced into it by a demanding checkout process. Better yet, use the information you just captured in their shipping details as a signup in itself - "now that we've got your information, would you like to join our rewards program?" They shouldn't need to be members of your site to simply buy your stuff!
6) Keep the design simple
As with any large chunk of data, less is more. People can and will get distracted if your checkout page is too busy, plus clean form layouts just generally look great! This doesn't mean you can just cheap-out on the design, a clean looking minimalist design is often all the more difficult to achieve.
7) Multiple-page checkouts are archaic
8) Make it clear what the customer has to do next
This one is almost a no-brainer, but deserves a mention. Web forms already have a built-in sense of hierarchy that we can sometimes take for granted. Especially when it comes to the moment the customer leaves the form and is required to click elsewhere, a strong sense of direction is vital to making the checkout process fluid and easy. This is where baseline grids come very much in handy.
9) Let the customer know what's happening next
So they've filled in your form, clicked submit and their order is in the system. Great! Give them a nice screen explaining what just happened, what's about to happen, and send them an email order confirmation for good measure.
10) Preempt customer queries
Chances are people are going to want to know how you calculate shipping, or what your return policies are. It's important to have this information available during checkout (although, if you put it somewhere like the footer then it can just be available everywhere).
11) Be available for support
People will have questions and concerns whenever entering credit details online comes into play. Having someone checking the support email account often is invaluable. It always feels good to say 'I had a problem, but they fixed it really quickly!'.
The key point in all this is: keep it simple. Every single tip listed above is all about giving the user an easier time of it all, because no one likes dealing with overcomplicated and lengthy checkout processes. We have such a short window in which to make an impact with people on the web, and making life easy in a world in which many online shopping experiences are difficult goes a very long way. Ideally it would be as easy as a retail store, they take your money and you walk out the door, so keep it succinct and you'll find you'll get a lot of repeat business.
Bringing Tesseract to Mobile (with React Native)
Ivanhoe Cycles launches their ecommerce platform on storeConnect
RSpec metadata - what they are and how to use them
reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.
We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.
Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.
The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.
The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.