eGuide - Bumper eCommerce Usability Guide - Usability 247

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.
call us FREE on +44(0)8000 246247
email: info@usability247.com
Share this guide

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

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.

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.

 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

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.

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.

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.

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

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:

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.

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.

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.

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.

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.

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-

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

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

 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

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
Tel:+44(0)800 0246 247
Email: info@usability247.com

eGuide - Bumper eCommerce Usability Guide - Usability 247

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (19)

Similar to eGuide - Bumper eCommerce Usability Guide - Usability 247

Similar to eGuide - Bumper eCommerce Usability Guide - Usability 247 (20)

More from UX247

More from UX247 (9)

Recently uploaded

Recently uploaded (20)

eGuide - Bumper eCommerce Usability Guide - Usability 247