At Conversion Conference Germany 2013 Paul Rouke delivered a presentation aimed at identifying and showcasing what are the 10 most important areas retailers need to get right to improve usability, persuasion and conversion rates for their online experience

1. 10 KEY AREAS TO
GET RIGHT
IN ECOMMERCE
4TH NOVEMBER 2013
CONVERSION CONFERENCE GERMANY
BERLIN
PAUL ROUKE
Founder & Director of
Optimisation
@paulrouke
@paulrouke
#ConvCon

2. ABOUT PRWD
Founded in 2004 by Paul Rouke
Conversion optimisation specialists
Head office in Manchester, UK with clients
across Europe
Work on-going with brands to analyse,
review, test and optimise site experiences
Specialise in desktop, tablet & mobile UX &
conversion optimisation
@paulrouke
#ConvCon

3. PRWD CLIENTS INCLUDE
@paulrouke
#ConvCon

4. TALK OVERVIEW
Why these 10 areas?
The 10 key areas
3 takeaways
Resource pack – tips & techniques
@paulrouke
#ConvCon

5. DISTILLED USER INSIGHTS THAT
COME UP TIME & TIME AGAIN(
... and ye s still in 2013
@paulrouke
#ConvCon

6. INCLUDING UP TO THE MINUTE
RESEARCH & TESTING FROM
MAJOR RETAILERS
... across de sk top, table t & mobile ex p e rie nce s
@paulrouke
#ConvCon

7. TALK OVERVIEW
Why these 10 areas?
The 10 key areas
3 takeaways
Resource pack – tips & techniques
@paulrouke
#ConvCon

8. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
@paulrouke
Sitewide
#ConvCon

9. 1. SITEWIDE
@paulrouke
#ConvCon

10. Within seconds of arriving visitors are
looking for reasons to justify being on your
website
SECTION TITLE
Free delivery options, free returns &
promotions are of the 3 most persuasive
types of messages that help users justify
not clicking the back button
@paulrouke
#ConvCon

11. YOUR
PROPOSITION
MESSAGES
SHOULD BE
SECTION
AVAILABLE TITLE
SITEWIDE,
DEVICE WIDE
@paulrouke
#ConvCon

12. PROMOTE YOUR
USP’S IN KEY
AREAS OF THE
SHOPPING
SECTION
JOURNEY TITLE
@paulrouke
#ConvCon

13. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
@paulrouke
#ConvCon

14. 2. HOMEPAGE
@paulrouke
#ConvCon

15. Typically users don’t have too much intent
to interact with beautifully crafted
ecommerce homepages...
SECTION TITLE
Users simply want to get to products
quickly & efficiently with minimum of fuss
@paulrouke
#ConvCon

16. SIMPLIFY YOUR
HOMEPAGE TO
PROVIDE
VISITORS WITH
SECTION
INTUITIVE, TITLE
RELEVANT
JUMP OFF
POINTS
@paulrouke
#ConvCon

17. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
@paulrouke
#ConvCon

18. 3. PRIMARY NAVIGATION
@paulrouke
#ConvCon

19. As a primary tool for visitors, your primary
navigation should be intuitive, quick and
goal driven for the visitor
SECTION TITLE
Full width mega menus are now almost
expected, and when done right they can
provide an empowering 1st experience for
visitors on your site
@paulrouke
#ConvCon

20. TAKE TIME TO
ENSURE THE
CONTENT &
DESIGN OF
YOUR MENUS
ARE FIT FOR
PURPOSE
@paulrouke
#ConvCon

21. INCLUDE A USP
AND OTHER
VISUAL
ELEMENTS IN
YOUR MEGA
MENU
@paulrouke
#ConvCon

22. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
@paulrouke
#ConvCon

23. 4. FILTERING
@paulrouke
#ConvCon

24. Very often little attention is paid to the
user experience and usability of filtered
navigation experiences
SECTION TITLE
It is one thing having lots of filters, its
another thing making this intuitive and
enjoyable for visitors to use
@paulrouke
#ConvCon

25. RECOGNISE
THAT A BAD
FILTER
EXPERIENCE
WILL MAKE
VISITORS
ABANDON
@paulrouke
#ConvCon

26. PROVIDE
VISITORS WITH
A CONSISTENT
BROWSING
EXPERIENCE: –
REMEMBER
PREFERENCES
@paulrouke
#ConvCon

27. PAY ATTENTION
TO THE VISUAL
DISPLAY OF
FILTERS AND
PRODUCT GRIDS
@paulrouke
#ConvCon

28. PROVIDE
FILTERS WITH A
PERSUASION
FOCUS, NOT
JUST PRODUCT
ATTRIBUTES
@paulrouke
#ConvCon

29. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
5.
The Persuasive Layer
@paulrouke
#ConvCon

30. 5. THE PERSUASIVE LAYER
@paulrouke
#ConvCon

31. 57 SLIDES ON PERSUASION &
PERSONALITY FOR ECOMMERCE
bit.ly/smartPPC
LINGS CARS
SECTION TITLE
bit.ly/batshitinsane
BOOKING.COM
bit.ly/bookingBP
@paulrouke
#ConvCon

32. Although more brands are recognising the
importance of making shopping
experiences persuasive, there is still plenty
SECTIONofTITLE to be more persuasive than
opportunity
your competitors
Many brands lack a personality online this is a key way in which retailers can
differentiate themselves
@paulrouke
#ConvCon

33. ASK &
ANSWER THE
QUESTION
“HOW CAN WE
MAKE OUR
EXPERIENCE
MORE
PERSUASIVE?”
@paulrouke
For more ideas buy a pack of cards from
www.getmentalnotes.com
#ConvCon

34. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
5.
The Persuasive Layer
6.
Product Listing Page
@paulrouke
#ConvCon

35. 6. PRODUCT LISTING PAGE
@paulrouke
#ConvCon

36. Unless visitors buy the 1st product that
they land on, they will have to view and
use your product listing page
SECTION TITLE
These pages should focus on putting the
control in the users hand – providing tools
to help them browse & find products
quickly & efficiently – across devices
@paulrouke
#ConvCon

37. YOUR LISTER
PAGE IS A
CRUCIAL PART
OF THE USER
JOURNEY:
DON’T NEGLECT
IT
@paulrouke
#ConvCon

38. CONSIDER RARE
TECHNIQUES
THAT CAN
MAKE YOUR
LISTER PAGES
MORE
PERSUASIVE
@paulrouke
#ConvCon

39. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
5.
The Persuasive Layer
6.
Product Listing Page
7.
Product Page
@paulrouke
#ConvCon

40. 7. PRODUCT PAGE
@paulrouke
#ConvCon

41. The key question is “what can you do to
get visitors as close to your products as
possible to reflect an in-store experience?”
SECTION TITLE
Social proof through customer ratings &
reviews continues to play a huge part in
the decision making process.
Users need a reason to act
@paulrouke
#ConvCon

42. YOUR PRODUCT
PAGES SHOULD
BE AIM TO
PRESENT A
WIDE RANGE OF
CONTENT...
CLEARLY
@paulrouke
#ConvCon

43. PERSUASIVE
ELEMENTS PLAY
A KEY PART IN
ENCOURAGING
THE ADD TO
BASKET CLICK
@paulrouke
#ConvCon

44. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
5.
The Persuasive Layer
6.
Product Listing Page
7.
Product Page
8.
Shopping Basket
@paulrouke
#ConvCon

45. 8. SHOPPING BASKET
@paulrouke
#ConvCon

46. ASOS BASKET ANALYSIS
SECTION TITLE
bit.ly/ASOSbbp
@paulrouke
#ConvCon

47. Transparency of your service proposition
is extremely important at this stage - you
don't want visitors having un-answered
SECTIONquestions going in to checkout
TITLE
Don't give visitors reason to leave the
website to try and find promo codes - this
really does happen
@paulrouke
#ConvCon

48. I'd definitely try to be a bit savvy and
spend 10 minutes looking for a voucher
code
SECTION TITLE
You're more likely to go and look for a
promotional code if you see an open field
A user taking part in research for Schuh
@paulrouke
#ConvCon

49. ANSWERING
VISITOR
QUESTIONS
SHOULD BE A
PRIME AIM OF
YOUR BASKET
@paulrouke
#ConvCon

50. FOCUS USERS
ATTENTION ON
THE ONE
PRIMARY
ACTION YOU
WANT THEM TO
TAKE
@paulrouke
#ConvCon

51. PROVIDE
FLEXIBILITY
FOR VISITORS
TO CATER FOR
CHANGES THEY
MAY NEED
@paulrouke
#ConvCon

52. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
5.
The Persuasive Layer
6.
Product Listing Page
7.
Product Page
8.
Shopping Basket
9.
Checkout
@paulrouke
#ConvCon

53. 9. CHECKOUT
@paulrouke
#ConvCon

54. Typically 1 in 4 visitors don’t complete
checkout
SECTIONForcing registration at the start of
TITLE
checkout is still one of the most toxic
elements of the process
@paulrouke
#ConvCon

55. Building momentum as quickly as possible
from the start of checkout helps conversion
SECTIONForm usability is crucial and basic issues
TITLE
are still prevalent in many e-commerce
checkout processes
@paulrouke
#ConvCon

56. SIMPLIFY THE
1 ST STAGE OF
YOUR
CHECKOUT AS
MUCH AS
POSSIBLE
@paulrouke
#ConvCon

57. SIMPLIFY THE
DESIGN AND
REMOVE
DISTRACTIONS
IN YOUR
CHECKOUT
@paulrouke
#ConvCon

58. PAY CLOSE
ATTENTION TO
MAKING YOUR
FORMS QUICK
& SIMPLE TO
COMPLETE
@paulrouke
#ConvCon

59. PROVIDE
PERSUASIVE
MESSAGING
CONSISTENTLY
IN CHECKOUT
@paulrouke
#ConvCon

60. 10 KEY AREAS
TO GET RIGHT
IN ECOMMERCE
1.
Sitewide
2.
Homepage
3.
Primary Navigation
4.
Filtering
5.
The Persuasive Layer
6.
Product Listing Page
7.
Product Page
8.
Shopping Basket
9.
Checkout
10.
Order Confirmation
@paulrouke
#ConvCon

61. 10. ORDER CONFIRMATION
@paulrouke
#ConvCon

62. The order confirmation page is very often
neglected, providing an expectedly flat
end to the shopping journey
SECTION TITLE
This is the ideal opportunity to ask new
customers to choose a password to get
genuine account benefits
@paulrouke
#ConvCon

63. On order confirmation, retailers have the
opportunity to delight customers and
focus on the peak end rule in persuasion
SECTION- making the whole shopping experience
TITLE
feel more positive & worthwhile
@paulrouke
#ConvCon

64. RECOGNISE THE
UNIQUE
OPPORTUNITY
YOU HAVE TO
ENCOURAGE
REPEAT VISITS
@paulrouke
#ConvCon

65. PROVIDE
VISITORS WITH
CONFIRMATION
OF KEY
DETAILS
@paulrouke
#ConvCon

66. 3 FINAL TAKEAWAYS
@paulrouke
#ConvCon

67. TALK OVERVIEW
Why these 10 areas?
The 10 key areas
3 takeaways
Resource pack – tips & techniques
@paulrouke
#ConvCon

68. 3 TAKEAWAYS
@paulrouke
No matter how long some of these insights
have been accepted, in our experience
there are still lots of retailers who can
learn from them
2.
SECTION TITLE
1.
Split testing some of these
recommendations is the recommended
approach, but many should be added to
your JFDI list
3.
Irrespective of their size, retailers still
have a long way to go in delivering
persuasive experiences with good usability
end to end – there is still time to gain
competitive advantage!
#ConvCon

69. THANKS FOR
LISTENING
Are there any questions?
4TH NOVEMBER 2013
CONVERSION CONFERENCE GERMANY
BERLIN
PAUL ROUKE
Founder & Director of
Optimisation
@paulrouke
@paulrouke
#ConvCon

70. SLIDES
bit.ly/10areasDE
SECTION TITLE
CRO RESOURCE LIBRARY
bit.ly/CROresources
@paulrouke
#ConvCon

71. TALK OVERVIEW
Why these 10 areas?
The 10 key areas
3 takeaways
Resource pack – tips & techniques
@paulrouke
#ConvCon

72. 1. SITEWIDE TIPS
@paulrouke
#ConvCon

73. In multiple A/B tests for different types of
businesses (retail or not), user researched
USP messages never fail to improve
sitewide conversion rate
SECTION TITLE
Focus on delivery, returns and promotions
– these types of messages typically
resonate most with users
Aim for 3 messages at most – don’t try
cramming too much in
Make it clear if messages are clickable or
just for information
Consider small icons for delivery and
returns messages
@paulrouke
#ConvCon

74. Ensure your USP messages are displayed
across devices – users on mobile still need to
be persuaded
Use a subtle animation once the site has
loaded to draw attention to them
SECTION TITLE
Add USP messages to the bottom of your
simplified menu on mobile
Repeat key messages below your shopping
basket contents
Include a key USP in your navigation flyout
Include a key USP in your mini-basket
These messages are perfect for A/B testing
to understand user views of your
proposition
@paulrouke
#ConvCon

75. 2. HOMEPAGE TIPS
@paulrouke
#ConvCon

76. Provide clear jump off points to key
product ranges that are either seasonal or
relevant
Provide personalised content based on
visitor behaviour ie. new versus returning,
logged in versus guest
SECTION TITLE
If you have to use those damn carousels....!
> Make the controls big & prominent
> Pause the carousel on mouse hover
> Aim for 3-4 messages at most
Ensure your calls to action on promotions
are clear – so visitors know this isn’t just an
aspirational image to sell the brand
@paulrouke
#ConvCon

77. 3. PRIMARY NAVIGATION TIPS
@paulrouke
#ConvCon

78. Use the full width of the page for your
mega menus
Provide quick links to user driven areas
such as sale, new in and seasonal product
ranges (see ASOS for a great example)
Add some affordance in your mega menus
(see Amazon) to streamline the users
experience
Put product categories in alphabetical
order
If you have more than 15/20 categories,
pull out the 5/10 most popular in there own
column (most popular) to increase visibility
@paulrouke
#ConvCon

79. Aim to use a consistent column titles and
order of links for each of your primary –
this creates consistency for visitors as they
move across your primary navigation bar
Include a space for a graphical promotional
slot for seasonal or sale products
Include one of your primary USP’s along
the bottom of your mega menus
Consider the use of icons to represent your
primary product categories in your mega
menu
For tablet visitors, code your mega menus
so that they appear on one press – see
t.schuh.co.uk to see this in action
@paulrouke
#ConvCon

80. 4. FILTERING TIPS
@paulrouke
#ConvCon

81. Allow users to multi-select attributes
Provide a dynamic counter of available
products to manage user expectation
Make filtering feel very responsive
Close filter area automatically if users have
scrolled past the filter area to view
products
Don't take visitors to the top of the filters
after they select one - maintain their scroll
position
Order filters in the most appropriate way
to match user requirements
@paulrouke
#ConvCon

82. Auto hide secondary filters to remove unnecessary noise/distraction
Make it simple and intuitive to remove
individual OR all filters
Use the same form elements consistently
for familiarisation for users
Provide filters for availability/delivery
options available
Provide the option for visual filtering (see
ASOS)
Maintain user filters when they go back to
lister pages
@paulrouke
#ConvCon

83. Provide filters that really matter to visitors
Give users more control when entering
values
Provide more information for more
complex filters
Introduce social proof and consumer
behaviour in to filters i.e. most popular,
new in, with video, highest rated
@paulrouke
#ConvCon

84. Increase click area when moving though
pages or using the sort options on mobile &
tablet
Make colours visual swatches for
immediate recognition
For brands, provide 2 tabs or focus on the
most popular 10 before giving users the
option to expand to view all
Give users the option of display i.e. image
grid size, detail versus visual
Provide an immediately recognisable show
and hide filter area
@paulrouke
#ConvCon

85. 5. THE PERSUASIVE LAYER TIPS
@paulrouke
#ConvCon

86. 57 SLIDES ON PERSUASION &
PERSONALITY FOR ECOMMERCE
bit.ly/smartPPC
LINGS CARS
SECTION TITLE
bit.ly/batshitinsane
BOOKING.COM
bit.ly/bookingBP
@paulrouke
#ConvCon

87. 6. PRODUCT LISTING PAGE
@paulrouke
#ConvCon

88. Increase the size of your product images to
provide a more visual browsing experience
Provide viewing options (product size, grid
layout and number per page)
Maintain users choice in how many
products they want to be shown on 1 page
as they browse around
Use a cookie to remember users preference
when they come back to your website
If you group products by mens, womens &
kids, on future visitors automatically take
visitors to the area they typically spend
time on when they go to your homepage
@paulrouke
#ConvCon

89. If you provide a view all option using
progressive loading, consider defaulting to
this choice as it suits a high % of visitor
preference
On hover provide visitors with an
alternative image which helps to sell each
of your products
Consider the use of quick view overlay
windows so visitors can browse full details
from this page
Feature badges which pull out key
features, exclusivity or social proof driven
products from your range
@paulrouke
#ConvCon

90. 7. PRODUCT PAGE
@paulrouke
#ConvCon

91. Visually group size, colour, qty and add to
basket in one key area
Provide visitors with the ability to scroll
through products from the product page
Follow the approach used by TNF US to
make it clear what products are next
Don't be afraid of white space and
cramming everything above the fold visitors will scroll down
Allow visitors to cycle through product
images using back/forward arrows on the
image
Use tabs to deliver key information like
delivery & returns information
@paulrouke
#ConvCon

92. Introduce badges to provide visual stimulus
for key attributes
Ensure the rating & number of reviews are
positioned close the product title
Ensure product ratings are clickable to go
straight to product reviews
Provide multiple product images which
showcase all key aspects of the product
When you publish negative reviews,
demonstrate that you are listening to your
customers by responding visibly next to the
review (see Lakeland as a shining example)
@paulrouke
#ConvCon

93. 8. SHOPPING BASKET TIPS
@paulrouke
#ConvCon

94. Provide details of your delivery options &
costs – don’t make it hard to find these
Allow visitors to provisionally select their
delivery choice to see the total cost of
their order, which they can update in
checkout if required
If country or location is required for
accurate delivery costs, make this clear to
visitors – don’t leave them guessing
Promote your payment options clearly
If you provide PayPal split this logo out
from your other card types – don’t let it get
lost
@paulrouke
#ConvCon

95. Use wording such as 'checkout securely' to
emphasise you are entering a secure area
Provide a checkout button in the top right
in line with the button at the bottom of
checkout
Don’t position a continue shopping button
next to your checkout button – move this
to the bottom right of your shopping basket
design , under all key information
Hide your promo code field behind a link "I
have a promo code"
Provide explanation of where visitors will
get promo codes rather than just
presenting a big empty box
@paulrouke
#ConvCon

96. Allow visitors to edit not just the quantity
but the specification of their selected
product within their shopping basket
Don’t make a big thing of your ‘remove
item’ option – you need to provide it, but
do this with a simple text link that doesn’t
shout out ‘click me!’
Use dynamic messaging to encourage
visitors to trigger a discount i.e. spend
another £10 to get free next day delivery
@paulrouke
#ConvCon

97. 9. CHECKOUT TIPS
@paulrouke
#ConvCon

98. Don’t lead with titles like Registration or
Account creation for new visitors –
instead simplify this to New Customers
Reduce support copy where possible to
reduce the amount of content users have to
consider skim reading
Provide a simple line of text such as “you
have the option of creating an account at
the end” to cater for visitors interested in
repeat purchasing
Provide new customers with 1 option
rather than 2 – simplify their decision
making process
Use a descriptive button for new customers
such as “Proceed to Delivery” to make it
clear they aren’t registering
@paulrouke
#ConvCon

99. Enclose your checkout process, removing
standard sitewide content like navigation,
search facilities and sitewide footer links
Feature your security provider logo in your
new simplified header
Provide a simple, clear progress indicator
that demonstrates where you are, where
you have been and what steps you have left
Promote your customer service number
with opening times in your simplified
header
Simplify the footer to just included links to
delivery, returns, privacy, security and T’s
and C’s
@paulrouke
#ConvCon

100. Provide transparency of why you are
asking for certain information – show the
benefit for the visitor
Lead with delivery options and address
details rather than billing address details
Integrate billing address in to the payment
stage, leading with a tick-box to re-use
your delivery address
Provide postcode look-up, and auto hide
the full address details until the user has
entered their postcode or chosen to enter
address manually
In your postcode look-up, provide the
option to enter your house number so many
visitors will have their address found
immediately on clicking ‘find my address’
@paulrouke
#ConvCon

101. Key brand messages visitors have seen
earlier in the browsing & shopping journey
should be featured in checkout – a footer
section showcasing 3 USP’s is one option
If visitors have taken up a discount or their
products have savings applied, ensure this
is shown consistently in checkout
If you are selling subscriptions or niche
products, provide social proof through
short reviews and industry/famous people
endorsements at the point of purchase
@paulrouke
#ConvCon

102. 10. ORDER CONFIRMATION TIPS
@paulrouke
#ConvCon

103. For new customers, make the primary focus
for them to provide a password to create
their account
Provide 3 customer centric benefits for
signing up, using ticks to emphasise
positive messages
Include emotive imagery to provide a richer
visual experience and says to the customer
“this is what you have to look forward to”
For returning customers, provide a tangible
offer which encourages them to make
follow-up purchases in a realistic time
frame (based on customers typical order
cycles)
@paulrouke
#ConvCon

104. Make it absolutely clear what delivery
option they have selected and when they
can expect their goods to arrive
If you provide click and collect, make it
absolutely clear when the customers
products will be available for collection
If click and collect has been selected,
provide a simple overview of what
customers need to do – this may well be the
1 st time they have chosen this type of
option
Personalise the order confirmation page
with a title like “Thank you for your order
John” – small personalisation like this goes
a long way
@paulrouke
#ConvCon

105. SLIDES
bit.ly/10areasDE
SECTION TITLE
CRO RESOURCE LIBRARY
bit.ly/CROresources
@paulrouke
#ConvCon