How to create better user

experiences and increase sales

The Bumper

eCommerce

Usability Guide

www.usability247.com

Usability24/7 is an international

user experience research and

insight agency. We are a senior

team of experts that deliver

services, advice and guidance

to organisations all over the

world.

We’re changing the world, one interface at

a time. So that everything is usable, every-

where, for everyone, all the time.

It would be better for consumers and better

for business.

Come and change the world with us.

www.usability247.com

call us FREE on +44(0)8000 246247

email: info@usability247.com

Share this guide

www.usability247.com

Contents

Section 1: Introduction 4

Section 2: Finding you online 6

Section 3: Homepage usability 9

Section 4: Product category and landing pages 14

Section 5: Checkout Usability 20

Section 6: Get usability right, increase income 26

Section 1

Introduction

www.usability247.com

The bumper eCommerce usability guide

How to create better user experiences and increase sales

For the latest entry in our series of usability and user experience eGuides, Usability24/7 takes

a comprehensive look at eCommerce websites, and how usability affects each phase of

the customer journey – from initial discovery through to making a purchase.

The eGuide is broken down into the following four sections, each representing a different

stage:

Finding you online

Homepage usability

Product category and landing pages

Checkout usability

We aim to show you why good eCommerce usability is so important to your business, and

how it will increase customer retention and, ultimately, conversion rates.

If you like this guide, why not sign up to our monthly newsletter? Each month we read liter-

ally hundreds of items to bring the most interesting UX items from around the world.

Sign up now

If you see a box like this it contains observations from

actual usability testing.

Section 2

Finding you online

www.usability247.com

Finding you online

The first step on any user journey is finding your eCommerce site. There are a number of

ways this can be achieved, including:

Search engine

Social media

Word of mouth

User review

Advertisement (online or elsewhere)

A combination of search engines and social media will drive the lion's share of your traffic,

with search engines remaining the primary source of first time visitors.

In the same way that there's an assortment of methods by which users can discover your

website, there is also a variety of platforms upon which they can perform this task. With

consumers no longer tied to the PC for everyday web-based interactions, the proliferation

of smartphones and tablets has dramatically altered both the context and environments in

which they access the internet. This greater freedom means that your website should be

usable, regardless of platform.

Finding your eCommerce site on the move

When engaging with a mobile device, the user is often on the move, which means a po-

tential customer may well arrive at your eCommerce website while doing something else,

such as walking to the shops, waiting for a bus, travelling on the train etc.

In this multiplatform environment, it's essential that your website is usable for both the desk-

top and mobile audience. Obviously, trying to squeeze the full eCommerce experience of

the main site onto a smaller screen isn't going to work (because of size, load times, fingers,

context etc), so there are solutions available to ensure great usability while safeguarding

the user experience:

This is crucial. Participants regularly and increasingly tell us they use multiple

devices to access the same website.

www.usability247.com

Responsive Web Design (RWD) – Adapts the layout to suit the device, using fluid

grids, flexible images and media queries

Adaptive Web Design (AWD) – Alters the site's layout to fit a pre-defined array of

screen sizes, using CSS, styling and client-side scripts

Mobile website – A mobile-specific version of the website hosted separately to the

desktop one

The following resources will give you a more in-depth look at these options, along with the

pros and cons of each:

Bad usability = negative feedback

As mentioned, social media is also a popular way by which a customer can find your

eCommerce website. This can be a two-edged sword, in that it can be a healthy source of

traffic, as well as a medium via which the smallest failings are suddenly thrust into the spot-

light. With a platform like social media, upon which your users can voice an opinion about

your business and share it among their peers, all aspects of your service, including the usa-

bility of your website, are under scrutiny.

If your brand is active in social media, and has, for instance, a Facebook page, a bad user

experience might lead to poor feedback right where everyone – including new prospects

checking you out – can see it.

As social media is a valuable tool in any marketing strategy, the best way to avoid nega-

tive feedback of this type is to ensure your eCommerce website offers fantastic usability,

across all devices.

Responsive Web Design vs. Mobile Website vs. Native App: Which

is best?

Responsive vs. Adaptive Web Design

Section 3

Homepage Usability

