前言

本书的主题很简单:如何为移动设备和平板电脑设计最适合的网站及应用。与其他众多同一主题的书籍不同,本书是根据普通用户使用这些设备的实际调研写成的。

从过去几十年的可用性研究中可以得出一个重要教训:不能靠自己的直觉来判断什么能让一般人觉得易于使用。你正在阅读这本书,这件事本身就证明你和一般的移动用户有着很大区别。请跟着我一起说“目标用户不是我”,除非你要设计的应用是给设计师用的。

大多数关于移动端设计的书籍都在向你描述作者的个人喜好,从头到尾讲述他们自己觉得什么是好的。尽管这些观点可能很有趣,但从更具代表性的用户那里获取实际的可用性调研结果会更加安全。

第1章介绍了我们是如何进行研究的。如果只想知道调研结果,不关心调研过程,那么你可以跳过这一章。但这一章很短,因此建议你还是读一读。也许你会发现得到真实数据竟然这么容易,恨不得马上亲自进行用户测试。谁知道呢?

第2章提到了每次进行移动端设计前都应先回答的一个问题:你是否真的需要创建一个移动网站或应用?

第3章和第4章是全书的核心部分,讲解如何针对移动设备进行设计以及如何为小屏幕创建内容。第5章将这些概念进一步运用到更大的平板电脑屏幕上。

第6章为读者提供了超越现有平面触控屏幕的更宽广的视角。附录则回顾了iPhone出现之前的那些手机。

移动世界到底有何不同

2012年,市场分析公司Monetate公布了一项研究结果,是根据其电子商务客户所产生的1亿次网站访问分析得出的。其中,不同的网站访问设备所产生的转化率存在巨大差异,如下表所示:

设备转化率
桌面电脑(1)3.5%
手机1.4%
平板电脑3.2%

(1) 这里指包括台式机、笔记本电脑和一体机在内的传统PC。——译者注

“转化率”的定义很简单,是指发生期望行为的访问者占全体访问者的百分比。在电子商务网站里(例如上表分析的那些)更容易理解,因为“期望行为”就是指购买。因此,3%的转化率意味着每100个网站访客中有3人发生了购买行为,另外97人则什么都没买就离开了。

很明显,移动用户发生购买行为的比例远远小于坐在PC前的人们。有趣的是,与手机用户相比,平板电脑用户的转化率更接近于桌面电脑用户。你将在第5章中看到,这点与我们获得的可用性调研结果相符,因为我们观察到,在平板电脑(比如iPad)上浏览网站要比在手机上容易许多。

面对桌面电脑和手机间转化率的巨大差异,我们应当如何解读?可能至少会得出以下两种很不一样的结论。

  • 移动用户体验肯定很糟糕。(事实上,我们在用户测试中的确发现了这点。)因此,如果有企业设计出为移动设备优化过的、方便移动用户使用的网站,那它就发财了。毕竟,如果移动网站像桌面电脑上的网站那样易用的话,移动销售量将会是目前的2.5倍。

  • 投资移动端设计并不值得,因为移动用户并不会带来多少生意。手机适合做一些琐碎的事情,比如查看体育比赛的得分和发布Facebook更新,却不适合用来做更高价值的事儿。

这两种结论都有道理。我们将在第2章指出,一些企业根本没有必要进行移动端设计,而其他许多企业则应当进行移动界面改进,使其更加符合移动可用性的原则,即使他们目前尚未从移动用户身上获得多少收益。很可能的情形是,低转化率造成生意稀少,而低转化率本身又是因为采用的设计不能满足移动用户的特殊需求。

那么,这些特殊的移动可用性问题到底是什么呢?从某种程度上而言,它们中的一些与我们之前在Web可用性的书中讨论的常见可用性问题并无太大区别。最主要的区别是,每一条可用性原则在移动世界里都变得更加重要

举例来说,当讨论Web写作时,我们总是提到要简短,要在页面顶部就直截了当地表明观点。如果一开始不能立即切中用户目前的问题,许多人就根本不会再去看下面的内容。这条原则对桌面电脑端设计和移动端设计都成立,但对移动端而言更加严格。在小屏幕上,文本不应只是简短,而应该是极短,移动端的“页面顶部”意味着一块更加狭小的区域。

