Upload
burak-bakay
View
136
Download
0
Tags:
Embed Size (px)
Citation preview
Market Data / Supplier Selection / Event Presentations / User
Experience Benchmarking / Best Practice / Template Files /
Checkout Optimization 70 ways to increase conversion rates
Checkout Optimization 70 ways to increase conversion rates
Econsultancy London
4th Floor, The Corner
91-93 Farringdon Road
London EC1M 3LN
United Kingdom
Telephone:
+44 (0)20 7269 1450
http://econsultancy.com
Econsultancy New York
41 East 11th St., 11th Floor
New York, NY 10003
United States
Telephone:
+1 212 699 3626
All rights reserved. No part of this publication may be reproduced
or transmitted in any form or by any means, electronic or
mechanical, including photocopy, recording or any information
storage and retrieval system, without prior permission in writing
from the publisher.
Copyright © Econsultancy.com Ltd 2010
Checkout Optimization 70 ways to increase conversion rates
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Contents
1. Introduction: The Checkout Challenge ........................................................................................... 2
1.1. About this report: a note from the author ................................................................................................................ 3
1.2. How to use this report to improve your checkout .................................................................................................... 5
1.3. About Econsultancy ................................................................................................................................................... 6
1.4. About Sales Logiq & the author.................................................................................................................................. 7
2. Improving the whole checkout ....................................................................................................... 8
2.1. Isolating the checkout ............................................................................................................................................... 9
2.2 Checkout steps .......................................................................................................................................................... 11
2.3 Navigation ................................................................................................................................................................. 12
2.4 Persistent summary of checkout information ......................................................................................................... 14
2.5 Avoiding loss of information already entered by customers ................................................................................... 15
2.6 Stock management & session timing ....................................................................................................................... 17
2.7 Form design .............................................................................................................................................................. 19
2.8 Validation and error-trapping ................................................................................................................................. 23
2.9 Calls to action / submit buttons .............................................................................................................................. 24
2.10 Trust ......................................................................................................................................................................... 26
3. Improving specific parts of checkout ........................................................................................... 28
3.1 Log-in/Registration/Guest checkout ...................................................................................................................... 29
3.2 Address capture ....................................................................................................................................................... 32
Checkout Optimization 70 ways to increase conversion rates
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
3.3 Delivery / Gift options ............................................................................................................................................. 35
3.4 Payment capture ...................................................................................................................................................... 38
3.5 Order summary ........................................................................................................................................................ 43
3.6 Order confirmation .................................................................................................................................................. 44
4. Checklist of checkout success factors .......................................................................................... 46
5. Analytics & split-testing ................................................................................................................ 52
5.1 Advanced analytics for checkout ............................................................................................................................. 52
5.2 Split-testing for checkout ........................................................................................................................................ 56
6. References ..................................................................................................................................... 59
Checkout Optimization 70 ways to increase conversion rates Page 2
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
1. Introduction: The Checkout Challenge Checkout abandonment is a major inefficiency for most e-commerce sites. In the US, 45% of
online shoppers admitted having abandoned shopping carts „multiple times‟ within a specified
three week period - the average value of goods in these abandoned carts was $1091. One third of
US e-commerce merchants report cart abandonment rates of 50% or higher2.
Monthly data on checkout abandonment in the UK has been published by Coremetrics3, an
analytics vendor used by many of the major UK retail sites. By extracting and analysing this
published data, a significant increase in checkout abandonment over the past two years
emerges. This is worrying! We are meant to be getting better at guiding customers through the
checkout, not worse.
The explanation would appear to be a combination of two factors:
1. Customers‟ expectations are rising. Akamai4 commissioned research in 2006
and again in 2009 to discover which aspects of e-commerce site performance most
influenced customers‟ purchasing decisions. In 2006, 46% of customers said a
rapid checkout process „was most influential in [their] decision to continue
shopping with an online store where [they] have shopped in the past‟. By 2009 this
figure had risen to 57%. In 2006 over two thirds of customers said they were
willing to wait more than four seconds for a web page to load. By 2009 this figure
had fallen to 17%.
2. Improvements in checkout design are failing to keep up with these
rising customer expectations. In the three years since our last checkout
report5, it is difficult to identify any clear trends in the improvement of checkout –
there are a few sites where checkout is a joy, yet for the majority of sites checkout is
still unintuitive, unhelpful and error-prone. The most frustrating thing is that
designing a good checkout isn‟t hard any more. Losses during checkout
have been highlighted for long enough now for best practice to have been identified
and, in many cases, proven. If approached systematically, every checkout should
be painless and effortless for the vast majority of customers.
Of course, not all of checkout abandonment is the fault of the checkout itself. A poor shopping
experience overall can leave customers without the motivation to complete the purchase.
Data from Coremetrics on checkout
abandonment from 2007 to 2009 reveals that
abandonment rate increased 0.1% per month
over a 23 month period (R2=0.257, p=0.016)
Checkout abandonment is getting worse
Checkout Optimization 70 ways to increase conversion rates Page 3
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Ambiguity about any aspect of the proposition (price, delivery, returns) can lead to purchase
deferment („I‟ll think about it and maybe come back tomorrow‟). So, it is worth remembering,
throughout this report, that the damage may already be done by the time the customer reaches
checkout.
1.1. About this report: a note from the author As a full-time e-commerce consultant, all I do is investigate e-commerce sites with a view to
improving their performance. Over the course of 2009, for example, I completed full audits of
over 30 e-commerce sites, including their checkouts. After reviewing this many sites, the
patterns of good and bad practice become increasingly clear, especially since the vast majority
of well-run sites now have web analytics installed in at least a basic way. This report is my
attempt to distil best practice for designing an e-commerce checkout.
Having grown up in an era when car servicing could still be done at home (without a dedicated
diagnostic computer to say if your spark plugs need replacing), my hope is that this report is
heading towards becoming the Haynes manual for e-commerce checkout. Whether trying to
diagnose the cause of a specific problem or undertake a „full service‟, my aim has been to inform
and guide you. The technicalities of best practice, while less in-depth than a Haynes manual, are
referenced and further reading is suggested in the endnotes (see Section 6).
As the more fervent fans of Econsultancy will know, this is my second report on checkout – the
previous one was in 2007. While feedback on this report was good and most people seemed to
think it contained a lot of really useful information that wasn‟t available elsewhere, I started
again from scratch with this report. My aim in doing so is to organise checkout best practice to
make it more accessible to busy e-commerce managers.
So, each section focuses on a single aspect of checkout design and is written to be largely self-
contained. The content of each section is intended to reveal whether that aspect of a particular
checkout complies with best practice – if it doesn‟t, the material should also enable you to
specify what changes you should implement. All the recommendations are compiled together
into a checklist for auditing your own checkout performance or perhaps
benchmarking it against a key competitor (see Section 4).
The scope of this report is improving „checkout‟ – i.e. the steps after the basket and up to order
confirmation. This is not to diminish the importance of other aspects of the online shopping
journey (e.g. navigation, on-site search, cross-sells) but simply an acknowledgement that the
“...My hope is that this report is heading towards becoming the Haynes manual for e-commerce checkout.”
Checkout Optimization 70 ways to increase conversion rates Page 4
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
average online checkout makes customers abandon half of the revenues they are in the process
of spending6.
The geographic coverage of this report has been extended to the UK and the USA (the 2007
report focused entirely on UK e-commerce sites). As part of the preparatory research for this
report, the checkouts of the top 25 UK and US retail sites7 were evaluated and screenshots taken
on their pages, error messages etc. including US sites didn‟t actually change a great deal in the
report.
There are some specific regional issues that make checkouts different (e.g. addresses are less
standardised in the UK and hence more difficult to capture; sales tax and delivery changes are
more varied in the US and hence more difficult to present to customers) but apart from that
there was no evidence that retailers in one region are managing checkout any differently or
better than the other. The most valuable insights come from finding sites that do one aspect of
checkout particularly well or badly, regardless of which country they are in.
I hope that the insights gained from this research will be put to good effect to improve online
checkout processes, leading to significant benefits for consumers and retailers alike.
Mike Baxter
2010
“...The average online checkout makes customers abandon half of the revenues they are in the process of spending.”
Checkout Optimization 70 ways to increase conversion rates Page 5
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
1.2. How to use this report to improve your checkout
This report is written in four sections:
1. Improvements that apply to the entire checkout. Some aspects of checkout best
practice apply equally to all the pages within the checkout process – good form design and
effective, informative error trapping are examples. This distinction between checkout
universals and specifics isn‟t just a point of principle – there are also practicalities involved.
Anything that applies to the entire checkout should be coded and deployed differently to page-
specific features. Using templates, CSS or JavaScript libraries will ensure that any changes or
refinements to these checkout universals will require code changes to only a single file.
2. Improvements that apply to specific parts of checkout. Inevitably, a lot of the devil
lies in the detail for checkout and the only way to ensure this detail is implemented effectively
is to work through your checkout page by page, element by element. So, to help you to do this,
we have compiled best practice recommendations for the following areas:
Log-in / Registration / Guest checkout
Address capture
Delivery / Gift options
Payment & Promotions
Order summary
Order confirmation
3. Checklist of checkout success factors. Is your checkout fit-for-purpose? This is intended
to be the quick-win section of the report. By the end of this audit, you should know just how
good or bad your checkout is and have an appreciation of what needs to be done to fix it. Don‟t
imagine this is a five minute task, however. To answer some of the questions you will
probably have to dip into the main body of the report and work through your checkout, testing
elements of it online, as you go.
4. Analytics & split-testing. Best practice describes how to get the best from the majority of
sites, but not necessarily all sites. Aspects of your site may defy best practice rules because of
the nature of your customers, your products or the sector that you operate in. Web analytics
and split-testing can be used to confirm your conclusions from our best practice
recommendations, as illustrated by our overview in this final section.
Checkout Optimization 70 ways to increase conversion rates Page 6
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
1.3. About Econsultancy Econsultancy is a digital publishing and training group that is used by more than 200,000
internet professionals every month.
The company publishes practical and timesaving research to help marketers make better
decisions about the digital environment, build business cases, find the best suppliers, look
smart in meetings and accelerate their careers.
Econsultancy has offices in New York and London, and hosts more than 100 events every year
in the US and UK. Many of the world's most famous brands use Econsultancy to educate and
train their staff.
Some of Econsultancy‟s members include: Google, Yahoo, Dell, BBC, BT, Shell, Vodafone,
Virgin Atlantic, Barclays, Deloitte, T-Mobile and Estée Lauder.
Join Econsultancy today to learn what‟s happening in digital marketing – and what works.
Call us to find out more on +44 (0)20 7269 1450 (London) or +1 212 699 3626 (New York). You
can also contact us online.
Checkout Optimization 70 ways to increase conversion rates Page 7
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
1.4. About Sales Logiq & the author Founded in 2001, Sales Logiq is a boutique consultancy offering a wide range of e-commerce
consultancy services. Led by Dr Mike Baxter, who has a background in both psychology and
design, our work focuses on the online customer experience and its effects upon customer
acquisition, conversion and retention.
Recent clients include Google, KLM, Littlewoods and Crabtree & Evelyn. We were consultants
to Google during the development of their Conversion Professionals8 accreditation scheme,
launched in 2009.
Mike has chaired the annual Internet Retailing conference for several years running, speaks
regularly at industry conferences, workshops and seminars and is the main contributor to
Google‟s Conversion webinars.
Our Services
We are the UK‟s leading authority on the auditing, design and improvement of online retail
sites. We prioritise the changes needed on clients‟ e-commerce sites to maximise business
performance – we tell you what to improve, why and how much extra revenue will result. Our
approach is rigorous, thorough and data-driven, based on:
web analytics
customer journey analysis
customer segmentation
split-testing
Our engagements range from a few days to several months, with a maximum of 100 days
consultancy available in any year.
Contact Mike Baxter on +44 (0) 7740 664696 or [email protected]
Checkout Optimization 70 ways to increase conversion rates Page 8
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2. Improving the whole checkout The guiding principle for all checkout design is „keep it simple‟. Every checkout should look
simple, be simple to understand and simple to use.
If there is one thing every e-commerce manager should know about the psychology of
customers using checkout it is that they are lazy and operating on auto-pilot. This isn‟t being
pejorative about online shoppers – it applies to all of us. The revolution that has been sweeping
psychology, as popularised in books such as Blink and Nudge9, reveals that we operate sub-
consciously a lot more than we realise. A huge amount of what we believe to be rationally
considered, consciously-driven activity is actually planned and executed sub-consciously – our
consciousness is then told what is happening, giving us the illusion of conscious control. A
more specific finding is that we are cognitive misers10: our minds take lots of shortcuts to
minimise the amount of thinking effort required to get a task done. Checkouts, therefore, need
to be designed so that they can be completed with as little thought as possible – or possibly
while multi-tasking (e.g. grabbing a sandwich for lunch, looking busy at work, keeping an eye
on the kids). When something in checkout does demand full concentration, it should be
resolved quickly and simply – the more often this happens, however, the more annoying and
frustrating the checkout process is going to feel. So, the fewer form fields to fill in the better, the
more that are auto-populated the better, the more straightforward the labels, calls-to-action and
guidance the better and the more obvious and relevant the error messages the better.11
Here are 10 specific issues related to the entire checkout process (as opposed to any particular
element or page, which will be dealt with in the next section), all of which are focused on
making checkout simpler in one way or another:
1. Isolating the checkout 6. Stock management & session timing
2. Checkout steps 7. Form design
3. Navigation 8. Validation and error-trapping
4. Persistent summary of checkout information 9. Calls to action / submit buttons
5. Avoiding loss of information already entered 10. Trust
by customers
The remainder of this chapter looks at each of these areas in more detail.
Amazon‟s patented11 1-Click checkout (below)
illustrates how simplicity can be the cornerstone of
effective e-commerce. Customers can make purchases
with a single click both online and, from 2009, from
mobile devices, using previously entered payment
details and delivery address.
While other e-commerce vendors (such as Apple
iTunes) now license the 1-click approach, this
philosophy of simplicity goes beyond one-click
payment and can be applied to all elements of
checkout design from registration to order
confirmation.
Amazon keeps it simple
Checkout Optimization 70 ways to increase conversion rates Page 9
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.1. Isolating the checkout
When a customer enters checkout, there is only one place you want them to go – order
confirmation! In which case, why not minimise all possible distractions and isolate the
checkout process from the rest of the site? In a site with a typical e-commerce layout, the
checkout pages should be „quarantined‟ i.e. stripped of header content, footer content and the
left-hand navigation column. In place of the header should be a company logo in the top left of
the page – this can be linked to the home page as the only „escape route‟ remaining out of
checkout, or simply left as an image. In place of the footer should be links to information about
deliveries, returns, privacy and security, guarantees and possibly about us. All of these footer
links should open in a pop-up layer / lightbox12 over the checkout page so they can be closed to
return the customer to the checkout exactly as they left it. In addition links should be provided
to the products being purchased but again this product information should appear over the
checkout page in a pop-up layer.
Compared to a regular Walmart page (e.g. the movies
category page shown far left), the checkout pages are
clean and simple (second left). The global navigation on
the left hand side of the page has been removed, as have
the header and footer links. The links to terms and
information (e.g. customer information on shipping and
gift wrap) all open in pop-up windows, allowing the
customer to view these details without leaving the
checkout.
The exceptions are the logo in the top left of the page,
which links to the home page, and a link to „edit cart‟.
These links, however, are understated.
Walmart checkout quarantine
Checkout Optimization 70 ways to increase conversion rates Page 10
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Serenata Chocolates has a well-enclosed checkout,
with global navigation removed and links to terms
and information appearing in pop-up layers. Its
logo is not linked, although there is a „Back‟ button
as an „escape route‟ – this is understated in terms of
colour and location on the page. The product being
purchased is visible throughout in the order
summary on the right-hand side, and can be
enlarged in a pop-up layer.
There are, however, some errors on the page which
shows how a good checkout can be spoiled by lack
of attention to detail:
1. The „Back‟ button links to the home page of its
sister company, Serenata Wines
2. The links to information on privacy and „100%
satisfaction guarantee‟ relate to the parent
company, Serenata Flowers
3. The link to Thawte to verify „100% safe secure
shopping‟ gives an error page
4. The link to McAfee Secure takes the user to the
McAfee home page, with no reference to
certification of this company.
Serenata Chocolates isolates the checkout
Checkout Optimization 70 ways to increase conversion rates Page 11
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Each section of the checkout opens up in sequence
to reveal a form to be filled in (see image, right). On
submission of that form, the next section opens up
leaving the preceding section showing only a
summary of what was submitted. The section
headings also work as links enabling customer to go
back and edit what they‟ve entered.
Beautiful Pure‟s accordion checkout
2.2 Checkout steps At every stage during checkout, the customer should know where they are in the process and
what remains to be done before purchase is complete. This is typically achieved in one of two
ways:
Firstly, and most commonly, a progress bar across the top of each checkout page shows the
stages within the checkout process and also highlights the customer‟s current location (see
image, right). The progress bar below from www.CafePress.com indicates that we are at stage
two of a four-stage checkout process. Around 100 examples of different checkout progress bars
have been collected by Canadian agency Pitstop Media13.
Secondly, an accordion design can be used to arrange the checkout process vertically up and
down the page, as shown below from Beautiful Pure. Apple has recently moved from progress
bar to accordion design in their checkout (see discussion by Luke Wroblewski14) – it has not,
however, isolated its checkout yet!
It doesn‟t really matter how the checkout process and progress through it is represented to the
customer, so long as it is clear and simple. Bear in mind that the purpose of a progress
indicator is to inform customers where they are and how far they have to go. It is therefore
important that, if a progress indicator is used, it should reflect the actual process being
undertaken. If the indicator is inaccurate, it would be better to omit it than risk damaging your
brand by misleading and frustrating your customers.
Checkout Optimization 70 ways to increase conversion rates Page 12
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.3 Navigation
Assuming the customer is prevented from navigating away from the checkout (e.g. to find
delivery information) by isolating the checkout process (see Section 2.1), navigation through the
checkout process is nearly always in one direction – towards order confirmation. The exception,
however, is when someone wants to go back one or more steps to check or to change what
they‟ve entered and this often proves the downfall of badly designed or inadequately tested
checkout processes. Customers may want to retrace their steps, for example, to:
Change the product they are buying („I‟ll go for the more expensive/cheaper version‟)
Use a different email address („I‟ll use my personal email address rather than my work email‟)
Use a different delivery address („I‟ll get it delivered to my neighbour‟)
Use a different payment method („Not sure if there is enough money in that account‟)
Check the details previously entered („Which address/card/delivery service did I specify?‟)
An obvious recommendation is to minimise the customer‟s need to click back and
forth in the checkout process. This is best achieved through a persistent checkout summary
– carrying forward a summary of the information entered in previous steps of the checkout
(this is dealt with in detail in Section 2.4). This persistent checkout summary can also
facilitate navigation back and forth within the checkout, as illustrated well with the example
from Gap.com (below), which uses „Edit‟ buttons.
Persistent visibility of information entered and
clear edit buttons allow the customer to navigate
back and forth to ensure that the correct
information has been added throughout the
checkout process.
Navigation in Gap
Checkout Optimization 70 ways to increase conversion rates Page 13
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
The main recommendation for navigation in checkout, however, is to make sure the browser
back button works in the way the customer expects it to. Checkouts can get this wrong in two
different ways: i) warning messages and ii) breaking customer expectations (of where they will
be taken), as discussed overleaf.
Warning messages
The image on the right shows a typical warning message triggered by use of the browser back
button, illustrated here in the checkout at Hamleys.com. The technical staff who develop
browsers would argue that this warning makes perfect sense – the previous page, which the
customer is asking to be reloaded, POSTed data to the server during the initial page-load
process (submitted it using an HTTP POST request). In some cases, the technically-savvy user
will want to re-POST the data and in other circumstances they won‟t – hence you warn them
what is happening and ask what they want to do.
To the average e-commerce customer, a warning is only a cause for concern, possibly to
the extent of abandoning their purchase. They don‟t understand the warning, they can‟t decide
what to do, in case they get it wrong... and most importantly of all, this sort of warning is
irrelevant in an e-commerce checkout. Every time checkout data is submitted by pressing the
„continue‟ button this data will be saved in the database. Resending POST data doesn‟t matter
because it is all saved anyway. So, what do we do to avoid such warnings? There are a variety of
solutions involving page redirects and, if necessary, the use of GET or session variables in place
of POST variables15. (See also Section 2.10 on Trust)
Breaking customer expectations
A very different problem that arises when customers use the browser back button is that it
sometimes doesn‟t take the customer where they expect to go. This is mostly a problem when
AJAX16 is used to step customers through a checkout process without moving from one web
page to the next17. Using the back button will take customers to the last page they had looked at,
which in an AJAX-driven checkout is likely to be the basket page – very annoying if you were on
the fourth step of a five-step checkout and wanted to go back to step three! There are many
different technical work-arounds to this problem, a few of which are described in the end-
notes18.
As illustrated by the example of the Serenata Chocolates bespoke „Back‟ button in Section 2.1, taking customers to unexpected places is not just a problem with
the browser back button – navigation buttons/links on the page (right) must also be checked for incorrect or legacy urls. This also applies to those (few) sites
that allow navigation via the progress bar (see example from Sears, below right). It should go without saying that allowing customers to navigate around the
checkout should be possible without the loss of previously-entered information - we deal with this in Section 2.5.
Checkout Optimization 70 ways to increase conversion rates Page 14
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.4 Persistent summary of checkout information As discussed in the previous section on navigation, customers may want to be reminded and
reassured about the information they have entered during the checkout process so far. The
more the checkout hides the information entered by the customer the more they are likely to
click back and forth to check it. The accordion checkout design shown in Section 2.2 above is
one way of achieving this. An alternative approach is to have a panel containing a summary of
basket contents and checkout information entered so far that is visible throughout the checkout
process. An example from www.comet.co.uk is shown below.
At the start of the checkout, this summary panel
will simply show basket contents. Our
recommendation here is that, where possible,
thumbnail images, titles, variant choices (e.g.
colour, size) and quantities of products are
shown, along with total price (inclusive of
discounts, taxes, delivery etc.). As checkout
progresses, the summary panel will expand to
show summaries of email, billing and delivery
addresses, payment details and delivery / gift
wrap options.
This summary panel is usually positioned on the
right-hand side of the page. For sites with a
persistent mini-basket in the right hand corner of
the header prior to checkout, this location is more
important to give consistency and comply with
customer expectations.
Customers must be able to navigate to previous
steps in the checkout process in order to edit each
step if required, without leaving the checkout
process or losing information.
Navigation can be achieved with links within the checkout summary, as
highlighted here on the right for our Comet example (and also shown in Section
2.3 using Gap.com as the example).
As the customer progresses through the checkout,
so the checkout summary extends. This summary
could be improved by having the title and an image
of the product, and by having a link to a pop-up
layer with a more detailed product description.
Comet.co.uk‟s persistent checkout summary
Checkout Optimization 70 ways to increase conversion rates Page 15
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.5 Avoiding loss of information already entered by customers Of all the annoying things that happen in checkout, losing the information you‟ve already
entered is among the worst. There are four different ways a checkout can lose information:
1. Checkout information is submitted to the web server for processing and storage whenever the
customer clicks the submit or continue button at the foot of each checkout page. Refreshing the
page or navigating away from it without clicking the form-submission button will lose the
information just entered on that page... unless steps are taken to prevent the loss. The first step
is to minimise navigation links within the checkout process and ensure that any remaining
links pop-up information in a lightbox/pop-up layer rather than loading a new page (see
Section 2.1, Isolating the Checkout). If this is not possible and page-load links remain in the
checkout, use onClick event handlers to trigger a form.submit function in Javascript. An
optional second step is to protect against information loss if the customer navigates away
to a different site or closes the browser window. Here, an onUnload event handler can be used
to trigger the form submit function. There are some reported browser compatibility issues19
with onUnload but it will work more often than not.
2. If checkout has been started but interrupted – say to find an additional product and add it to
the order – the checkout should resume where it left off. So, for example, let‟s assume I
have entered my personal details and my address in checkout already. Then, just before I enter
my credit card details, I remember I need to buy something else, which I go off to find and add
to my basket. When click „go to checkout‟ I want to be taken directly to the payment page to
complete the checkout process I started earlier. I don‟t want to have to start at the beginning of
checkout again. Being able to achieve this requires checkout status to be recorded as a session
or cookie variable.
During the obligatory registration with House of Fraser (above
right) I gave my title, first name and last name, and then moved to
the first step of checkout (right) – where they asked for my title,
first name and last name!
House of Fraser forgot me!
Checkout Optimization 70 ways to increase conversion rates Page 16
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
The image above shows the variation in days from first visit to
subsequent purchase. These particular data suggests the site
should adopt 60 day basket persistence - i.e. chopping off only
the outlying 1.5% of customers who buy after 60 days. Since this
is quite a long first-visit to purchase interval, there could be
adverse consequences of reserving stock for this long (see
Section 2.6) and hence a simpler 24 hour basket persistence
could be selected, still accommodating the needs of over 80% of
customers. The main point here is that data is available from web
analytics to guide decision-making about basket persistence.
Saving basket contents can increase revenue
3. Even after a basket has been abandoned and the customer has left the site, as
many as 33% will come back and purchase later20. As a result, losing
information on basket contents would seem an almost certain way of losing
revenue21. Survey research22 suggests that more than 80% of US e-commerce
sites now save basket contents after site abandonment, typically for periods
ranging from less than a week to three months. Analytics (see image right and
Section 5) can be used to explore number of days to purchase and identify the
duration baskets should be saved for to accommodate, say, the 95th percentile
of purchases (stock management can also be an issue here - see Section 2.6 -
Stock management & session timing). Alternatively items can be moved to a
wish list or „saved items‟ area of the basket so that customers can be reminded
of them on their returning visit and stock availability re-checked (see example
below from Amazon).
4. The final way that checkout can lose information is by failing to remember
customers coming back to purchase a second time. Even without account login
functionality, returning customers should be identified by cookie or by email link-tagging
or by email address entered at the start of the checkout process.
Once recognised, all name and address fields should be pre-populated or, if multiple
addresses have been used (for billing or delivery) they should be offered as a single click
choice. Pre-populating payment information obviously carries additional security risks
that need to be thoroughly evaluated (and compliance-checked23) before being offered.
Checkout Optimization 70 ways to increase conversion rates Page 17
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.6 Stock management & session timing Stock management in checkout presents a genuine conflict of interest between the
customer and the retailer. Having placed an item in their basket, the customer will be justifiably
indignant if that item is removed from their basket during the checkout process – imagine
standing in line at the supermarket waiting to pay, only to find out that when you reach the cash
register your basket is empty! Conversely, the retailer needs to have stock available for sale, and
so will not want items held in the baskets of customers who do not intend committing to a final
purchase.
The first issue to recognise here is that checkout is about payment, not shopping. As we have
said all along, keep checkout clear, simple and short, putting nothing in the way of the customer
once they have committed to buy. Stock availability should always be made clear prior
to checkout, and stock reserved at an appropriate point, until or unless the customer is
deemed to have abandoned it. So the two decisions we need to make are at what point is stock
reserved for sale, and what rules should apply for releasing that stock to other customers?
1. When should stock be reserved for sale? The simplest option is to reserve stock when it is
added to basket. If there is high basket abandonment rate or if stock is in short supply and high
demand there may be a case for considering alternative options. One is to reserve stock when
the customer clicks to begin checkout and the other is only to reserve stock only once purchase
is complete. The challenge with these options is managing communication with the customer
when stock runs out – one suggestion is to check stock in the customer‟s basket every time a
new page is loaded and flag up prominent out-of-stock apologies, when necessary.
2. What rules should apply for releasing that stock to other customers? Never releasing
stock once it has been reserved (added to a basket) is inefficient and probably exceeds customer
expectations. If I come back to a site two months after my first visit, I don‟t expect the retailer to
have refused to sell it to anyone else in the meantime. Releasing stock from baskets once a
shopping session ends is both prudent and reasonable. To cater for sessions that don‟t end
(computer in sleep mode and browser left open) a cut-off needs to be set – this could be
anything from 10 minutes to an hour of browser inactivity and frequently this will be based on
session-timing. The challenge, again, is communicating your stock management rules to the
customer.
Stock availability frustration at Argos
Argos has high demand for a limited supply of products and needs sophisticated stock management. However, in the example below, they fail to inform the customer that an item is out of stock until after the purchase. The assurance that the items „were not purchased‟ is little consolation when the buyer has now paid for only half the items they wanted, and with full shipping costs.
Checkout Optimization 70 ways to increase conversion rates Page 18
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
So, how do we try to establish best practice from these various options?
1. Doing nothing about stock reservation is not an option. The previous example shown
(from Argos.co.uk) is a substantial breach of trust.
2. A reserve-on-add-to-basket should be adopted as the most simple and effective
stock reservation rule. Reserve-on-entry-to-checkout and reserve-on-purchase are both
technically feasible but counter-intuitive to the customer and messy to communicate
convincingly. They also achieve nothing that cannot be equally well achieved by a stock release
policy.
3. Stock management is most effectively tightened by session management (session
duration). However, it must be communicated clearly to the customer and preferably the
count-down to session timeout should also be shown. This is illustrated by Ticketmaster below,
and in stark contrast to Dell and JC Penney, also shown below.
Session timing at Ticketmaster
Some vendors, such as Ticketmaster (above and right) make it extremely obvious to customers that their
purchase choices are only reserved for a limited time, and that after that time the tickets will be released
for sale again.
Their messaging is made clear, and may be entirely appropriate for their market and product, but they
still need to ensure that the checkout process is quick and simple to avoid frustrating customers. The
inclusion of product selection as part of „shipping‟ means that their checkout fails to separate purchase
choice from transaction.
In contrast, Dell (left) and JC Penney (below left) give
no warning that a customer‟s session is about to time
out.
Dell then compounds the issue by emptying the basket
and forcing customers to reselect all items – since
many Dell products require a significant amount of
configuration prior to checkout, this can lead to huge
amounts of customer frustration and inevitable
purchase abandonment.
Time out – start all over again!
Checkout Optimization 70 ways to increase conversion rates Page 19
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.7 Form design Filling in forms is what checkout is mostly about – so it probably makes sense that you should
spend most of your checkout improvement time making your forms work better. Good form
design is both an art and a science. It is an art because the visual appearance of a form can
make it look simple, intuitive and (almost!) appealing - or messy, cumbersome and difficult.
There is also a considerable measure of design judgement involved in the trade-off between
having few steps in the process but lots of information in each one, or less information and
more steps. The „science‟ covers several different aspects of form design: knowing how
customers perceive and process forms, understanding web conventions and standards, and
systematically managing the relationship between data requirements, data entry controls and
validation scripts.
The first and most obvious rule in form design is to keep them as short as possible and never
ask for unnecessary information. The example opposite is from Littlewoods.com – why does it
need to know my date of birth before I can order a T-shirt? (US retailers have more need to
check customer age24) This looks, to the customer, like irrelevant information. From
Littlewoods point of view, of course, it may be essential
– in which case say why, as Next.co.uk does.
Web Form Standards
There are many features of form design that have
become standardised – i.e. used sufficiently widely to
make customers expect their forms to be designed in
this way and potentially confusing for them if designed
differently.
1. Compulsory fields are identified with a red asterisk – this
may be located before of after the form field label, as shown in the
examples opposite from Next and Littlewoods.
2. Where forms require customers to select from a list of options
they are usually presented as a drop-down list. Title (Mr, Mrs
etc), credit card type (Visa, Mastercard etc) and credit card expiry date
are common examples. Drop-down menus should never be used,
Don‟t ask for anything on a form unless it is essential: why does Littlewoods.com need to know my date of birth?
Next.co.uk asks for date of birth but explains why…
…although there are other ways of confirming age without requiring date of birth
Checkout Optimization 70 ways to increase conversion rates Page 20
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
however, to force a customer to choose the one and only option available. If you only offer one
option, tell me about it, don‟t make me select it!
3. Where two or three options are available, they can be presented more effectively
as radio buttons (see the billing address options from VictoriasSecret.com, opposite). Radio
buttons have the advantage of showing all options to the customer without them having to click
a drop-down box.
4. Checkboxes are used to ask customers for their confirmation or consent –
typically, to confirm that billing and shipping addresses are the same, or to consent to
receiving marketing and promotional emails. With email marketing the question arises as
to whether customers should be asked to „opt-in‟ or „opt-out‟. Customers would almost
certainly prefer to opt-in, but anecdotal evidence from e-commerce companies suggests
that retailers can gain between three and five times as many opt-ins if the default is „opt-in‟
(passive not active). This is the balance that the retailer needs to weigh up: is it better to
have as many email addresses as possible (via passive opt-in) or fewer addresses from
customers who have deliberately and actively opted in. For all email marketing in the UK,
the Privacy and Electronic Communications (EC Directive) Regulations 200325 demand
that organisations cannot send unsolicited marketing communications by email to
individual subscribers unless the recipient has given his „prior consent‟ (deemed to include
not opting out, as shown in the example from Next, right). In the US, the CAN-SPAM Act of
200326 has been dubbed the "You-Can-Spam" Act because, while heavily penalising non-
compliance, the bill explicitly legalises most e-mail spam and, in particular, does not
require retailers to get permission before they send marketing messages, provided they
adhere to certain rules, such as
providing a return address and a valid
physical address, and offering a 1-
click unsubscribe feature in all
emails.
5. Although relatively recent
innovations, the use of dynamic
pop-up controls is becoming
increasingly standardised in
checkout. The most common is the
pop-up date selector, shown right.
Radio button controls give customers better visibility of the options
Delivery date selector from Marks & Spencer
A pop-up date selector offers an intuitive, user-friendly way for
customers to select a date for delivery of their online order. This
type of rich interface also enables the retailer to add delivery
information, such as delivery availability, shown here.
Pop-up date selectors on other e-commerce sites use different
colour shading on different dates to indicate different delivery
charges.
Next require customers to „opt-out‟ of marketing emails
Checkout Optimization 70 ways to increase conversion rates Page 21
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
6. Form-field size and affordance. The
concept of affordance is used widely in
interaction design27 – in essence it means that
the design of an interface should indicate to
the user how they are expected to interact with
it. Affordance in form design simply means
that the size of a form field should indicate
how much information is expected to be
entered into it.
7. Guidance notes and examples. While
form-field affordances give some indication of
what the customer is expected to enter, it often
helps to have guidance or an example adjacent
to the field. In some cases, guidance is
essential: for example, what is a security
number for a credit card (see example from
Next below, and Section 3.4 on Payment
capture). In most cases, however, these notes
simply reassure the customer that what they are
filling in is what is wanted and is in the right
format.
8. The final issue to consider in form design is label alignment. While this might seem quite a minor issue,
research has shown that it can make a surprisingly large difference to the ease with which forms can be
completed. The key issue is how quickly and easily customers find out which label goes with which form
field – essentially the closer the two are together the better and the quicker the form will be completed.
This effect has been proven by Luke Wroblewski28 and Matteo Penzo29 using eye-tracking studies.
The size of form fields should inform the customer how much information they are expected to enter The relative size of form fields is used, in this
example, from QVC.com, to indicate how much
information the customer is expected to enter.
The name and address fields are larger, showing
that the customer can „afford‟ to enter a lot of
text. The ZIP/Postal Code field, however, is
much smaller confirming to the customer that it
is just the 5-digit number required for US
addresses or the 6-character postal code for
Canada. The phone number fields have even
more specific affordance, indicating the 3-3-4-
digit pattern required for all North American
numbers.
Next offers good guidance notes but poor affordance and label alignment
Next offers clear guidance notes to customers next
to their form fields (bottom left), but the size of
box to be filled in gives no indication of the
amount of information the customer is expected to
enter. Left aligned form field labels make the
customer work a little bit harder too (see overleaf).
Checkout Optimization 70 ways to increase conversion rates Page 22
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
How should form labels be aligned with form fields?
There are three ways of aligning labels with form fields, as shown opposite (from Luke Wroblewski). When
eye-tracking studies are done on customers completing these different form layouts, striking differences
emerge. Top aligned labels are by far the easiest for customers to complete – this is because they focus on
both the label and the form field with a single eye-movement. Both the right and left-aligned labels required
eye movements back and forth between the label and the form field to associate them in the customer‟s mind.
Right aligned labels required substantially fewer such eye movements than left-aligned labels.
So top-aligned labels take least time and effort but they are not all good news. The gap between the label and
its form field must be noticeably smaller that the gap between the label and the form field above it. As a
result, more than twice as much vertical screen space is needed for each form field as would be needed for
right-aligned labels. This leads to longer forms, more content below the fold and, just possibly, a mistaken
perception by customers that this is a harder form to complete. Which leads to the compromise conclusion
that short forms with few form fields should have top-aligned labels but longer forms should have right-
aligned labels... exactly as Walmart.com does (below)!
Top-aligned labels for short forms and right-aligned labels for longer forms
Walmart goes for the most efficient top-
alignment but only for short forms (see
below). For longer forms, where top-
alignment might extend the form, taking
up too much vertical space, the next-best
right-alignment is adopted (see right).
Checkout Optimization 70 ways to increase conversion rates Page 23
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.8 Validation and error-trapping The first principle of validation and error-trapping is „don‟t unless you
have to!‟ There are so many painful examples of data being rejected in
checkout because it doesn‟t meet some unnecessarily strict
validation criteria. During the registration process on Tesco, for
example, you need to enter your phone number with no spaces or you
get your form rejected with a big red error message. Come on Tesco! It
is not difficult to remove spaces from a telephone number – why blame
the customer when you didn‟t even tell them what you wanted in the
first place! But they are not alone. We‟ve found examples of spaces in credit card
numbers being rejected, a space in a postcode being rejected and even a postcode without
a space being rejected.
The rule here is to let customers type in what they want and then use your e-
commerce system to process it into a different format if necessary. If the
customer does make an error during checkout it must firstly be made clear that an error
has been detected and secondly, the location of the error on the form must be highlighted
and the nature of the error indicated. Making sure that all these aspects of the error are
communicated to the customer usually requires „double error messaging‟, as shown in Bed,
Bath and Beyond opposite. Double error messaging puts one error message near the top of
the page, indicating that something is wrong with the form and another message next to
the form field containing the error. One or both of these messages should indicate the
nature of the error and, if not obvious, what needs to be done to rectify it. A nice touch on
the error message shown opposite is that it gives the customer another route to purchase –
contacting the call centre. By contrast, Argos gives error messages one at a time with no
pointer to where
the error occurred.
Tesco rejects a telephone number if it is typed in with spaces in it!
Bed Bath and Beyond uses double error messaging to make sure customers know what‟s wrong
Poor error messaging on Argos.co.uk – errors are shown one at a time in an alert pop-up
Checkout Optimization 70 ways to increase conversion rates Page 24
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.9 Calls to action / submit buttons The submit buttons play a key role in the entire checkout process. Technically, they
submit the information entered in forms by the customer to the web server for processing and
fulfilment. From a customer experience point of view, they are the calls-to-action that drive the
customer towards checkout completion. So how do we design a good submit button? Easy...
make it big and shiny so it just asks the customer to click it!
More specifically, submit buttons needs to be:
1. Visually salient – they should stand out, visually, from the rest of the page and draw the
customers attention to them
2. Visually isolated – no other buttons should be inadvertently clicked by mistake
3. Visually consistent across the checkout – building up a pattern in the customers mind
so they know what to look for.
A useful way to check this is to look at a
checkout page when it has been blurred.
This stops the content of the page from
distracting attention away from its visual
design. The blurred screenshots30
opposite show examples of good and bad
practice in the design of submit buttons,
from Marks and Spencer and JC Penney
respectively.
There remain, however, several usability
challenges with submit buttons, the main
ones being labelling and positioning.
While the design of submit buttons is one
of the few aspects of checkout design
where we do not have established best
practice, we can highlight bad practice
that should be avoided.
The blurred screenshots below help focus attention on visual design and the effectiveness of buttons. The image on the left is from Marks and Spencer and it shows how a button can still be obvious and draw the customer‟s attention without being a glaring colour. The image on the right, from JC Penney shows the opportunity for confusion, both between several buttons and also between the buttons and the navigation colour-scheme in the top-bar.
Good and bad button visibility
Checkout Optimization 70 ways to increase conversion rates Page 25
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Button labelling
In the early days of the web, it was decided that there should be two different controls serving
the general purpose of move-on-from-the-present-page: hyperlinks took you to a different
page whereas submit buttons performed an action on the current page. This nice clean
distinction was muddied by the fact that submit buttons might then take you to a different
page but this was a by-product of form submission, not its primary function. Their different
roles were reflected in their labelling. The anchor text in a hyperlink describes the destination
page (e.g. „About Us‟ takes you to a page about the owner of the web site). By contrast, the label
on a submit button described the action that applies to the current page (e.g. „Submit‟ means
submit the contents of the form on this page to the web server).
On a modern e-commerce site, the submit button on a checkout page serves the role of both
submit button and hyperlink – it processes the current page and takes you to the next page.
Which leads to an interesting dilemma about button labelling: do we, on the address capture
page, for example, label the button „use this address‟ or „go to payment‟? The majority of sites
duck the problem by using the non-committal „continue‟ or „next‟ as button labels. A few,
however, get button labelling wrong and potentially confuse their customers, as illustrated
opposite. The buttons look as though they are labelled to indicate the action they trigger, i.e.
as soon they are clicked the transaction will be processed and the payment debited. In actual
fact they don‟t; they take you to the payment page where you enter your credit card details.
They are, in other words, labelled as if they were hyperlinks. The clear advice here must be to
avoid ambiguity in the labelling of buttons – make certain your customers know
whether the button label refers to what the button-click action does or whether it refers to the
page they will move to next.
The „perfect checkout button‟ from Pitstop Media31, which I have adapted opposite, suggests extending the
button label to include a call to action that tells the customer more fully what is about to happen when they
click. It remains to see whether this added complexity helps or hinders checkout performance overall, but
it would be a great candidate for a split-test (see Section 5).
Button positioning
Buttons on checkout pages are usually on the bottom right corner of the page. It is not clear where this pattern originates from but it may be
that right alignment conjures some sort of page-turning metaphor32. The key with button positioning is identical to that of button design – it
needs to be visually salient, visually isolated (especially from secondary calls-to-action such as back buttons) and visually consistent. Many
sites duplicate buttons above and below the fold on long pages.
Should labels be longer to give customer clearer guidance on what happens when they click?
Including a clear call to action
These buttons do not lead to immediate placement of the order and payment for goods, as many customers might expect – they lead to the payment page where credit card details are entered. Top button from Disney.com and lower button from notonthehighstreet.com
Misleading payment buttons
Checkout Optimization 70 ways to increase conversion rates Page 26
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
2.10 Trust There are many elements to building trust into an online shopping experience, and
more in the checkout than anywhere else in the customer‟s journey. Poor site
performance, unreliable navigation and sites littered with errors are all going to erode
trust from the outset. During checkout customers need reassurance that their
purchases will actually be delivered and that their credit card details are safe.
Suspicion and distrust of a site, and consequently a brand, can arise out of the smallest
uncertainty or poorly thought-out interaction, and many consumers will abandon a
site rather than continue a transaction with a company they no longer trust.
According to research, nearly half of consumers have terminated an order or
abandoned their shopping cart due to fears about online security33 and
76% claim that identity theft is a "major" concern for them34.
Reassurance to the customer throughout the checkout process starts with
reliable site performance, and clear navigation and messaging. This should
include prominent evidence of where the customer is in the checkout
process, what‟s in their basket and what information they have entered so
far (see Section 2.4).
Terms and conditions and pricing (including delivery charges and lead
times) should be clear, with no nasty surprises arising from hidden costs
or well-concealed „small print‟. In addition to this, the point at which the
customer enters the checkout must also be the point at which they are
directed onto a secure server, and customers are becoming increasingly
vigilant for signs of online security, such as:
https:// in the address bar
the padlock icon (double-click to see details of security certificate)
logos from 3rd party verification services (these must be links to current
and valid certification).
Play.com offers clear signs of security (such as valid links to third-party verification) and provides customers with the reassurance that help is on hand should they need it, both online and on the phone. Information entered through the checkout is clearly presented, along with links to terms and conditions and their privacy policy.
Play.com builds trust in its checkout
Checkout Optimization 70 ways to increase conversion rates Page 27
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Company contact details (full postal address, phone number and email) and sales support should feature prominently on the page.
This is particularly important for customers making complex or high-value purchases, where live sales support (live chat, call back,
customer services helpline) can also be used to provide added reassurance.
Privacy and security of personal information
In a survey by Verisign35, 93% of respondents said they would stop transacting on a site that is not secure. All online retailers
capturing any kind of personal information (such as name, address, email address, telephone number) in the UK must register under
the Data Protection Act 199836, stating what they intend doing with the data, ensuring the security of all information held and
allowing data subjects access to their data, with an option to delete it on request.
In the US the privacy and security of personal information is covered by a variety of sector- and state-specific37 legislation, although
there is no all-encompassing law regulating the acquisition, storage, or use of personal data.
Implementing and maintaining Information Security Management Systems (ISMS) certified to international standards38 can ensure
compliance with the Data Protection Act in the UK and legal standards for information security management in the US.
Checkout Optimization 70 ways to increase conversion rates Page 28
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
3. Improving specific parts of checkout While Section 2 covered generic themes that apply across the whole of the checkout, this section
looks at particular elements of the checkout process. These different elements will often be on
separate checkout pages.
They do not need to be, however, and we have tried to ensure everything we say in this section
applies equally to single-page checkout as it does to a more common multi-page checkout. The
specific parts of checkout that have particular requirements are:
1. Log-in / Registration / Guest checkout. This is usually a „pathway‟ page that lets
registered customers and new customers take different routes through the checkout.
2. Address capture. This needs to capture both delivery and billing addresses and the major
issue to be resolved is how best to standardise address capture.
3. Delivery / Gift options. The customer‟s choice of express or time-scheduled delivery options
may need to be captured as well as gift wrap and gift messaging choices.
4. Payment capture. Again the major issue here is standardisation, although security, payment
authentication and discount promotion code capture have also got to be considered
5. Order summary. Is it better to have an on-going cumulative summary of the order on every
page of checkout? We suggest it is but even if you don‟t do this, an order summary of some sort
is essential before getting the customer‟s commitment to purchase
6. Order confirmation. The customer needs to know the order is placed and this provides the
retailer with a golden opportunity for an immediate repeat purchase.
In all of these elements, our aim is to highlight the issues that are important for the customer‟s smooth
and effortless movement through the checkout. For each of these elements we identify and exemplify
best practice, often by contrasting it with bad practice.
Checkout Optimization 70 ways to increase conversion rates Page 29
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Different sites offer different checkout pathway pages, as illustrated by Argos, Charles Tyrwhitt and Walmart below
3.1 Log-in/Registration/Guest checkout There are still many e-commerce sites that insist on registration as the
first step in checkout despite evidence39 suggesting that around a
quarter of shoppers will abandon their purchase if forced to register.
This abandonment rate is only going to get worse as required
registration becomes less common. The most important thing to
realise is that registration is not only harmful, it is also
unnecessary! Email address has to be captured anyway for order
confirmation as does name and address for delivery - so the only thing
missing from registration is a password. This can be asked for on the
order confirmation page, automatically generated and sent to the
customer by email or offered as a „create password‟ link on the order
confirmation email.
The entry point to checkout is commonly the „pathway page‟ where
registered customers can enter their username and password to have
their checkout details pre-populated, new customers can register their
details prior to checkout, and others can continue through „guest
checkout‟, as illustrated by DisneyStore.co.uk below.
Checkout Optimization 70 ways to increase conversion rates Page 30
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
The best practice pathway page
Analysis of all the various options offered for login, registration or guest checkout
revealed two sites with what we consider to be best practice for pathway pages:
Sears.com and JohnLewis.com.
These two sites use almost identical workflow and very similar dynamic interfaces
as shown. On John Lewis the first page of checkout contains only a single textbox
and a continue button –positively Google-like in its clean, uncluttered appearance.
Once an email address is entered
and the continue button clicked,
a new panel is revealed asking
„Do you have a password?‟ and
offering radio buttons for yes and
no. The default is „no‟ enabling
new customers to click the
„continue‟ button to carry straight
on the next step. If the „yes‟ radio
button is clicked then a password
field and „forgotten password‟
link is revealed. It is all very
clean, slick and intuitive for the
customer. It is almost difficult to
see how it could be improved...
until you look at Sears.com. By
showing the „Do you have a
password?‟ radio buttons when
the page loads, Sears has
removed one button click from
the John Lewis process. The only
fault with the Sears process is
that it doesn‟t have a password
reminder link. Combining the
best from both sites could get
close to the perfect pathway
page!
Best-practice login process on JohnLewis.com (right) & Sears.com (below)
Checkout Optimization 70 ways to increase conversion rates Page 31
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Email address capture
In order to capture an email address effectively, you need to ensure two things:
1. That the form field (textbox) is big enough to accommodate the longest email address. The
maximum permitted length for an email address is 254 characters – not 320 characters, as
often reported40. In practice, the vast majority of email addresses are much shorter.
Analysing a sample of 50,000 emails from a UK e-commerce site revealed that the 99th
percentile address length was 36 characters. It is recommended, therefore that the textbox
for email address capture is big enough to show 40 characters but that the maximum string
length that it can capture is 254 characters (i.e. maxlength attribute of the input tag and the
corresponding database field for storage is set to 254 characters).
2. That the email address is valid. Email validation can go through three stages41 – i) address
conformance to the RFC email specifications, ii) domain validation – does the domain
following the „@‟ in the email address exist and iii) does the SMPT email server give an
address confirmation message when pinged. While the second and third stages of
validation sound like the ones to go for, there can be significant delays in getting a
response. So, to avoid a huge spike in checkout abandonments, never attempt to keep your
customer waiting while you run these validation calls and only run them asynchronously.
This leaves email address conformance.
Warning – this part of email validation is a hideously complicated and could take up the
rest of your life; so either keep it very simple (is there at least one dot and an @ in the email
address) or borrow a tried and tested validation script from someone who has already spent
their life developing and testing it – like Dominic Sayers42, whose validator was used to
check all the surprisingly valid addresses on the right.
Other issues related to log-in / registration / guest checkout
1. Capture the customer‟s email address as the first step of the checkout process – if the customer
subsequently abandons the checkout the retailer has the opportunity to re-target them by email
and attempt to recover the sale.
2. Highlight the need for capturing the customer‟s email address and the benefits of registration.
3. Wherever a password is asked for, provide the opportunity to retrieve forgotten passwords.
4. Password masking is probably counter-productive and could be removed – it leads to more
errors and tends to make people select simpler, less secure passwords43.
Which of these email addresses would your e-commerce site accept as valid?
“mike/baxter”@example.com
"mike@baxter"@example.com
{_mikebaxter_}@example.com
mike+!#$%&'*-/=?+_{}|[email protected]
mike.baxter@[IPv6:1111:2222:3333::4444:12:34:56:78
You should accept them all – they are all valid!
(none actually exist, by the way, just in case you are tempted to grow your prospect list on the cheap!)
Checkout Optimization 70 ways to increase conversion rates Page 32
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
3.2 Address capture Address capture is a pain, especially for UK addresses! While some addresses
might fit into four lines, the Universal Postal Union, the recognised
international co-ordinating body for postal issues suggests44 that UK addresses
can have a maximum of 10 lines. This, however, wouldn‟t fit the standard UK
Post Office Postcode Address File, whose standard 13 fields45 are shown
opposite. Which brings us to the key decision in form design for address
capture: do we try to design multiple fields for capturing each element of the
address separately or do we provide a single multi-line field and let the
customer decide how to format the address?
A single multi-line field has two key advantages: firstly it avoids the problems
that inevitably arise with multiple single-line fields – no matter how many
single-line fields you provide they will always look wrong to some customers.
Have too few form fields and some customers will be frustrated that they
cannot fit their address in properly; have too many form fields and other
customers will wonder if you are wanting more information than their simple
three-line address because you provided so many text-boxes. Secondly, many
UK e-commerce sites use PAF (Postcode Address File) systems to auto-fill
address fields by postcode lookup. A significant minority of customers believe
they need to add information to the returned address to ensure delivery (or
address validation of their billing address). If the address is auto-filled into multiple single-line
fields, it can involve a lot of careful cutting and pasting to insert an additional address line, as
demonstrated by the error Comet.co.uk made in pre-populating my address, opposite. A single
multi-line field avoids this problem.
The main disadvantage that usually springs to mind with a single multi-line field is that
elements of the address cannot be stored individually and hence used for customer
segmentation. In practice this is much less of a problem than imagined – address-based
segmentation is nearly always based on postcode and this can be extracted from a multi-line
address relatively easily, using a regular expression46.
A similar issue arises with name fields – do you have two fields for first and second name? How
about three – title, first name and second name? What about middle initial? Possibly a drop-
down menu of titles? Or again you could provide a single field and let the customer enter
whatever they feel most comfortable with. With names, the issue of data extraction is more
Structure of the UK‟s official Postcode Address File
Element Field name Max length
Organisation Organisation Name 60 Department Name 60
Premise Sub Building Name 30 Building Name 50 Building Number 4
Thoroughfare
Dependent Thoroughfare Name 60 Dependent Thoroughfare Descriptor 20 Thoroughfare Name 60 Thoroughfare Descriptor 20
Locality Double Dependent Locality 35 Dependent Locality 35 Post Town 30
Postcode Postcode 7 PO Box PO Box 6
Comet auto-populates my address incorrectly, making me copy and paste each line to make space for my house name
Checkout Optimization 70 ways to increase conversion rates Page 33
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
difficult – if you want to personalise emails with the customer‟s first name, the
most reliable way to do so is to capture it separately. If you want to know the
gender of your customer, the easiest way to do so is to give them a list of gender
specific titles (e.g. Mr, Mrs, Miss etc) and force them to choose one. Extracting a
first name from a single name-string is not difficult but will occasionally be
wrong (e.g. in the many cultures around the world where family name is written
first and given name second47). Having a specific first name-field, of course isn‟t
failsafe either – anyone who enters an initial instead of a first name is going to
get emails sent to Dear G – heartfelt personalisation!
For both name and address capture, the recommendation is keep it simple unless
you have a compelling reason to make it more complicated. The diagram
opposite illustrates two simple name and address forms – the top one is as
simple as possible with two textboxes and two controls. The bottom version is
slightly more complex to enable first and last names to be captured separately as
well as town and postcode.
A few important details about this proposed form:
1. Up to 15 addresses can share the same postcode and so, when the
postcode is entered and the find button clicked, a control (not shown) needs to
appear to enable address selection. The selected address should then be entered
in the multi-line address field for editing by the customer, if necessary.
2. The drop down menu for country should default to the most
commonly used country so that the majority of customers don‟t need to do
anything to select their country. If worldwide delivery is offered then the most
popular destinations should be listed separately at the top of the drop-down list.
If international delivery is not offered, then remove this drop down menu (never
force the customer to use a drop down menu to select a single option) and
replace it with notification that delivery is only available to domestic addresses.
3. Provided the majority of customers use the same address for both delivery and billing
(which may NOT be the case for some gift sites), the billing address checkbox
should be checked. If the customer then unchecks it, a second panel with name
and address fields should be revealed.
Simple name and address capture
Checkout Optimization 70 ways to increase conversion rates Page 34
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Next offers little flexibility with addresses
Other issues for the address-capture page
1. Auto-populate address-fields wherever possible
While it is important to ensure that the customer does not need to enter the same information
twice at any stage in the checkout, it is particularly important for address information – simply
because of the amount of text to be entered.
a. Carry information forward between different sections of the checkout. The most obvious
example is offering to auto-populate the billing address from the delivery address (or vice
versa), if they are the same. See Section 2.5 (Avoiding loss of information already entered by
customers) for an example of where House of Fraser failed to do so.
b. Returning customers can be identified by cookie, by email link or by the email address they
enter in the first stage of checkout. Once recognised, their address should be auto-populated.
If they have used more than one address in the past, they should be given the option of
selecting which they would like to use this time.
2. Delivery and returns information
When customers are entering their address, they will think about delivery and hence need clear information on deliveries and returns.
Best practice suggests that this information should be available throughout the shopping journey (typically in a footer link) but it is
especially important on the address-capture page.
a. Delivery information should include delivery price (e.g. £4.99), delivery duration (e.g. 2 to 3 days), delivery slot (e.g. 9am to 5pm,
Monday to Friday, delivery time not bookable), delivery options (e.g. Express delivery, one to two days, bookable time slot for
£6.99) and delivery promotions (spend over £50 for free delivery). Never force customers to use drop-down menus if there is only
a single option available.
b. Returns information should include whether returns are paid for by the retailer or the customer; whether they need prior approval
(by phone, email or web form) by the retailer and what conditions (if any) apply for returning goods. Provided the returns policy is
attractive to customers, it should be promoted with a single-sentence summary on the address capture page. A link can then pop-up
the full returns policy. Returns policies should always make clear any statutory rights of return the customer may have –
throughout Europe, for example, the law makes it a legal right of customers to send back any goods within the first seven days after
they were bought through distance selling. It is also a legal requirement to inform customers of this right.
To purchase from Next, customers need to create an
account (i.e. no guest checkout option). Then, „for
security reasons‟, they will only accept payment from
cards registered to the account address (i.e. no separate
billing address). Perversely, they also do not allow
delivery addresses to be updated online (below).
Checkout Optimization 70 ways to increase conversion rates Page 35
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Deliver / pick-up-in-store options
3.3 Delivery / Gift options With the capture of information for both delivery and gift options, the key is to present the
options clearly and allow the customer to make the choices easily. We would always
recommend that both delivery and gift options are presented both in the basket (so the
customer knows exactly what s/he wants to purchase before starting checkout) and again
during checkout.
Delivery options – home delivery or store pickup
There are several different types of delivery options available to online shoppers and enabling
them to see the range of services on offer is challenging but important. The first is delivery /
pick-up-in-store. As can be seen from the images below, this can range from a simple two-way
choice (as from BestBuy.com, below left) through to a more complex and information-rich
presentation of stock availability at my nearest stores (from Comet.co.uk, below right).
Checkout Optimization 70 ways to increase conversion rates Page 36
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Delivery service options
Delivery options – delivery service
If the purchase is to be delivered to home (as opposed to store pick-up), there may
be further options for the customer regarding delivery service and delivery cost, as
shown with the examples on this page. While the details of these options will be
dictated by the fulfilment and delivery arrangements used by the retailer, there are
some clear factors that need to clarified to the customer. Do the delivery options on
offer differ in:
1. Price – how much does each delivery service cost (and possibly, whether there are
different promotions on different delivery services – e.g. spend over $50 and get
express delivery free)?
2. Delivery time-slot – is the delivery offered on a particular day, half-day or hour?
3. Delivery arrangement – do different services need signatures or can/cannot be left
at neighbouring addresses?
Retailers offer delivery options
according to their delivery and
fulfilment arrangements. Use of
radio buttons is popular to
provide clarity of these options.
Checkout Optimization 70 ways to increase conversion rates Page 37
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Gift options
Gift options are becoming increasingly popular on e-commerce sites.
They offer extra convenience to shoppers and an upsell opportunity to
retailers. Customers should be told gift options are available well before
the checkout (e.g. on product pages and in the basket) and may wish to
explore and select them at that point in the shopping process. Another
time when gift options are triggered in the customer‟s mind is address
capture. If gift options are to be offered at multiple places on an e-
commerce site, it is worth thinking about having them on a separate
web page that can be opened as a pop-up layer / lightbox.
Typically, there are three aspects to gift options:
1. Gift wrap – this needs to be shown in a sufficiently detailed image to
persuade the customer of its quality and attractiveness – all too often it
is only shown in a thumbnail. If there are gift wrap alternatives, as
shown in Gap opposite, these need to be shown in similar detail and a
radio-button or checkbox needs to be provided to capture the
customer‟s preference.
2. Gift message – a multi-line text-box is the usual solution, here. Strict
limits are nearly always imposed on the length of the gift message - to
ensure it fits into a designated space for printing. A useful feature next
to the textbox is, therefore, a character countdown, showing how many
characters are left as the customer types the gift message – see example
from ToysRus.com below.
3. Price should not be shown on any of the delivery materials for gifts.
This needs to be facilitated by the back-end fulfilment processes but it
is also a good idea to reassure the customer with a no-price-shown
message within gift options.
Checkout Optimization 70 ways to increase conversion rates Page 38
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
3.4 Payment capture
The first and, hopefully, most obvious thing to clarify about payment within checkout is that this is
about the payment transaction, NOT the payment proposition. Customers should never be
forced to navigate all the way to the payment page in the checkout to discover the payment
proposition, namely:
a. The price of the product
b. The cost of its delivery
c. The discount value of a promotion
d. The methods of payment accepted.
These should all have been made clear before entering checkout, in the basket at the latest.
The main challenge for payment capture, as it was for address capture, is standardisation. The
information needed for payment by debit/credit cards varies between cards although cardholder‟s
name, card number and expiry date are universal to all cards. Maestro and Solo cards have additional
requirements for either start date or issue number. In addition, the Card Verification Value (CVV, also
known as CSC, CVC, CV2, CID) is commonly required for security purposes. The images below show
some of the myriad ways this security code is described on e-commerce sites. The images overleaf
illustrate how inconsistent, and hence potentially confusing, the data fields required for different cards
are.
Methods of payment and checkout options (e.g.
Google Checkout and Paypal) should be made
clear before entering the checkout, as shown in
the images from basket pages above. Once in
the checkout, payment methods accepted
(example below) should continue to remain
visible throughout the checkout process.
Don‟t hide the payment proposition
What do you call that three-number thingy on the back of a credit card?
Checkout Optimization 70 ways to increase conversion rates Page 39
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
At this stage in the history of e-commerce, we really
shouldn‟t be forcing our customers to think about how they
enter their credit card information. Surely the time is long
overdue for standardisation.
The perils of inconsistency
Both Marks and Spencer (above) and Amazon.co.uk (left)
make the requirements for all cards separate from the
requirements specific to Maestro.
Play.com (left) explain that „issue
number‟ is for Switch/ Solo/Maestro
but what about „valid from‟?
Comet.co.uk (right) make everything
mandatory but explain that „valid
from‟ and „issue number‟ only apply
in particular circumstances.
John Lewis (right) make „start date‟ and
„issue number‟ optional – but one or the
other is needed for Maestro and Solo.
Crabtree & Evelyn (left) keep everything
clean and uncluttered but give the
customer no guidance on whether start
date and/or issue number are required
and, if so, for what card.
Checkout Optimization 70 ways to increase conversion rates Page 40
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Simple payment details capture
This form uses Javascript to detect Maestro or
Solo on the basis of the card number entered
(5038, for example, is Maestro). If Maestro or
Solo is detected then „Issue date‟ and Issue
number‟ fields are dynamically added to the
form.
The key issue for the design of the payment form in checkout is, therefore, how to simply and
clearly inform customers what information is needed. The format suggested below is designed
to both standardise and simplify the capture of payment details.
Checkout Optimization 70 ways to increase conversion rates Page 41
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Payment authentication using 3D Secure
3D Secure Authentication
Another step recently added to the payment
capture process is 3D Secure
Authentication48. This usually occurs
immediately prior to order confirmation –
an example of the authentication form from
John Lewis is shown opposite.
Following considerable concern by retailers
about the introduction of 3D Secure49 as
well as significant usability issues for
customers50, Visa published51 a set of best
practice guidelines for merchants
implementing the authentication. These are
as follows:
1. Present the authentication panel to the
customer in a frame52, not a pop-up window
2. Avoid mixing HTTP and HTTPS content on
the page – all frame elements hosted on
HTTPS addresses
3. At the start of checkout, clearly inform the
customer that payment authentication will
be required as part of the checkout process
4. On the page before authentication, tell
customers that payment authentication is
the next step and show a logo (Verified by
Visa, Mastercard Securecode etc) – so they
know what to expect on the authentication
page
5. On the payment authentication page itself,
include instructions and guidance on what
to do– see the John Lewis messaging
opposite.
Checkout Optimization 70 ways to increase conversion rates Page 42
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Without setting „autocomplete=off‟ previously entered card numbers will be offered as auto-complete options
Figleaves capture discount codes in the basket Discount / gift / promotional code capture
Where the price of a purchase is going to be affected by the
redemption of vouchers, promotional codes or loyalty rewards,
that redemption should occur in the basket, i.e. before
entering checkout, as illustrated by Figleaves opposite. These
discount details, however, should also appear in a checkout
summary and/or on the payment page of checkout to provide a
second opportunity for the customer to apply their discounts,
or so that they can be checked or edited.
A text field needs to be available to capture the relevant
details. The only critical requirement here is that the labelling
and information are sufficiently clear that the customer knows
whether or not they are eligible and what it is they need to
enter. It is good practice to provide a link to tell customers who
don‟t have any offer codes what they are missing and what
they can do to get one in future.
Payment form security
A frequently discussed security issue in the financial sector53 is the autocomplete feature of browsers:
this seems to be a much less well known risk in the retail sector. The issue, as illustrated opposite on
Walgreens, is that many browsers will show what has previously been entered into a form field,
enabling customers to auto-complete that field without having to type it all in again; something that
could become a security risk with public computers (e.g. internet cafes or libraries). Following
pressure from banks, browsers have offered ways to switch off auto-completion starting in 199954.
On payment forms, therefore, the autocomplete attribute should be added and set to „off‟ on both the
html <form> tag and the relevant <input type=text> tags (card number and CV2).
Checkout Optimization 70 ways to increase conversion rates Page 43
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Amazon‟s order summary leaves the customer in no doubt about their progress through checkout, the details of their purchase, delivery and payment, and how to complete their order.
Amazon‟s order summary is clear, concise and comprehensive
3.5 Order summary At the point of submitting payment there
should be no doubt in the customer‟s
mind as to what they are just about to
purchase, how and when it will be
delivered and what form of payment they
are about to use. They should be aware of
all terms and conditions (including ease of
returns), confident of the privacy and
security of their transaction, and convinced
that the price being shown is the total price
that they are about to pay, with no extra
hidden charges (e.g. shipping and taxes).
If a persistent checkout summary is being
used throughout checkout (see Section 2.4)
then this should by now contain all the
required information for the customer to
commit to purchase. If a persistent
summary is not being used, an order
summary page should be given. Editing
options should still be available to correct
errors, but links to these should be
understated – certainly in comparison with
the call-to-action/button that enables the
customer to confirm their order and submit
payment – the only thing you want the
customer to do at this stage is to buy!
The call-to-action should be clearly described
by button labelling and/or messaging, and
progress bars should indicate that this is
the final stage of the checkout process.
Checkout Optimization 70 ways to increase conversion rates Page 44
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
3.6 Order confirmation There are many global and country-specific legal requirements for e-commerce sites that govern
how they should operate and what content should feature on them55. Within the Consumer
Protection (Distance Selling) Regulations 200056 in the UK, for example, is the legal
requirement to provide the customer with written confirmation of their order following
purchase, e.g. with a confirmation email. These regulations require that the customer is
informed of:
Their statutory right to cancel (a „cooling off‟ period of 7 working days where they can return
goods for a refund)
How to cancel, including where to send the cancellation notice
Who pays for the return of goods (customer or supplier) when cancelling
The name of the supplier‟s business, company registration number (or proprietor's name),
geographical address (which cannot be a PO Box number), contact information (telephone /
email address) and VAT registration number (if registered)
Any exception to cancellation rights (e.g. for perishable goods, opened audio or video
recordings, goods made to order)
After-sales services or guarantees.
Best practice would suggest that this information should be displayed in the written (e.g. email)
communication, along with the following additional features:
A „Thank you for your order‟
The order number and date of purchase
The items purchased: description, SKU code, number of items, variant (size / colour) and price
(including taxes, delivery cost etc.)
The email and delivery address given by the customer
The expected delivery date or date range
The payment method (last few digits of credit card numbers only).
In addition to this, clear messaging needs to be given on screen that the purchase has been
successful and that a written order confirmation has been sent, along with navigation link(s) to
continue shopping or log out. Prudent use of the order confirmation page would suggest that
not all details in the written order confirmation are repeated online, rather that the space is
used for promotions (offers, incentives and cross-sells) to encourage repeat purchase.
Marks & Spencer provides reassurance to the customer that their order is being processed and that email confirmation will be sent. It offers generic promotions on the order confirmation page, but no cross sells or up sells relating to products just purchased.
Promotions on the order confirmation page
Checkout Optimization 70 ways to increase conversion rates Page 45
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Lakeland provides clear details of the order just placed in its confirmation email, but fail to offer any promotions or cross-sells to entice me back.
Lakeland fail to inspire with their confirmation email
Amazon‟s order confirmation emails provide well-targeted promotions (as „Recommendations for your next visit‟) based on the customer‟s purchase. As simple text links with no image, however, the promotions are uninspiring, as illustrated by the comparison with the promotion available on their site on the right.
Amazon‟s email promotions are well-targeted but lack punch
Promotions
While travelling through the
checkout process, the customer
should never be distracted
away from the transaction they
are in the process of completing, for
example by presenting them with
promotions – the place for
„shopping‟ is either before the
checkout has started (right up to and
including the basket page), or after
the purchase has been completed –
i.e. on the order confirmation page
and in confirmation emails.
Research57 suggests that only 40% of
companies include promotions in
their order confirmation emails, and
fewer still target these promotions
according to the purchase that has
just been made. With customers
keen to view their order details and
highly likely to open these emails,
this is a missed opportunity of
increasing revenue and promoting
brand loyalty.
Checkout Optimization 70 ways to increase conversion rates Page 46
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
4. Checklist of checkout success factors This comprehensive checklist of best practice issues and their associated success factors can be used to audit your online checkout process. In
the grid below, we have compiled a list of tests for each area we have looked at in the report to give a readily accessible overview of the points to
consider, with space for you to record your site‟s performance, either on its own or against a competitor.
Best Practice Issue
Success Factor Test Your site Competitor site
Isolating the checkout
The only place you want customers to go, once in the checkout, is order confirmation, so get rid of all navigational links to the rest of the site.
1. Are all header, footer or navigational links removed, except those needed for checkout (e.g. product description, delivery, security, returns, etc)?
2. Do all remaining links present information in a pop-up layer?
Checkout steps At every stage of checkout, the customer should know where they are in the process and what remains to be done before purchase is complete.
3. Is there a clear and simple progress indicator, e.g. progress bar on each page of checkout or checkout sections arranged vertically in accordion design?
4. Does the progress indicator reflect the actual process being undertaken?
Navigation Customers should be enabled to navigate back and forth within the checkout to view and edit all steps in the process.
5. Does the browser back button work without giving warning messages?
6. Does the browser back button take customers where they expect to go (particularly when using AJAX)?
7. Do all navigation buttons/links on the page go where they are meant to?
Persistent summary of checkout information
To minimise the need to navigate within the checkout, customers should be continually reminded and reassured about basket contents and the information they have entered.
8. Are basket contents visible throughout checkout?
9. Do product details show thumbnail, title, variants, quantities and availability?
10. Is total price (including discounts, taxes & charges such as delivery) visible throughout checkout?
11. Does a summary of data / options entered by customers expand as checkout progresses?
Checkout Optimization 70 ways to increase conversion rates Page 47
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Best Practice Issue
Success Factor Test Your site Competitor site
Avoiding loss of information entered by customers
Information entered by the customer should never be lost through navigation or page refresh.
12. Is all checkout information submitted to the web server and protected against loss?
13. Is checkout status recorded so that an interrupted checkout resumes where it left off?
14. Are contents of abandoned baskets saved and re-presented to returning customers?
15. Are returning customers identified and appropriate checkout fields pre-populated?
Stock management & session timing
Customers expect items added to their basket to be available to buy – exceptions to this should be minimised. If they do happen, they should be communicated clearly to the customer. Customers should never discover that an item they thought they’d just purchased was, in fact, out of stock.
16. Is stock availability communicated clearly to the customer prior to checkout?
17. Is stock reserved for the duration of checkout?
18. If not, is stock checked immediately prior to order confirmation?
19. If there is a time limit on checkout (or session duration) are customers informed of the time limit? (Applies only if time limit affects customers checking out normally without interruption)?
Form design Forms should be as clear and concise as possible, should us standardised web elements and should be optimised for usability. Customers should never be asked for any unnecessary information
20. Is only necessary information asked for? 21. Are single-item drop-down lists avoided? 22. Are compulsory fields identified (with a *)? 23. Are radio buttons used instead of drop-
down lists where it is helpful for customers to see the available options without clicking?
24. Are checkboxes used to confirm consent? 25. Does the size of form fields indicate how
much information is expected? 26. Are guidance notes and examples offered
adjacent to form fields? 27. Are labels top-aligned on short forms? 28. Are labels right-aligned on longer forms?
Validation and error-trapping
Customers want flexibility to type in what they want. Minimise error-trapping, provide clear messaging about the nature and location of errors made and corrections needed.
29. Is error trapping checked for necessity? 30. Does error messaging indicate the nature
of the error and how to fix it? 31. Does error messaging appear at the top of
the page and next to form field containing the error
Checkout Optimization 70 ways to increase conversion rates Page 48
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Best Practice Issue
Success Factor Test Your site Competitor site
Calls to action / submit buttons
The design, labelling and positioning of submit buttons should provide clear calls-to-action that drive the customer towards checkout completion.
32. Are submit buttons visually salient, visually isolated and visually consistent across checkout in terms of both design and positioning?
33. Is labelling of submit buttons clear and unambiguous, providing effective calls-to-action?
Trust Trust is engendered by reliable site performance with clear navigation and messaging, along with inclusion of company contact details and assurances of privacy and security of personal information.
34. Is secure server used throughout checkout?
35. Are logos of 3rd
party verification shown, and linked to valid certification?
36. Are company contact details given (including full postal address and phone number)?
37. Is sales support featured prominently? 38. Are links to terms and conditions given
throughout checkout? 39. Is total price given on entry to checkout,
with no hidden charges? 40. Is the site compliant with legal standards
for information security management? 41. Is the site checked for errors in copy,
broken links etc.
Log-in / Registration / Guest checkout
Many customers do not want to register before purchase, so give them the option to create a password at the end of the checkout process, and highlight the benefits of doing so, such as safe storage of personal information and order tracking.
42. Is guest checkout offered? 43. Is email captured at start of checkout? 44. Is the reason for email capture stated? 45. Does the text box for email capture allow
40 characters to be shown, and 254 characters to be captured?
46. Is email address validated? 47. Are the benefits of registration highlighted? 48. Is the facility to retrieve forgotten
passwords offered whenever password is asked for?
Checkout Optimization 70 ways to increase conversion rates Page 49
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Best Practice Issue
Success Factor Test Your site Competitor site
Address capture For both name and address capture, keep it simple unless you have a compelling reason to make it more complicated.
49. Is simple, standardised name and address capture employed?
50. Are superfluous fields avoided? 51. Are address fields auto-populated where
possible? 52. Is a checkbox provided to indicate billing
address is the same as delivery address? 53. Are delivery and returns information
provided alongside address capture?
Delivery / Gift options Offering delivery and gift options in the basket allows customers to proceed to purchase with total price already confirmed. By repeating these options in the checkout, customers can update their choices if required.
54. Are delivery and gift options presented prior to checkout?
55. Are delivery and gift options also presented at some point during checkout?
56. Are gift options offered, including:
Gift wrap?
Gift message?
Removal of price from delivery note?
Checkout Optimization 70 ways to increase conversion rates Page 50
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Best Practice Issue
Success Factor Test Your site Competitor site
Payment capture Standardise forms to simply and clearly inform the customer what information is needed and any discounts that apply. Also provide reassurance on the privacy and security of details entered.
57. Are methods of payment indicated prior to, and throughout, checkout?
58. Is 3D Secure Authentication best practice followed (if used):
Authentication panel presented in a frame, not a pop-up?
Frame elements hosted on HTTPS addresses?
Customer informed at start of checkout that payment authentication will be required?
Logo shown prior to authentication page?
Guidance offered to customers on need for, and completion of, authentication?
59. Discounts/vouchers applied prior to checkout?
60. Details of discounts/vouchers repeated in checkout summary and/or at the point of payment with opportunity for the customer to apply, check or edit them?
61. Autocomplete set to ‘off’ on card number and CV2 fields?
Checkout Optimization 70 ways to increase conversion rates Page 51
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Best Practice Issue
Success Factor Test Your site Competitor site
Order summary A clear order summary at the point of submitting payment leaves the customer in no doubt as to what they are just about to purchase, what form of payment they are about to use and how & when it will be delivered.
62. Is a persistent order summary / order summary page presented containing all transaction details:
Product details?
Total price (including discounts, taxes & charges such as delivery)?
Delivery address?
Delivery & Gift options selected?
Payment method?
Billing address? 63. Is editing of all these details possible? 64. Is the customer encouraged to complete
purchase with a clear call-to-action? 65. Are there links to information on privacy,
returns, terms and conditions? 66. Does the checkout progress indicator show
clearly that this is the final stage of checkout?
Order confirmation Clear messaging on screen should provide customers with the reassurance that their purchase has been successful. Targeted promotions on the order confirmation page and in order confirmation emails can be used to encourage repeat purchase.
67. Does the order confirmation emails conform with distance selling regulations and contain all details pertaining to the transaction?
68. Does the order confirmation page thank and reassure the customer without necessarily repeating all the details in order confirmation email?
69. Do promotions only appear either before the checkout has commenced or at order confirmation?
70. Are promotions on order confirmation page and in emails targeted?
Checkout Optimization 70 ways to increase conversion rates Page 52
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
5. Analytics & split-testing The previous sections of this report have illustrated some of the best (and worst!) practices in online checkout. We have drawn examples from a
number of retailers, market sectors and products, some of which may resonate with your own area of interest or specialism. The audit tool in
Section 4 may also have helped you to identify some specific areas for development for an individual checkout. Whether you are using these
insights to make systematic changes or simply tweaking individual elements, this section illustrates how web analytics and split-testing can
be used to confirm whether your application of these best practice recommendations has been effective both for your customers
and for your checkout performance.
5.1 Advanced analytics for checkout The world of web analytics has been shaken up by Google. Google Analytics launched in November 2005 but has only been available for open
sign-up since August 2006. Despite this, its share of the analytics market is approaching 50%58. This means that, for the first time, all but the
smallest e-commerce sites will have some sort of web analytics system installed.
As a consequence, a tipping point has been reached in e-commerce. Whereas previously, a site with good analytics insights might have had a
competitive advantage over its competitors, now a site without analytics is at a substantial competitive disadvantage. And the analytics arms
race is heating up for the market leaders as well. Good analytics enables more effective marketing, better conversion and higher order values
– all of which means more money to spend on further efficiency gains, including even better analytics insights.
Having web analytics properly installed, particularly in checkout has, therefore, moved from
a nice-to-have to a basic necessity. In the remainder of this section, principles of best practice
will be exemplified with reference to Google Analytics (GA) and Google Website Optimizer
(GWO). This is not to diminish, in any way, the importance of other software solutions, such
as Omniture Site Catalyst and Coremetrics – it is just that their users tend to be bigger
companies and hence better equipped to interpret best practice principles and apply them to
their own technologies.
Basic instructions on how to install Google Analytics in checkout is available elsewhere59 and
so this section will highlight two aspects of best-practice that can substantially improve the
quality and depth of insights available about checkout performance. These are goal tracking
and new versus returning customer segmentation.
The three major web analytics suppliers to e-commerce
Checkout Optimization 70 ways to increase conversion rates Page 53
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Goal tracking
If you were to take only one thing away from reading this report, it should be the importance of
setting up accurate and informative goal tracking throughout your checkout. This will give you,
on a single web page, a snapshot of how well or badly your checkout is performing. It will tell
you how many customers you are losing at each stage of your checkout and also, where they are
going. If your checkout is typical, this could reveal what you need to improve to double your
revenue.
Goal tracking used to be a significant limitation of Google Analytics until they changed their
goal tracking functionality60 last year. You can now set up four sets of goals within GA, each set
can contain five individual goals and each goal can have a series of pages identified as leading
towards that goal and represented in a goal funnel.
Goal funnels61 are the key to improving checkout. They show where checkout abandonments
happen and where customers went from the checkout. The goal funnel opposite, for example,
shows 15% leakage of customers from the „contact and delivery‟ page and a further 6% from the
„billing‟ page. Overall it has a 19% checkout abandonment rate. It has no customers landing
directly on checkout pages (indicated by the zeros coming in from the left of the funnel) – which
is good.
The only point of entry to checkout should be the basket and if someone bookmarks a checkout
page, they should be redirected to the basket upon their return (hopefully with the products
they had selected previously still in their basket and with the information they had already
entered in the checkout re-populated – see Section 2.5). The checkout funnel also shows good
checkout isolation (it has very few links to other parts of the site – see Section 2.1) as shown by
the small number of exit pages to the right of the funnel. From the contact and delivery page,
for example, we had 635 failures-to-progress to the next stage of checkout. Of these, 255 (40%)
navigated to another page on the site (home, basket or checkout details), something that could
simply be a detour on an eventually successful shopping journey. 273 visitors exited the site
from this page and the remaining 20 visitors suffered a failure of the address lookup software –
two very distinct problems that need to be investigated separately. So, goal funnels provide
vital insights into checkout performance – or at least they would do if they were set up correctly
– which most are not!
The most common failing in configuring goal funnels is not mapping out the different pathways
to purchase within checkout. Best practice sites should have (see Section 3.1) a login-to-
purchase pathway for returning customers and a guest checkout for new customers – some sites
Goals funnels are the key to improving checkout
Checkout Optimization 70 ways to increase conversion rates Page 54
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Sketch out the pathways through checkout that need to be captured in separate goal funnels
also have a register pathway for new customers. These are all different funnels
because they involve a different sequence of web pages. Failure to separate
these funnels will lead to high levels of apparent funnel leakage but these
leakages are actually the legitimate movement of customers through different
checkout pathways. Errors like this can transform analytics from a useful,
insightful tool to something that can mislead and deceive.
Okay, so how do we separate out two different funnels to correspond to the
guest checkout pathway and the customer login pathway? Firstly, don‟t start
fiddling with Google Analytics straight away – sketch it out on paper first. All
customers click the „checkout‟ link on the basket page and land on the
checkout pathway page (see Section 3.1) where they either log in or proceed to
guest checkout. If they log in they move straight to the payment page where
they re-enter their credit card details (this site does not store credit card
details for security reasons). Guest checkout takes them to a contacts page
(name, email address and telephone number), then an address page and then
on the same payments page as the logged in customers came to directly. In
both cases, the start page is the basket (or the pathway page if you wish to
represent the funnel as checkout only) and the goal page is the confirm page.
The challenge is how to separate the two pathways into different funnels.
This is where Google‟s „required‟ page comes in. A visit to a required page is
the qualifying step for inclusion in a particular funnel. So, to distinguish
between two pathways through checkout we could identify a different
required page for each. The problem, of course is that we don‟t have a page
that the logged in customers uniquely visit – both sets of customers pass
through the payments page. We therefore need to create one. This is done by
creating virtual pageviews62 when the customer clicks either the guest
checkout button or the login button. This is done by writing Javascript event
handlers triggered by the two different onClick events that then send a
trackPageview message to the Google Analytics server with virtual (i.e. made
up) page addresses (e.g. „checkout/guest‟ and „checkout/login‟). These two
virtual page views then become the required steps that define the two goal
funnels for checkout.
Checkout Optimization 70 ways to increase conversion rates Page 55
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
New versus returning customer segmentation
If only customers all behaved the same, e-commerce would be a lot simpler. But they don‟t and one of the key roles of web analytics is to segment customers into
groups that behave more similarly in a particular respect. The most useful segmentation metric for checkout improvement is new versus returning customers –
not offered by Google Analytics out-of-the-box, but it is configurable.
Let us begin by exploring why this particular segmentation is important. Returning customers behave very differently from new customers. Having bought
previously, they are familiar with the brand and its product range, can find their way round the web site and know what to expect in the checkout. As a result,
they have a sales conversion rate at least twice that of new customers and may have a higher average order value. More specifically, they are motivated and
confident users of the checkout, unlikely to be put off purchasing by anything but the most substantial usability blockage. New customers by contrast, will be
uncertain, distrustful and will stumble over the most minor ambiguity or frustration. Bundling analytics data for these two types of customer together will give
huge variance in most dimensions of checkout performance and will tend to mask all but the most dramatic trends.
Google Analytics features tracking of new and returning visitors by dropping a cookie (Google‟s
_utma cookie63) on the computer of each visitor. Visitors who arrive at a site with a _utma
cookie already set must have been to this site before (cookies are site specific) and hence are
categorised at repeat visitors. If no cookie is detected, the visitor is categorised as a new visitor.
While useful for some purposes, this categorisation is not particularly useful for segmenting
visitors to checkout. What we want is to segment customers (who have been through the whole
checkout and completed a purchase) from non-customers (irrespective of whether they have
visited previously or not).
There are two ways of segmenting customers from non-customers. The first uses client-side
technology and hence doesn‟t need any change to your server code. The principle is simple and
similar to how GA tracks new and returning visitors. When a customer completes a purchase, a
cookie is set on their computer (the _utmv cookie on this occasion). Any visitor who arrives at
your site with this set can then be recognised as a returning customer.
Unlike returning visitor tracking, this returning customer tracking is not set up automatically by
Google Analytics – you need to set it up yourself. Essentially this is done by allocating user-
defined variable (_setVar) in Google Analytics64 to „customer‟ (or any other recognizable label)
during the purchase confirmation pageview. Whatever this variable is set to will automatically
be stored in the _utmv cookie for subsequent detection by Google Analytics. Access to this
user-defined value is in the Visitors section of Google Analytics, under the heading „User
Defined‟ (see opposite).
Segmentation data on new vs. returning customer can be found in the User Defined report
Checkout Optimization 70 ways to increase conversion rates Page 56
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
5.2 Split-testing for checkout While there are many amazing claims made for the impact of split-testing (can a simple change in a single button actually generate an extra $300
million in revenue65 for one retailer?) there are also more detailed accounts of how the widespread adoption of split-testing has facilitated culture-
change across entire organizations in favour of continuous improvement. Craig Sullivan, of Lovefilm.com, for example, has described66 how A/B
and Multi-variate testing is used widely in his company. Bryan Eisenberg has also tracked67 how details of Amazon‟s „add to cart‟ button have
evolved step-by-step over the years.
Split-testing has the potential to be as transformative of e-commerce as web analytics, yet it does not appear to have got anywhere close to realising
this potential. There are several likely reasons for this – split-testing technology is relatively new and often requires changes to e-commerce
backend code and hence a software re-deployment for the launch of each new test. Also, the skills needed to identify substantial, insightful,
evidence based hypotheses for split-testing are significant and far from widespread in the e-commerce community. As a result, few tests are
undertaken and those that are, either give insignificant results or are trivial, with little financial benefit or limited generality beyond the specific
circumstances of the test. Where split-testing does have a high likelihood of making substantial improvements is in checkout – the losses are large,
easy to measure and confined within a short process over few pages. We suggest, therefore that while the hype over split-testing may be overblown
for many aspects of e-commerce design, it holds true for checkout improvements.
As with Google Analytics, there are many introductory guides to Google Website Optimizer and
other split-testing technologies68 – the aim here is to provide advanced guidance on two types of
split-testing relevant to checkout improvement.
Split-testing can vary from a test of a specific control on a single page all the way through to
changes that apply to the entire checkout. The two tests reviewed here represent opposite ends
of this extreme: a button test and a change to the entire checkout to make it more isolated from
the rest of the site.
Checkout Optimization 70 ways to increase conversion rates Page 57
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Button test
There is lots of nonsense talked about call-to-action buttons – they should allegedly all be large and red69,
irrespective of the web site, its design, its products or its customers! Despite this, there are probably more
buttons split-tested than anything else on e-commerce sites, fueled no doubt by legends of millions of
dollars just waiting to be spent by customers – if only they could be seduced by the right call-to-action
button. In reality, there are several ways to get button design wrong – we review them in detail in Section
2.9 but let us get this discussion of split-testing begun by focusing on one button design issue.
If a customer has to hunt to find it, the button isn‟t doing its job very well as a call-to-action. Accordingly,
a checkout button should be visually striking in its design and positioning on each checkout page. More
strength can be added to the buttons-should-be-visually-striking argument if we believe that a prominent
call-to-action can have a sub-conscious priming effect on the likelihood of the customer clicking the
button. A classic psychology experiment70 showed that a language test involving words related to
„politeness‟ made participants more patient with an administrator who impolitely ignored them than an
identical test involving words related to „rudeness‟.
From these insights, therefore, we have a basis for formulating a hypothesis that
could be split-tested: call-to-action buttons will be more effective the more visually
striking they are and the more compelling their call-to-action message is. A logical
approach to this test (although not the only one) would be simple and bold – we
take the current button on a checkout page as the control treatment and create a
much more visually striking button with a more compelling message to compare it
with. Starting with this in a simple A/B test has the advantage of giving a clear and
quick indication of whether button design has the potential to increase click-
through and hence revenue.
If you find a significant effect of button design on click-through rate, regardless of
whether the new button has increased or decreased click-through rate, you know
that button design is something worth exploring in a more subtle and nuanced way
using multi-variate testing. Even if you find no significant difference in the mean
click-through rate for old and new buttons, you might still find a difference in
variance of response to the two treatments. This indicates that the buttons appeal
differently to different groups of customers. To explore this further would require a
multi-variate split-test with customer segments included as covariates – a test that
will require the split test data to be exported and analysed using dedicated statistics
software.
The existing checkout buttons on the
EllisBrigham.co.uk website
(highlighted opposite) are not
visually distinctive...
...but could be replaced with...
Button test for Ellis Brigham
Checkout Optimization 70 ways to increase conversion rates Page 58
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
As should be becoming clear by now, split-testing can get quite complex quite quickly. It is all too easy to get drawn in to big multi-variate
experiments only to find none of the combinations yield significant effects. This is something that often be avoided by a simple and quick A/B
test to begin with, as suggested above.
Checkout isolation test
Checkout should be a one-way street heading towards order confirmation (see Section 2.1). Any links from the checkout to anywhere else on
the site are simply temptations to abandon checkout. So, a testable hypothesis for split-testing is that an isolated checkout, with all the links
to other parts of the site removed will have a higher rate of checkout completion than a checkout where such outbound links remain.
This is already quite a demanding test – you need to tests two different headers (one with and one without links), two footer sections (one
with all the site-wide links and another with only checkout related links that open in a pop-up layer over the checkout). The test also needs to
be run over all of the checkout pages. Fortunately, Website Optimizer has a built-in facility for running multi-variate tests (testing up to 8
elements on the page) over as many pages as necessary71. What originally sounded a lot more complicated that a simple button test turns out
to be so straightforward it is difficult to see why it shouldn‟t be tested on every e-commerce site!
Whatever tests you decide to run and however you decide to run them, you always need to remain clear from the very beginning about what
you are testing, why you are testing it and how the various outcomes from the test can be applied to improve checkout performance.
Checkout Optimization 70 ways to increase conversion rates Page 59
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
6. References
1 Paypal’s checkout abandonment survey. See https://www.paypal-media.com/releasedetail.cfm?ReleaseID=391252
2 8
th Annual Merchant Survey by the E-tailing Group (full report $595 from http://www.e-tailing.com/research/merchantsurvey/), data on checkout
abandonment available at http://www.emarketer.com/Article.aspx?R=1007156 3 Coremetrics’ data was published monthly between May 2008 and March 2009. Each month’s data contained a comparison with the previous month and a
comparison with the same month in the previous year 4 Akamai’s 2006 report is available at www.akamai.com/4seconds (registration required - press release at
http://www.akamai.com/html/about/press/releases/2006/press_110606.html). Their 2009 report is available at www.akamai.com/2seconds (registration
required - press release available at http://www.akamai.com/html/about/press/releases/2009/press_091409.html ). 5 Online Retail 2007: Checkout Special. Econsultancy. See http://econsultancy.com/reports/online-retail-2007-checkout-special.
6 Based on 50% abandonment rate from Coremetrics data – see reference 3.
7 The top 25 retail sites in the UK were taken from the IMRG / Hitwise Hot Shops List November 2009. See press release at
http://www.hitwise.com/uk/press-centre/press-releases/imrg-hot-shops-nov-09/. Top retails sites in the USA were taken from Compete.com’s July 2009
list – see http://blog.compete.com/2009/09/17/top-25-retail-sites-july/ 8Google Conversion Professionals http://www.google.co.uk/intl/en/landing/conversion/experthelp.html
9 Blink by Malcolm Gladwell (http://www.amazon.co.uk/Blink-Power-Thinking-Without/dp/0141014598/) set the trend for books on behavioural
economics and Nudge by Richard Thaler and Cass Sunstein (http://www.amazon.co.uk/Nudge-Improving-Decisions-Health-Happiness/dp/0141040017/ )
is one of the latest contributions on the subject 10
See http://en.wikipedia.org/wiki/Cognitive_miser 11
Amazon’s ‘1-click payment’ patent was never granted in Europe, and has been contentious in the US - a lawsuit against Barnes & Noble was settled in
2002 and a re-examination by the United States Patent and Trademark Office (USPTO) was requested in 2006 by a disgruntled Amazon customer. See
http://arstechnica.com/old/content/2007/10/amazons-1-click-patent-picked-apart-by-us-patent-office.ars 12
A Lightbox is a Javascript application that opens an image or text-content on top of the current page being viewed. Its big advantage from a usability
point of view is that it pops up additional information for the customer without taking them away from the current page. See further explanation and image
at http://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29. Code available from http://www.lokeshdhakar.com/projects/lightbox2/ 13
Blog post showing lots of different checkout progress bars. See http://www.pitstopmedia.com/sem/checkout-progress-bar-survey . 14
Luke Wreblowski’s blog post on Apple’s new accordion-design checkout. See http://www.lukew.com/ff/entry.asp?968 15
A Wikipedia entry describing the standard post/redirect/get (PRG) design pattern for avoiding resubmit warning messages is at
http://en.wikipedia.org/wiki/Post/Redirect/Get. A blog post exploring the resend warning message in a bit more detail and offering a session-based solution
is at http://www.ajaxray.com/blog/2008/01/12/how-to-avoid-postdata-resend-warning/ 16
AJAX stands for Asynchronous Javascript and XML and it is a related group of technologies used to create richly interactive web applications that can
send and receive data from the server asynchronously in the background without interfering with the web page being shown to the user. See
http://en.wikipedia.org/wiki/Ajax_%28programming%29
Checkout Optimization 70 ways to increase conversion rates Page 60
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
17
A one page AJAX checkout demonstrating the problem of the browser back button returning customers to the basket from within the checkout process
can be found for book purchases at http://www.smashingmagazine.com/ 18
Various work-arounds to the AJAX back-button problem have different pros and cons. Google’s Really Simple History is a lightweight Javascript library
– see http://code.google.com/p/reallysimplehistory/. Mike Stenhouse wrote one of the earliest and most enduring fixes – see
http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps. jQuery also has a plugin – see
http://plugins.jquery.com/project/history. 19
There are reports that ‘OnUnload’ will not work with some versions of Safari and Opera. See http://blog.rd2inc.com/archives/2005/05/04/unload-events-
in-safari/ and http://www.quirksmode.org/bugreports/archives/2004/11/load_and_unload.html . 20
This figure of 33% of customers coming back to purchase on a second visit was found in PayPal’s second survey of shopping cart abandonment in 2009.
Webinar playback at http://www.ustream.tv/recorded/1706188. 21
Anecdotal evidence illustrates just how expensive the consequences of losing abandoned basket contents can be – this blog post describes how Victoria’s
Secret lost $350 from a single customer - http://www.getelastic.com/why-victorias-secret-lost-a-350-sale/ 22
E-tailing.com 7th
Annual Merchant Survey 2008 reported that, from their survey of 204 senior executives with responsibility for e-commerce in the US,
only 18% reported that they kept no record of shopping cart contents once the shopping session had ended without purchase. See http://www.e-
tailing.com/graphics/e-tailinggroup_MerchantSurveyReport_Rev1_4-16-08.pdf 23
The management of payment information is subject to compliance standards enforced by banks and credit card companies – see
https://www.pcisecuritystandards.org/index.shtml 24
The Children’s Online Privacy Protection Act (1998) COPPA and its interpretation rules (http://www.ftc.gov/os/1999/10/64fr59888.pdf) require
stringent protection to be given to children under the age of 13. This has resulted in many retailers barring under-13 year olds from registering, on the basis
of date-of-birth declarations. 25
The Privacy and Electronic Communications (EC Directive) Regulations 2003 http://www.opsi.gov.uk/si/si2003/20032426.htm 26
The US Federal Trade Commission outlines the requirements of the CAN-SPAM Act in its compliance guide for businesses using email marketing
http://www.ftc.gov/bcp/edu/pubs/business/ecommerce/bus61.shtm 27
See http://en.wikipedia.org/wiki/Affordance 28
Luke Wrobleski has established himself as the master web form designer. He has a book entirely on Web Form Design (see
http://www.lukew.com/resources/web_form_design.asp) and dozens of papers, audits and presentations on the subject (see
http://www.lukew.com/ff/archive.asp?tag&forms). His article specifically on left, right and top alignment of labels, from which the artwork illustrating
these different alignments is taken, is at http://www.lukew.com/ff/entry.asp?504. 29
Matteo Penzo conducted the eye-tracking research showing how label alignment changed the difficulty of form completion by customers. His main
article on the subject is at http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php. 30
These blurred images are produced by taking a screenshot of the checkout page (Shift+PrintScreen on Windows and Cmd+Shift+4 on Mac), then
importing it into Photoshop and using Filter>Blur>Gaussian Blur set to 3 pixels. 31
Pitstop media published their perfect checkout button in a blog post - http://www.pitstopmedia.com/sem/perfect-checkout-button
Checkout Optimization 70 ways to increase conversion rates Page 61
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
32
Ebooks and virtual catalogues all have controls on the bottom right of each page to click to turn the page. See http://page-flip.com/new-demos/06-
lacinema/index.html or 33
Research from McAfee on consumer online shopping indicated that online security fears affected purchasing behaviour more than the economic
downturn in 2009 http://investor.mcafee.com/releasedetail.cfm?releaseid=392507 34
A survey commissioned by VeriSign in 2008 found that nearly ten times as many consumers feel trust is more important than cost when transacting
online https://press.verisign.com/easyir/customrel.do?easyirid=AFC0FF0DB5C560D3&version=live&prid=459144&releasejsp=custom_97 35
See Verisign research in Reference 33 above. 36
The Data Protection Act 1998 http://www.opsi.gov.uk/acts/acts1998/ukpga_19980029_en_1 37
The California Online Privacy Protection Act of 2003, for example, requires commercial websites that collect personal information on California
consumers to post a privacy policy and to comply with it. See http://www.privacy.ca.gov/cis6english.htm 38
The IT Governance website describes ISO 27001 Information Security Standards http://www.itgovernance.co.uk/iso27001.aspx 39
Forrester Research 2008 asked online shoppers in the US what they did last time they were required to register and just under a quarter of them said they
left the site without registering or purchasing. http://www.forrester.com/rb/Research/required_registration_lowers_online_conversion_rates/q/id/45179/t/2 40
Dominic Sayers is the man who knows about email – see http://stackoverflow.com/questions/386294/maximum-length-of-a-valid-email-id. 41
To see demos of these three email validation methods go to http://www.coveryourasp.com/ValidateEmail.asp#Result2 42
This page from Dominic Sayers gives a glimpse into the complexities involved in email address validation and shows why you shouldn’t even think of
developing your own. http://www.dominicsayers.com/isemail/ 43
These are the conclusions of usability guru Jacob Nielsen from June 2009 – see http://www.useit.com/alertbox/passwords.html 44
Universal Postal Union data sheet on postcodes and address formats for the United Kingdom of Great Britain and Northern Ireland -
www.upu.int/post_code/en/countries/GBR.pdf 45
The structure of the UK Postcode Address File is at http://en.wikipedia.org/wiki/Postcode_Address_File 46
UK postcodes are structured by means of a set of rules defined in a British Standard (BS 7666). These rules make the construction of robust regular
expressions for validation and extraction straightforward. See http://en.wikipedia.org/wiki/Uk_postcodes#Validation. 47
The family name is written first and the given name second in Hungary and several cultures in Africa and Asia – see
http://en.wikipedia.org/wiki/Given_name. 48
3D Secure is an XML protocol used for additional fraud protection security. It requires the customer to enter 3 characters from a password, which are
then authenticated and the outcome made accessible to the issuing merchant, the acquiring merchant and the payment service provider – these are the three
domains referred to in the 3D part of the title. See http://en.wikipedia.org/wiki/3D_secure. 49
See http://www.computing.co.uk/itweek/news/2214146/industry-lays-secure 50
See http://econsultancy.com/press-releases/2971-credit-card-checker-puts-sales-at-risk 51
Verified by Visa: Merchant Deployment Best Practices Factsheet is at
http://www.visaeurope.com/documents/vbv/verifiedbyvisa_merchantdeploymentbestpractices.pdf 52
Presenting the authentication window in a frame should use the <frameset> and <frame> tags, not the <iframe> tag which can cause compatibility issues 53
BBC News coverage of the alleged security risk from autocomplete in web forms. http://news.bbc.co.uk/1/hi/business/3995019.stm
Checkout Optimization 70 ways to increase conversion rates Page 62
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
54
Browser support is patchy. Browser support for Autocomplete is patchy – IE 5+ and Mozilla 0.9+. Autocomplete is proposed for standardisation in
HTML 5 see http://www.w3.org/TR/html5/forms.html#attr-form-autocomplete. Autocomplete=false doesn’t work; it needs to be autocomplete=off -
http://www.hanselman.com/blog/TurningOffAutoCompleteForTextBoxesInIEAndFireFox.aspx. Main article
https://wiki.mozilla.org/The_autocomplete_attribute_and_web_documents_using_XHTML
55 ekmPowershop give an overview of the requirements of the 3 major acts affecting UK e-commerce (Data Protection Act 1998, Distance Selling Act
2000, Ecommerce Directive 2002) – see http://www.ekmpowershop.com/support/articles/legalrequirementsforecommerce.asp 56
The Consumer Protection (Distance Selling) Regulations 2000 http://www.opsi.gov.uk/si/si2000/20002334.htm 57
Research from Return Path on ‘Increasing Revenue by Optimizing Emailing Practice with Online Buyers’ suggests that retailers are missing obvious
promotional opportunities with customers who have recently purchased online
http://www.returnpath.net/downloads/resources/Ecommerce_Study_v030509.pdf 58
Data suggesting that Google Analytics market share is 44% was published in January 2010 at http://istobe.com/blog/2010/01/25/e-commerce-web-
analytics-market-share-january-2010/ Earlier (April 2008), more in-depth analysis suggests that Google Analytics then had over 60% share of sites but less
than 30% share of pageviews – suggesting that it predominates on smaller sites – see http://blog.immeria.net/2008/01/web-analytics-vendors-market-
shares.html 59
Google’s own one-page overview of how to set up transaction tracking in Google Analytics is at
http://www.google.co.uk/support/googleanalytics/bin/answer.py?hl=en-uk&answer=55528 . Their index of articles about installing the tracking code for
Google Analytics is at http://www.google.com/support/analytics/bin/topic.py?hl=en&topic=10976. 60
For a description of Google Analytics new goals see http://conversionroom.blogspot.com/2010/01/spotlight-on-new-google-analytics.html. 61
Google’s general overview of goals and funnels is at http://www.google.co.uk/support/googleanalytics/bin/answer.py?hl=en-uk&answer=148374 62
How to track Javascript events is explained at http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55521. 63
A useful guide to the cookies used by Google Analytics is at http://www.morevisibility.com/analyticsblog/from-__utma-to-__utmz-google-analytics-
cookies.html. 64
This post in the Google Analytics Blog gives a thorough account of how to segment traffic with the user-defined reporting – see
http://analytics.blogspot.com/2009/07/segment-your-traffic-with-user-defined.html. 65
Jared Spool of User Interface Engineering explains how changing a ‘Register’ button to a ‘Continue’ button increased the number of customers
purchasing by 45%, an increase that would have generated $300 million over the course of a year – see
http://www.uie.com/articles/three_hund_million_button. 66
Craig Sullivan of Lovefilm is interviewed about split-testing - http://econsultancy.com/blog/2454-q-a-lovefilm-s-craig-sullivan-on-a-b-and-multi-variate-
testing. 67
Bryan Eisenberg on the evolution of Amazon’s ‘add to cart’ button over the years - http://econsultancy.com/blog/2454-q-a-lovefilm-s-craig-sullivan-on-
a-b-and-multi-variate-testing. 68
Google’s beginners guide to Website Optimizer is at http://www.google.co.uk/intl/en/websiteoptimizer/beginnersguide/ and their Techie Guide to
Website Optimizer is at http://google.com/websiteoptimizer/techieguide. Other key providers of split-test services or systems include Omniture’s Test &
Checkout Optimization 70 ways to increase conversion rates Page 63
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. Copyright © Econsultancy.com Ltd 2010
Target (http://www.omniture.com/en/products/conversion/testandtarget), Autonomy’s Optimost (http://www.optimost.com) and Maxymiser
(http://maxymiser.com/). 69
Yes, Jonathan Mendezs did actually recommend that all buttons should be large and red irrespective of anything! See
http://www.optimizeandprophesize.com/jonathan_mendezs_blog/2007/02/7_rules_for_lan.html. 70
A pioneering series of psychology experiments by John Bargh of Yale University demonstrated a wide variety of ways our behavior can be influenced
sub-consciously. See http://www.yale.edu/acmelab/articles/Bargh_EJSP_2006.pdf for a review. 71
Website Optimizer Help has a page on testing many sections over several pages at
http://www.google.com/support/websiteoptimizer/bin/answer.py?hl=en&answer=93182.