www.usability247.com

Homepage Usability

Once a user has landed on your site, the real work begins.

Being the most popular first point of contact, the homepage is like a shop window that lays

out your offering, while giving the visitor a feel for the site. Therefore the usability of the

homepage is a key factor in ensuring your prospect doesn't click back and seek solace in

the arms of a competitor.

First impressions last – Product display

Never assume the user has previous knowledge of your brand. New visitors to your eCom-

merce website will arrive pretty much cold, so it's up to you to warm them up. Your duty, in

the time it takes to scan your homepage, is to

give them a greater understanding of what

you're about.

Therefore, it's a good idea to display a range of

your products, representing what you offer, so

that the user can gain an insight into your brand

and make the decision whether to explore fur-

ther. It's doubtful the consumer will search deeper for a product they want if given the im-

pression, due to a lack of variety, your website doesn't stock it. Don't narrow the consumer's

choice at this early stage of the user journey.

Categories

Categorising your products, and visually displaying these categories on the homepage, of-

fers the user a clear indicator as to the range of items you sell.

For instance, if a clothing brand stocks casual, smart, indoor, outdoor wear etc, this would

be reflected on the homepage, allowing the user to click through to a more detailed

breakdown of items on a second-tier page.

An example of this style of homepage categorisation can be seen in the screenshot on the

following page:

Users judge we website very quickly from the homepage. Even in test situations users will ask to click away if they don’t trust what they see.

www.usability247.com

The outdoor clothing and equipment retailer, Blacks, has used categories to prioritise and

present clearly what customers look for on its eCommerce website, leaving the user in little

doubt as to where they should be looking. This is in an addition to a navigation bar that of-

fers a more conventional – but equally comprehensive – set of categorised options:

Navigation is further augmented by a carousel of images at the top of the homepage,

which provides access to the latest deals, reductions, new lines of clothing and category-

based sale items.

www.usability247.com

Parent categories and sub-categories

The user wants an easy route to their purchase. If they can't find what they're after, they

can't buy it.

Parent categories are the starting point of the product hierarchy, and when included in the

navigation bar they should be clickable and not just the rollover trigger for a drop down

menu of sub-categories. There are two reasons for this:

The user has been conditioned to click on nav bar links, expecting them to open

up a new page – never intentionally fail user expectations

In the case of touchscreen, rollovers don't work. Therefore mobile and tablet users

need the option to click through to a page of sub-categories to continue their jour-

ney

Obviously, a sub-category should be listed in

the parent category it is most relevant to. How-

ever, if it's relevant to more than one – for in-

stance, somebody browsing a household

goods website for a new kettle may well look in

either 'Electricals' or 'Kitchens' – repeat as nec-

essary. Once again, it's all about anticipating

and meeting the user's expectations.

Search box

Great usability comes from giving your users the means to easily achieve their goals.

A must for any eCommerce homepage, extended throughout the whole site, is a search

box. This allows the customer to find a product with the minimum of fuss. Of course, for it to

provide actual value, the search function must be effective in returning the right results in

an efficient manner. It's amazing how many eCommerce websites get this wrong, with sec-

ond rate search facilities that are only marginally bet-

ter than no search at all.

Search is particularly helpful for mobile users, who,

due to screen size or involvement in another activity

at the same time, are less likely to browse for any suf-

ficient amount of time.

Mega-menus are increasingly used at the desktop level to direct users straight to the category they are looking

for. They work well if not too big but a mobile alternative

is important.

www.usability247.com

Further search box usability tips:

Ensure your search engine isn’t too literal.

Typos and product variations should still

return relevant results, with former being

more likely on mobile devices.

Include predictive search—as used by

Amazon, Google, etc.—to limit the amount

of typing required.

Place the search box somewhere prominent

so that it’s visible to the user and easily

located.

With deep linking from Google search, we regularly see users of mobile search

reverting to Google search when site-search is inneffective. This often causes them to arrive at an alternative website.

Section 4

Product category and

landing pages

www.usability247.com

Product category and landing pages

Product category pages

Once a visitor has chosen the category best suited to their need, they will arrive at a page

displaying a selection of products. This is the 'product category page', and from here the

