| More and more mobile phones users are browsing and | | | | background colour was changed and contrasted |
| searching the Internet on their handsets. The UK, for | | | | strongly against the page's overall white background. |
| example, has neared saturation for mobile phones and | | | | 4. Make user input as simple as possible |
| many handset browsers can now handle sites | | | | Allow users to input information by making selections |
| designed for viewing on computers. Indeed 20% of UK | | | | instead entering free text (or at least provide this as |
| mobile phone users now use the Internet on their | | | | an alternative method). Entering text on a mobile phone |
| mobile devices (source: 3G.co.uk). | | | | can be painfully slow and error-prone on the typical 12 |
| If you design websites for PC viewing the you need to | | | | button mobile keypad. Mobile users are more likely to |
| consider how your sites will look and work on mobiles. | | | | make mistakes (due to misspelling or mistyping) or |
| The bar for mobile specific sites has been raised by | | | | take shortcuts. Sets of well thought out links on quick |
| some good sites and others need to close their gap. | | | | loading pages can be very usable. |
| As the mobile Internet has developed savvy users | | | | On Thomson Local, for example, it isn't possible to |
| have come to expect higher standards when | | | | browse businesses or locations. Users tend to |
| browsing on their handsets. | | | | abbreviate search terms (i.e. business type) which |
| These 7 guidelines are based on actual user research | | | | leads to inappropriate search results. The Odeon's |
| conducted with mobile phone users. Users were asked | | | | mobile site allows users to find a cinema by searching |
| to carry out typical tasks on popular websites using a | | | | or browsing. Users that search often make more |
| mobile phone browser. The issues they encountered | | | | mistakes than those that browse, the latter usually |
| were used to produce these guidelines. | | | | finding what they're after by only selecting 2 links. |
| 1. Meet users' needs quickly | | | | 5. Only show essential information |
| Mobile and PC users can have different reasons for | | | | Mobile phone screens are of course tiny and have |
| visiting the same site. Mobile users are more likely to | | | | only a fraction of the area or pixels on most PC |
| want information to help them at that location or time, | | | | monitors. Be sure to identify page requests coming |
| such as finding directions or finding out what's going on | | | | from mobiles and only send down the most essential |
| nearby. Also, they might want quick entertainment to | | | | of information. Otherwise, important content might be |
| pass away a short period of time, like something to | | | | pushed down or difficult to find amongst everything |
| read on the bus or while waiting to meet a friend. For | | | | else on the page. |
| your site, predicts users' needs and fulfil these as | | | | Also, most mobile phone users aren't on flat rate data |
| quickly as possible. Exceptions to this are items people | | | | packages so the larger the page the more users have |
| download to keep on their phones (e.g. buying | | | | to pay. Users become frustrated if they have to pay |
| ringtones). | | | | to download page content they don't want. |
| Yahoo! does this effectively with its new mobile | | | | Header links on the BAA and Thomson Local |
| oneSearchTM service. Searching for 'Cinema' | | | | websites take up lots of screen space and make |
| produces a list of cinemas near users' location showing | | | | important information hard to find. 'About BAA', 'Help' |
| their address and phone numbers. Clicking the 'Call' link | | | | and 'Advertise with us' aren't priorities for mobile users. |
| next to a number opens a call dialogue box on the | | | | 6. Place basic browsing controls on the page |
| phone. A further enhancement would to be enable | | | | To save screen space, mobile browsers often don't |
| users to click through to a map of a venue. | | | | display basic controls such as 'Back' or they display |
| 2. Don't repeat the navigation on every page | | | | the web page in full screen mode. As such, always |
| Usable websites designed for PC's usually repeat the | | | | include a 'Back' button on every page other than the |
| navigation on every page. However, screen real | | | | homepage. |
| estate is precious on a mobile screen and navigation | | | | Transport for London's mobile journey planner places |
| can push content off screen. BAA's navigation, for | | | | basic controls, such as 'Next page', 'Back to results' |
| example, takes up the whole screen so users have to | | | | and 'New journey', at the bottom of each page. |
| scroll down far on every page to get to the main | | | | 7. Design mobile-friendly page layouts |
| content. | | | | On your website, make sure you design the page to |
| For your website on a mobile, only display the | | | | present content in the right order and render well on |
| navigation on the homepage. On other pages only | | | | mobile screens. Website layouts for large landscape |
| include links back to the homepage and back to the | | | | PC screens usually don't work well on small portrait |
| last important point along the path users have taken. | | | | mobile phone screens. Furthermore, mobile browsers |
| Show these links at the top and bottom of the page | | | | and page transcoders usually vertically stack pages |
| so they're never too far away. BBC Mobile does this | | | | suitable for portrait display. |
| effectively with a clickable breadcrumb trail at the top | | | | It's often best to have completely different page |
| and a list of links at the bottom. | | | | designs to meet mobile users' needs. If mobile phone |
| 3. Clearly distinguish selected items | | | | users are a big part of your business then you should |
| Mobile phone users tend to have poor cursor control. | | | | consider creating a site just for mobiles. Sites that are |
| This is because moving the pointing device down (with | | | | designed for mobiles perform significantly better with |
| the joystick or direction buttons) simultaneously scrolls | | | | users than those that aren't. |
| the page and highlights links, buttons and form fields. | | | | For example, BAA's website renders very poorly on a |
| Due to this lack of control it's important to clearly | | | | mobile screen. Page sections don't appear where |
| feedback to users what item is in focus. This can be | | | | intended relative to each other and pages look poorly |
| done by changing the appearance of an item to make | | | | designed. Single word link text can be wrapped over 4 |
| it stand out from everything else. For example, you | | | | lines making it difficult to read. Conversely, Transport |
| can change the font and background colour of links | | | | for London's mobile homepage contains simple |
| and buttons. | | | | categorised lists of links. Users find this easy and quick |
| For example, O2's mobile portal doesn't highlight | | | | to use. |
| buttons well. It adds a blue border on a lighter blue | | | | In a nutshell |
| background that isn't noticeable. Users have to move | | | | Don't neglect your current and/or potential users by |
| the joystick around to find the cursor. Worse still, | | | | not designing for mobile phones. Follow these guidelines |
| Thomson Local only distinguishes form fields by | | | | but don't forget to usability test your website on mobile |
| making their border slighter thicker. In contrast, their | | | | phones. Real usability testing will always capture things |
| highlighted links stood out because the font and | | | | that can't be covered by general guidelines. |