很长时间里,Mobile Web设计领域都在呼唤一个权威的设计指南,前雅虎首席设计架构师Luke Wroblewski对于Mobile Web有着深刻的理解和丰富经验,他将自己的心得整理成《Mobile First》一书,值得每个移动开发者细读,本文为第四章选摘,讨论移动应用上,内容和功能的组织之道。
当谈到如何组织手机上的内容和功能时,有效的信息架构准则,比如清晰的标签、均衡的广度和深度、合适的心智模型(mental models)都是非常重要的。但是要合理规划手机Web应用还需要做到:
- 与人们使用他们的手机设备的习惯和原因一致;
- 更关注于内容,而非导航信息;
- 对于搜索(exploration and pivoting)提供最相关的选择
- 保持清晰与集中;
- 和移动用户行为习惯一致。
在前面的部分中,我们已经讨论过为针对手机特性进行设计时的限制和长处。类似地,传统桌面上的Web也有一系列限制和优势,使其很独特。所以,仅仅简单地将传统桌面端有效的Web设计策略挪用到手机上是行不通的。相反,你应该思考一下手机的独特之处并将其与客户的需求结合起来。
如果站在一个很高的交互层面来看这一结合,可能看不清用户是如何使用他们的移动设备以及他们为何这么使用。在Tapworthy一书中,作者Josh Clark关注了三种关键的移动行为模式:微操作、“我在当地”以及“我很无聊”这和Google对用户行为所作的三种典型分解十分一致:紧急要求(urgent now),实时更新(repetitive now), 和无聊(bored now)无论你如何来称呼这三种行为,基本的移动场景包括以下交互类型:
查找答案Lookup/Find(急需的本地信息):我现在就需要得到某些问题的答案——通常和我现在在世界上所处的位置有关;
- 探索/娱乐(在某地感到无聊):我想消磨些时间,只是想要有些东西来分散我的注意力;
- 跟进/状态(重复/微任务):我需要跟进一些很重要的东西,让它们保持在最新状态;
- 编辑/创建(急需的改变/微任务):我现在急需完成一些事情。
因为它们直接与用户使用移动设备的需求相关,因此这些特性决定了你该如何去组织你给用户带来的手机应用以便达到人们的需求。例如:Flickr照片分享应用有四个主要的功能。你的相关联系人的最近活动功能(Recent activity)和上传功能(Uploads from your contacts)让人们知道他们的朋友的新鲜事和新照片;当日有趣的事情功能(Today’s interestingness)和照片功能(Photos taken nearby)可以让人们在无聊时通过观看精美的图片以打发时间。
图4.1:Flickr和Basecamp的手机Web应用都和用户的使用需求一致。
类似地,Basecamp项目管理手机Web应用主要的功能就是让人们能检查、编辑、创建新的信息、计划任务等。由于人们使用Flickr和Basecamp的理由不尽相同,两个网站都对他们的Mobile应用的组织方式做了相应的修改。
和人们使用手机的习惯保持一致,也就是让你的站点和现实世界的需求保持一致。由于人们可以在任何地方使用手机应用,因此你需要考虑如何能让你的应用在任何地方都能对用户有用。这意味着进行大量的现实世界中的使用案例研究来搞清楚人们的真正需求,以此来组织你的站点。我最近发现了一个很好的这类应用的例子。在Mobile in Higher Ed blog, Dave Olsen对一个xkcd漫画中的内容做了如下阐述:
当我看着右边的Venn图的时候,我想,‘这对我的移动应用站点来说,看起来就是一个天然的组织好的可用内容’。……去掉了不需要的东西,做相应的裁剪,以便能适应设备和网络的限制,就可以形成一个更好的更有用的手机应用。
我自己不能够有更好的表达了(就直接将他的原话引在这里)。
图4.2:一个来自于xkcd的漫画图(http://bkaprt.com/mf/40),对比了人们在一个大学网站中想要找到的信息和他们能找到的信息。
内容比导航更重要
在手机上,内容比导航重要是一条普遍规则。无论人们是在跟进新的信息比如股票、新闻、比赛分数,或是查找当地的信息,或者找到他们想要的文章,他们想要的都是及时的结果而非你的站点地图。
太多的手机Web应用(就像我们刚刚所提到的Flickr和Basecamp的例子),在会话开始都是提供一列导航选择而非内容。对手机而言,时间很重要,下载是要费流量花钱的,所以,要尽快反馈给人们他们所需要的。
YouTube和ESPN手机Web应用就是这么做的。一个简单的头栏告诉你你正在访问哪个站点,并将所有的导航选项放到一个按钮中去了。页面其他部分都是即时信息(ESPN)和最新的娱乐资讯(YouTube)(图4.3)。
图4.3:ESPN和YouTube的手机Web应用将重点放在内容上而不是导航上。