7 usability guidelines for websites on mobile devices 关于移动设备上的网站的七种可用性方针

昨天晚上进行了我的buddy dinner.PM很给面子。竟然也参加了。
本周还有一个training about english presentation skills.
周末可能可以跟随other department去极地海洋。
终于可以用用我的FUJI啦。

今天看到一篇好文章。有些地方我的理解不是很透彻。不能全文翻译。只能先总结一下。
关于移动设备上的网站的七种可用性方针
1。快速的满足用户需求
移动设备用户更希望得到一些能够帮助他们的信息。在他们所在的地区和时间。他们希望在很短的时间得到看到他们想要的信息。因为他们经常在公车上或是等朋友的时候阅读它们。
2.不要在每个页面重复导航
最好只在主页上显示导航。在其它页面只包括一些返回到上层或者主页的链接。将它们显示在页面的头部或底端。BBC采用了一种可点击的面包屑式导航
3.清晰地区别选择的条目
移动设备用户的光标控制能力比较弱。所以清晰的焦点变得特别重要。尽量使你的界面变得简洁。突出重要的链接。
4.使用户的输入尽可能的简单
用户在输入文本总会变得缓慢及出现各种各样的错误。尽可能的用选择的方式代替输入文本。
5.只显示有效的信息
移动用户的屏幕非常有限.确定一些来自于移动设备上的重要页面需求.重要的内容应该更容易被找到.头部链接在BBA和TL上占据了屏幕的大部分空间使用重要的信息很难找到.像关于我们.帮助.及广告这些对于移动用户来说不是太重要.
6.将一些基础的浏览控制放在页面上
比如一些下一页.返回到结果页的按钮.应将他们放在每个页面上.这样会使页面更容易操作
7.设计适合移动设备的友好布局
如果你的用户中有一大部分人是移动设备用户.你应该考虑为他们设计一个单独的站点.使他们更好的完成浏览.

最后不要忘记对你的网站及移动设备做一些可用性测试.

From:http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml
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.uk¹).

If you design websites for PC viewing the 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 oneSearch^TM 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.

² 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 PC's 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.

³ The BBC's breadcrumb trail saved space and was an effective substitute for repeating the navigation.

 

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.

^{4 5} 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 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.

^{6 7} 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.

^{5 8} 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.

⁹ 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.

^{10 11} 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.