Subscribe to our newsletter

Crammed full of useful advice and tips from the team here at Quba.

Having worked extensively on e-commerce sites in the last few years I decided that the time was right to share my wisdom. I’ve read many articles about the checkout process and haven't found much agreement. This article covers my views on the checkout process and conversion rate optimisation, looking in particular at the Magento checkout.

Most articles in the past few years have focused on increasing conversion and reducing drop off. As part of my role I have looked at dozens of Google Analytics accounts to see how people have proceeded through the funnel. There are of course factors which make these metrics slightly unreliable - the funnel doesn't account for new tabs and a whole range of other user habits - but this subject is best left for another article.

Many people have looked at the effectiveness of form formats and the concertina one-page checkout but there are a few things that are regularly missed out. I want to look at the standard Magento 5-step checkout process which to my mind is far too convoluted.

Checkout 1

Magento 1 Page Checkout

I’m sure that I can’t be the only person who thinks that some of the information in these tabs could be combined to make this less laborious. There are many extensions in Magento Connect​ which claim to increase conversion but even these do not address the fundamentals. The checkout should:

  • Be simple and quick
  • Contain as few steps as possible
  • ​Be built in a way that doesn’t put customers off by being over-complicated
  • Be able to offer users relevant support information where appropriate
  • Be designed in a user-friendly way which makes next steps obvious.

The Magento Checkout Method

Magento allows users to register or checkout as a guest. This immediately feels clunky and unnecessary, as all checkouts should provide users with the ability to purchase without registering. Clearer buttons would also work better as a ‘Call to Action’ (CTA) for the user. Sadly we are all that lazy when it comes to checkouts!

Magento Connect offers extensions that enable users to register with both Facebook and Twitter at the checkout stage. Many users find this much more convenient and with there are numerous free plug-ins which allow this and are very simple to implement. ​

Billing/Shipping Checkout

If a user has already registered then we don’t need their names and email addresses again, so these fields could be left out.​ However we should add in a postcode lookup and provide a button for users to add their address manually.  We should also offer radio buttons for:

  • Delivery Address same as billing address
  • Ship to different address

​The implementation of a simple expanding box would work well here to add another address if needed.

Checkout 2

The cost of shipping should also be included at this level, rather than being added afterwards. Of course, if the delivery has a fixed rate then that cost would be shown at the review stage.​

These simple steps would reduce the form size allowing us to stack each input one on top of the other. Our experience with user journey tracking software Mouseflow shows that this format helps users scan forms effectively, and this suggestion is backed up by journals on user behavior. It seems to be accepted that this is the most organic approach, but the debate of whether labels should be left aligned or above is still open.

Payment

This section is pretty strong but there are still extensions which can further improve the experience, including the ability to add Paypal and Google Checkout. There are also graphics at this level explaining what payment types are accepted and showing the site’s security credentials.

One-Step Checkouts

There are examples of the one-step checkout out there, but for the most part I don't think they have fully understood what it entails.​ Amazon were the first to implement a one-step checkout, allowing registered users with saved details to simply select from a drop down and go straight to the review stage. This drastically reduces the drop out rate making a laborious process quick and easy. However, to do this effectively you must be PCI compliant in order to be able to store CC information on your server.

Bad Examples

Onestepcheckout - in my view all they do is rework what Magento have done with the exception of skipping some steps in the checkout process.

Checkout 3 v2



Onestepcheckout probably think that this is packed with useful features but all they have done is make the checkout look like a maze to the average online shopper. The expanded boxes over-complicate the process, and they should have considered hiding auto-populated elements with the option for the user to amend them if they wish.

For me this isn't a one step checkout but a reworked layout. It would be better to provide a funnel for users to follow simply and directly to making a purchase.

Blowing My Own Trumpet

Here is an example of what I think is a good checkout process (not just because I built it).

Checkout 4

Login and Checkout

Easy, direct options for users to follow are supported by reasons to sign up that are clear and concise. The right side is a direct block to show a clear direction.

Checkout 5

Your Information

Only provide input fields for only what you need. If people want to add more info they can do this from their account dashboard. If they’re registered, then just show some text confirming that their information is being used, or better still, skip to the next step. The right hand side is a good place to explain why this information in necessary. For users to progress to the next stage you must have their trust, and adding customer service information and a helpline number here is a good idea.

The button also shows exactly what the user will do in the next stage. I debated removing the ‘review and complete’ but for now I’ve left it in as it’s a good way to validate the form.​

Checkout 6

Billing and Address

This section is very self explanatory. I’ve removed all the forms, provided simple ways to minimise user input, and still provided a way for them to manually enter information. I’ve also combined all delivery and billing into one step and used tick-marks to confirm to the user what sections are complete.​

If the user selects ‘no’ in the billing options then a form would appear to allow the user to add a different delivery address.

Payment

I've shown all icons for accepted payment methods and added supporting statements on security for reassurance and to bolster customer trust. On completed sections I've added an edit button so users can go back and change information if required.

Checkout 7

Conclusion

And there we have it - three steps are all you need! Of course, every company has different requirements for form data but it will always be important to keep this information to a minimum at the purchase stage. My opinion is that this process can be streamlined more and more, providing better and simpler solutions for online shopping - I’d be interested to hear your thoughts!