6 Checkout Optimization Lessons
based on years of testing at the Baymard Institute
[Link]
Years of Checkout Research
Large-scale checkout usability study of 15 of the largest e-commerce sites
Benchmark study of 100 major US e-commerce sites' checkout process
Large-scale eye-tracking study of checkout processes
Audited and consulted on checkout optimization for several Fortune 500 companies
[Link]
Checkout Optimization 2015
68.07% cart abandonment rate – and still rising
(2006 - 2015 average of 29 independent studies)
Good checkout usability requires going beyond basics with 10-30
smaller design improvements
Today we'll look at 6 checkout optimization lessons
[Link]
Average Number of Checkout Steps
Number of checkout steps for the top 100 US e-commerce site
(avg. 5.08 steps from 'cart' to 'order review')
[Link]
It’s Not About the Number of Checkout Steps
It’s not about the number of checkout steps, but what you ask users
to do at each step (and how you ask them)
Learn more: [Link]/blog/one-page-checkout
Research: How Do Visitors Interact
with Form Fields and Buttons?
Users show a disproportionate amount of
attention towards empty form fields
Users will feel they are overpaying when
seeing a coupon code field
© [Link] 2014
-
-
32 eye-tracking participants at [Link]
Lesson 1: Understand Form Field
Attention
To avoid 'coupon hunting' hide
coupon code field behind a link
Only utilized at 26% of all sites
Consider renaming it 'reward code'
or even 'gift certificate'
© [Link] 2014
+
32 eye-tracking participants at REI
Research: Seemingly Unnecessary Info
Requirements
“Look, why do they need my phone number? What
do they need that for? They don’t need it!”
Every single subject we've tested at one point
complained about a site asking for too much
personal information
A required phone cause privacy concerns as
users 'know' that they can be (and typically are)
contacted by email
-
[Link] Symantec
Lesson 2: Explain Seemingly Unnecessary
Requests for Personal Info
The subjects were very forgiving if the
site explained why phone was required
Either make phone optional or explain it
61% of all sites require phone without
explaining what it will be used for
Also applies to other personal info such
as gender, date of birth, social security
number, etc.
+
Williams-Sonoma
Learn more: [Link]/blog/checkout-experience-seemingly-unnecessary-information
Research: Redundant Information Requests
-
-
[Link]
50% of all sites ask for the same info multiple times during checkout
Lesson 3: Don't Ask for the Same Info
Twice and Pre-Fill Fields
Rarely happens on the same page
Obviously avoid asking for redundant
info – but what about things that are
often, but not always, the same? Like
billing vs shipping address +
Reduce friction by pre-filling things such
as name (in particular cardholder name),
e-mail, zip code, or an address typed
earlier (e.g. during account creation)
For most B2C sites billing address can
default to the shipping address
+
Learn more: [Link]/2012/09/04/the-state-of-e-commerce-checkout-design-2012/ +
Research: Use of Inline Labels
Field labels inside the field is visually
very simple, however…
… the form fields get very difficult to
interact with, and …
… each field loose its context the
second the user starts typing (unless
the label changes position)
Especially problematic on errors
-
-
Apple Learn more [Link]/blog/false-simplicity
Make Checkout as Frictionless as Possible
ll
© [Link] 2014 © [Link] 2014
-
- -
-
60% overlook the ‘Guest Checkout’ option
will be perceived as ‘forced’ account creation
Learn more [Link]/blog/mobile-checkout
Lesson 4: Consider the Placement of 'Guest Checkout'
ll
+ +
‘Guest' is top-left, following a western reading pattern Postponed account creation (perceived as just 2 fields)
Learn more [Link]/blog/mobile-checkout
Research: Perceived Level of Security
Test subjects talked about different areas
of the checkout page as particularly
'secure' or 'insecure'
Primarily concerned about their credit card
information
Users have little technical knowledge of
HTTPS, but go with their gut feeling
[Link]
Research: Visual Reinforcement &
Perceived Level of Security
Visual clues such as borders, a
background color, and security icons
add to the user's perceived level of
security
89% of sites don't encapsulate their
credit card fields
Learn more: [Link]/blog/visually-reinforce-sensitive-fields +
Research: Badges and Perceived Level of Security
[Link]
Lesson 5: Encapsulate Your Form Fields to Add Visual
Reinforcement and Increase Perceived Security
+
[Link] All are fields identical ‘Sensitive’ fields are visually reinforced
Research:Validation Errors and the Recovery Experience
- -
Input errors are bound to happen – the user’s 'recovery experience' is vital to conversion
(100% abandonment on unresolved errors)
[Link]
Lesson 6: Display the Triggered
Error Rule
1) Persist all typed data – retyping is infuriating
+ and can lead to repeat errors
2) Highlight field and have the error description
nearby (never only at the top of the page)
3) The error message should print the actual
validation rule invoked – don’t simply write
+ ‘invalid phone number’; instead write ‘+ character
not allowed’ or ’10 digits required’
4) Consider using non-blocking warnings instead
of validators (currently only 36% have address
warnings)
5) 1-4% of all transactions are declined: guide
the user through the process, offer alternatives,
and phone support.
+
Learn more [Link]/blog/validations-vs-warnings
The 6 Checkout Optimization Lessons
Hide coupon code field behind a link, to avoid needless attention
Explain what the phone number will be used for
Pre-fill all prior typed info (e.g. cardholder name) to reduce typing
'Guest Checkout' should be in the top left area (or chosen by default) +
have optional password fields late in the checkout
Encapsulate your credit card fields to add visual reinforcement
Display the actual error rule triggered and consider non-blocking warnings
instead of validators, etc
Learn more [Link]/research/checkout-usability
Checkout Optimization 2015
68.07% cart abandonment rate – and still rising
(2006 - 2015 average of 29 independent studies)
Good checkout usability requires going beyond basics with numerous
smaller design improvements
“Research-Driven Design”
[Link]
[Link]