有两种方式可用来判断移动和桌面电脑的用户体验问题是否存在区别。首先,根据经验,我们可以肯定地说这两类设备间存在着可测量的差异,前表中的转化率和我们在本书中列举的用户测试数据都体现了这一点。

其次,根据常识,对明显不同的设备应当在设计上有所区别。在Web诞生之初,我们不得不向人们解释设计网页和设计杂志、宣传册这样的印刷品不是一回事。而现在,绝大多数人很可能都已经意识到,印刷和在线是两种迥然不同的媒介,需要采取不同的设计手法。与之类似,移动端和桌面端设备在使用上也有着许多区别,例如,前者的屏幕小而后者的屏幕大,前者经常移动而后者相对静止,前者使用触摸控制而后者使用鼠标操作,前者使用无线联网(有时不太完美)而后者使用高速有线互联网,等等。

屏幕截图只意在举例说明

两年后读者会在各种网上书店里对本书发表什么样的书评,我们现在就可以告诉你。许多读者会抱怨书中的屏幕截图太老了,其他人则会说还没等到企业重新设计(希望到时候绝大多数都已这么做了)就对人家原有的移动网站样式进行批评是不公平的。

实际上,即使你在出版当日就购买了本书,可能仍然会有同样的感受:批评一些在本书编辑和印刷时就已得到改善的设计不太公平。移动领域的发展日新月异,当你急切地拿到一本新鲜出炉的书时,里面提到的许多网站和应用必然都已经推出了新的版本。

然而让我们明确一点:我们展示这些屏幕截图不是为了批评网站的所有者或设计师。这不是一本评选最佳移动网站或推荐优秀应用的书。我们甚至不关心某个特定网站是好是坏,因为无论好坏都和我们没有太大关系。不过,我们总是乐于见到网站做出改进,因为这代表了我们的可用性研究成果被采纳,但如果某种设计仍然保持原样或者变得更糟,我们也不会介怀。

书中展示的屏幕截图只是用来举例说明相应的可用性调研成果。如果我们不举例而是不惜篇幅详细解释那些抽象的原则,读者恐怕都要睡着了。

教学设计中一个众所周知的人性原则就是,具体内容比抽象内容有着更好的传播效果。我们只不过是在依照自己的原则,通过展示,而不仅仅是告知,来表达我们的意思。

即使某个企业突然大彻大悟,在我们截取图像之后做了设计改进,原图依然是用来演示可用性原则的良好素材。

举一个元例子(meta-example,意即关于例子的例子),比方说我们采用了一张苹果公司1976年使用的彩虹条纹徽标(logo)图,以此说明你可以如何将多种颜色纳入一个徽标之中。虽然苹果公司在1998年就改用了单色徽标,但这并不意味着所有1976版的徽标图片都应从关于徽标颜色的讨论中排除出去。

事实上,老的例子有时候比新的更好,因为它们会更清楚地展现出潜在的设计原则。一些可用性错误正在变得越来越罕见(很幸运),以至于你只能在一些无名网站上看到。然而这些网站往往在同一屏中犯下多个设计错误,使得拿它当范例很容易产生混淆。即使已经变得罕见,我们仍然需要提醒读者避免这些可用性错误,因为总是会有人鼓捣出一个糟糕的设计,让这些错误重见天日。

下面就是一个很好的例子。经过十年漫长的努力,启动画面这一对用户严重不友好的设计概念总算几乎从Web上绝迹了。现在已经没有任何大型企业或知名电子商务网站会在首页前端放上一段Flash介绍动画了。但是,我们测试的一些移动应用就重新引入了这一糟糕的用户体验。果然,测试用户对这种新设计怨声载道,就像2000年时上一代用户抱怨Flash介绍动画一样。

篡改一句名言(2):良好用户体验的代价就是永远保持警惕。如果你不了解过去的错误,它就会回来咬你和你的客户一口。

(2)原文是“自由的代价就是永远保持警惕”。——译者注

如果你在本书中发现了自己设计的屏幕截图,请放心,我们并没打算对你不利,也不是在对你的设计大发牢骚。我们很清楚,商业设计就是一个接一个的妥协。何况,设计决定权还经常掌握在老派的、不理解交互设计的管理者手中。

书中的范例只有一个意图,即让我们的调研成果更加具体。你可以借助它们了解某些用户界面给普通用户带来了哪些便利或是给他们造成了哪些麻烦。

Jakob Nielsen和Raluca Budiu

目录