Six ways to improve mobile usability
21
www.usability247.com 6 ways to improve mobile usability
-
Upload
usability247 -
Category
Technology
-
view
380 -
download
0
description
People are using mobile devices to access the internet with growing regularity. For organisations this presents another developmental challenge even whilst many haven't fully come to terms with website development. As a result many either don't have a mobile presence, the one they have isn't optimised and the experience poor or they are putting in place something new. One of the options available is responsive web design
Transcript of Six ways to improve mobile usability
www.usability247.com
6 ways to improve mobile usability
www.usability247.com
A survey of 1000 UK smartphone
users revealed that 29% had made a
purchase using the mobile web, in
the previous 6 months.
With this figure only set to increase,
does your site offer effective mobile
usability?
www.usability247.com
This presentation offers advice on the lowdown,
nitty-gritty aspects of usability, drawing on our
own experiences of testing, to give you 6 tips
that will aid in improving the user experience of
your mobile product.
www.usability247.com
One of the key things we look for
when mobile usability testing, is the
ability to easily navigate the
screen, without frustration or
confusion. We have found that
too much scrolling can lead to the
user getting lost.
Here is a nice
example from
FatFace. Very little
scrolling here.
www.usability247.com
A bit of scrolling but
there is good visual
differentiation.Not too bad
from BT.
www.usability247.com
From Showcase
cinemas. It’s
kinda…..
www.usability247.com
…long.
A little too much
perhaps.
www.usability247.com
A little bit of
horizontal
scrolling
And an
unfortunate
message on the
final page.
Neither is this an
app, nor can the
user get to the full
website due to the
mobile redirect.But only 4
pages
www.usability247.com
So where scrolling is concerned, obey these
three rules:
1. Keep it simple, and don't clutter screen
estate with unnecessary features
2. Limit scrolling to one direction only
3. A single column layout works best with
mobile
www.usability247.com
Often overlooked, is the problem of
images. To improve mobile usability,
these must be resized to suit the screen
upon which they're displayed. Otherwise
they take up too much space, and lead
to ugly repositioning of other on-screen
elements. Responsive Web Design is one
way of doing this automatically.
Mashable
do this well
www.usability247.com
The ease-of-use nature of mobile makes it all the more
important for quick access to the various elements on longer
pages and during transactions.
One suggestion we make is to ensure that anchor links
reflect where the user is in their journey so that key content is
not hidden away. Another is to save a few user clicks by
presenting the text or numeric keyboard at the right time.
www.usability247.com
Anchor point
at top of
page…..
…pushes next
step content
below the fold.
This might be a
better anchor
point…
….. to drive
the next
action.
www.usability247.com
Anchor point
at top of
page…..
…pushes next
step content
below the fold.
This might be a
better anchor
point…
….. to drive
the next
action.
www.usability247.com
I’m typing an
address…
…so this text
keyboard is
fine
But now I am
entering a
phone number..
…I need the
numeric
keyboard
www.usability247.com
1. Ensure pages later in a process
anchor based on next user action
not what you want to be visible
2. If the input is a number, bring up the
numeric keyboard.
3. If the input is text bring up the text
keyboard
www.usability247.com
Avoid taking up a considerable portion of the
screen with your header. We have seen brands
throw everything at it, even the kitchen sink.
That meant oversized branding, search bars,
'Find a store', contact details, all cluttering up
the 'before the fold' screen estate.
Fold
www.usability247.com
Strictly speaking the
header is quite small
for Marks and
Spencer.
FatFace use the
images beyond
the homepage as
shown here in the
“Mens”section.
But both
use large
images
Very efficient
header
Big
Image
which pushes actionable content more
than half way down the page.
www.usability247.com
1. Ask yourself what really needs including in
the header. A search bar can be useful, for
quickly finding a product, but not at the
expense of usability
2. Keep the design lean, and clutter-free
3. Check out eBay for a nice, clean example
of how it can be done
Ebay: nice,
tidy header
www.usability247.com
It's a big commitment for users to hand over
their card details to a complete stranger.
This is particularly the case with m-
commerce, where security issues remain at
the forefront of users' minds. However, we
have found that mobile users love PayPal,
offering them a safe, and protected
environment in which to make a purchase.
Be sure that your mobile site accepts it.
FatFace allow
payment by
PayPal – great for
mobile users
www.usability247.com
Some organisations are not yet providing a good mobile experience. They may have an
app, have started to optimise for mobile or be planning a responsive web designed site.
They should hurry. People are using mobile now.
www.usability247.com
To ensure the optimal
usability of your mobile sites,
and apps, contact
Usability247 today!
Share this