user should be able to choose an item, so they can investigate it further.

It might be a single page, or, if you have large stock of this type of product, stretch to more

than one. What is important is that it is usable, so the incentive is there for the consumer to

click on a particular product.

Grid or list?

There are two main methods by which eCommerce websites display multiple products on

category pages. The 'Grid' view and the 'List' view.

Grids tend to be used in instances where photos do the talking and no additional explana-

tion is required, as can be seen in the example from Burton Menswear below:

www.usability247.com

A decent image, and the briefest of descriptions, is all that's required to let the user know

what to expect when they click through to the product page.

The list view is the more traditional of the two and is useful for non-physical products (such

as software), where more text is required. This can be seen in the following example from

the download site of technology experts, CNET:

Nowadays, the grid view is pretty much standard on eCommerce websites. The internet

has become a predominately visual medium, and so long as the image is of a high quality,

it's all the modern consumer requires to make a choice. Grid view also allows you to fit

more products on a category page, reducing the

amount of scrolling required by the user. Another

positive element of the grid view is its natural affinity

for the touchscreen environment, particularly that

of a tablet.

The vast majority of users understand how to switch between grid and list view when conventional controls are used.

www.usability247.com

Sorting and filters

Giving your customers the option to sort or filter the products displayed on your category

pages is a usability must. It enables the visitor to narrow down their search for a particular

item, allowing them to find what they want without having to wade through page after

page of products.

When applying sorting to a category page, the user is able to rearrange the displayed

products to suit. This could be via:

Price: Low to High

Price: High to Low

Latest Arrivals

Most Popular

Alphabetical

Filtering lets the consumer remove products

from the page(s) that don't fit their criteria. It is

usually implemented along the side of the

screen and might include (in the case of, say, a

fashion retailer) options such as:

Brand

Price range (£0.00 - £100 etc)

Size

Colour

Style

The filters you choose to incorporate into your eCommerce site will depend upon your

product range, but it's important to choose criteria that will speed up the user journey and

allow your customers to make a purchase with the minimum of effort.

From the product category page, the consumer will click through to a product landing

page.

Filters are important but don’t force people to use them. Some users like to scroll and scroll and scroll often selecting to see all products rather than a

subset of 20 or 50.

www.usability247.com

Product landing pages

Product pages are the last stage prior to checkout of a successful user journey. Therefore,

they should not only tick the boxes when it comes to usability, but also sell the product too,

thus preventing your visitors from stumbling at this second-to-last hurdle.

Large images are good

A user can draw a lot of info from a product image, so the larger it is, the more details they

can determine – this includes factors not mentioned in the product description. A larger im-

age also helps to create product desirability, triggering the instinct to buy there and then.

Ensure your images are of a high quality. Poorly conceived or low resolution images are a

turn off. Also ensure your images are optimised

for the device they're being viewed upon

(mobile, tablet, desktop). This can be achieved

via both responsive and adaptive web design,

which we touched upon earlier.

Retain filters

As per the category pages, your customers

should have the option to filter certain aspects,

even at product page level. This gives the user the option to make last minute alterations to

their choice, without having to click back and repeat their previous steps on the category

page. The aim should be to keep your potential customer moving forwards to conversion.

Offer alternative or additional products

Suggesting alternative or similar items on the product page gives the user the opportunity

to choose something else, if they change their mind about their selection. This can prevent

abandonment of your site, as the alternative would be to go back to the category pages

and go through that process again, which a good deal of consumers won't want to do.

The same goes for add-on products, such as accessories etc. Displaying them on the prod-

uct page by way of smaller, clickable images, gives the user a greater choice, enhancing

their experience and providing opportunities for additional sales.

In both instances, the effectiveness of your cross-selling algorithm is the deal-breaker. If it

delivers items irrelevant or only tenuously connected to the one on the product page,

A lot of eCommerce websites are starting to use short videos to overview the

product alongside images. These are generally liked by users and often interacted

with or commented on.

www.usability247.com

there's going to be little to no return on your endeavours.

Customer reviews

Users routinely look for customer reviews to help them make purchase decisions. They need

