抓住用户的设计:移动网页设计的信息组织

标签: 业界 Android iPhone web Windows Phone | 发表时间:2012-07-24 11:57 | 作者:Warlial
出处:http://www.leiphone.com

【编者按】本文转载自 @雅秋168个人博客。对于我们中很多人来说,移动端设计是一个崭新的机会。

但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢?当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局。

组织架构

当你开始组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清晰的标签(labeling),平衡的宽度和深度,妥当合理的心智模型,这些仍旧十分重要。但是,组织移动端网页设计体验你需要考虑以下因素:

配合使用方式:人们如何适用移动设备,为什么这样用?

强调内容超过导航

保持清晰和专注

配合移动设备适用方式

我们很容易理解移动设备上独特的限制和性能。简单来说,桌面网页同样有很多独特的限制。所以直接将桌面产品移植到手机端并无意义。而是要考虑移动端独有的特性,并且满足到用户需求。

通过研究一些专业分析的共通点,我们会得到一些启发。面对通常人们是如何使用他们的移动设备的,为什么?这个问题时,Josh Clark在他的《触动人心》(注:《触动人心-设计优秀的iphone应用》一书中讲到过三个关键用户行为:

“我有个微任务要做”;

“我想看看附近的情况”;

“我有些无聊”。

这正好与google的调研不谋而合,他将移动用户细分为三种行为群体:

当前是 急迫的,反复的,或者无聊的

不管如何描述,移动端的使用方式通常包括以下交互情形:

查找/发现(急需信息,基于地点位置):

我现在需要得到答案——多数是告诉我在哪里。

探索/娱乐(无聊,基于地点位置):

我现在想消磨时间,来点娱乐打发无聊。

签到检查(check-in)/ 状态(重复/微任务处理):

一些重要的事需要不断改变或更新,我想留在上面。

编辑/创建(紧急调整,微任务处理):

我需要马上做完一些事,不能等。

以上因素决定人们为何掏出手机,所以这些行为决定了手机体验应该如何被构造和组织来满足人们的需求。

例如:照片分享Flickr的移动网页体验就有四个主要操作。你通讯录里好友的最新活动和最新上传让人们不断想检查是否有好友的照片更新;提供当日附近人们上传的一些有趣的内容和照片,为想浏览优质照片的人们打发无聊时间的方式。

Flickr的移动网页体验符合人们为什么而掏出手机(虽然略显生硬)。

配合移动环境使用环境自然也需要适应你网站真实世界的需要。因为移动体验可能被用在任何地点场景,你需要考虑如何让人们无论在哪里都觉得好用。

这就意味着需要考虑用户真正需要你网站组织提供的真实用例(use cases)。之前我曾经写过一篇《利用人物角色来做信息架构》其实就是通过分析用户完成某任务的流程来进行网页上的信息架构。这一点其实在手机端更加重要。
通过了解以上用户会掏出手机的动机,结合自身app提供的功能,尽量减少用户在移动端的操作路径。

内容优于导航

一条常规理论,在移动端内容优先于导航。无论人们是否经常查看更新信息,诸如:股票,新闻或是比分;他们查看当地新闻或是通过搜索查找文章或是使用聊天工具,他们都想快速响应需求而不是看到你的网站架构脉络。

太多的移动网页体验(像是之前的Flickr )开始时的对话都是一大堆的导航列表,而不是内容信息。移动端用户时间很宝贵,下载也需要流量的金钱消耗,所以让他们马上获得想要的信息才是关键。

Youtube ESPN的移动网页就是这样做的。先是一个简单的抬头告诉你身处哪里,将导航选项降级为一个单独的按钮。其余的位置放置可随时查看的最新信息(ESPN)和最热的供消遣的视频。

ESPN Youtube移动网页体验将重点放在内容信息上,而不是导航上。

定位和探索

但是,请稍等一下,如果内容总是优于导航。我如何才能在移动网页端找到我的路径?难道我们不需要一种导航或路径去发现哪里可以进入?

当然需要了,但是允许人们探索和定位相关的内容并不意味着罗列一堆影响内容浏览的导航条。

例如,旧版的Facebook里将我经常浏览的相关信息放在顶部和中间的重要位置,但是由于顶部导航占据三行的空间,每页我一屏只能看到一条动态。

之后,Facebook调整了移动网页体验,重新设计了导航,减少了导航项的数量。如果你不去管头条新闻和新闻摘要,他们将导航数量减半(从10减少到5)。It’s a good start.

 

关于导航菜单,youtube提供了一个全屏的快捷入口。这种方式的缺点:一是你需要主动寻找;二是你不得不打断当前任务,跳转到一个单独的页面;三是你要知道网格图标的意思是“导航菜单”。

ESPN移动网页设计聪明很多。他也在顶部有一个“菜单”按钮,点击后直接在下方直接展示多层级的导航列表。这种方式让你思考下一步去哪里时,可以停留在当前页面,不需要离开去加载一个新的页面。

别忽视另类导航——控制屏幕底部容易些

不容忽视的是人们在使用手机时,容易的单手操作会让他们舒服很多。对于单手来说,屏幕底部操作也就显得容易些。详细讨论可以参见《hover已死有事烧香》

当人们拨弄到屏幕底部,想选择或决定去哪里的时候,很多移动网页没有给与你机会。

youtube设计在每页的底部缺少导航引导,当你划拨到底部就没地方可去了。

亲,您这是让我退出(Sign out)还是逼我写反馈意见(Feedback)啊?

底部菜单对引导用户深入访问更有意义,但不好直接复制一个其他地方也有的菜单按钮。可以将顶部的菜单按钮从底部展开(放在内容信息之后)。Bagcheck移动网页端就是这么干的:

Bagcheck顶部的锚点链接从页面底部展开网站导航

 

关于返回键

许多iPhone的原生应用在导航上都有个永久的返回按钮。由于苹果的移动设备没有硬件上的返回按键,所以很多App都在顶部标题栏设置了返回按钮。

不过在移动互联网的体验上,没必要处处都设置返回按钮。因为很多设备上,诸如,Andoid、黑莓、Windows Phone7都有硬件上的返回物理按键。

Android Phone 一般都有物理返回按键

即便是苹果iPhone上的浏览器,底部的工具栏上包含一个永久的返回按钮。

iPhone浏览器底部工具栏包含一个返回按钮。某网页左上角的返回实属多余。

在移动网页体验上添加一个返回按钮容易引起混淆。人们在使用网页时候会问:“这两个返回按键的作用是一样的吗?”。因此在移动网页设计时,不应该在有限的空间内占据一个多余的“返回”按钮。

总之,当你打算组织移动网页体验时,考虑哪些用户行为符合移动生活的需要。

  • 移动用例(usecase)。像是寻找、探索/游戏,签到/查看状态,编辑/创建,思考这些行为,然后调整网站移动端使用时候的架构。
  • 首先关注内容,其次才是导航。人们更关心信息和他们想快速处理的任务。
  • 相关的的导航出现在合适的位置,会让人们沉浸,或是访问度更深。
  • 减少关键任务的选择。导航需要清晰并且关注在人们真正需要的事情上,多考虑人们在紧急状态和非理想状态下尽快提供帮助。
  • 考虑人们在休闲时候使用手机,并且请考虑横屏设计,让人们更加欣赏你简单的设计。

原文链接 移动网页设计的信息组织

您可能也喜欢:

抓住用户的设计:清晰的移动应用表单

口袋里的较量--盘点中国移动互联网“第一次世界大战”

移动界面设计点滴

移动互联网时代:响应式网页设计已成为大势所趋

手机公司的移动互联网就是个伪命题
无觅

相关 [用户 设计 移动] 推荐:

移动用户体验设计中的原型应用

- 超 - UED TEAM,用户体验设计,web前端开发
一把好的椅子,是否需要我们通过阅读使用手册才能知道如何使用它吗. 一把好的椅子,是在我们看到它时,我们很自然的就知道它能够干什么,我们该如何使用它. 也就是说:“椅子”这个概念已经深入人心,是个被高度认可的原型(Archetype). 现有的移动领域里,我们也在探索如何将“原型”的概念揉入到我们的设计中去.

从用户出发:移动设计原则小结

- - 优设(UISDC)
@王敏军Joe :本文作者总结了十四条关于移动端产品设计的原则,其提倡的核心原则就是从用户出发,充分考虑用户的使用体验. 一、充分考虑用户的使用习惯. 比如大多数人拿手机的时候是双手握还是单手握,单手握的时候是右手操作还是左手操作,操作的时候用哪个手指就能进行操作. 考虑到用户的使用习惯有助于在设计时避开手指的触碰盲区.

移动设备用户体验设计基础

- - 译言-精品外文翻译 - 最新译作
移动用户数和移动的使用都在积极不断增长. 随着越来越多的用户将自己的工作越来越多的转换到移动设备上,关于如何通过提高移动设备的各种因素来整体上创造更好的移动设备使用体验. 移动用户的使用体验包括用户使用移动设备的前后的看法和感受.而途径可能是通过浏览器或者是应用,而且移动设备也包括从低端的功能手机到高清平板的各种种类.

移动用户体验设计新要素

- - IT技术博客大学习
标签:   用户体验   移动.    无论是在一系列草图间快速切换,还是屏幕与屏幕之间的切换,或者其它类似场景,想要在这些场景切换中加入动效进行完美过渡,并不是一件容易的事情. 这是一门需要耐心的艺术,需要用眼睛仔细的观察 ,人和物体如何在时间和空间两个维度中运动与变化.    这种非常巧妙的动效和动画,正在慢慢成为一种新的、有意思的移动体验设计要素.

抓住用户的设计:移动网页设计的信息组织

- - 雷锋网
【编者按】本文转载自 @雅秋168 的 个人博客. 对于我们中很多人来说,移动端设计是一个崭新的机会. 但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢. 当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局. 当你开始组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清晰的标签(labeling),平衡的宽度和深度,妥当合理的心智模型,这些仍旧十分重要.

移动设计需避免四种常见的用户体验失败

- - 36氪 | 关注互联网创业
此文是移动设计顾问Mariya Yao的文章. 2012年移动应用的下载量超过300亿,可是智能手机用户平均每周会使用的应用数却大概只有15个. 更糟的是,Localytics的研究表明,大概有22%的应用是见光死,用过一次之后就被束之高阁. 既然移动领域方面投入了那么多的时间和精力,为什么参与度还那么的低.

移动设计中需要避免的四种常见用户体验误区

- - 盒子UI
2012年移动应用的下载量超过300 亿,可是智能手机用户平均每周会使用的应用数却大概只有15个. 更糟的是,Localytics 的研究表明,大概有22%的应用是见光死,用过一次之后就被束之高阁. 既然移动领域方面投入了那么多的时间和精力,为什么参与度还那么的低. 这其中的原因肯定是很复杂的,但是应用开发过程中存在着一些屡见屡犯的错误是原因之一.

做有效的设计:移动应用中如何实时指导用户

- - PingWest
Mobile First的作者,著名的用户体验专家Luke Wroblewski是一个十分乐于分享的人,尤其是在自己开发了投票应用 Polar之后,他就经常分享自己在产品改进上的经验,最近,LukeW在自己博客的一些文章中又讲到了自己在Polar上的一些改进,探讨了在用户引导和功能位置设置上的思考.

七条守则让你为用户设计出更好的移动通讯体验!

- 章明 - 互联网的那点事
一个好的第一印象对于每一段关系来说是十分重要的. 人们总是在追寻信任及真诚,并且期待可以透過后续的相处去让他们的第一印象变得更好. 这事儿套在品牌和产品设计上也是一样的,设计就是扮演著这么重要的角色:去建立与使用者的关系以及维系品牌的承诺. 用户期待他们的移动通讯服务是有价值、高性能的且易于使用的,然而,因为在设计中的种种限制,常常不能满足使用者对于手机服务的所有要求,你们可能会小看了这件事的重要性,这些与用户体验相关的设计对使用者来说是不可以被忽视的,事实上,用户使用体验的设计应该被列为手机设计中的十分关键的一环.

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.