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

标签: 移动设备 用户体验 设计 | 发表时间:2012-11-20 20:38 | 作者:qinjian623
出处:http://www.yeeyan.org

译者 qinjian623


移动用户数和移动的使用都在积极不断增长. 随着越来越多的用户将自己的工作越来越多的转换到移动设备上,关于如何通过提高移动设备的各种因素来整体上创造更好的移动设备使用体验.

移动用户的使用体验包括用户使用移动设备的前后的看法和感受.而途径可能是通过浏览器或者是应用,而且移动设备也包括从低端的功能手机到高清平板的各种种类.

想要创造一个可以赢得用户的移动设备体验,要求我们重新思考原来在桌面环境中使用的各种设计.移动设备有其自己的特点,比如小屏幕的操作、设备硬件特性的不同、使用和网络连接在移动设备上的限制,还有移动设备会随着使用者的移动一直处在不断变换的环境中。而这些都是很复杂的问题。

通过对移动用户体验的核心组成部分的分析,会给我们在创建和评价良好的移动体验上提供一个很好的概念性的框架, 更好的以用户为中心进行设计。功能、上下文、用户输入、内容和影响还有其他的部分共同组成移动用户体验的概念。


The elements of mobile user experience

这些因素的相关性会随着不同设备而改变(比如功能手机、智能机、平板)同时也会随着不同的表现形式而改变(比如通过应用或者通过Web)。本文简要的介绍了每个元素,阐述在每个因素上的良好的设计准则。


功能

这点要求用户要能够通过工具或者特性完成自己的任务,达到自己的目的.

准则

从其他的途径获得的重要的或者是现有的核心功能在移动环境下也是十分重要的.比如航空公司就需要包括航线信息和登机报到的功能.对于化妆连锁店Sephora,包括支持通过移动设备方便访问产品评论信息提供更好的店内购物.提供一些移动设备专有的相关功能(比如条形码扫描、图像识别),或者其他移动设备可能情况下提供的功能来吸引和取悦用户.Old Navy的应用提供了令人惊喜的游戏,或者用户通过收集店面的logo来获得打折. 请确保基本的功能和内容都专门为移动设备做了优化.比如,确保商店定位确实是根据设备位置计算的最近的店面,信息中显示的电话号码可以直接点击拨号. 包含于自己业务有关的功能.零售网站和应用就要包括产品搜索、订单状态和购物车。保持不同访问渠道下关键功能的一致性。无论是移动设备访问还是其他渠道,登陆的用户应该可以看到他们的个人设置。如果移动设备上没有提供某一项功能,就需要引导用户到合适的访问渠道上,比如Triplt就在建立个人网络上这样做。

TripIt directs users to the website for setting up a network


信息组织

这点要求在功能和内容的组织结构上要符合逻辑,好让用户可以方便的找到信息完成任务。包括导航、搜索、标签。

准则

在主页面上提供主要功能和内容的链接,根据用户需求来确定优先级别。 Moble Design Pattern Gallery 有很多专为移动的主要和次级导航的设计模式的例子.其中很多都是垂直的设计而不是像桌面那样的水平放置.

要让用户在最少的步骤和点击内就能浏览到最重要的信息和功能.为小屏幕优化导航往往是追求广而浅而不是深入.虽说 三次点击不是一个魔法数字,但是用户应该能够清楚的知道自己的每次点击都在更进一步的完成自己的任务.每增加一个层次都会带来更多的点击和更长时间的页面加载,同时也消耗更多的带宽.

注意区分触摸屏和非触摸屏用户的不同浏览需求.在触摸屏上,每个导航按钮的大小都需要起码30pix的宽度或者高度.对于功能手机来说,最好可以提供键盘快捷键,这样用户就可以通过键盘上的0-9的数字键快速定位了:

Cater to feature phone users, as CNN does with access keys, not as Delta does by making the first action to be nine key presses downs

