eguide - bumper ecommerce usability guide - usability 247
Click here to load reader
Post on 13-Apr-2017
Embed Size (px)
How to create better user
experiences and increase sales
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
Were 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
Come and change the world with us.
call us FREE on +44(0)8000 246247
Share this guide
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
Finding you online
Product category and landing pages
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
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:
Word of mouth
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
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
Responsive vs. Adaptive Web Design
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
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.
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
Users judge we website very quickly from the homepage. Even in test situations users will ask to click away if they dont 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 hier