移动设备上网站的7个可用性指南

引言

越来越多的手机用户正在使用手机浏览和搜索互联网。例如，英国的手机普及率已接近饱和，许多手机浏览器现在都能处理为电脑设计的网站。事实上，英国20%的手机用户现在使用移动设备上网（来源：3G.co.uk）。

如果您为PC设计网站，那么您需要考虑您的网站在移动设备上的外观和工作方式。一些优秀的网站已经提高了移动专用网站的标准，而其他网站则需要弥补差距。随着移动互联网的发展，精明的用户在用手机浏览时已经**期望更高的标准**。

这7个指南基于对手机用户的实际用户研究。用户被要求使用手机浏览器在流行的网站上执行典型任务。他们遇到的问题被用来制定这些指南。

1. 快速满足用户需求

移动用户和PC用户访问同一网站的原因可能不同。移动用户更倾向于需要信息来**在当前地点或时间提供帮助**，例如查找方向或查找附近正在发生的事情。此外，他们可能需要**快速娱乐**来消磨短暂的时间，比如在公交车上阅读或者在等待与朋友见面时打发时间。对于您的网站，请预测用户的需求并尽快满足。例外情况是用户下载到手机上保存的项目（例如，购买铃声）。

雅虎通过其新的oneSearch™移动服务有效地做到了这一点。搜索“电影院”会列出用户附近电影院的地址和电话号码。点击号码旁边的“呼叫”链接会在手机上打开一个拨号对话框。进一步的改进将是让用户能够点击进入场馆的地图。

2. 不要重复每页的导航

为PC设计的可用网站通常会在每页重复导航。然而，**屏幕空间在移动屏幕上非常宝贵**，导航会挤占内容区域。例如，BAA的导航占据了整个屏幕，所以用户必须在每页向下滚动很长距离才能到达主要内容。

对于您的移动网站，只在主页显示导航。在其他页面，只包含返回主页的链接以及返回用户所经过路径上的上一个重要节点的链接。将这些**链接放在页面的顶部和底部**，这样它们就不会离用户太远。BBC Mobile 通过顶部的可点击面包屑导航和底部的链接列表有效地做到了这一点。

3. 清楚地区分选中的项目

手机用户通常缺乏良好的光标控制。这是因为使用摇杆或方向按钮向下移动时，页面会滚动，并且会同时突出显示链接、按钮和表单字段。由于缺乏这种控制，向用户清楚地反馈当前聚焦的项目非常重要。这可以通过**改变项目的外观**使其从其他内容中脱颖而出。例如，您可以更改链接和按钮的字体和背景颜色。

例如，O2的移动门户没有很好地突出显示按钮。它在较浅的蓝色背景上添加了一个蓝色边框，并不显眼。用户必须移动摇杆才能找到光标。更糟糕的是，Thomson Local 仅通过使表单字段的边框略微变厚来区分它们。相比之下，它们高亮的链接脱颖而出，因为字体和背景颜色发生了变化，并且与页面整体白色背景形成强烈对比。

4. 使用户输入尽可能简单

允许用户通过**进行选择**来输入信息，而不是输入自由文本（或者至少提供这种替代方法）。在手机上输入文本可能会非常缓慢且容易出错，因为典型的手机有12个按键。移动用户更容易出错（由于拼写错误或打字错误）或采取捷径。一套精心设计的、加载快速的页面上的链接可以非常可用。

例如，在Thomson Local上，无法按类别浏览企业或地点。用户倾向于**缩写搜索词**（即业务类型），这会导致不恰当的搜索结果。Odeon 的移动网站允许用户通过搜索或浏览来查找电影院。**搜索的用户比浏览的用户更容易出错**，后者通常只需选择两个链接就能找到他们想要的东西。

5. 只显示必要信息

手机**屏幕当然很小**，其面积或像素只有大多数PC显示器的一小部分。请务必识别来自手机的页面请求，并只传输最必要的信息。否则，重要内容可能会被挤下去，或者在页面上的其他内容中难以找到。

此外，大多数手机用户没有使用不限流量的数据套餐，因此页面越大，用户需要支付的费用就越多。用户如果被迫为下载他们不需要的页面内容付费，就会感到沮丧。

BAA 和 Thomson Local 网站的页眉链接占用了大量屏幕空间，使得重要信息难以找到。“关于BAA”、“帮助”和“与我们合作”并非移动用户的优先事项。

6. 在页面上放置基本浏览控件

为了节省屏幕空间，移动浏览器通常不显示“后退”等基本控件，或者它们会全屏显示网页。因此，除了主页外，**请务必在每页包含一个“后退”按钮**。

伦敦交通局的移动行程规划器将“下一页”、“返回结果”和“新行程”等基本控件放在每页的底部。

7. 设计移动友好型页面布局

在您的网站上，请确保您设计的页面能够**以正确的顺序呈现内容**并在移动屏幕上良好渲染。为大型横向PC屏幕设计的网站布局通常在小型纵向手机屏幕上效果不佳。此外，移动浏览器和页面转码器通常会纵向堆叠适合纵向显示的页面。

最好拥有完全不同的页面设计来满足移动用户的需求。如果手机用户是您业务的重要组成部分，那么您应该考虑**创建一个仅供移动设备使用的网站**。为移动设备设计的网站比未设计的网站在用户体验方面表现更好。

例如，BAA 的网站在手机屏幕上的渲染效果很差。页面部分未按预期相互关联，页面看起来设计糟糕。单字链接文本可能会被换行四次，难以阅读。相反，伦敦交通局的移动主页包含简单的分类链接列表。用户发现使用它既简单又快捷。

简而言之

不要因为不为手机设计而忽视您当前和/或潜在的用户。遵循这些指南，但不要忘记在手机上进行可用性测试。实际的可用性测试将始终捕捉到一般指南无法涵盖的内容。

本文由Abid Warsi撰写。Abid 对可用性充满热情——热情到他作为用户体验顾问在行业领先的可用性和可访问性咨询公司 Webcredible 工作。他非常擅长眼动追踪，并且在为Web写作方面非常有才华。