注意照顾功能手机用户,比如CNN就提供了快捷键(左图),而不该像Delta那样,首先就要连按九次按键才能开始浏览(中、右图)。提供良好的提示让用户可以知道自己浏览的位置、如何返回、如何直接回到开始。移动上的导航条都是将原来的"返回"按键替换成为显示表示用户访问位置或者类别的标签.对移动网站来说,使用标准的约定,比如提供一个返回开始页面的家型图标,特别是到导航不是在每个页面上都重复的情况下.

使用简洁、明确、一致的、描述性的标签在构成导航栏项和链接。这已经是一个很好的实践方法了,不过在小型移动设备上,这一点更加重要。

扩展阅读

Chapter 1: Navigation,” Mobile Design Pattern Gallery, Theresa Neil


内容

也被称作"在你网站上东西"(Lou Rosenfeld 和 Peter Morville 在万维网的信息结构中提到过),内容就是提供给用户的不同格式表示的各种类型的资料,比如文本、图片、视频。

准则

展示给用户的内容要做出适当和平衡的组合(比如,产品信息、社交内容、指导和支持的内容、营销的内容)。

如果可以方便用户在移动环境下完成工作或者增加内容的价值或者可以支持网站的设计目的,那么就可以应用多媒体的内容。一般来说,多媒体可以作为用户寻找消遣或者娱乐的时候(比如新闻或者有趣的片段内容)提供的首选内容,或者可以更好的指导用户(比如,如何使用应用或者新推出的功能)。

请永远让用户保持对多媒体内容的控制权,而不是自动的播放视频或者身影,用户应当可以选择跳过或者停止多媒体内容,在有多媒体的内容的情况下,也请注意其耗费的带宽问题。确保内容是适合移动环境的。

就像曾经区分印刷和网络那样,在移动设备上的内容应该专门为短暂的注意力时间设计。对设备上的图片和媒体做优化,比如为小设备做缩放、 在New iPad上有足够的清晰度

确保主要内容是可以在目标平台上展示的。即使现在大众的网站上还要求iOS设备的用户去下载Flash.

VW asks iPad users to download an unsupported Flash plugin

扩展阅读

Mobile Content: If in Doubt, Leave It Out,” Jakob Nielsen, Alertbox

Mobile Content Strategy Link-o-Rama 2011,” Karen McGrane


设计

就是与移动相关的视觉效果和互动体验,包括平面设计、品牌、布局。

准则

请记住:“移动化不代表最小化”(Barbara Ballard所说)还有"不要简单缩减而是重新思考"(Nokia).这都说明的是移动设计不应该老调重弹桌面设备的设计. 要以直观和快速浏览为宗旨.直观就要求能够快速简单的通过可视的设计传达信息. 保持和其他途径或者体验的视觉一致性(移动设备、应用、Web、印刷品还有真实世界),这包括颜色的应用、排版和个性化的内容。即使看不到品牌名,在下面这幅图片中也很容易识别出Amazon的应用。

Amazon's visual design is easily recognizable

引导用户从最初和最突出的设计元素到其他的元素以完成他们的任务。这就是所谓的视觉流。好的设计可以将视觉元素与信息结构、内容和功能良好的结合在一起,传达品牌形象、引导用户。

在设计的过程中考虑纵向和横向的两种布局。各种设备越来越多的提供多种布局支持和自动调整布局满足设备的实际摆放。保证用户访问内容的位置在不同方向的布局下的稳定。可能的话,在不同的布局下显示不同的或者额外的功能,比如ING所做的:

The ING app informs users about additional features in the landscape mode

扩展阅读

Designing Glanceable Peripheral Displays” (6 MB, PDF), Matthews, Forlizzi and Rohrbach, UC Berkeley

Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design, William Lidwell, Kritina Holden, Jill Butler



用户输入

主要集中在对用户输入信息的需求上,在移动设备上应当尽量减少需要数据输入的地方,而且应当可以当用户单手完成输入。

准则

