[译文] 为什么空白状态值得设计

文章来源 《 Why Empty States Deserve More Design Time

进入译文

一个空白状态,或者无数据状态,一般都是设计师最后才产出的「附属品」。仅因为它们常被误解的「临时」性质,或者大家觉得它们只属于体验的一少部分,因此不受重视,被放到最后才做——如果真的做。

别被它们的名字所误导。在用户下载 apps、清除内容、出现不明状况的时候,空状态是提升体验、愉悦用户的一大法宝。

人们一般认为空状态就是用于首次使用、用户清空内容或者出错状况。现在让我们想想下面这些被忽略的用户真实感受到的场景:

  • 第一印象
  • 成功的一刹
  • 失败的瞬间

这些用户感受的触发点,可以引发以下两个结果:

  1. 短暂或者永久地放弃产品
  2. 更牢固的关系和更高的忠诚度

你想得到哪个结果?这就取决于你花多少心思去设计空白状态这个细微却重要的元素。

第一印象的持续影响

要让用户在经过你精心设计的 UI 界面填满数据,不能仅靠运气。最首要也是最重要的任务就是,确保用户在应用内停留得足够久,而且执行了足够多的任务,他们才会欣赏到你的精美设计。

这是一个关于那些变化无常的用户的贴心提醒,特别是那些首次使用你家产品的用户。

数据显示,app 的平均日活跃用户(DAUs 日活)在头 3 日下降 77%。(可以理解为第 3 日留存仅有 23%)

更糟糕的是,30 天内,DAUs 流失 80%。

这么低的留存率,难道是因为糟糕的产品设计?某些情况下,是这样的。

但不是全部。

用户不断尝试大量的 apps,但都在头 3-7 天内停止试用并作出选择。对于那些「优秀」的 apps,大部分留存用户在 7 天内保持高活跃度。关键就是在这 3-7 天内把用户留住。
—— Ankit Jain

那么问题来了,如果你知道用户在一周内不断寻找一个离开你的理由,你怎样才能利用空白状态来提高早期的留存率?

如何处理空白状态

用户「首次使用」你的产品时会遇到空白状态的页面,这也是用户由浅入深接触你的产品的必经之路。在这个过程中,一个优秀的空白页面应该达成三个目标:

  • 教育 Educate
  • 取悦 Delight
  • 引导 Prompt

1. 教育你的用户

空白页的首要目标就是教育用户如何使用你的产品。如果他们不明确产品的功能,就会轻易放弃。

不要依赖视频教程或者引导流程来教育用户,不要指望用户认真观看并完全理解。因此更需要认真对待你的第一个空白页。

空白的回收站页面——回收站里的东西将在60天后被删除

一个优秀的空白页面应该解决如下问题:

  • 何物(What):解释这个页面在说什么
  • 何地(Where):告知用户当前的位置,以及接下来可以干什么
  • 何时(When):解释此处空白在什么情况下进什么操作将出现怎样的数据

 空白的共享链接页面——你分享的东西会出现在这里

通过「画中话」达到教育目的。「画」是通过填充数据样本来告诉用户这个页面将会是什么样子,或通过文案——「话」来传达这些信息。

数据样本可以是完全虚构的,可以把 CEO 或者名人的真实数据代入其中。当然,能够为用户提供有实质帮助的内容建议就最好了。这些「已完成」的真实任务或部分流程数据,会帮助新手用户建立可见的预期,增加他们参与其中的欲望。

2. 取悦你的用户 Delight your user

 Bitbucket 的 Commit 记录空白页面「我没有任何 commits,显得我很无用,让我很难过(搞定它)」

也许,教育型空白页引导最多只能让你留住用户。用户的时间是宝贵的,他们不会毫无目的地多花一秒钟在你的产品身上。所以对于设计师来说,每一个细节都是获得用户信任的机会。

良好的第一印象不仅与可用性有关,还与「个性」有关,试问自己以下问题:

  • 有啥让人出乎意料的新招?
  • 能否让用户发自内心地笑出来?
  • 能否给用户传达出品牌的「个性」品味?

 收藏夹空白状态

满大街都是免费使用或体验,用户倾向于尝试和比较可以解决同一问题的不同产品。

你怎样才能鹤立鸡群?

如果你的空状态有那么一点与众不同,用户就会感觉到你整个产品体验的不同之处。

因此,你需要对比一下竞品是如何处理空白状态的。如果无法找出合适的竞品,最好的方法就是直接问你的用户他们在使用什么产品。

在空白页取悦用户的方法有:

  • 突出品牌:介绍和强化品牌元素
  • 与众不同:制造创意,或秀一下小幽默
  • 产生共鸣:展示产品人性化的一面

3. 引导行动

 Webflow 的空白任务页面

营造良好的第一印象固然重要,但真正牛逼的是能驱动用户去执行任务,让用户有填满屏幕的冲动。

试着把这个空状态当作一个缩小了的着落页。在保持最简设计的前提下,好的空状态可以传达出一个特殊功能,不断诉说着这个功能可以给用户带来什么价值,从而驱动用户迈出下一步。

以下方法可帮助你在空白页引导用户去行动:

  • 动机:用激励性的语言或设计来刺激你的目标用户,例如「不要犹豫了,赶紧拨打电话订购吧!」
  • 游说:价值诱惑不仅用与着落页,也可以在用户执行任务的过程中,适时地展示。
  • 直接:在任务一开始就向用户展示最优的唯一路径。向他们提供一个「行为召唤」按钮,或者用小箭头指向行动入口。这时候不适合向用户提供选择,而且越简单越好。如果一开始就需要用户创建内容,最好提供一些可供他们借鉴的初始化内容。

重视空白页

最好的界面设计通常也最具挑战性,它要求在界面信息与交互上取得微妙的平衡。但是,一个简单的空白页可能就会成为用户与精美界面之间的屏障。难道空白页不值得你投入更多时间和关注?

这里有更好的翻译 Be For Web

许可君.Suer wechat
本文同步更新至我的公众号与知乎专栏