Usability Guidelines For Mobile Publishing: What To Do To Best Serve Your Mobile Phone-Based Readers?
More and more mobile phones users are browsing and searching the Internet on their handsets. But are you doing anything to make your blog or news site usable for these loyal readers when they are on the move?
Photo credit: BBC Mobile
In some European countries, for example, mobile phones penetration has already come very close to the saturation point, and many browsers running on mobile handset can now easily handle web sites that were originally designed exclusively for computer viewing. As a matter of fact, today over 20% of UK mobile phone users now use the Internet on their mobile devices (source: 3G.co.uk).
That's why if you design, manage or publish web sites you need to start seriously considering how your sites will look and work on mobile phones devices.
Abid Warsi and the usability team at WebCredible has put together a good basic set of seven usability guidelines to be used for anyone wanting to start working on the usability aspects of her mobile web site.
These guidelines are all based on actual user research conducted by WebCredible with an unspecified set of mobile phone users. These were asked to carry out typical information navigation tasks on popular websites while using a mobile phone browser. The issues and problems they encountered were then used to produce the following guidelines.
7 Usability Guidelines for Websites on Mobile Devices
1) Meet Users' Needs Quickly
Yahoo!'s oneSearch predicts what users are searching for and tailors results to their location.
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 at nearby locations. Also, such users might want to find some nearby entertainment where to spend a short period of time, or they might want to read something on the bus or while waiting to meet a friend.
For your own site, try to predict your own users' needs and try fulfill 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 oneSearch 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 the selected venue.
2. Don't Repeat the Navigation on Every Page
The BBC's breadcrumb trail saved space and was an effective substitute for repeating the navigation.
Usable websites designed for PC's usually repeat the navigation on every page.
However, screen real estate is precious on a mobile screen and navigation components can easily push content off mobile small-sized 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.
3) Clearly Distinguish Selected Items
O2's highlighting needs to be stronger to be noticeable. Simple page designs allow for more effective highlighting on Thomson Local.
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 is important to clearly provide feedback to users about what specific content item is in focus at any time. 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.
Another interesting example is O2's mobile portal which doesn't highlight buttons well. It adds a blue border on a lighter blue background that is not easily noticeable. Users have to move the joystick around to find the cursor. Worse still, Thomson Local only distinguishes form fields by making their border slighty thicker than normal. In contrast, their highlighted links stand out well because the font and background colour was changed and contrasted strongly against the page's overall white background.
4) Make User Input as Simple as Possible
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.
Allow users to input information by making selections instead 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 effective.
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.
5) Only Show Essential Information
Unnecessary content pushes down Thomson Local's search box and BAA's main content below the fold.
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.
6) Place Basic Browsing Controls on the Page
TFL's site was easy to navigate because basic controls appear 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.
7) Design Mobile-friendly Page Layouts
TFL's mobile site renders well on mobile screens. BAA's site doesn't appear to be designed for mobiles and renders poorly.
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.
This is why it is 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 four lines making it difficult to read. Conversely, Transport for London's mobile homepage contains simple categorized lists of links. Users find this easy and quick to use.
Recommendations
Don't neglect your current and/or potential users by not designing for mobile phones.
Try to follow the above usability guidelines but don't forget to do some usability testing of your web site on mobile phones. Real usability testing will always capture things that can't be covered by general guidelines.
In summary: Your options when it comes to consider your own readers who are starting to use their mobile phones to visit your site, are the following:
- Do nothing
Doing nothing is of course not a viable long-term solution but obviously the easiest option of them all! Mobile devices are getting better at rendering web pages made for computer screens in a legible format. If your site is CSS-driven (i.e. doesn't use tables for layout) then your website may look just about OK on mobile devices. That said, the usability of web pages made for PCs tends to be somewhere between poor and diabolical for mobile users. - Create a handheld stylesheet
A good short-term (and very quick-to-implement) solution is to create a stylesheet that only gets called up for handheld devices, giving you far more control over the look and feel of your website on mobile devices. The stylesheet can also hide on-page items that you don't want to appear on mobile devices (through the CSS command display: none). This isn't the perfect solution as a number of browsers on mobile devices don't support handheld stylesheets. - Build a mobile-only site
By far the best solution, creating a modified website for mobile devices is of course also the most time-consuming (by far). You'll need to implement server-side detection to check that users are on a mobile device and then send them the revised mobile-specific site.
Original article written by Abid Warsi and first published on WebCredible as "7 usability guidelines for websites on mobile devices" on October 1st 2007.
Reference: WebCredible [ Read more ]
blog comments powered by Disqus