精良减少需要输入的地方。或如Luke Wroblewski 在他的书中(Mobile First)所说,“在移动设备上,就要十分看重效率而且要简化简化再简化”。注册表格只需要基本的内容就可以,尽量使用可以更短的输入作为替代,比如邮编就比城市和省份更简单。最佳反例就是大众的试驾预约页面,移动版比桌面版的输入框更多(多余的输入框都在下图中高亮了)。

Volkswagen's mobile form to schedule a test drive is more tedious than the desktop version

只要可能就显示一个默认值。可以是用户上次选择的(比如飞机场或者火车站)或者最进场选择的项目(比如查看航班信息时可以使今天的日期)。

United and NJ Transit use defaults to simplify user input

根据设备的情况提供其他的输入方法。应用程序可以使用不少设备内置的输入方法,包括,动作、摄像头、陀螺仪还有声音。但是移动网站在这点上也处于起步中,尤其是地理位置。

使用合适的输入方法、显示合适的触摸键盘,以免用户费力去在键盘上找按键。记住,对于只有一个数字键盘的功能手机,输入数据也更加麻烦。对不是很敏感的应用程序,可以允许用户在移动设备上保持登陆状态,保存诸如电子邮件地址、用户名等等信息,因为移动电话相比平板更私人一点,不会被多人共享使用。

Use appropriate keyboard; examples from the iOS Developer Library

要提供自动完成、拼写检查还有预测技术,这样可以减少输入数据时的麻烦,同时也会减少错误也要有可以很好从错误输入中恢复的能力。验证码一类不合适的功能也可以去掉。

扩展阅读


移动环境

移动设备会在任何时间任何地点使用。移动环境就是使用时的环境和情况,任何影响用户和界面交互的因素都包括。移动环境十分重要,因为它会一直快速变化。我们往往集中在考虑分心、多任务、运动、比较暗的光线还有较差的连接的情况,但同时也会有其他的极端情况:通过快速的WiFi连接在一个十分轻松的环境下使用平板。

Design Sketch: The Context of Mobile Interaction

The Context of Mobile Interaction,” Nadav Savio

准则

使用设备的特性和功能来预测和支持用户所处环境的使用。iCookbook应用程序就允许用户通过语音指令来完成菜谱。当你双手沾满面糊的时候,这一功能就十分不错。

注意根据时间还有用户使用应用的时间来改变应用。NavfreeGPS应用就可以根据不同的时间自动切换白天夜晚模式。在晚间显示低眩光地图,可以让用户更安全的在夜间驾驶汽车。

GPS app sensing context

使用位置信息来确定用户的地点,然后显示附近的相关内容和报价。通过谷歌搜索“电影”就可以得到附近正在播放的电影和它们的放映时间,如果在线可以购买的话还会提供购买门票的链接。

利用用户提供的信息,并且要考虑到他们的喜好和设置。在需要转乘的情况下,Triplt会告诉我航班信息和下一个航班的登机口的信息,还有转乘之间的这段休闲时光。United的应用就没有类似的功能,尽管它掌握更多关于我的信息。他其实可以告诉我怎么从我目前的位置到下一个航班的位置,同时标明途中United Club的位置。这样由于我是俱乐部成员,我就可以很舒服的在俱乐部里度过我的两个小时的等待时间。

根据设备来提供合适的用户体验,比如小屏幕设备就需要移动体验,而平板就可以提供类似桌面的体验,同时也应该给用户提供增强的功能的选择。最近就有关于如何将这一理念提供给用户的讨论,比如 Jakob Nielsen就建议独立的提供给移动设备的网站Josh Clark则认为网站应该根据不同的设备自动调整其他人则认为他两都错了

扩展阅读

The Context of Mobile Interaction” (0.2 MB, PDF), Nadav Savio and Jared Braiterman

On Mobile Context,” Jason Grigsby Don’t miss the links to resources on the mobile context near the end.

When and Where Are People Using Mobile Devices?,” Luke Wroblewski


