[译]空状态的设计

译注:有时候设计师乃至所有参与开发的人员,在和APP胶着之后往往陷入了一种假想的繁忙之中,却忘记了初始的空状态,空状态至关重要,空状态决定了用户的第一印象……

原文来自realmacsoftware.com,著名的效率类应用clear便出自该团队。

————–以下是译文—————-

拿到新的APP,我最喜欢的事便是查看第一次运行时的体验并为之截图。在浏览完所有的初始欢迎界面后,我开始研究空的状态——通常是指,APP内没有内容和数据时候的试图。本质上来讲,用户的第一印象来自于,空白状态(blank state),空的状态(empty state)。这点很重要,也很有趣,因为空状态的设计甚至可以作为一个指标,一个APP细节完成程度的指标。你将会看到,空视图远非只是空白那么简单(empty views can often be far from empty)。

体贴的欢迎

或许这只是QA工程师的天性,但我还是会承认,初次使用APP,在它给予我明确证明之前,我会非常怀疑它的质量。良好的初次印象会在很长一段时间内平抚这种怀疑。

第一印象是至关重要的,如果你没有设计出一个体贴的(thoughtful)空状态,你也就为你的应用或者服务创造了一种消极的(并且是错的)印象。

The Blank Slate,来自37signals的Getting Real

欢迎新用户这是最基本的礼貌,甚至一句简单的“欢迎来到[APP Name]”也能显示出对用户的尊重。当然同等重要还有你接下来要说的:

  • 是否有什么执行关键功能的手势需要介绍?
  • 是否需要提供一些“虚假”的内容来让用户操作?
  • 是否需要给用户展示如何让他们自己添加内容?

在首次运行或者欢迎界面中文字的语气要显得友好而有有用,注意不要显得故作迁就(condescending)。

展示有用的信息来协助用户动起来并且一直使用。不要在初次使用就堆砌太多的信息。甚至不要将一个箭头指向新功能只是为了指出它是新的。是否新老用户能够很容易的发现这个功能?如果是,那就不要多此一举。

Apple在此提供了一个良好的参照来评估到底需要向用户展示多少有用的信息。Mac版的iBooks和iTunes都在首次运行采用了同样的体验。

你是否认为Apple想要用户访问iBooks Store?你是否认为Apple想要用户访问iBooks Store?

你是否认为Apple想要用户访问iBooks

iBooks告诉用户他们在界面上错过了什么,大胆的说明在书库还没有书并且清楚的指导它们如何添加图书。在空白界面上同时使用用箭头指向的商店按钮和引导按钮(call to action button)来指导用户。

iTunes同样引导用户添加(或者购买)内容。Apple同时向用户展示了一张填满了内容iTunes产品效果图,本质上展示了应用的正常面貌。

iTunes向用户展示了他们音乐库应有的样子。

在此实际上展示了一种干净而完美的界面,展示了他们的界面会看起来如何,应用的背景则可能是新安装的OS X。一个潜在复杂的应用能够做到像iTunes一样有着优美而简单的首次运行体验,不仅鼓励用户按照建议的步骤,而且让他们认真的使用应用。

清空的收件箱

很多空白状态都是引导用户添加创造内容,这不能满足所有的场景。一个很好的例子便是大家熟知的清空的收件箱(inbox Zero)。清空的收件箱指的是用户将先前内容(例如邮件)全部删除、清空或者处理之后的界面。此类界面算是一种奖励,是应用内在一定频率上用户一直正确操作想要或者说努力达到的状态。

例如,健康应用的用户在刚完成列表内的日常锻炼。健康应用在空的列表界面应该如何做或者如何建议?建议增加(或者创建新的)锻炼或许不是一个好的主意。此时更有用的建议是恭喜用户锻炼完成的很好,同时展示一个选项去增加一个提醒,鼓励用户计划下一阶段的训练。这也就促使用户进行另一个人物,同时也就鼓励用户长远的使用应用,而不是祈求一种持续、拖沓而短暂的使用。

