空状态在用户引导过程中的作用

本文为我的原创译文,原文作者:Nick Babich

原文地址:https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/#comments

用户是根据打开APP后首先看到的几个页面来建立对这个产品的期望。为了避免他们在用过一次后,就把你的APP删掉,你应该告诉他们如何去完成关键任务,激励他们以后再次使用。也就是说,你需要在用户最初与产品互动时,就成功引导并吸引他们。

引导过程(onboarding process)是让用户成功使用产品的关键。毕竟,第一印象相当重要。在此文中,我们将会介绍如何运用“空状态”的来引导用户。

什么是空状态?

对大多数APP来说,不管是新闻订阅、任务管理,或系统监控等等,内容都是它们的核心价值。因此如何设计“空状态”——在用户初次使用时,还没有生成内容或数据的页面——就尤为重要。

默认状态为空白,需要用户通过一步或几步操作来生成数据的页面,非常适合作为引导页面。除了让用户知道这里将会有什么内容,空状态还能向用户介绍如何使用这个APP。即使引导过程只有一步,适当的提示仍然能让用户确信他们的操作是正确的。


Expensify的空状态向用户介绍了应当如何开始操作


空状态在引导过程中的价值

空状态是紧密结合的引导过程的一部分,你可以利用它来指导和吸引用户,让用户通过操作来产生内容。

教育用户

首先,空状态应该帮助用户理解上下文。通常,用户知道了即将发生什么,才会觉得舒服。最好的方式是“展示或告知”:向用户展示有了内容后的页面是什么样的,或用清晰的文字说明来告知他们。

引导操作

大多数空状态会告诉用户它们是什么,为什么存在。但是,有效的空状态会更进一步引导用户:接下来能做什么。教育用户是很重要的,但好的空状态要能够成功引导用户行动。将空状态看作一个起始点,并利用它来激发用户的操作。

创造愉悦的用户体验

你的APP不仅要实用(能为用户解决某个问题)、好用(容易学习和使用),也应该令人愉悦。空状态是与用户建立良好关系,并让他们了解你的APP个性的绝佳机会。


如何设计一个好的空状态

虽然空状态能够吸引用户,但在设计和开发过程中,它却往往被忽略。因为我们通常习惯于设计一个内容充分的页面,一切都被安排的井然有序。然而,当用户还没有完成必要的操作来产生内容时,我们该如何设计界面?空状态恰恰是一个体现创意和可用性的好机会。

避免让用户陷入死胡同

对一个空状态页面来说,最糟糕的设计是让用户陷入了死胡同。这会给用户带来困惑,并增加不必要的点击。比较一下Modspot的这两张图片:第一张是Modspot目前的空状态页面,设计的很巧妙,能引导新手用户进行下一步的操作,让使用体验更流畅。


第二张图是我针对同一个页面所设计的假版本,来说明如果缺乏有效引导,空状态页面会让用户陷入死胡同,无从知道接下来该做什么。


保持空状态的简洁

美观的空状态通常是简洁的。你应该运用极简主义的设计方法,凸显最重要的内容,尽可能减少额外的干扰。你需要精心编写文字,让它一目了然,并配上简明精美的图形。


Dropbox for iOS

让空状态直观易懂

但是别忘了,空状态可不只是好看就行了。它要能帮助用户理解上下文。即便它只是一个暂时的引导步骤,设计师也应该最大化它的沟通价值,引导用户进一步的操作。

让我们来看看Google Photos的空状态页面。视觉上,它看起来很棒:布局得体,图形美观。也提供了引导,告诉用户如何创建“Collection”。


Google Photos for iOS

张扬产品个性

想给用户留下好的第一印象,光有可用性是不够的,产品个性也很重要。它能让你的APP带来愉悦的体验,令人难忘。如果你的空状态不同于竞争产品,你的用户就会注意到,并期待你整体的产品体验也独树一帜。下图显示了Khaylo Workout如何利用空状态来展现个性,图形和文字的语气都很特别。


Khaylo Workout for iOS

鼓励用户操作

在空状态页面,你的首要目标是说服用户尽快去做些什么,来消除空状态。这不仅需要告诉用户利用APP会得到什么好处,也要引导用户去完成相应的操作。

来看看Facebook Messenger的安装页面。当用户进入这一页时,会看到鼓励的文字——既介绍了Messenger的优点(可以用来拍照或录像),也显示了用户有多少Facebook好友正在使用它。“Install”按钮则将用户顺理成章地引导到了下一步。


Facebook for iOS

可能的话,提供个性化的内容

当你将APP变的个性化时,你能更快地向用户展示它的价值。个性化的主要目的是APP主动展示满足特定用户需求或兴趣的内容。它根据所掌握的用户信息,来调整内容,给出个性化的空状态页面。

可以提供启动内容,让用户能立即开始浏览你的APP。比如,一个阅读APP可以基于用户信息,为他推荐几本可能感兴趣的书。


在用户界面中融入情感

空状态能展示你业务或产品人性化的一面。正面的情感刺激能激发用户参与。至于空状态传递哪种情绪,取悦于你产品的目的。下图Google Hangouts的空状态,就展现了情感化的一面,能激励用户在Hangouts上获得邀请。


Google Hangouts for Android

当然,像这样去展示情感是有一定风险的——有些用户可能理解不了,甚至会厌恶。不过也没什么,用户能对你的设计产生情绪反应,总比显得无动于衷要好。

展示成功状态

当新手用户完成了一个重要任务,是你在用户与产品间建立积极情感联结的好机会。承认用户的进步,并向他们的成功表示祝贺,能让用户知道他们做的很好。

成功状态是庆祝用户顺利完成任务,并提示他们进行进一步操作的绝佳机会。例如,对Writeupp的用户来说,完成任务列表显然是一项成就。此时,APP给出祝贺语:“干的好!”,就是一种正强化。这样的成功状态能让用户觉得开心,而给出接下来的操作提示,则能让用户继续使用这个产品。


WriteUpp for iOS


进一步探索

下面是更多学习资源,感兴趣的话可以去看看:

· Useronboard上有很多引导体验的案例和详细解读

· Uxarchive也是一个非常好的网站,包含了许多热门APP的引导页面

· Ui-patterns收集了许多Web-APP的用户引导界面

· Emptystat.es是用户提交的各种空状态页面合集


总结

空状态绝不应该是空空如也。不要让用户在初次打开一个APP时,面对一个空白的界面。好好去设计空状态,因为它并不是用户体验中一个暂时或微不足道的部分。事实上,它和其他部分一样重要,在驱动用户参与,带给用户愉悦上扮演了重要角色。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容