eguide mobile ecommerce user experience · touch screen and mobile ecommerce user experience the...
TRANSCRIPT
How to create a better mobile user
experience for ecommerce websites
eGuide
Mobile eCommerce
User Experience
www.usability247.com
Usability24/7 provides usability
testing, expert review and user
research services when you
need them, 24 hours a day, 7
days a week.
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: [email protected]
Share this guide
www.usability247.com
Contents
Section 1: Introduction 4
Section 2: Mobile and Desktop—What’s the difference? 7
Section 3: Design in the multi-screen age 10
Section 4: Touch screen and mobile eCommerce user experience 14
Section 5: Menu design for mobile eCommerce Usability 18
Section 6: 10 great tips for a better mobile eCommerce UX 22
Section 7: And finally, the future 26
Section 1
Introduction
www.usability247.com
Mobile eCommerce user experience
Even the staunchest desktop evangelist would be hard-pressed, in 2014, to deny that we
are now living in what has been coined by some as the 'mobile age'. The prevalence of
smartphones and their integral role in our everyday lives has been a game-changer, alter-
ing the way in which we engage with organisations and their web assets.
The aim of this eGuide is to help you create a better experience for the visitors to your
eCommerce site. Specifically the mobile user experience.
So firstly, to underline how important mobile is, let's do a spot of number-crunching.
Mobile statistics 2014
Since the 1st gen release of the iPhone in 2007, mobile usage has increased with each suc-
cessive year.
In the 4th Quarter of 2013, smartphones made up 12.21% of all website visits, breaking
down as:
iOS – 59.59%
Android – 39.05%
Windows – 1.36%
In the same quarter, mobile conversion rates for eCommerce websites was 1.01% com-
pared to 3.11% on more traditional devices (PCs, laptops). This suggests that either the PC
etc is still seen as the primary tool for making a purchase, or that eCommerce just hasn't
got the hang of mobile user experience, with consumers failing to convert due to poor usa-
bility.
Mobile penetration
Global mobile phone penetration (2014) – 48.9%
Estimated global mobile phone penetration (2017) – 57.8%
www.usability247.com
Mobile internet user penetration
Global mobile internet user penetration (2014) – 79.1%
Estimated global mobile internet user penetration (2017) – 90.1%
Mobile usage
The convenience of mobile means that more and more users are making their smartphone
the primary means of accessing the internet, as of the end of 2013 this figure stood at 50%.
34% – Amount using their mobile device to search for products to buy (Q4 2013)
And finally...
The proportion of users who won't recommend a company with a poor mobile site is 57%.
What is mobile?
Before we carry on, it's worth defining what mobile is, and which aspect of mobile eCom-
merce user experience (UX) this eGuide sets out to highlight.
Mobile covers devices such as smartphones, feature phones, e-readers, phablets and tab-
lets, which, unlike laptops, can be used on the go with a minimum of fuss. To cover all these
would mean losing focus.
Indeed, tablets are fast rising in popularity, with some predictions placing their UK penetra-
tion at 57.8% by 2018. However, for the purposes of this eGuide we will be concentrating on
smartphones.
By far the most popular mobile device on the market, it's reported that 1 in every 5 of us
worldwide owns a smartphone. So, with no further ado, here's the Usability247 How to cre-
ate a better mobile user experience for eCommerce websites eGuide.
Section 2
Mobile and desktop –
What's the difference?
www.usability247.com
Mobile and desktop – What's the difference?
Aside from the obvious (ever tried slipping a PC into your back pocket?) there are a num-
ber of factors that differentiate mobile use from desktop.
Context
Although there is a degree of overlap, consumers tend to use their devices dependent up-
on context. PCs are fired up for the heavy lifting, such as productivity and finding infor-
mation, whereas the smartphone keeps the user connected at all times.
Desktop usage:
Office and home
Productivity, heavy lifting, task-orientated
Requires time and focus
Research intensive
24% of daily media interactions occur on the desktop, with 69% of these being in the home.
Smartphone usage:
On the go and at home
Communication and remaining connected
Brief bursts of action
Information in a hurry
38% of daily media interactions occur on a
smartphone, with 40% of these outside of the
home.
www.usability247.com
As you can see, the smartphone serves the need of people who wish to stay connected
with their networks, look up information on the fly, and generally engage with the internet
on a more flexible level.
This requires a different level of usability, compared to that which is offered on the tradi-
tional, more regimented desktop. This is what eCommerce needs to recognise in order to
deliver great mobile user experiences that will keep customers coming back for more.
Section 3
Design in the multiscreen
age
www.usability247.com
Design in the multi-screen age
It's no longer simply a case of turning on the computer, visiting a website, ordering, paying,
then waiting for a purchase to arrive. Of course, plenty still do, but the that fact that this is
no longer the sole option means eCommerce websites need to understand and address
how the user journey has changed.
Multi-screening
Multi-screening is the name given to what today's device-laden, tech-savvy consumer gets
up to when they perform a task using more than one screen.
There are two forms:
Sequential multi-screening
Simultaneous multi-screening
Sequential multi-screening
When a user moves from one device to another over a period of time, whether it be
throughout the day or across a week, to achieve a certain goal. A Google study of con-
sumer habits revealed that 90% of the participants used a variety of platforms sequentially
to accomplish a task. Of these, a whopping 98% moved between devices over the course
of 24 hours, with the smartphone named as the most frequent jump off point.
The same study also revealed that online shopping was the third most popular multi-
screening activity with 67% of users doing it.
www.usability247.com
Simultaneous multi-screening
When the consumer is using two or more devices at once. The most common combinations
of this are:
Smartphone & TV – 81%
Smartphone & PC/Laptop – 66%
PC/Laptop & TV – 66%
Users can be inspired into taking action by something they see on the TV screen. A prod-
uct, for instance, which might prompt them to reach for their smartphone in search of more
info, or even to buy. This can lead them to your website, so the mobile eCommerce user
experience needs to be good if you're to prevent them looking elsewhere.
The proportion of simultaneous multi-screening searches carried out on a smartphone – 22%
Designing the user journey
As you can see, the infiltration of mobile into our everyday lives has altered the user jour-
ney, and eCommerce needs to reflect this in the way it designs its user experiences.
First step on the user journey ...
So far, we have discovered that the smartphone is the primary launchpad for multi-
screening, and the first port of call on the user journey. Therefore, your eCommerce site re-
quires optimising to suit mobile search. It needs to offer information quick and efficiently,
with the absolute minimum of fuss. Whether you go the route of a tailored mobile site, re-
sponsive or adaptive design, you need to ensure that your customers can achieve their
goals. The screen-size requires content that meets this need, without diversions or distrac-
tions. As this may well be a user's first interaction with your eCommerce site, having arrived
there following a mobile search, delivering what they require, or the means to reach it with-
out having to think too hard, is essential.
www.usability247.com
... Although not exclusively
Multi-screening isn't tied to any strict linear sequence. Any device can be the first step on
the user journey, or even returned to (i.e. tablet à smartphone à tablet ...), which is why a
consistent experience across all platforms is imperative.
There should be no drop off point on any single device that forces the user to engage with
another platform to achieve their aim. Your customers need to be able to perform their task
regardless of device, and that is why recognising context of use for the different platforms is
so important. So that when a potential customer visits your eCommerce site via their
smartphone, they can achieve their objective – whether it's fishing for info or making a pur-
chase – with ease, ensuring that they leave satisfied and with a greater chance of coming
back again.
Section 4
Touch screen and mobile
eCommerce user
experience
www.usability247.com
Touch screen and mobile eCommerce user experience
The smartphone is a touch screen device. That requires no further explanation, but how
does this affect your eCommerce website?
Usability issues arise when the touch screen function becomes more of a hindrance than a
help. For instance, repeated mis-selection due to poor rendering.
Smaller screens = Bigger buttons
Fat-finger syndrome doesn't require medical assistance, but it can prove to be a royal pain
when attempting to navigate a mobile-viewed web-
site. Basically, it means inadvertently making a sec-
ondary action because the user's fingertip is bigger
than the selected touch zone. In extreme circum-
stances it can result in premature baldness, due to
your customer tearing his, or her, hair out in frustration.
So how would you go about tackling such a prob-
lem?
It can occur in eCommerce sites that haven't been
optimised for mobile and don't resize correctly. A rule
of thumb, where possible, is to always make your but-
tons larger for the mobile screen. This is particularly
pertinent for the important ones, such as CTAs, or the links to high-traffic content that aug-
ment the user experience.
The results of our own tests with users has shown this technique to work, improving the web-
site's mobile usability.
Make content navigation instinctive
Your product listings may include clickable photos to give your customers a visual refer-
ence of what they're looking to buy (if not, why not?). For certain items you may have more
than one image, giving the user a greater variety of information by which to make their
www.usability247.com
buying decision. Presented in a carousel format, the user moves backwards and forwards
through the images, clicking on the now ubiquitous arrow – the gold standard of image
gallery navigation.
This works fine on a desktop, where a mouse click is de rigeur, however, when it comes to
the smartphone, the user has the option of swiping to either scroll an oversized page, or
view multiple items of content. Enabling your customers to swipe through your image gal-
leries on their smartphones makes for an easier and more instinctive mobile user experi-
ence.
The issue with maps
Your eCommerce website has a map, allowing
your customers the opportunity to find your physi-
cal shops while out and about via their device.
However, our own research with various test
groups has found that when it comes to
smartphones, a map is often the source of quite a
serious usability issue.
While using the touch screen to scroll through the
page where the map is located, we found that
the user would often inadvertently activate the
map's panning function. This is a feature of em-
bedded maps, such as Google's offering, which
allows the user to explore the surrounding area. However, if accidentally triggered, the un-
fortunate user can then have one hell of a game getting back to the map view required to
find your store.
Tackling the map usability issue
When it happens, it can put a severe dent in you customer's user experience, which you
need to avoid. So what's the solution?
www.usability247.com
There are a variety of mooted suggestions, some of which fail to convince, but the follow-
ing are workable methods by which to counter this usability issue:
'Hide Map' text link – Allows the user to hide the map, so that when they scroll there's no
way to activate the map's pan function. This requires the user to be aware that a 'hide' fea-
ture is available
Link to the map elsewhere – A text link can open the map on a new, designated page.
Unfortunately, this option does away with the richer experience a map on your website of-
fers the user
Launch a map app – Allows the user to switch between the website and the maps appli-
cation, so that there's no unintentional usability issues, and all the functionality that the app
offers is retained
Section 5
Menu design for mobile
eCommerce usability
www.usability247.com
Menu design for mobile eCommerce usability
Simply resizing your desktop menu to fit a smartphone won't work. Imagine the issues that
will arise from cramming your eCommerce site's navigation into a smaller screen. Fumbling
fingers, strained eyes ... it's a usability nightmare come true.
For the designer, representing the main website's menu on the smaller device poses some-
thing of a challenge. A happy medium between functionality, user expectation, and usa-
bility needs to be found.
Functionality
The mobile eCommerce menu needs to get the user to where they want to be, fast and
effectively. Understanding the context (see previously) in which the mobile user is interact-
ing with your site, is key to designing a menu that delivers a better experience.
User expectation
The customer will already be familiar with navigating other eCommerce websites via mo-
bile, and will expect a similar experience, offering them a user friendly method by which to
achieve their goal.
You need to decide what is important, and what can be ejected from the smartphone-
rendered menu. What does the user hope to find? For instance, as the potential customer
may well be on the move when accessing your site via mobile, they're probably not going
to be too bothered about press releases, company news, career options, or any of the oth-
er minutiae you can afford to place in the menu bar of your main site.
What they will expect is to be able to easily navigate to the important content, such as
products, reviews, and contact details (map) so that they can locate your physical store –
if you have one – while on the move. Categorisation can then become more specific on
the secondary pages.
www.usability247.com
Usability
The menu should be clear, and leave the user in no doubts as to where each link will take
them. Think beyond the traditional horizontal menu bar, which is by and large unsuitable for
the smaller screen, appearing cluttered or cramped and posing readability and selection
issues.
Think vertical
Vertical menu bars are a great way of presenting the customer with their options in a clear
and usable manner, negating the need for zoom and awkward, user-unfriendly sideways
scrolling. If, as mentioned above, you have prioritised what content the user requires and
stripped the menu down to suit, then it may fit on a single screen, doing away with the
need to scroll beneath the fold too.
A note on mega drop downs
Mega drop down menus are hugely popular at the moment, offering an effective, clean
and scan-friendly solution to navigation. You may well already be employing them on your
eCommerce website.
However, whereas they are an excellent way of presenting a comprehensive range of op-
tions on a desktop, without having to rely on sub-menus or scrolling, they are completely
unsuitable for the mobile user experience. Here's why:
No hover-over – As mega drop downs require hover-over to open up the menu, the
touch screen of a smartphone renders them ineffective. Even when simplified via Re-
sponsive Web Design (RWD), removing the need for hover-over, the menu will be pre-
sented as a long list of links, losing sub-headings and hierarchy, and creating the need
for extensive scrolling
As far as mobile usability goes, the mega drop down menu is strictly off limits.
www.usability247.com
Hamburgers for all?
The hamburger is another menu presentation option that is currently in demand. The image
of three horizontal stacked lines began life in the mobile arena, as a handy icon to open up
a navigation menu, but it has gone on to appear on desktop sites too, quite often as a lazy
alternative to genuine user-friendly navigation. Not only that, but confusion has also arisen
over its proper application, with the hamburger also being appropriated to signify settings
menus. This lack of consistency presents bad usability, which presents another obstacle to
meeting the user's expectations.
Generally, we would suggest steering clear of hamburgers altogether:
They require your customer to identify and understand their purpose
It adds another – unnecessary – operation to the user journey
Until activated, the menu options remain hidden, which offers a big fail when it comes
to at-a-glance usability
Section 6
10 great tips for a better
mobile eCommerce user
experience
www.usability247.com
10 great tips for a better mobile eCommerce UX
To finish off our eGuide, we have put together a list of 10 top tips that will help convert visi-
tors and keep your customers coming back for more.
Simplicity
Keep things simple. Don't over-clutter the screen with too much information. Remember,
the user is likely to be on the move and in a hurry to find what they want. Throwing the
kitchen sink at them, will only cause confusion. Prioritise the elements that will appear on
the mobile screen, and avoid scrolling if possible.
Be actionable
Make the mobile experience actionable. Tailor content to the context in which your cus-
tomers will be engaging with your site, and lead them smoothly to their goal. Ensure link text
not only signposts their journey, but also invites them to take the next step.
Include a search box
Possibly one of the most important features for the mobile eCommerce user experience. In-
clude a search box so that your customers can easily find what they are looking for. This will
also help to keep the navigation menu down to the bare essentials. Finally, ensure that the
search box is easily located, and perhaps even visible at all times, preferably at the top of
the screen.
Thumb-friendly design
Remember that the customer interacts with his fingers and thumbs. The mouse-driven expe-
rience is solely for the desktop and thus should remain there. Big buttons, clear delineation
between elements, and easily navigable menus, all enhance your website's usability, result-
ing in a better user experience.
www.usability247.com
Incorporate social media
Smartphone use is driven by communication. The consumer is using social media and shar-
ing their experiences of products and services with their peers. Make sure you place icon
links to your social media presence, so that your customers can engage with your eCom-
merce brand via a single tap. It all adds to creating a user-centric environment, the ulti-
mate aim of which is customer satisfaction.
Optimise loads times
The mobile user is in a hurry, they haven't time to wait around for slow page loads. Stream-
line content, compress images, keep categories to a minimum ... This can all be achieved
without compromising on the user experience – Remember, context and speed; it's what
mobile usability is all about.
Don't overcomplicate checkout
We've discussed this in greater detail, in both eCommerce basket abandonment and user
experience and The user journey towards basket abandoment, but it doesn't hurt to reiter-
ate it here. The mobile customer doesn't want to go through a smooth user journey, only to
find hurdles placed at the checkout phase. Always allow guest checkout, so that user's
don't have to register an account to make a purchase on their smartphone, and only re-
quest the details that are necessary to make and fulfil the transaction – Name, address,
card details. Any more than this becomes a major contributing factor in basket abandon-
ment.
www.usability247.com
Remain usable
Don't lose focus of usability throughout. Follow tried and tested conventions so that the cus-
tomer enjoys a more intuitive mobile experience, with a reduced learning curve. Once
again, meet user expectations to prevent frustration and abandonment.
Concentrate on conversions
The vast majority of customers accessing your
eCommerce site via mobile are there for a par-
ticular purpose, not to casually browse. Always
ensure there's no obstacles to performing the
tasks they are most likely there for, and make it
an easy and instinctive process.
Test early, test often
In fact, usability testing can – and should – be an ongoing process. Before a line of code is
written, right up until site launch, and beyond, continual testing will ensure your mobile
eCommerce user experience is consistent, powerful, and remains on top of its game as
your website grows and customer behaviour evolves.
Section 7
And finally, the future
www.usability247.com
And finally, the future?
What will the future bring for mobile eCommerce user experience? Multi-screening has
changed the way in which UX practitioners look at websites, taking a more holistic ap-
proach to create seamless, cross-platform experiences. But where to next?
Is the smartwatch the future?
Is wearable technology going to become the last word in
mobile?
Smartwatches have been available for a short time now, but
in September of this year, Apple announced their move into
this arena, with the preview of their Apple Watch.
Whereas before this, the smartwatch market had yet to take
off with any great enthusiasm, Apple's latest gadget could
well be what's needed to set the ball rolling. After all, they
did the same thing for smartphones and tablets.
Could the smartwatch then become the first stop on the mul-
ti-screen journey? And what would it mean for your own
eCommerce site?
It's very early days yet, and it's a pretty open field as to how the mobile eCommerce user
experience will play out on this one. It has potential to be a medium for delivering exclusive
offers, coupons etc to your customers – but there must be more to it than that, otherwise it is
little more than a miniaturised extension of the smartphone, with even more usability issues
to counter.
If Apple can kickstart the market, showcasing practical and absorbing experiences, then
who knows, perhaps one day consumers will be purchasing goods from their wrist, as
though it's the most natural thing in the world.
Stay tuned to the Usability247 user experience blog to keep up to date with how wearable
tech UX pans out.
Usability247
Siena Court, The Broadway,
Maidenhead
SL6 1NJ
www.usability247.com
Tel:+44(0)8000 246247
Email: [email protected]
Share this guide