本文为我的原创译文,原文作者:Nick Babich
原文地址:https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/#comments
用户是根据打开APP后首先看到的几个页面来建立对这个产品的期望。为了避免他们在用过一次后,就把你的APP删掉,你应该告诉他们如何去完成关键任务,激励他们以后再次使用。也就是说,你需要在用户最初与产品互动时,就成功引导并吸引他们。
引导过程(onboarding process)是让用户成功使用产品的关键。毕竟,第一印象相当重要。在此文中,我们将会介绍如何运用“空状态”的来引导用户。
什么是空状态?
对大多数APP来说,不管是新闻订阅、任务管理,或系统监控等等,内容都是它们的核心价值。因此如何设计“空状态”——在用户初次使用时,还没有生成内容或数据的页面——就尤为重要。
默认状态为空白,需要用户通过一步或几步操作来生成数据的页面,非常适合作为引导页面。除了让用户知道这里将会有什么内容,空状态还能向用户介绍如何使用这个APP。即使引导过程只有一步,适当的提示仍然能让用户确信他们的操作是正确的。
空状态在引导过程中的价值
空状态是紧密结合的引导过程的一部分,你可以利用它来指导和吸引用户,让用户通过操作来产生内容。
教育用户
首先,空状态应该帮助用户理解上下文。通常,用户知道了即将发生什么,才会觉得舒服。最好的方式是“展示或告知”:向用户展示有了内容后的页面是什么样的,或用清晰的文字说明来告知他们。
引导操作
大多数空状态会告诉用户它们是什么,为什么存在。但是,有效的空状态会更进一步引导用户:接下来能做什么。教育用户是很重要的,但好的空状态要能够成功引导用户行动。将空状态看作一个起始点,并利用它来激发用户的操作。
创造愉悦的用户体验
你的APP不仅要实用(能为用户解决某个问题)、好用(容易学习和使用),也应该令人愉悦。空状态是与用户建立良好关系,并让他们了解你的APP个性的绝佳机会。
如何设计一个好的空状态
虽然空状态能够吸引用户,但在设计和开发过程中,它却往往被忽略。因为我们通常习惯于设计一个内容充分的页面,一切都被安排的井然有序。然而,当用户还没有完成必要的操作来产生内容时,我们该如何设计界面?空状态恰恰是一个体现创意和可用性的好机会。
避免让用户陷入死胡同
对一个空状态页面来说,最糟糕的设计是让用户陷入了死胡同。这会给用户带来困惑,并增加不必要的点击。比较一下Modspot的这两张图片:第一张是Modspot目前的空状态页面,设计的很巧妙,能引导新手用户进行下一步的操作,让使用体验更流畅。
第二张图是我针对同一个页面所设计的假版本,来说明如果缺乏有效引导,空状态页面会让用户陷入死胡同,无从知道接下来该做什么。
保持空状态的简洁
美观的空状态通常是简洁的。你应该运用极简主义的设计方法,凸显最重要的内容,尽可能减少额外的干扰。你需要精心编写文字,让它一目了然,并配上简明精美的图形。
让空状态直观易懂
但是别忘了,空状态可不只是好看就行了。它要能帮助用户理解上下文。即便它只是一个暂时的引导步骤,设计师也应该最大化它的沟通价值,引导用户进一步的操作。
让我们来看看Google Photos的空状态页面。视觉上,它看起来很棒:布局得体,图形美观。也提供了引导,告诉用户如何创建“Collection”。
张扬产品个性
想给用户留下好的第一印象,光有可用性是不够的,产品个性也很重要。它能让你的APP带来愉悦的体验,令人难忘。如果你的空状态不同于竞争产品,你的用户就会注意到,并期待你整体的产品体验也独树一帜。下图显示了Khaylo Workout如何利用空状态来展现个性,图形和文字的语气都很特别。
鼓励用户操作
在空状态页面,你的首要目标是说服用户尽快去做些什么,来消除空状态。这不仅需要告诉用户利用APP会得到什么好处,也要引导用户去完成相应的操作。
来看看Facebook Messenger的安装页面。当用户进入这一页时,会看到鼓励的文字——既介绍了Messenger的优点(可以用来拍照或录像),也显示了用户有多少Facebook好友正在使用它。“Install”按钮则将用户顺理成章地引导到了下一步。
可能的话,提供个性化的内容
当你将APP变的个性化时,你能更快地向用户展示它的价值。个性化的主要目的是APP主动展示满足特定用户需求或兴趣的内容。它根据所掌握的用户信息,来调整内容,给出个性化的空状态页面。
可以提供启动内容,让用户能立即开始浏览你的APP。比如,一个阅读APP可以基于用户信息,为他推荐几本可能感兴趣的书。
在用户界面中融入情感
空状态能展示你业务或产品人性化的一面。正面的情感刺激能激发用户参与。至于空状态传递哪种情绪,取悦于你产品的目的。下图Google Hangouts的空状态,就展现了情感化的一面,能激励用户在Hangouts上获得邀请。
当然,像这样去展示情感是有一定风险的——有些用户可能理解不了,甚至会厌恶。不过也没什么,用户能对你的设计产生情绪反应,总比显得无动于衷要好。
展示成功状态
当新手用户完成了一个重要任务,是你在用户与产品间建立积极情感联结的好机会。承认用户的进步,并向他们的成功表示祝贺,能让用户知道他们做的很好。
成功状态是庆祝用户顺利完成任务,并提示他们进行进一步操作的绝佳机会。例如,对Writeupp的用户来说,完成任务列表显然是一项成就。此时,APP给出祝贺语:“干的好!”,就是一种正强化。这样的成功状态能让用户觉得开心,而给出接下来的操作提示,则能让用户继续使用这个产品。
进一步探索
下面是更多学习资源,感兴趣的话可以去看看:
· Useronboard上有很多引导体验的案例和详细解读
· Uxarchive也是一个非常好的网站,包含了许多热门APP的引导页面
· Ui-patterns收集了许多Web-APP的用户引导界面
· Emptystat.es是用户提交的各种空状态页面合集
总结
空状态绝不应该是空空如也。不要让用户在初次打开一个APP时,面对一个空白的界面。好好去设计空状态,因为它并不是用户体验中一个暂时或微不足道的部分。事实上,它和其他部分一样重要,在驱动用户参与,带给用户愉悦上扮演了重要角色。