A guide to
E-Commerce Conversion Optimisation
2.
A Guide to E-Commerce Optimisation ~ About this eBook
About this eBook This eBook contain tips, advice and strategies that e-commerce sites can use to increase their conversions. You might see us sometimes refer to ‘conversion optimisation’ and other times refer to ‘conversion rate optimisation’. While they are both similar concepts, there is a fundmental difference between the two. Conversion optimisation refers to the increase in the number of overall conversions. Conversion rate optimisation focuses on increasing the number of conversions in relation to the number of visits. We personally believe that simply focusing on increasing your conversion rate doesn’t take into consideration the wider marketing efforts that digitally-minded businesses engage in. To put it simply: if you want to increase your conversion rate the best thing to do is completely cut all your marketing activity; fewer people will find your site, but a higher proportion of visitors will go on to convert. In our eyes, purely focusing on the conversion rate can distract you from other opportunities or issues relating to the overall user experience of your site.
3.
A Guide to E-Commerce Optimisation ~ Table of Contents
Table of Contents A Step by Step Guide to Product Page Optimisation
4
The Importance of Storytelling in Product Page Design
18
10 Examples of Using Urgency in E-commerce
23
6 Examples of Using Arrows to Increase Conversions
29
11 Tips to Improve Mobile Checkouts
33
The Pros and Cons of A/B Testing
40
Dark Patterns vs Conversion Rate Optimisation
46
4.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
1
A Step by Step Guide to Product Page Optimisation The way a site presents it’s products is essential to e-commerce success. The product page is one of the key components of turning a visitor into a customer. In this section we will be taking you through the process of optimising a product page to improve conversions.
Let’s get started
Here we have a mock-up of a perfectly serviceable product page that we will be improving. The current design is fairly well designed with a lot of key information such as product title, product description, price and call to action clearly displayed on the page. However there is still a lot we can do to improve the design and customer experience.
5.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
1. Remove Distractions
The first step will be to remove any distractions that aren’t key to the conversion process or aren’t related to the product. We are going to remove the social media widgets, blog post feeds and adverts to keep the user focused on the product.
6.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
2. Remove the Carousel
Carousels or image sliders are commonplace on e-commerce sites. They allow sites to promote several different products or promotions without taking up too much space on a page. A study carried out by Notre Dame University1 found that features on carousels only got 1% of total clicks, with the vast majority of those actions occurring on the first slide. Essentially they are conversion killers: •
They take attention away from other features on the page
•
Users often miss the message as they are too fast
•
They suffer from banner blindness
• They often have poor usability by moving too quickly or having poor navigation control.
1. http://weedygarden.net/2013/01/carousel-stats/
7.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
3. Remember to Test
Now we have removed the distractions it’s time to start adding elements to the page. It’s worth remembering that the following steps will not be applicable to all e-commerce sites. E-commerce sites should always rely on user testing for guidance. Not every site will be offering the same services or will be targeting the same audience. A/B testing is a good way to gain qualitative data on your designs. A/B tests show users multiple versions of the same page to determine which variation produces the most positive results.
8.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
4. Usability
The first thing we want to do is ensure that the user is able to find a relevant product. To avoid users bouncing off your product pages, you should always ensure that they feel in control of the process. Filtered navigation is essential if you offer products with a wide variety of specifications, features and prices. Filtering options allow for a more effective browsing experience by allowing the customer to narrow their product selection to eliminate results that are irrelevant to them. Using auto-complete in your site search will help users find the products that are relevant to them and minimise the risk of misspellings resulting in inaccurate results. Breadcrumbs help users navigate and give them a clear indication of where they are on your site. Not every user will be entering on a page that is relevant to them; breadcrumbs will help reduce the chance of a customer bouncing off your product page.
9.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
5. Rich Content
First impressions are key to keeping users on your site. Unique high quality images are very important in influencing how a customer perceives your brand and products. Don’t just rely on a single image to promote your products; use multiple images to tell a story about your products showing off the design, highlighting the features and placing them in a context that the user will relate to. Time and time and time again, studies1 show that videos are great for improving conversion rates. Creating product videos might be an expensive and time consuming proposition, but the stats speak for themselves – customers love videos!
1. http://www.swellpath.com/2012/06/tracking-the-effect-of-product-videos-on-ecommerce-conversions/
10.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
6. Social Proof
61% of customers read online reviews before making a purchase decision, while 63% of customers are more likely to make a purchase from a site that has user reviews1. If you haven’t yet enabled customer reviews on your site, then you are seriously missing out. The positives of customer reviews far outweigh the possible negatives of receiving bad reviews. Social proof is a great way of reducing anxiety experienced by customers while making a purchase. Seeing that people similar to them have made a purchase in the past is an influential point.
1. iPerceptions
11.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
7. Price Point and Call to Action
Putting your price in context is a great way of encouraging users to take action. Are you selling a product at a price that is well below the recommended retail price? Are your prices cheaper than your competitors? Has this product recently been marked down in the sale? If so, then let the customer know about it! Reduce the risk of customers leaving your site to compare your prices with your competitors by reassuring them that they are getting the best available price. For most product pages, the ‘Add to Basket’ button will be the primary call to action. The text, colour, size, and position of your call to action button can be profoundly influential on conversion rates. The best way to find what works for your site is to carry out split testing.
12.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
8. Improve your Copy
Sales copy is often neglected with the lazy approach being to simply use the standard descriptions provided by the manufacturer or supplier. It’s very likely that manufacturer descriptions will not be written in a way that sells the product to customers. This copy could also be duplicated across many different sites, which is harmful for search rankings. Writing unique and useful copy will have a direct benefit on search visibility. That said, the main aim of your copy should be to seduce visitors into purchasing your products. Telling stories or adding a unique tone of voice to your sales copy is a great way of evoking emotion with your customers. People buy products for what they do, not for what they are!
13.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
9. Introduce Urgency
Urgency is a great way of encouraging users to complete their transaction rather than delaying or shopping around. Common tactics include: •
Highlighting low stock levels
•
Using cut-off points for dispatch dates
•
Using time limits to claim discounts
•
Using time limits to claim improved shipping options
14.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
10. Show Delivery and Return Information
How much delivery will cost and how easy it is to return a product is a big part of the purchasing decision for customers. Don’t make them work hard to find this information and always be transparent about the costs of shipping and your returns policy. If possible, remove all doubt by offering free delivery and returns. Even if you can’t do this all year round, it can be a great seasonal tactic when your site is expecting high amounts of traffic. If you are a retailer, offering in-store collection is a good way to appeal to a wider range of consumers. According to a survey carried out by Econsultancy, 96% of customers check online before making an in store purchase, while 80% of customers reserved an item for in-store collection in 2012.1
1. http://econsultancy.com/uk/reports/the-multichannel-retail-survey
15.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
11. Trust
Before customers make a purchase, they need to be confident you can be trusted. There are a number of ways to cultivate trust; we’ve already looked at how social proof can be a powerful way to do this. A lot will be down to the overall impression customers gain while on your site. Bad usability, broken images and links, and copy containing false information and spelling mistakes are just a few factors that can harm your trustworthiness. Adding security icons, clearly displaying your contact details, and linking to your privacy policy page will help reassure nervous customers. Offering alternative payment methods not only helps build trust, but will also allow you to appeal to as many potential customers as possible. According to WorldPay, alternative payments account for 22% of global e-commerce transactions, worth a total of ₏165bn.1
1. http://www.worldpay.com/altpayments/
16.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
12. Live Chat
Live chat might not be to everyone’s taste, but it can still play an important part in improving customer experience. Not only do they help customers get to the point where they are ready to make the purchase, but they also ease pressure on call centres. Stats show that 53% of consumers in the UK and 63% in the US have used live chat.1
1. http://econsultancy.com/uk/blog/10644-stats-do-consumers-appreciate-live-chat-on-websites
17.
A Guide to E-Commerce Optimisation ~ A Step by Step Guide to Product Page Optimisation
13. Perfomance
So there we have it… our product page is now optimised and ready to go. Well not quite; we still need to consider performance. Adding rich content likes videos, high quality images and customer reviews might be great for customer experience, but there is also a risk that pages will become bloated and slow to load. Page load time will have a drastic impact on your conversion rate. A study carried out by Tagman, found that a 1 second delay in load time resulted in a 7% loss in conversions.1 The fact is you have a very short amount of time to engage with your customers. Don’t run the risk of losing a potential customer by creating a site that takes a long time to load – a good customer experience is nothing without performance.
1. http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
18.
2
A Guide to E-Commerce Optimisation ~ The Importance of Storytelling in Product Page Design
The Importance of Storytelling in Product Page Design At No Pork Pies, we look at things from a conversion perspective, so you would be forgiven for thinking that we favour functionality over aesthetics. We actually believe that they don’t need to be exclusive of each other. Product pages should be there to sell your products, and engaging the user and establishing a need for your product is a vital part of the process. When it comes to creating landing pages for physical products, there is an inherent need to establish a context that your customers can relate to. In the past Apple often avoided putting their products into context, instead opting to showcase the beauty of their product design. If you were asked to describe the look of an Apple ad (either print or video), you’d probably describe a face-on or profile shot of the product on a white background with a single line of slightly ambiguous copy. The closest thing you would get to context would be a hand holding or interacting with the product.
19.
A Guide to E-Commerce Optimisation ~ The Importance of Storytelling in Product Page Design
Home thermostats are not the type of products that you would typically associate with beauty and innovation, but once you see the Nest you might change your mind. Nest have create a thermostat so sleek and refined, that it wouldn’t look out of place in the latest Apple keynote. It’s no real surprise to learn that Nest was founded by former Vice President of Apple’s iPod division, Tony Fadell. The design and user experience of their site is just as elegant as the product itself. Every element of their site is meticulously crafted, but it’s their 365 days of Nest landing page that resonates the strongest. Cleverly animated transitions take the user on a journey that explains how the product will work over the course of a year. The content illustrates the features of the product in scenarios that the user can relate to. A couple years ago it would have been crazy to call a company that made thermostats a lifestyle brand, but that’s exactly what Nest have achieved thanks to the beauty of their product and elegance in which they showcase it on their site.
20.
A Guide to E-Commerce Optimisation ~ The Importance of Storytelling in Product Page Design
The Garmin Fenix product page employs a wide variety of interactive elements to create an engaging user experience. Stylish animations, parallax scrolling (the use of different scroll speeds on multiple elements to create the illusion of depth), product videos and innovative navigation are all crammed into the single landing page. The page scrolls up to reflect the journey up a mountain, with each step of the journey showcasing a different feature of the product.
Activate drinks take parallax scrolling to the extreme with their website. The landing page begins with a bottle cap with the user encouraged to scroll down to open it. As the user scrolls down they are presented with content that helps establish the brand personality. The free-flowing design allows consumers to explore the product and learn about their brand story.
21.
A Guide to E-Commerce Optimisation ~ The Importance of Storytelling in Product Page Design
Nike are one of the kings of branded storytelling. Nike’s brand message has always been about empowerment and this is reflected in the digital presence they create for their products. Nike product pages tend to be high-concept; full of rich content, beautiful photography and empowering copy. Deconstruction is a common theme with their product pages. The landing page for their Nike Free Hyperfeel running shoe visually deconstructs the trainer to show each feature that goes into crafting the finished product. Instead of simply showing the running trainer, the user is told a story of how each part has been carefully crafted for performance. Storytelling is especially important in product marketing for new and innovative technology. Consumers need to know how the product can be integrated into their lives, especially if there is a hefty price tag attached. Google Glass tackle this head on with their landing page.
22.
A Guide to E-Commerce Optimisation ~ The Importance of Storytelling in Product Page Design
The majority of the product advertising for Google Glass is focused on showing the user what it’s like to see through the product. Helmet camera technology has seen POV advertising to become increasing common in TV advertising, with the viewer observing through the eyes of the lead in the advert. Perhaps the most famous example of this was Nike’s Take it to the Next Level advert from 2008.
Beautiful product design can be great marketing in itself. However consumers still need to be persuaded to buy products, which is why storytelling is such an important tactic. For many brands, storytelling is an integral part of positioning their products. Creating beautiful product pages that use narrative won’t just get people buying your products, it will get them talking about it.
23.
3
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Urgency in E-Commerce
10 Examples of Using Urgency in E-Commerce Creating a sense of urgency is an increasing popular tactic used by sites to help improve conversion rates and reduce shopping cart abandonment. Urgency is generally invoked in four ways: 1. Limited stock levels or availability 2. Limited time to claim discounts 3. Improved shipping offers 4. Dispatch dates Invoking urgency is not about forcing users down the conversion path, but instead implying that it’s more beneficial to the user to complete their transaction rather than delaying or shopping around. Here are some examples of urgency in action:
1. Groupon
Creating urgency is a necessity for deal-of-the-day sites like Groupon. Groupon’s whole commercial model is built around a very short buying cycle, in which users have a limited time to claim an offer.
24.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Urgency in E-Commerce
Groupon uses a countdown on their deal pages to state how long users have left. Deals can also sell out early but this isn’t a factor that Groupon actively promotes.
2. Secret Sales
Secret Sales has a similar buying cycle to Groupon, offering short sales on designer fashion labels. Secret Sales uses a variety of tactics to incite action. Like Groupon, they also employ a countdown to show when a deal is coming to an end. Their product category pages display when stock levels are running low. They also keep their sold out products on show as a proof that other users are actively claiming these deals.
2. MyProtein
25.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Urgency in E-Commerce
Here a countdown is used to promote same day dispatch. On product pages (as above) the counter sits below the Add to Cart button. On nonproduct pages it is moved to the sidebar as a way of hinting urgency to the user.
4. TigerDirect
TigerDirect’s product pages are pretty heavy on distractions (check out that product name!), however they do a good job of encouraging users to claim the offer by listing price as “Today’s Price” and promoting “Free Shipping Today!”
5. Amazon
It’s almost impossible not to include Amazon when it comes to lists like this. Amazon’s product pages use two techniques to create urgency: first a bold green message informing users that stock levels are limited and, secondly, information stating how long the user has left to claim next day delivery.
26.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Urgency in E-Commerce
While some sites use very brash techniques to influence buyer behaviour, Amazon always appear to use conversion optimisation techniques in a way that feel beneficial to the user.
6. Ruby Lane
Ruby Lane is an online marketplace where users can purchase antique and vintage items from around the world. They use a clever technique on their product pages which alerts the user when an item they are viewing is sitting in another shoppers cart or wish list. As the majority of items are available in very limited quantities and there is a strong suggestion that the user might miss out if they delay their decision.
7. Sainsbury’s
27.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Urgency in E-Commerce
Urgency is often used to promote seasonal sales by setting a fixed deadline of when the offers end. Here we can see that Sainsbury’s states that the 60% offer will only last until 9th July. They have given the offer a prominent position on the page with a lot of white space to draw the users eye.
8. PC World
PCWorld have used a different technique to promote their clearance items. Instead of setting a fixed deadline, they promote the limited availability of their sale products. The bright yellow tag is positioned on the far left, which straight away grabs the attention of the user.
9. Agoda
28.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Urgency in E-Commerce
It’s common knowledge that hotel prices can fluctuate widely depending on when you book. Travellers expect that prices will inevitably increase closer to check-in dates especially during peak season. Agoda plays off this knowledge by stating that there is limited availability for the listed price.
10. Hotels.com
Hotels.com combine limited availability and social proof in a clever way to enforce urgency. Hotel listings show the number of rooms left, which is seamlessly integrated into the call to action. They also employ popups to display when other users have booked rooms in the searched location. It’s worth remembering that urgency won’t work in all situations. For example a hotel booking site stating that a room was ‘last booked 30 days ago’ might actually backfire and put off users from converting. When used properly urgency can be an extremely influential conversion optimisation technique. As with all forms of conversion rate optimisation – testing is key to finding out what works best.
29.
4
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Arrows to Influence User Behaviour
6 Examples of Using Arrows to Influence User Behaviour It’s common knowledge that users only skim read pages looking for relevant information as opposed to reading word by word. To combat this designers are faced with the task of providing visual cues to not only help guide the user to find the content they need, but also influence them to take action. Visual cues can take many forms: •
Bold text, or the use of colour are commonly used to help highlight important points.
•
Page breaks and bullet points help split up content into more digestible chunks for users.
•
Images and icons play an important part of conveying messages or grabbing people’s attention.
Using arrows to point out important aspects of a webpage has become an increasingly popular visual cue in web design over the last few years. Directional cues like arrows are usually employed to draw attention to an element of a page that the user can interact with. Many sites are also using arrows to point out the call to actions in a bid to improve conversion rates. Below are six examples of sites using arrows to influence user behaviour and increase conversions:
30.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Arrows to Influence User Behaviour
Pingdom complements their minimal home page design with an arrow and handwritten text to highlight their call to action. Arrows are often combined with handwritten fonts, as it provides a nice contrast to the uniform typography found on most website. It can also help add a human touch to a website.
CrazyEgg offer a variety of web analytics tools to measure user behavior such as heatmaps and scrollmaps, so you would imagine they know a thing or two about how users interact with sites. Their site is full of visual cues and the type that crops up the most is arrows. In the above example they are using a bold arrow to direct users to their pricing chart. They are also using handwritten text to promote their offer: Try it Free!
31.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Arrows to Influence User Behaviour
Arrows are often found on landing pages which have a very linear conversion path. Intuit’s Pay Per Click landing page has been completely stripped of distractions. There are no links on the page other than on the call to action button. The big blue arrow is doing a good job of pointing the user in the right direction. It is also given prominence in the centre of the page.
This example shows that directional cues don’t have to be at the expense of design. Pulp Fingers have added a directional cue in the form of a large arm that fits in with the brand image perfectly.
32.
A Guide to E-Commerce Optimisation ~ 10 Examples of Using Arrows to Influence User Behaviour
In this example, Smartr are using an arrow to point out there is more content below the fold. Long vertically scrolling home pages have become increasing popular in recent years and arrows are a good way of letting users know there is more on offer and influencing them to delve deeper into your content. While arrows can play an important part in directing users and influencing conversions, it’s worth remembering that the problems faced by a site that is an unusable mess aren’t going to be instantly solved by adding directional cues. Directional cues should always be used to complement user experience. Users won’t just be fooled into converting; they will have to believe in the value of what is on offer. It’s important to remember that directional cues work best when used sparingly. Each arrow should have a reason for existing on your site. Don’t just clutter your page with arrows pointing to every bit of content you believe is important. As always, split testing is a great way of figuring out what works best.
33.
5
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
11 Tips to Improve Mobile Checkouts The explosive growth of mobile commerce has seen many retailers focus their attention on mobile optimisation to capitalize on the rapidly expanding market. It’s easy to understand why mobile commerce is such a huge talking point. According to comScore, in late 2010, mobile devices accounted for only 3% of ecommerce revenue. By the end of 2012 that figure had risen to 11%.1 These days it’s not uncommon for people to use mobiles devices to do their banking, renew their insurance, book a holiday and do their weekly grocery shopping. With users rapidly becoming more comfortable carrying out consumer actions on their mobiles, retailers need to ensure that they are offering the best experience possible to their customers. One area that is key to conversion rates are checkouts. Here are 11 tips on how to improve the mobile checkout process:
1. Keep form filling to a minimum Form filling can be extremely frustrating for users, especially on a mobile device. Avoid cart abandonment opportunities by only asking for vital information during the checkout process. Make it easier for users by asking if the shipping and billing address are the same. Don’t ask users to enter the same information over and over on each stage; use the received data to populate subsequent forms.
1. http://www.businessinsider.com/blackboard/comscore
34.
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
The main aim of your checkout is to get the user to complete the transaction; any information that isn’t necessary for the transaction to be completed should be removed. You can always ask for additional information after the transaction is complete or with a follow-up email.
2. Organise your checkout into stages Reduce the cognitive load by splitting the checkout process into stages. Overloading the user with information is a sure fire way to encourage cart abandonment. Splitting form filling into stages will also reduce the amount of scrolling the user has to do on their device. Split form filling into stages
You want the user to progress through the checkout with as little anxiety as possible. Prioritise the stages to ensure the most important information is taken first. Getting the user to enter their email address early will allow you to send transaction related emails if they abandon their cart during the checkout process.
3. Visualise the checkout process Letting the user see where they are in the checkout process is a great way of reducing customer anxiety. Using a visual indicator will allow them to clearly see how far they have progressed and how many steps are left to complete the transaction.
35.
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
Visualising check out stages helps users know where they are in the process
4. Add progress step links or back buttons Users are often cautious about using web browser back buttons due to the fear of losing data they have already entered. Adding progress step links or back buttons within your checkout will reassure users that their data will be retained if they need to go back to amend details.
5. Utilise familiar mobile UI elements Mobile users are more than likely going to be interacting via touch, so use user interface (UI) elements that reflect this. User interfaces should change from desktop to mobile to allow the customer to interact more efficiently.
36.
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
UI elements change from desktop to mobile
6. Enable guest checkouts Allowing users to complete a transaction
without
registering
is one of the most significant changes
you
can
make
to
increase your conversion rate. Most people are familiar with the $300 million button story1 –
simply
by
removing
a
mandatory
registration
step,
an
e-commerce site was able to increase their conversion rate by 45%, which increased their annual revenue by $300,000,000!
1. https://www.uie.com/articles/three_hund_million_button/
37.
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
7. Offer quick payment options Quick payment options like PayPal and Google Wallet are great ways of increasing conversion rates. They will often already store user data such as delivery addresses and card details, which will drastically reduce the amount of time the user needs to spend in the checkout process. They are also forms of payment that offer security reassurances for customers due to the high levels of trust associated with such services.
8. Remove distractions Get rid of any unnecessary distractions that could take the user out of the checkout process. Remove any navigation or distractions that doesn’t relate to the transaction such as the navigation bar, widgets, adverts and social media buttons.
38.
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
9. Provide security reassurances While stripping away distractions is a great way of keeping your customer focused on the checkout, you will still need to provide the necessary security reassurances to reinforce trust. Add relevant security icons and a privacy policy link on your checkout pages. Remind users that they are entering a secure checkout. Explain details relating to card payments, such as the location of the CVV number.
10. Take advantage of geolocation Many retailers offer free store delivery of goods purchased online. If you offer store pick-up delivery, then using geolocation is a quick and easy way for users to find their nearest store.
39.
A Guide to E-Commerce Optimisation ~ 11 Tips to Improve Mobile Checkouts
11. Keep it lightweight It is vital that your checkout pages load quickly to reduce the risk of cart abandonment. Performance is key to a great mobile experience. Google’s PageSpeed Insights tool is an easy way of seeing how fast your site loads across multiple devices.
Google’s PageSpeed Insights tool
Ultimately many of the principles of desktop checkouts carry over into mobile. The idea is not to confuse or trick the user into a conversion. The process should be a win-win situation whereby users are able to complete a transaction without frustration or anxiety, and the suppliers are able to build trustworthiness and increase their sales.
40.
6
A Guide to E-Commerce Optimisation ~ The Pros and Cons of A/B Testing
The Pros and Cons of A/B Testing At No Pork Pies we’ve run a lot A/B tests for our clients. While we’ve seen some significant results from the tests, there are also downsides that are rarely talked about. This section gives some of our opinions on the pros and cons of A/B tests, as well as how and when they should be run.
What is A/B testing? A/B testing, also known as split testing, is a way to test changes to a webpage against the current design and determine which design produces the best results. At its most basic level users are split into two groups with one set being shown your existing design and the other group being shown your new, improved, design. Both variations are compared to each other over time to see which one generates the most goals on your website. This is a way to test out new design ideas and see how they perform against your current webpages.
Why run A/B tests? Firstly let’s look at some of the reasons to do A/B testing. When A/B tests are set-up, they can be left running with minimal maintenance and will automatically inform you of a winning variation. These tests also give clear, quantitative results, meaning they are less open to interpretation, providing more definite answers than other types of testing. This means, if the test is set-up correctly, the winning variation is almost guaranteed to give you results.
41.
A Guide to E-Commerce Optimisation ~ The Pros and Cons of A/B Testing
Clear, quantitative results are a big benefit of A/B testing
Finally, small changes can make big differences. You only have to read case studies like ‘How changing a single word increased click through rate by 161%’1 to see how tweaking parts of your website can have a big impact on its performance. There are lots of examples of how making simple changes to text or colours on webpages has led to dramatic improvements. However, there are also downsides to relying on A/B testing to dictate the design of your site.
What are the downsides to A/B Testing? One of the main issues that people have with A/B testing is that it can often take a long time to see results. It’s fine if you’re Amazon and your site gets millions of visitors a month but if you run a smaller site, or you want to test one of the pages within your site that gets less traffic, then it can take a long time to find a winning variation. This is even more of a problem if the changes you’ve made are quite minor. While small changes can make a big difference, more often than not small changes generally mean a small difference to your results. Running tests with minor changes can quite often be inconclusive, no matter how long they are run for. Another area to look out for when you’re running your tests is cloaking. Cloaking is a black hat SEO technique where the content shown to a search engine spider is different from the version that’s shown to a user. By showing different versions of a page to different people A/B testing runs the risk of being seen as cloaking by search engines.
1. http://visualwebsiteoptimizer.com/split-testing-blog/increase-click-through-rate/
42.
A Guide to E-Commerce Optimisation ~ The Pros and Cons of A/B Testing
This shouldn’t be a problem as long as you follow the official Google Guidelines1, but it is something you should consider if you’re planning on running tests. A problem with relying on quantitative testing is that this often leads to a ‘conversion first’ mind-set and can dehumanise your users, turning them into little more than lab rats in your experiments! A conversion driven mind-set makes business sense but it should not be at the expense of the overall user experience. Focusing purely on conversions can lead to short term ‘fixes’ that end up doing more harm than good in the long term.
If you rely on quantitative testing alone you run the risk of turning your users into little more than lab rats
There’s also some difficult ethical questions around purely focusing on making your users convert. One more unethical approach to conversion rate optimisation is the use of Dark Patterns. These are user interfaces which are designed to trick people into taking actions that they did not mean to take.
A journey map of dark patterns – from darkpatterns.org
1. http://googlewebmastercentral.blogspot.co.uk/2012/08/website-testing-google-search.html
43.
A Guide to E-Commerce Optimisation ~ The Pros and Cons of A/B Testing
Often the impact of major design changes need to be reviewed over a long time. Changes to a website can often lead to users experiencing what is known as change aversion. Change aversion is an entirely natural negative short-term reaction to changes in a website (or product or service) that often occurs after any major design changes. Think about the initial negative reaction to changes to the recent introduction of IOS7, and before that the last major Facebook updates. There are certain approaches that a designer can take to minimise the impact of change aversion, these include:
• • • • • •
Warning users about big site changes Communicating the reasons behind the changes Letting users switch between old and new versions Providing users with support to avoid confusion Encouraging users to give feedback on the design Communicating with users how you plan to act on this feedback
None of these tactics are easy with A/B testing though, so you have to just put your new design out there and hope for the best. You can restrict the test to new users but this is very difficult to do accurately with users often accessing your website from different devices making identifying returning users increasingly difficult. There may even be a problem for new users if your proposed design differs from existing web conventions and you don’t give them the time to get used to your ground breaking new ideas. Overall focusing purely on A/B tests can mean obsessing about minor design changes and losing sight of the bigger picture. The picture belows shows hypothetical ‘reasons’ for a user not clicking on a button on a website. On the left we have the kind of possibilities that can be tested using A/B testing, while on the right we have some bigger issues that can’t be tested in this way, and that are more likely to be the real reasons why people aren’t clicking.
44.
A Guide to E-Commerce Optimisation ~ The Pros and Cons of A/B Testing
It’s easy to become obsessed with A/B testing to try and run more and more tests to get the answers to all of your design questions, but a lot of the time the issue lies outside what can be tested on a single webpage.
Is A/B testing right for me? A/B testing can be a really useful way to improve the conversions on your website, but it should be part of a bigger user testing plan. This should include research, analytics and user testing sessions. You can also use some of these other testing techniques to indicate where you should set up you’re A/B tests. All of your A/B tests should start with a hypothesis based on a good understanding of the current state of your website. You may find that people aren’t scrolling on a certain page where you need them to scroll, or that the exit rate is unusually high on one page of your main conversion path. Before setting up any A/B tests on your site you should first find out where the problems are, instead of trying to ‘fix’ problems that don’t exist. When running A/B tests don’t rely on your tests to always be conclusive, remember, small changes often mean small differences. Also make sure that you set aside a lot of time for tests to find a conclusion, particularly if your web page isn’t getting a large amount of traffic.
45.
A Guide to E-Commerce Optimisation ~ The Pros and Cons of A/B Testing
Used correctly, A/B tests can show clear, useful results
You should try to ensure that your tests are fair 50/50 split, on all browsers and devices. Be wary of skewing your test results in any way and always ‘test your tests’ to make sure they’re set up correctly before running them. You should also treat any failed tests as a learning process rather than being too disappointed by them. It may be that your idea didn’t work, that’s a shame, but it’s better to know now than have made the wrong change and have to live with the consequences. In short; A/B testing can be useful if run in the right way and for the right reasons. Be sure to include other types of testing, both qualitative and quantitative, to get the full picture as most problems cannot be solved by A/B testing alone. A/B testing can be an effective way of testing particular design hypothesis on your site, but it needs to be part of a much broader approach to conversion optimisation. It’s also worth remembering that nobody has ever A/B tested their way to innovation!
46.
8
A Guide to E-Commerce Optimisation ~ Dark Patterns Vs Conversion Rate Optimisation
Dark Patterns Vs Conversion Rate Optimisation Dark Patterns are user interfaces, normally websites, which are designed to trick people into taking actions that they did not mean to take. The concept was originally put forward by UX Consultant Harry Brignull as a way of exposing the work of ‘evil’ designers. Dark Patterns appear on an increasing number of websites and are essentially online con tricks designed to force website visitors into actions they wouldn’t normally take using various design tactics. The concept is not a new one, Harry was talking about it as far back as 2010. There’s a fine line between ethical and unethical design. During the buying process, making purchases quicker and simpler is to be encouraged, but automatically adding items to a user’s cart, hiding additional costs and mixing up opt out messages are not. Without mentioning names, a couple of low cost airlines are particularly bad for adding items, such as insurance, to your booking automatically, and make it unnecessarily difficult to remove them. It’s not just ecommerce websites that employ dark patterns. Other types of dark pattern include tricking users into opting into email marketing, disguising adverts and fooling people into sharing their personal information or spamming their friends on social networks. Image from darkpatterns.org
47.
A Guide to E-Commerce Optimisation ~ Dark Patterns Vs Conversion Rate Optimisation
Dark Patterns also go beyond website design. For example, some companies use an ‘easy in, difficult out’ process to their sales. For example, some Gyms make it as easy as possible for you to sign up for membership though their websites, but make it more difficult for you to cancel your membership, often asking for something in writing and requiring a long notice period. Website designers should make the user journey as smooth as possible. Designs like the ‘One-Click’ purchase feature on Amazon help the user make their purchase quickly, while helping Amazon increase their sales. However, adding hidden costs, such as tax, right at the end of the checkout process, is a technique designed only to trick the user into getting so near to the end of the process that they continue to make the purchase anyway rather than waste any more time looking elsewhere. This is the difference between conversion rate optimisation, helping as many users make conscious and informed purchases as possible, and Dark Patterns; conning users into making purchases they don’t really want to make or cost more than they expected. To use a real world example of conversion optimisation, if you owned a supermarket you might want to make sure that the goods are arranged in a way that is easy for shoppers to find their way around, that special offers are clear and that there are no queues at the checkouts. Putting food in people’s trolleys when they had their backs turned, adding a service charge on at the checkout or presenting ‘special offers’ which cost more than buying separately would be considered more of a dark pattern!
48.
A Guide to E-Commerce Optimisation ~ Dark Patterns Vs Conversion Rate Optimisation
Conversion rate optimisation should be a win-win situation with users having a better purchasing experience and website owners making more sales. Tricks and tactics that are used to prize more money from users against their will may lead to an increase in online sales, but will almost always be outweighed by the costs of additional customer service to deal with complaints as well as the negative reputation that dark patterns will bring for your brand.
49.
A Guide to E-Commerce Optimisation ~ Key Takeaways
Key Takeaways Here are nine tips to remember when approaching conversion optimisation for an e-commerce site: 1. Keep testing. It’s unlikely you will find the magic formula that works with your customers on the first attempt. Testing should be an on-going process. 2. Use data to inform what you test. Don’t start testing blindly; look at your web analytics and gather qualitative data by speaking to your users. 3. A/B testing is great for gaining quantitative results but a lot of the time the issue can lie outside what can be tested on a single webpage. 4. Don’t trick users into converting by using dark patterns; think of conversion rate optimisation as win-win process for yourself and your users. 5. Adding a sense of urgency can be a great way to increase sales but false urgency should be avoided as it can have a negative impact on conversion rates. 6. Improving your site performance is one of the most undervalued forms of conversion rate optimisation - keep your pages lightweight. 7. Don’t use generic copy supplied by manufacturers. Write copy that establishes a unique tone of voice and inspires users to buy your products. 8. Try adding personalisation to your user experience by addressing logged in users by their name and showing them the products that are relevant to them based on their shopping history. 9. Offering a guest checkout is one of the best ways of decreasing cart abandonment rates.
50.
A Guide to E-Commerce Optimisation ~ About
About the Authors Kristian Bannister Kristian Bannister is Creative Director at No Pork Pies. He has a keen interest in digital strategy, user-centred design and mobile optimisation.
Luke Hay Luke Hay is the UX & Research Director at No Pork Pies. His main focus is on user behaviour, accessibility and how people interact with sites and apps.
About No Pork Pies No Pork Pies is a Conversion Agency specialising in increasing client revenues and conversions through digital channels. Our research-led, user-centered process consists of two very simple services: Conversion Optimisation - Increasing revenue by improving user experience and conversion paths, and optimising marketing channels. Content Optimisation - Creating useful and engaging content that increases online attention which leads to greater search visibility, brand awareness and traffic.
Visit www.noporkpies.com for more information about our services or contact us at info@noporkpies.com