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