可用性

这是一个根据信息架构、界面设计、内容还有其他因素共同组成的用于评价能否用户实现其目的宏观指标,

准则

哪些可以被选择、哪些可以点击或者滑动都应该一目了然(这也被称为预示性),特别是在触屏设备上更是如此。 Nielson Norman集团有关iPad的可用性的调查的一大发现就是用户往往不知道哪些地方是可以触摸或者点击的。另一个问题是滑动的歧义:在相同屏幕下不同区域的滑动手势产生的是不同的效果。确保可触部件的一目了然,而链接、图标、按钮这一类的部件应该是明显的可以点击的。

对于触屏设备,确保触摸的目标的大小合适,有良好的空间以防止误操作。同时也要注意将可触的目标放置在屏幕中合适的位置上,比如,将一些破坏性的操作(如删除)放在 Luke Wroblewski在他的书Mobile First中说的“Reach”的区域里:

Zones showing ease of access for right handed touch-screen use from Mobile First

根据约定和固有的模式来减少用户的学习曲线,让移动体验更加符合人类的直观印象。专用的应用应该遵循特定于平台的标准和准则。各种官方的UI和UX的准则的链接都被“ UI Guidelines for Mobile and Tablet Web App Design”一文收集了。

确保在不同情况下的可用性,包括日光刺眼的情况、改变观看的角度和防线。这都需要考虑比如对比度、色彩、板式、字体大小一类的设计元素。

不要依赖那些在用户的设备上不是很通用的技术,包括Java,JavaScript, cokies,Flash,frames,弹出窗口还有自动刷新。打开新窗口或者从应用中打开浏览器的时候要警告用户,防止覆盖已经打开的标签。

扩展阅读

Usability of iPad Apps and Websites,” Nielsen Norman Group

UI Guidelines for Mobile and Tablet Web App Design,” Max Firtman

Mobile Usability Update,” Jakob Nielsen, Alertbox


诚信

主要与用户使用应用或者网站时的信心、信任和舒适度的水平相关。根据 2011年Truste和Harris Interactive的一个研究,隐私和安全性是只能手机用户最关心的两个方面:

Privacy and security are the top two concerns among smartphone users

准则

在没有用户允许的情况下,不要收集或者使用用户信息(比如位置信息、联系人列表)。今年的前几个月已经有很多应用偷偷复制手机地址薄的报道了, 用户监管部门都明确表示了反对。

要方便用户来控制自己的个人信息如何被共享,比如在收集位置信息前询问客户,让用户选择是否提供有针对性的广告。

明确的声明你的业务实践(包括隐私、安全和回报),并且要明确的展示出来(比如在注册页面显示你的隐私和安全策略的链接)。这些策略应该在移动用户体验中的第二重要的位置出现(比如页脚或者一个“More”的选项卡)。通过显示可信任的标志来加强信誉,特别是用户需要提供个人或者财务信息给你的时候。

要在设备上合适的地方提供一个目前的政策的简明的综述,并且要有提供email给用户的选项。隐私和安全策略出了名充满漫长和枯燥的法律术语,所以用户往往都是盲目的点击好继续他们真正想要做的事情,所以让对良好格式有兴趣的用户能够更好的阅读。显示法律术语的时候,不要破坏用户的工作流程。让他们 能够回到之前被打断的地方,而不是从头开始。

扩展阅读

Layered Policy Design“, TRUSTe Blog


反馈

用来吸引用户的注意力,以显示一些重要的信息。

准则

尽量减少应用显示的警告的数量,而且要保证每个警告都提供了重要的信息和有效的选择。娱乐一下,可以看下 Chris Crutchfields的关于过量的通知和警告的视频

确保警告的简介明确,解释清楚产生警告的原因和用户应该如何处理,同时等待点击的按钮也要有十分明确的名称。

提醒应该简短和有信息量,不要和用户正在做的事情有牵扯,同时也应该方便用户根据提醒选择采取行动或者关闭提醒。

提供操作后的反馈和确认信息的同时也要注意不能打断用户原有的工作流。如果你的应用显示图标上的通知和状态栏通知,要让图标上的信息保持更新,只有用户已经获得了信息后才能将其清除。Chase就在用户查看通知的时候清除了图标上的通知,甚至会在用户还不知道是自己的哪个帐户触发的图标通知之前,这样就迫使用户找遍自己所有的帐户来看触发通知的原因。

扩展阅读

Mobile Notifications,” Fred Wilson

The Future of Mobile Notifications,” True Ventures

Chapter 8: Feedback and Affordance,” Mobile Design Pattern Gallery, Theresa Neil


帮助

有关帮助用户使用网站或者应用的选项、产品或者服务。

准则

要便于用户访问帮助和支持选项。用户一般会在移动网站的页脚或者应用的工具栏、标签栏中查找帮助。提供多种方式获得支持,包括移动环境下的相关选项,比如自助服务的FAQ,点击通话来提供现场支持,或者接近实时的推特信息。美国运通和花旗银行这两个金融服务公司就提供了基于Twitter的支持服务。

引用第一次启动的时候要提供一个简单的快速教程和简介,同时也要允许用户选择跳过或者之后再看。

介绍新的或者独有的功能的时候(比如第一次提供在移动应用上检查存款),提供上下文相关的帮助和建议来引导第一次使用的用户。如果是用户在使用某个不太常用的功能时,也应该如此。

在适当的地方要提供帮助视频,不过也要允许用户根据自己的需求启动、暂停、停止、调整音量。请注意,有关多媒体内容的准则已经在上面的“内容”一节说明了。

扩展阅读

Chapter 7: Invitations” and “Chapter 9: Help,”Mobile Design Pattern Gallery: UI Patters for Mobile Applications, Theresa Neil

Chapter 7 is available online at UX Booth.

Top 6 Help Design Patterns for iPhone Apps,” Catriona Cornett, inspireUX


社交

与那些产生社交行为的内容和特性相关。这样有利于用户的互动和利用用户在社交网络上的影响。

准则

在社交网络(比如,Facebook页面)和本地服务上(比如Google Places、Bing Business Portal 和Yahoo Local)上有所投入。这会在搜索结果或者位置相关的社交服务上获得加分。出了你的公司名称,还应该包括你的地址、电话、URL和工作时间。

通过显示你最近的活动和方便用户粉你或者喜欢你来将你的社交网络功能整合到你的网站的移动体验上。

整合社交网络功能来方便用户更好的链接到他们自己的社交网络上。 很简单的API就能够实现分享、书签、标记、喜欢和评论的功能。邀请用户来产生内容,通过他们的移动设备来宣传你的品牌、产品和服务,作为回报可以提供一些小礼品。比如快餐连锁店Red Robin就鼓励用户分享他们的孩子在分店中阅读教科书的照片,作为回报则是一份免费的奶昔。

提供可以被分享和病毒式传播的移动服务,美国运通就提供优惠和折扣给那些将自己的网络上的资料比如Facebook、Twitter和Foursquare 同步到信用卡账户上的用户

那些依赖于用户的社交互动的应用,就需要寻找有用的、最终可以自我维持的用户产生内容的方式。比如,My TSA就有一个用户贡献的功能,显示在安检等待的时间,但是它往往显示的是过期的信息,尽管其实有些机场工作人员会利用其他物理设备来显示需要等待的时间。

市场

有关如何更好让用户发现网站和应用还有如何鼓励用户不断的重复使用。

准则

通过优化移动的搜索和发现来保证产品易于被发现,比如保持短的URL。如果有一个单独的移动网站,URL的命名就要符合规范(比如m.site.com或者mobile.site.com)。在移动搜索的结果中,提供快速访问与位置相关的内容的功能(比如,用户当前位置的方向)还有设备相关的选项(比如直接点击拨号)。

