Skip to content
By Dave Cruikshank

The carrot, not the stick - Building smarter online checkouts.

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?! Panic.com's checkout process is beautifully simple, conveying all the pertinent data easily and on one page!

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! Even the big boys do it: Amazon force you to make an account with them to buy

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

As much as I loathe the term, this 'web 2.0' landscape brings with it certain expectations from the user. Having to reload the whole page just to go back a step and alter your shipping address looks sloppy. Use javascript as a simple means of hiding and displaying the most pertinent information at that time. The Apple online store is a beautiful example of an accordion solution that mixes just the right levels of complexity and simplicity. That said if your checkout is simply too long for one page, make the process transparent by including some kind of progress meter to show the page flows. The Apple Online Store is a beautiful example of a single page checkout view

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.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

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.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    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.

    Learn more about webinars

  • Installfest

    Installfest

    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.

    Learn more about Installfest

  • Development Hub

    Development Hub

    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.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email