to be genuine, as users will spot fake or biased reviews quite quickly. Negative reviews are

important and can influence conversion more than positive reviews alone. The stars shown

here have become a recognised method for indicating customer reviews and feedback.

Keep the 'Add to Basket' button visible

There should be no doubt in the user's mind as to how they can make their purchase. The

'Add to Basket' button (or variations upon that wording, i.e. 'Buy Now') should be visible and

obvious. It should be designed so it triggers the desired action, with shape, font and colour

all playing a part in this. Making it more prominent than secondary actions upon the page

ensures the user always recognises the option to buy is a simple click away.

Continue shopping

Many eCommerce websites target ARPU (average revenue per user) but fail to clearly al-

low their customers to continue shopping after selecting their first product. The user should

be absolutely clear about what to do next and how to continue shopping if they wish to do

so or go to the basket.

Argos differentiate by using completely different, and

still active terms: “Continue” and “Go to”.

AO use different terms “Continue” and “View” but also

place the buttons far left and far right of the window

consistent with a users mental model of forwards and

backwards.

John Lewis use the same term but differentiate by placing the controls to the far left and

far right of the window.

Section 5

Checkout usability

www.usability247.com

Checkout usability

So your visitor has decided to buy from you. They've added the item to their basket and

are set to make a purchase. All that lies between them and (for you) a successful sale, is

your checkout process. Easy, eh?

Not necessarily. Did you know that on average 68.07% of baskets end up abandoned, with

some sources placing this figure as high as 80%?

Reasons for basket abandonment

Basket abandonment at the checkout stage can occur for a number of reasons, including:

Unexpected charges (such as shipping cost, VAT) –

56%

Website crashed – 24%

Process taking too long – 21%

Security concerns – 17%

Price presented in foreign currency – 13%

(Statistics taken from this survey)

Each reason represents a usability issue. Addressing these

issues will improve your users' eCommerce checkout experience, leading to fewer basket

abandonments.

Unexpected charges

We've all done it. Thought we were the getting the bargain of a lifetime, been all ready to

throw caution to the wind and hand over our credit card details, then WHAM! It hits you at

checkout. That bargain price isn't quite the bargain price we first imagined. For there's pre-

viously unmentioned charges racking up the final tally.

This could be delivery costs, VAT or local taxes, handling charges, transaction fees, or some

other nasty surprise that's been left lurking in the eCommerce woodshed, ready to pounce

just as you confirm your purchase.

www.usability247.com

Although low prices might look good on your

product and search result pages, if they don't

represent the full cost of an item, the user feels

cheated. With this being the biggest cause of

basket abandonment at checkout stage, the

chances are they'll hightail it to a competitor a

little more forthcoming with its charges.

Be transparent about your costs from the off. If

you charge for delivery, make sure the custom-

er knows this before they decide to buy, along with how much. The same goes for any oth-

er charges. The user should be fully aware of the total cost before they reach checkout.

500 Internal Server Error

Users like to see delivery pricing information on the

product page. In testing they often look for delivery

information at this point and will go to the footer hunting

for it if they can ’t see it.

Website crashed

There's few things worse (in terms of eCommerce anyway) than having browsed for a prod-

uct, made the decision to buy, took the trouble to fill out personal details, entered credit/

debit card numbers, hit the 'Confirm' button and ... The website crashes.

This leaves the user:

Uncertain – Did the transaction go through or not?

Frustrated – The prospect of having to go through it all over again

The user should never be left wondering if their card has been charged or not, or whether

they'll see their intended purchase without having to get onto customer services. If the

transaction did fail, a good proportion of users won't want to put themselves through the

process a second time – nobody likes having to do something twice, and there's always

the risk it might happen again – and will be swiftly off to spend their money elsewhere. Like-

www.usability247.com

-wise, if the purchase has gone through, is the user really going to want to use that service

again? It will forever be associated in their mind with uncertainty and frustration.

You need your eCommerce website to be watertight and error-free. You need your check-

out to have been tested to breaking point and then tested some more, until every last bug

and erroneous line of code has been eliminated.

You also need to ensure your hosting provider is up to the task. Are their servers suitable

(and scalable) for the volume of traffic your eCommerce site receives? Find out what their