未来我会此类中常见界面的更多细节。在此值的记住的是,这种状态在应用中不会经常出现。

探索

就像我喜欢体验初始界面一样,我也喜欢探索应用其他的空状态,解释性界面或者我不清楚细节的功能。还是Apple,Apple在APP Store提供了一个“我的附近”的功能,允许用户发现更多的应用,在此它提供了一个很棒的空状态。

Apple向新用户介绍了App Store“附近热门APP”Apple向新用户介绍了App Store“附近热门APP”

“我的附近”的初始界面不仅仅是用漂亮而,清晰的图形明显的说明了使用方法,而且使用简介的描述,不唐突的引导按钮,以及最后隐晦地向用户指出使用这个功能将会发送用户的位置信息到苹果。所有的信息在一个界面清楚展现。

值得注意的是,另一个很好的例子是,以一种友好而个性的方式将复杂的信息清晰的展示给用户。

不要有死胡同

花时间帮助用户发现应用内新的功能这很好,但也需要确保不要让用户陷入死胡同(dead end)。死胡同界面不仅仅只是一个完全空白的页面,也可能是其他的UI的其他部分没有执行合适的功能。例如,一个空白的列表中没有任何添加内容的提示或者一个界面中按钮没有任何效果却没有禁用。

错误界面或许是许多用户期待进入的死胡同。错误实际是一个应用在潜在负面情况下创造积极印象的好机会。错误显示了那里可能出错了。我喜欢观察一个应用是如何向用户轻而易举的明白哪里出错了,该如何回到正轨。

温馨提示:跟踪查看你站点的错误页面(例如404页面)。通过查看用户在引发错误的时候请求了什么,你就可以重定向常见的URL拼写错误或者搜索帮助来减少可避免的错误。

下图的错误页面,不仅安慰用户,数据是安全的,而且明显的指导用户如果愿意可以寻求进一步的帮助。这个页面远不是死胡同页面。

Dropbox在使用户安心的同时提供寻求帮助的链接。Dropbox在使用户安心的同时提供寻求帮助的链接。

甚至即使“Dropbox”在该页面图片下面并没有提供任何东西,这个错误仍然很具识别度。Dropbox在它们产品界面中统一使用相似的插图,来帮助创造一种轻松友好的体验,这在处理错误或者需要进一步支持的时候就显得尤为重要。

个性

在跨设备或者跨平台的应用中使用统一方式的空界面有助于形成应用的品牌或者个性,考虑下应用空界面在不同设备中是否需要保持相同。在Mac版Ember中我们在空界面中展示了漂亮的插图,但在Ember的iOS版中我们并没有包含任何插图,相反我们应用针对iOS7进行了特别的优化,将着重点放在了简洁和文本。

不要害怕不同。空的界面是一块空白的画布,提供了一个巨大机会来做些有趣亦或充满灵感的东西。保持特别唯一。

在Clear中显示引言。在Clear中显示引言。

Clear抓住一切机会来显示引言。经典的用例是显示在一个用户清除了一些雄心壮志的to-do列表或者完成了工作相关的任务之后空的列表界面。引言显示在所有任务清楚之后旨在激发用户做的更多,不一定要在应用本身,而是用户的日常生活。

最后,在正式使用之前最好花时间测试下这些空的界面,特别是这些空的界面是在预想之后甚至是项目之后添加的。确保能够恰如其分的应对到所有的重复发生的可能性,特别是那些呈现给用户的错误界面。

我再上文提到的领域都是一个app品质认知(perceived quality)和用户体验的促成因素。希望你已经对该领域有了深层次的了解或者现在能够被提醒。如果你还想了解其他应用空状态方面的做法,你可以访问Empty StatesLittle Big Details的博客。如果你有任何疑问或者关于本文的任何评论,我都乐意聆听。可以在Twitter随时联系我。

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus