///7 Usability Guidelines for Websites on Mobile Devices

7 Usability Guidelines for Websites on Mobile Devices

Introduction

More and more mobile phones users are browsing and searching the
Internet on their handsets. The UK, for example, has neared saturation
for mobile phones and many handset browsers can now handle sites
designed for viewing on computers. Indeed 20% of UK mobile phone users
now use the Internet on their mobile devices (source: 3G.co.uk1).

If
you design websites for PC viewing then you need to consider how your
sites will look and work on mobiles. The bar for mobile specific sites
has been raised by some good sites and others need to close their gap.
As the mobile Internet has developed savvy users have come to expect higher standards when browsing on their handsets.

These
7 guidelines are based on actual user research conducted with mobile
phone users. Users were asked to carry out typical tasks on popular
websites using a mobile phone browser. The issues they encountered were
used to produce these guidelines.

1. Meet users’ needs quickly

Mobile and PC users can have different reasons for visiting the same site. Mobile users are more likely to want information to help them at that location or time, such as finding directions or finding out what’s going on nearby. Also, they might want quick entertainment
to pass away a short period of time, like something to read on the bus
or while waiting to meet a friend. For your site, predicts users’ needs
and fulfil these as quickly as possible. Exceptions to this are items
people download to keep on their phones (e.g. buying ringtones).

Yahoo! does this effectively with its new mobile oneSearchTM
service. Searching for ‘Cinema’ produces a list of cinemas near users’
location showing their address and phone numbers. Clicking the ‘Call’
link next to a number opens a call dialogue box on the phone. A further
enhancement would to be enable users to click through to a map of a
venue.

Screenshot of Yahoo!

Yahoo!’s oneSearch predicts what users are searching for and tailors results to their location.

 

2. Don’t repeat the navigation on every page

Usable websites designed for PCs usually repeat the navigation on every page. However, screen real estate is precious
on a mobile screen and navigation can push content off screen. BAA’s
navigation, for example, takes up the whole screen so users have to
scroll down far on every page to get to the main content.

For
your website on a mobile, only display the navigation on the homepage.
On other pages only include links back to the homepage and back to the
last important point along the path users have taken. Show these links at the top and bottom
of the page so they’re never too far away. BBC Mobile does this
effectively with a clickable breadcrumb trail at the top and a list of
links at the bottom.

Screenshot of BBC
The BBC’s breadcrumb trail saved space and was an effective substitute for repeating t

3. Clearly distinguish selected items

Mobile phone users tend to have poor cursor control. This is because
moving the pointing device down (with the joystick or direction
buttons) simultaneously scrolls the page and highlights links, buttons
and form fields. Due to this lack of control it’s important to clearly
feedback to users what item is in focus. This can be done by changing the appearance of an item to make it stand out from everything else. For example, you can change the font and background colour of links and buttons.

For
example, O2’s mobile portal doesn’t highlight buttons well. It adds a
blue border on a lighter blue background that isn’t noticeable. Users
have to move the joystick around to find the cursor. Worse still,
Thomson Local only distinguishes form fields by making their border
slighter thicker. In contrast, their highlighted links stood out
because the font and background colour was changed and contrasted
strongly against the page’s overall white background.

Screenshot of O2 Screenshot of Thomson Local

O2’s highlighting needs to be stronger to be noticeable.

Simple page designs allow for more effective highlighting on Thomson Local.

 

4. Make user input as simple as possible

Allow users to input information by making selections
instead of entering free text (or at least provide this as an
alternative method). Entering text on a mobile phone can be painfully
slow and error-prone on the typical 12 button mobile keypad. Mobile
users are more likely to make mistakes (due to misspelling or
mistyping) or take shortcuts. Sets of well thought out links on quick
loading pages can be very usable.

On Thomson Local, for example, it isn’t possible to browse businesses or locations. Users tend to abbreviate search terms
(i.e. business type) which leads to inappropriate search results. The
Odeon’s mobile site allows users to find a cinema by searching or
browsing. Users that search often make more mistakes than those that browse, the latter usually finding what they’re after by only selecting 2 links.

Screenshot of Thomson Local Screenshot of Odeon

Users make errors when trying to type long text on Thomson Local.

Users can however quickly browse to the right cinema using Odeon’s Cinema List.

5. Only show essential information

Mobile phone screens are of course tiny and have
only a fraction of the area or pixels on most PC monitors. Be sure to
identify page requests coming from mobiles and only send down the most
essential of information. Otherwise, important content might be pushed
down or difficult to find amongst everything else on the page.

Also,
most mobile phone users aren’t on flat rate data packages so the larger
the page the more users have to pay. Users become frustrated if they
have to pay to download page content they don’t want.

Header
links on the BAA and Thomson Local websites take up lots of screen
space and make important information hard to find. ‘About BAA’, ‘Help’
and ‘Advertise with us’ aren’t priorities for mobile users.

Screenshot of Thomson Local Screenshot of BAA

Unnecessary content pushes down Thomson Local’s search box and BAA’s main content below the fold.

6. Place basic browsing controls on the page

To save screen space, mobile browsers often don’t display basic
controls such as ‘Back’ or they display the web page in full screen
mode. As such, always include a ‘Back’ button on every page other than the homepage.

Transport
for London’s mobile journey planner places basic controls, such as
‘Next page’, ‘Back to results’ and ‘New journey’, at the bottom of each
page.

Screenshot of TFL

TFL’s site was easy to navigate because basic controls appear on the page.

7. Design mobile-friendly page layouts

On your website, make sure you design the page to present content in the right order
and render well on mobile screens. Website layouts for large landscape
PC screens usually don’t work well on small portrait mobile phone
screens. Furthermore, mobile browsers and page transcoders usually
vertically stack pages suitable for portrait display.

It’s
often best to have completely different page designs to meet mobile
users’ needs. If mobile phone users are a big part of your business
then you should consider creating a site just for mobiles. Sites that are designed for mobiles perform significantly better with users than those that aren’t.

For
example, BAA’s website renders very poorly on a mobile screen. Page
sections don’t appear where intended relative to each other and pages
look poorly designed. Single word link text can be wrapped over 4 lines
making it difficult to read. Conversely, Transport for London’s mobile
homepage contains simple categorised lists of links. Users find this
easy and quick to use.

Screenshot of TFL   Screenshot of BAA

TFL’s mobile site renders well on mobile screens. BAA’s site doesn’t appear to be designed for mobiles and renders poorly.

In a nutshell

Don’t neglect your current and/or potential users by not designing for
mobile phones. Follow these guidelines but don’t forget to usability
test your website on mobile phones. Real usability testing will always
capture things that can’t be covered by general guidelines.

2010-05-25T22:38:29+00:00 January 30th, 2008|General|0 Comments

About the Author:

Abid's crazy about usability - so crazy that he works for Webcredible, an industry leading usability and accessibility consultancy, as a user experience consultant. He's very good at eye tracking and extremely talented at writing for the web.

Leave A Comment