Mobile optimized formatted information for UPS, but partially missing for Fedex

移动格式的信息在UPS(左图)上就有专门优化,而FedEx就缺失了部分(右图)。 QR码应该指向一个为移动优化的登陆界面,而非传统的需要缩放的页面或者更糟的是直接是原来那种需要用户仔细寻找信息的主页。多说一句, QR码应该要足够大,而且清晰度要足够手机识别和解码。

电子邮件中也要包含一栋友好的格式的信息的链接,而链接应该直接指向相关页面,而非CVS/pharmacy那样,直接指向移动网站的首页。

在其他渠道上也要注意宣传(比如电视、印刷物、店内广告),提供下载使用应用的刺激手段,一般都是折扣和优惠信息一类。如果你的应用有价格,那么可以在竞争激烈的市场上通过限时优惠来吸引用户购买。或者是通过限时免费的市场来提高应用的排名。

等用户开始使用了,记得提醒他们在市场上为应用打分,或者分享使用信息到社交网络上,但是必须让用户可以选择推迟或者关闭这一提醒。这不仅让应用得以口口相传,也让你知道用户对你的应用喜欢哪些部分和不喜欢哪些部分。smalltech的“ 控制你的应用评论”讨论了如何鼓励高兴的用户发送评论,而不高兴的用户通过email来反馈信息。

扩展阅读

iPad App Marketing Case Study: Flickpad,” Chad Podoski, Mobile Orchard

The Art of Launching an App: A Case Study,” John Casey, Smashing Magazine

How to Market Your Mobile Application,” Michael Flarup, Smashing Magazine


总结

移动用户体验还是一个快速发展的领域,各种新的改进也层出不穷。我们简要的说明了移动用户体验的主要一个因素。每个因素都写明一些需要注意的设计准则。如果能够十分注意所有这些设计因素,我们就能够提供给用户十分良好的移动体验的产品。

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

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

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

移动设备正在伤害桌面用户体验

- fx_wonder - Solidot
polymoda 写道 "作为输入方式,手指触摸的精度要远远小于鼠标,于是大量为触摸优化的界面出现. 但这些平台在为触摸优化之后,却无视了桌面用户的需求. 拥有鼠标的桌面用户,原本可以拥有更好的用户体验,但却被迫使用因触摸优化而“降级”的界面. 越来越多的人开始抱怨Win8和Gnome(Unity)幼稚的设计.

移动设备手势设计初探

- redhobor - 腾讯CDC
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.

谷歌用户体验设计准则

- 雄杰 - 所有文章 - UCD大社区
Googl用户体验团队致力于创建有用的(useful)、快速的(fast)、简单的(simple)、有吸引力的(engaging)、创新的( innovative)、适合大众的(universal)、有用的(profitable)、漂亮的(beautiful)、值得信赖的(trustworthy)、个性化的(personable)的应用.

复杂性和用户体验设计

- - ITeye资讯频道
每一个交互设计师应该都怀有一颗追求简单的心——轻盈的操作、简易的流程、干净的界面. 每每提及复杂性,必然会想到其对立面——简单. 所谓简单,就是要去除不必要的干扰,让用户直达目标. UX的使命之一就是:将复杂的流程简单化. 其间,纠结一个Button的摆放、大小、颜色,又或者研究各类用户群体的“脾气”.

交互设计,产品设计与用户体验设计

- 章明 - 所有文章 - UCD大社区
交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念;. 一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法:. 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域.

为移动设备一致体验做设计

- Estella - 所有文章 - UCD大社区
原文designing for the future web: http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/. 这里只了提些主干出来,强烈推荐原文,尤其技术方面的很多tips有深入的讲解. 本文推崇的是“因为现代人越来越生活net依存状态,ipad,3g等等,各种情况下人时时刻刻都在online状态中.

移动设备手势设计初探 – 腾讯CDC

- 奥斯汀Outman - cdc.tencent.com
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.