econsultancy checkout optimization guide - purdue … 406 e-retailing/checkout... · market data /...
TRANSCRIPT
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 Inventory & 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 Analyzing 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. Customer 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 part is that
designing a good checkout is no longer hard. 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 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's 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
toward 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 determine if the spark plugs need replacing), my hope is this report will
become a standard 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 are referenced and further reading is suggested in the endnotes
(see Section 6).
This is my second Econsultancy report on checkout – the previous one published in 2007.
While feedback was good, I started from scratch with this report. My aim in doing so is to
organize checkout best practice to make it more accessible to busy e-commerce managers.
Each section focuses on a single aspect of checkout design and is 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 enable you to specify what
changes to implement. All 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 shopping cart 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 average online checkout makes customers abandon half of the revenues they are in the
process of spending6.
“...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
The geographic coverage of this report has been extended to the UK and USA (the 2007 report
focused entirely on UK e-commerce sites). As part of the preparatory research for this report,
checkouts of the top 25 UK and US retail sites7 were evaluated and screenshots taken of their
pages, error messages, etc., including US sites. Most didn‟t change a great deal in the report.
There are some specific regional issues that make checkouts different (e.g. addresses are less
standardized in the UK, hence more difficult to capture; sales tax and delivery changes are more
varied in the US and hence more difficult to present to customers). Apart from that there was no
evidence retailers in one region are managing checkout any different 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 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 checkout details, and the only way to ensure a detail is implemented effectively is to
work through checkout page-by-page, element-by-element. To help you to do this we've
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's one thing every e-commerce manager should know about the psychology of customers
using checkout it is that they're lazy and operating on autopilot. This isn‟t pejorative – it applies
to all of us. The revolution that has been sweeping psychology, as popularized in books such as
Blink and Nudge9, reveals we operate subconsciously a lot more than we realize. A huge
amount of what we believe to be rationally considered, consciously-driven activity is actually
planned and executed subconsciously – 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 minimize the amount of thinking effort required to
complete a task. Checkouts, therefore, should be designed to 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 will 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. Inventory & 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 minimize 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
color 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:
First, 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.
Second, 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 is
when someone wants to go back one or more steps to check or to change what they‟ve entered.
This often proves the downfall of badly designed or inadequately tested checkout processes.
Customers may want to retrace their steps to:
Change the product they're 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 minimize 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 shopping cart 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
endnotes18.
As illustrated by the example of the Serenata Chocolates custom „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
shopping cart 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 shopping cart contents. Our
recommendation here is that, where possible,
thumbnail images, titles, variant choices (e.g.
color, 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-shopping cart in the right 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 minimize 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. Let‟s assume I've entered my
personal details and address in checkout already. 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 shopping cart.
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 shopping cart 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 shopping cart
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
shopping cart persistence.
Saving shopping cart contents can increase revenue
3. Even after a shopping cart has been abandoned and the customer has left the
site, as many as 33% return and purchase later20. So losing information
on shopping cart contents seems an almost certain way of losing revenue21.
Survey research22 suggests over 80% of US e-commerce sites now save
shopping cart 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
for which shopping carts should be saved to accommodate, say, the 95th
percentile of purchases (inventory can also be an issue here - see Section 2.6 -
Inventory & session timing). Alternately, items can be moved to a wish list or
„saved items‟ area of the shopping cart so customers can be reminded of them
on a returning visit and stock availability re-checked (see Amazon example
below).
4. The final way checkout can lose information is by failing to remember customers
returning to purchase. 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 recognized, 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 Inventory & session timing Inventory in checkout presents a genuine conflict of interest between the customer and the
retailer. Having placed an item in their shopping cart, the customer will be justifiably indignant
if that item is removed from their shopping cart during checkout. Imagine standing in line at
the supermarket waiting to pay, only to learn when you reach the cash register that your cart is
empty! Conversely, the retailer needs inventory available for sale, so will not want items held in
the shopping carts of customers who don't intend to commit to a purchase.
The first issue to recognize here is checkout is about payment, not shopping. As we've said all
along, keep checkout clear, simple and short, putting nothing in the way of the customer once
they have committed to buy. Inventory availability should always be made clear prior
to checkout, and it should be reserved at an appropriate point, until or unless the
customer is deemed to have abandoned it. 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's
added to shopping cart. If there's a high shopping cart 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. The other is to reserve stock only
once the 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
shopping cart every time a new page is loaded and flag prominent out-of-stock apologies, when
necessary.
2. What rules apply for releasing that stock to other customers? Never releasing stock
once it's been reserved (added to a shopping cart) is inefficient and probably exceeds customer
expectations. If I return to a site two months after a first visit, I don‟t expect the retailer to have
refused to sell it to anyone else in the meantime. Releasing stock from shopping carts once a
shopping session ends is both prudent and reasonable. To cater for sessions that don‟t end
(computer in sleep mode, or browser left open) a cut-off needs to be set. This could be anything
from 10 minutes to an hour of browser inactivity. Frequently this will be based on session
timing. The challenge, again, is communicating inventory 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 inventory reservation is not an option. The previous example
(from Argos.co.uk) is a substantial breach of trust.
2. A reserve on add-to-shopping cart should be adopted as the most simple and
effective reservation rule. Reserve-on-entry-to-checkout and reserve-on-purchase are both
technically feasible but counter-intuitive to customers and messy to communicate convincingly.
They also achieve nothing that can't be equally well achieved by a release policy.
3. Inventory is most effectively tightened by session management (session duration).
This must be communicated clearly to the customer; preferably a countdown to session
timeout should also be shown. This is illustrated by Ticketmaster below, and is in stark contrast
to Dell and JC Penney, also 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
shopping cart 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 mostly entails, so it probably makes sense that you should
spend most of your checkout improvement time making forms work better. Good form
design is both an art and a science. It's an art because the visual appearance of a form can
make it look simple, intuitive and (almost!) appealing, or messy, cumbersome and difficult.
There's 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 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 standardized, 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 confirmation or consent, typically, to
confirm 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 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 the retailer must weigh: 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 UK email marketing, the Privacy and Electronic
Communications (EC Directive) Regulations 200325 demand that organizations cannot
send unsolicited marketing communications by email to individual subscribers unless the
recipient has given „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 penalizing non-compliance, the bill explicitly
legalizes 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 email.
5. Although relatively recent
innovations, the use of dynamic
pop-up controls is becoming
increasingly standardized 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 color
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 must enter your phone number with no spaces or this
form is rejected with a big red error message. Come on, Tesco! It's 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! They're 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 enter what they want, 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 first be made clear an error has been
detected. Second, the location of the error on the form must be highlighted and the nature
of the error indicated. Making sure 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 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 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're the calls-to-action that drive the
customer towards checkout completion. 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 must 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's 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 color. 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 color-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 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 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've 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's not clear from where this pattern originates, 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
must 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 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 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. 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 identity
theft is a "major" concern for them34.
Reassurance 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 shopping cart 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 fine print. In addition, 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's 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. Login / 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 standardize 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 captures. 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 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 element 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 Many e-commerce sites still insist on registration as the first step in
checkout despite evidence39 suggesting 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 realize is registration is not
only harmful, it's also unnecessary! Email address must be
captured anyway for order confirmation, as does name and address for
delivery. 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 sites use almost identical workflow and very similar dynamic interfaces. On
John Lewis the first page of checkout contains only a single textbox and a continue
button, positively Google-like in its uncluttered appearance.
Once an email address is entered
and the continue button clicked,
a panel is revealed asking „Do you
have a password?‟, offering yes
and no radio buttons . The
default is „no‟ enabling new
customers to click a „continue‟
button to go straight to the next
step. If „yes‟ is clicked, a
password field and „forgotten
password‟ link is revealed. It's
very clean, slick and intuitive. 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 removed one click
from John Lewis' process. The
only fault with the Sears process
is it doesn‟t have a password
reminder link. Combining the
best from both sites could
approach 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 captures
In order to capture an email address effectively, you must ensure two things:
1. 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.
Analyzing a sample of 50,000 emails from a UK e-commerce site revealed the 99th
percentile address length was 36 characters. It's 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's 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, particularly for UK addresses! While some addresses
might fit into four lines, the Universal Postal Union, the recognized
international co-ordinating body for postal issues suggests44 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: first 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 and other customers will
wonder if you want more information than their simple three-line address
because you provided so many text-boxes. Second, 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 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? 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 personalize email with the customer‟s first name, the
most reliable way to do so is to capture it separately. If you want to know gender,
the easiest way to do so is to give them a list of gender specific titles (e.g. Mr,
Mrs, Miss, Dr. 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 many
cultures around the world 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 will get emails sent to Dear G – heartfelt
personalization!
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. So when the postcode is
entered and the find button clicked, a control (not shown) must 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 the majority of customers needn't do anything to
select their country. If worldwide delivery is offered, 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 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 recognized, 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 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 both delivery and gift options are presented both in the shopping cart (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 must be clarified to the customer. Do the delivery options on
offer differ by:
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 up-sell opportunity to
retailers. Customers should be told gift options are available well before
the checkout (e.g. on product pages and in the shopping cart) 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 - should be shown in a sufficiently detailed image to
persuade the customer of its quality and attractiveness. All too often it's
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 shopping cart at the latest.
The main challenge for payment capture, as it was for address capture, is standardization. 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 shopping cart 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 standardize 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 shopping cart 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 shopping cart, 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 should be available to capture 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 auto-complete 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 auto-complete 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 used
throughout checkout (see Section 2.4), 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 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 (i.e. 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 / color) 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
from the transaction they're in
the process of completing, for
example by presenting them with
promotions. The place for „shopping‟
is either before checkout has started
(up to and including the shopping
cart page), or after the purchase is
completed, i.e. on the order
confirmation page and in
confirmation emails.
Research57 suggests only 40% of
companies include promotions in
order confirmation emails and fewer
still target these promotions
according to the purchase that was
just made. With customers eager to
view their order details and highly
likely to open these messages, 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 minimize the need to navigate within the checkout, customers should be continually reminded and reassured about shopping cart contents and the information they have entered.
8. Are shopping cart 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 shopping carts saved and re-presented to returning customers?
15. Are returning customers identified and appropriate checkout fields pre-populated?
Inventory & session timing
Customers expect items added to their shopping cart to be available to buy – exceptions to this should be minimized. 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 standardized web elements and should be optimized 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. Minimize 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, standardized 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 shopping cart 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 Standardize 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've 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. For the first time, all but the smallest e-
commerce sites will have some sort of web analytics system.
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. 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 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's 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, so
this section will highlight two aspects of best practice that can substantially improve the
quality and depth of insights available about checkout performance: 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 checkout. This provides, 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're 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 the
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 shopping cart. If someone bookmarks a
checkout page, they should be redirected to the shopping cart upon their return (hopefully with
the products they had selected previously still in their shopping cart 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, shopping cart 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
also have a register pathway for new customers. These are all different funnels because they
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
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.
OK, so how do we separate out two different funnels to correspond to the
guest checkout pathway and the customer login pathway? Don‟t start fiddling
with Google Analytics right away. Sketch it out on paper first. All customers
click the „checkout‟ link on the shopping cart 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 shopping cart (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 achieved
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 all 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's 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
categorized at repeat visitors. If no cookie is detected, the visitor is categorized as a new visitor.
While useful for some purposes, this categorization 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 recognized 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 favor of continuous improvement. Craig Sullivan, of Lovefilm.com, for example, has described66 how A/B and
multivariate 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 realizing
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's lots of nonsense 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, fuelled 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's 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 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 multivariate 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
multivariate split-test with customer segments included as covariates – a test that
will require the split test data to be exported and analyzed 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 multivariate
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 multivariate 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 shopping cart 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 shopping cart 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.