procedures are in the event of server downtime, and just what their downtime rate is. If

you're on a shared server, consider moving to a dedicated one. Providers tend to pack

shared servers with websites, which can cause the platform to buckle under the weight,

taking your eCommerce site down in the process. Unfortunate at the best of times, but

when someone's about to make a purchase, it almost guarantees a lost sale.

Remember, checkout completion is a key stage of the user journey, the point where all the

other noise has been silenced and the sale is about to go through. Don't let the usability fail

at this crucial moment because of a technical glitch.

Process taking too long

When buying something in an actual shop, paying with real money and interacting with a

real human being, you don't want to be held up by an overly-inquisitive store assistant who

insists on asking every question under the sun. Nor do you want to have to sign up for any-

thing before you're allowed to make your purchase.

Yet some eCommerce websites seem to think this level of intrusion/time-wasting is perfectly

acceptable. Hence the third most popular reason for basket abandonment listed above:

the process taking too long.

www.usability247.com

Your checkout should be a lean affair, its sole purpose being to facilitate a financial trans-

action. That means your fields should be capturing the name, delivery address and card

details of a customer, and little else. Any additional fields are surplus to the checkout pro-

cess, as well as a source of irritation for the user.

They've already made the decision to buy the product from your website, so why not show

your appreciation with a checkout that's fast and fluid? Fields that deviate from the core

objective only create friction, heightening the chance of the user getting fed up and look-

ing elsewhere.

The same applies if your eCommerce site requires a customer to register before making a

purchase. Allow a 'Guest Checkout' option, where the user can simply fill out the basic re-

quirements, as mentioned above, to make their purchase. Chase (optional) registration de-

tails, if your business really needs them, post-checkout.

Security concerns

Unless you're a globally recognised eCommerce behemoth such

as Amazon, new customers are pretty much flying blind when it

comes to placing their trust in your brand. To limit the amount of

leakage at the checkout stage due to concerns related to security

– the user is, after all, about to hand over their card details – you

can take steps to help reinforce confidence.

These include:

Security badges – With 48% of consumers looking for

these indicators, a McAfee Secure, TRUSTe Verified or similar icon offers your users

the peace of mind that the checkout process is secure and has a SSL certificate

(required for safe card transactions)

Link to online review sites – If your eCommerce experience is getting good re-

views on sites such as Trustpilot, let your potential customers know by providing a

link

www.usability247.com

Offer alternative payment options – PayPal, for instance, allows the user to buy

without having to enter their card details on an unfamiliar website

Never assume your brand is so well known that users will blindly trust it. Reinforcing trust at

every step will keep the purchase process moving and avoid a loss in momentum.

Price presented in a foreign currency

The user should not have to perform any extracurricular tasks to make a purchase. Ensure

you present your prices in the currency consistent with your target market. If your market

exists in different regions – UK (GBP) and elsewhere in Europe (EUR), for instance – then you

might want to consider a function that determines the user's location from their IP address

and delivers a price in the relevant currency.

Even with the best known brands, users in testing look for the re-assurance of clear security information to give them confidence in making a

purchase.

Section 6

Get usability right,

increase income

www.usability247.com

Get usability right, increase income

It really is as simple as that headline says. The user journey from prospect to customer is one

fraught with all manner of pitfalls and distractions. Get the usability right and it can mean

the difference between a sale for you and one for your competitor.

Remember:

This eGuide has hopefully given you some pointers and ideas for creating a usable eCom-

merce website. With the usability in check, a passable user experience becomes a great

user experience. One that is remembered the next time the customer wants to buy.

If you have an eCommerce website get in touch and we will help you improve its perfor-

mance.

1. Ensure your website offers the same great experience on both

traditional and mobile platforms

2. Meet customer expectations of how an eCommerce website works

3. Enhance product desirability with large, high quality images

4. Make the checkout experience fast and easy

5. Ensure the user can accomplish a task with absolute ease

6. Build an eCommerce website where great usability permeates

throughout

Usability247

Paddington House, 159 Praed Street

London

W2 1RL

www.usability247.com

Tel:+44(0)800 0246 247

Email: info@usability247.com