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....
This presentation offers advice on the lowdown,

nitty-gritty aspects of usability, drawing on our
own experiences of test...
One of the key things we look for

Here is a nice

when mobile usability testing, is the

example from

ability to easily ...
A bit of scrolling but
there is good visual
Not too bad

differentiation.

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

But only 4
pages

And an
unfortunate
message on the
final page.
Neither is this an
a...
So where scrolling is concerned, obey these

three rules:
1. Keep it simple, and don't clutter screen
estate with unnecess...
Often overlooked, is the problem of
images. To improve mobile usability,
these must be resized to suit the screen
upon whi...
The ease-of-use nature of mobile makes it all the more
important for quick access to the various elements on longer
pages ...
Anchor point
at top of
page…..

…pushes next
step content
below the fold.

This might be a
better anchor
point…

….. to dr...
Anchor point
at top of
page…..

…pushes next
step content
below the fold.

This might be a
better anchor
point…

….. to dr...
I’m typing an
email
address…

…so this text
keyboard is
fine

But now I am
entering a
phone number..

…I need the
numeric
...
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...
Avoid taking up a considerable portion of the
screen with your header. We have seen brands

throw everything at it, even t...
Strictly speaking the
header is quite small
for Marks and
Spencer.

Very efficient
header

But both
use large
images

Big
...
Ebay: nice,
tidy header
1. Ask yourself what really needs including in

the header. A search bar can be useful, for
quickl...
It's a big commitment for users to hand over

their card details to a complete stranger.
This is particularly the case wit...
Some organisations are not yet providing a good mobile experience. They may have an
app, have started to optimise for mobi...
To ensure the optimal

usability of your mobile sites,
and apps, contact

Usability247 today!

Share this

www.usability24...
Upcoming SlideShare
Loading in …5
×

Six ways to improve mobile usability

529 views

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
529
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Six ways to improve mobile usability

  1. 1. 6 ways to improve mobile usability www.usability247.com
  2. 2. 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
  3. 3. 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
  4. 4. One of the key things we look for Here is a nice when mobile usability testing, is the example from ability to easily navigate the FatFace. Very little screen, without frustration or scrolling here. confusion. We have found that too much scrolling can lead to the user getting lost. www.usability247.com
  5. 5. A bit of scrolling but there is good visual Not too bad differentiation. from BT. www.usability247.com
  6. 6. From Showcase cinemas. It’s kinda….. www.usability247.com
  7. 7. …long. A little too much perhaps. www.usability247.com
  8. 8. A little bit of horizontal scrolling But only 4 pages 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. www.usability247.com
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. I’m typing an email address… …so this text keyboard is fine But now I am entering a phone number.. …I need the numeric keyboard www.usability247.com
  15. 15. 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
  16. 16. 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 Fold the 'before the fold' screen estate. www.usability247.com
  17. 17. Strictly speaking the header is quite small for Marks and Spencer. Very efficient header But both use large images Big Image FatFace use the images beyond the homepage as shown here in the “Mens”section. which pushes actionable content more than half way down the page. www.usability247.com
  18. 18. Ebay: nice, tidy header 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 www.usability247.com
  19. 19. 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 FatFace allow payment by PayPal – great for mobile users 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. www.usability247.com
  20. 20. 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
  21. 21. To ensure the optimal usability of your mobile sites, and apps, contact Usability247 today! Share this www.usability247.com

×