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: info@usability247.com

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: info@usability247.com

Share this guide