@paulrouke #ConvCon

10 KEY AREAS TO

GET RIGHT

IN ECOMMERCE

PAUL ROUKE

Founder & Director of Optimisation

@paulrouke

4TH NOVEMBER 2013

CONVERSION CONFERENCE GERMANY

BERLIN

@paulrouke #ConvCon

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

ABOUT PRWD

@paulrouke #ConvCon

PRWD CLIENTS INCLUDE

@paulrouke #ConvCon

Why these 10 areas? The 10 key areas 3 takeaways Resource pack – tips & techniques

TALK OVERVIEW

@paulrouke #ConvCon

DISTILLED USER INSIGHTS THAT

COME UP TIME & TIME AGAIN(

. . . a nd ye s s t i l l in 2 0 1 3

@paulrouke #ConvCon

INCLUDING UP TO THE MINUTE

RESEARCH & TESTING FROM

MAJOR RETAILERS

. . . a c ros s d e s k t op , t a b le t & m ob ile ex p e rie nc e s

@paulrouke #ConvCon

Why these 10 areas? The 10 key areas 3 takeaways Resource pack – tips & techniques

TALK OVERVIEW

@paulrouke #ConvCon

Sitewide

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1.

@paulrouke #ConvCon

1. SITEWIDE

@paulrouke #ConvCon

SECTION TITLE

Within seconds of arriving visitors are looking for reasons to justify being on your website 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

SECTION TITLE

YOUR

PROPOSITION

MESSAGES

SHOULD BE

AVAILABLE

SITEWIDE,

DEVICE WIDE

@paulrouke #ConvCon

SECTION TITLE

PROMOTE YOUR

USP’S IN KEY

AREAS OF THE

SHOPPING

JOURNEY

@paulrouke #ConvCon

Sitewide Homepage

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2.

@paulrouke #ConvCon

2. HOMEPAGE

@paulrouke #ConvCon

SECTION TITLE

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

@paulrouke #ConvCon

SECTION TITLE

SIMPLIFY YOUR

HOMEPAGE TO

PROVIDE

VISITORS WITH

INTUITIVE,

RELEVANT

JUMP OFF

POINTS

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3.

@paulrouke #ConvCon

3. PRIMARY NAVIGATION

@paulrouke #ConvCon

SECTION TITLE

As a primary tool for visitors, your primary navigation should be intuitive, quick and goal driven for the visitor 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

TAKE TIME TO

ENSURE THE

CONTENT &

DESIGN OF

YOUR MENUS

ARE FIT FOR

PURPOSE

@paulrouke #ConvCon

INCLUDE A USP

AND OTHER

VISUAL

ELEMENTS IN

YOUR MEGA

MENU

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4.

@paulrouke #ConvCon

4. FILTERING

@paulrouke #ConvCon

SECTION TITLE

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

@paulrouke #ConvCon

RECOGNISE

THAT A BAD

FILTER

EXPERIENCE

WILL MAKE

VISITORS

ABANDON

@paulrouke #ConvCon

PROVIDE

VISITORS WITH

A CONSISTENT

BROWSING

EXPERIENCE: –

REMEMBER

PREFERENCES

@paulrouke #ConvCon

PAY ATTENTION

TO THE VISUAL

DISPLAY OF

FILTERS AND

PRODUCT GRIDS

@paulrouke #ConvCon

PROVIDE

FILTERS WITH A

PERSUASION

FOCUS, NOT

JUST PRODUCT

ATTRIBUTES

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering The Persuasive Layer

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4. 5.

@paulrouke #ConvCon

5. THE PERSUASIVE LAYER

@paulrouke #ConvCon

SECTION TITLE

57 SLIDES ON PERSUASION &

PERSONALITY FOR ECOMMERCE

bit.ly/smartPPC

LINGS CARS

bit.ly/batshitinsane

BOOKING.COM

bit.ly/bookingBP

@paulrouke #ConvCon

SECTION TITLE

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

@paulrouke #ConvCon

For more ideas buy a pack of cards from www.getmentalnotes.com

ASK &

ANSWER THE

QUESTION

“HOW CAN WE

MAKE OUR

EXPERIENCE

MORE

PERSUASIVE?”

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering The Persuasive Layer Product Listing Page

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4. 5. 6.

@paulrouke #ConvCon

6. PRODUCT LISTING PAGE

@paulrouke #ConvCon

SECTION TITLE

Unless visitors buy the 1st product that they land on, they will have to view and use your product listing page 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

YOUR LISTER

PAGE IS A

CRUCIAL PART

OF THE USER

JOURNEY:

DON’T NEGLECT

IT

@paulrouke #ConvCon

CONSIDER RARE

TECHNIQUES

THAT CAN

MAKE YOUR

LISTER PAGES

MORE

PERSUASIVE

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering The Persuasive Layer Product Listing Page Product Page

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4. 5. 6. 7.

@paulrouke #ConvCon

7. PRODUCT PAGE

@paulrouke #ConvCon

SECTION TITLE

The key question is “what can you do to get visitors as close to your products as possible to reflect an in-store experience?” 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

YOUR PRODUCT

PAGES SHOULD

BE AIM TO

PRESENT A

WIDE RANGE OF

CONTENT...

CLEARLY

@paulrouke #ConvCon

PERSUASIVE

ELEMENTS PLAY

A KEY PART IN

ENCOURAGING

THE ADD TO

BASKET CLICK

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering The Persuasive Layer Product Listing Page Product Page Shopping Basket

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4. 5. 6. 7. 8.

@paulrouke #ConvCon

8. SHOPPING BASKET

@paulrouke #ConvCon

SECTION TITLE ASOS BASKET ANALYSIS

bit.ly/ASOSbbp

@paulrouke #ConvCon

SECTION TITLE

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

@paulrouke #ConvCon

SECTION TITLE

I'd definitely try to be a bit savvy and spend 10 minutes looking for a voucher code 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

ANSWERING

VISITOR

QUESTIONS

SHOULD BE A

PRIME AIM OF

YOUR BASKET

@paulrouke #ConvCon

FOCUS USERS

ATTENTION ON

THE ONE

PRIMARY

ACTION YOU

WANT THEM TO

TAKE

@paulrouke #ConvCon

PROVIDE

FLEXIBILITY

FOR VISITORS

TO CATER FOR

CHANGES THEY

MAY NEED

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering The Persuasive Layer Product Listing Page Product Page Shopping Basket Checkout

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4. 5. 6. 7. 8. 9.

@paulrouke #ConvCon

9. CHECKOUT

@paulrouke #ConvCon

SECTION TITLE

Typically 1 in 4 visitors don’t complete checkout Forcing registration at the start of checkout is still one of the most toxic elements of the process

@paulrouke #ConvCon

SECTION TITLE

Building momentum as quickly as possible from the start of checkout helps conversion Form usability is crucial and basic issues are still prevalent in many e-commerce checkout processes

@paulrouke #ConvCon

SIMPLIFY THE

1ST STAGE OF

YOUR

CHECKOUT AS

MUCH AS

POSSIBLE

@paulrouke #ConvCon

SIMPLIFY THE

DESIGN AND

REMOVE

DISTRACTIONS

IN YOUR

CHECKOUT

@paulrouke #ConvCon

PAY CLOSE

ATTENTION TO

MAKING YOUR

FORMS QUICK

& SIMPLE TO

COMPLETE

@paulrouke #ConvCon

PROVIDE

PERSUASIVE

MESSAGING

CONSISTENTLY

IN CHECKOUT

@paulrouke #ConvCon

Sitewide Homepage Primary Navigation Filtering The Persuasive Layer Product Listing Page Product Page Shopping Basket Checkout Order Confirmation

10 KEY AREAS

TO GET RIGHT

IN ECOMMERCE

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

@paulrouke #ConvCon

10. ORDER CONFIRMATION

@paulrouke #ConvCon

SECTION TITLE

The order confirmation page is very often neglected, providing an expectedly flat end to the shopping journey This is the ideal opportunity to ask new customers to choose a password to get genuine account benefits

@paulrouke #ConvCon

SECTION TITLE

On order confirmation, retailers have the opportunity to delight customers and focus on the peak end rule in persuasion - making the whole shopping experience feel more positive & worthwhile

@paulrouke #ConvCon

RECOGNISE THE

UNIQUE

OPPORTUNITY

YOU HAVE TO

ENCOURAGE

REPEAT VISITS

@paulrouke #ConvCon

PROVIDE

VISITORS WITH

CONFIRMATION

OF KEY

DETAILS

@paulrouke #ConvCon

3 FINAL TAKEAWAYS 3 FINAL TAKEAWAYS

@paulrouke #ConvCon

Why these 10 areas? The 10 key areas 3 takeaways Resource pack – tips & techniques

TALK OVERVIEW

@paulrouke #ConvCon

SECTION TITLE

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 Split testing some of these recommendations is the recommended approach, but many should be added to your JFDI list 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!

3 TAKEAWAYS 1. 2. 3.

@paulrouke #ConvCon

Are there any questions?

THANKS FOR

LISTENING

PAUL ROUKE

Founder & Director of Optimisation

@paulrouke

4TH NOVEMBER 2013

CONVERSION CONFERENCE GERMANY

BERLIN

@paulrouke #ConvCon

SECTION TITLE

SLIDES

bit.ly/10areasDE

CRO RESOURCE LIBRARY

bit.ly/CROresources

@paulrouke #ConvCon

Why these 10 areas? The 10 key areas 3 takeaways Resource pack – tips & techniques

TALK OVERVIEW

@paulrouke #ConvCon

1. SITEWIDE TIPS

@paulrouke #ConvCon

SECTION TITLE

In multiple A/B tests for different types of businesses (retail or not), user researched USP messages never fail to improve sitewide conversion rate 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

SECTION TITLE

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 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

2. HOMEPAGE TIPS

@paulrouke #ConvCon

SECTION TITLE

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 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

3. PRIMARY NAVIGATION TIPS

@paulrouke #ConvCon

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

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

4. FILTERING TIPS

@paulrouke #ConvCon

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

Auto hide secondary filters to remove un -necessary 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

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

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

5. THE PERSUASIVE LAYER TIPS

@paulrouke #ConvCon

SECTION TITLE

57 SLIDES ON PERSUASION &

PERSONALITY FOR ECOMMERCE

bit.ly/smartPPC

LINGS CARS

bit.ly/batshitinsane

BOOKING.COM

bit.ly/bookingBP

@paulrouke #ConvCon

6. PRODUCT LISTING PAGE

@paulrouke #ConvCon

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

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

7. PRODUCT PAGE

@paulrouke #ConvCon

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

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

8. SHOPPING BASKET TIPS

@paulrouke #ConvCon

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

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

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

9. CHECKOUT TIPS

@paulrouke #ConvCon

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

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

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

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

10. ORDER CONFIRMATION TIPS

@paulrouke #ConvCon

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

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 1st 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

SECTION TITLE

SLIDES

bit.ly/10areasDE

CRO RESOURCE LIBRARY

bit.ly/CROresources