最好的「空状态」页面设计,要让用户感受不到它的存在,像一个方向导航仪,有效引导用户很顺畅的继续体验流程,激活用户对业务的转化提升业务指标。

ue设计师都用什么工具(UE新手提升空状态页面)(1)

对于空状态页面,我们做体验设计的时候,很容易造成一种既定的心里预期就是:忽略空状态的重要性,觉得它就是一个简单的“什么都没有”的提示,认为它的价值也和它的名字一样空无意义。

其实不然,在做设计的时候,空状态的设计往往更能抓住用户心理。

那么首先我们就要了解它是什么?什么时候会出现?对应不同场景体验中,如何赋予它更高的价值?

一、什么是空状态?

空状态是指:在用户使用产品中出现的没有数据时的页面展示。

比如没有关注的人、没有发布任何内容、没有收藏和喜欢、购物车为空 、搜索结果为空、无网络等等这些页面就是所谓的“空状态”

二、什么时候会出现空状态?
  • 初次使用(出现最多):app第一次使用时 。(什么操作都没有)
  • 异常、错误等结果提示:进程中某些错误、失败,无法操作(如:搜索无结果,推荐热门搜索、历史搜索…)
  • 用户清除:清空数据后 (明确知道自己做了什么,重点是给予结果性的反馈即可。)
三、如何设计空状态更有价值?

对于新手来说,认为空状态只是一个简单的告知。用一个简单的小图标加上说明文字就搞定了,用户接受到信息之后,能做的事情好像就只有接受这个提示而已。

那用户得到了这个告知,然后该干嘛呢?在这里就遇到了阻碍。

在这个空状态的体验中,只能无能为力的被动接受一个告知,心情好时,可能会返回再去看其他的功能;心情不好时,可能就直接点击关闭离开,造成用户的流失。

这种感觉就像是我选了一条路走,走到一条河的面前,你告诉我这个河太宽了你过不去,这条路从这里中断,得回头再去看看别的路。

好烦,是不是。

你想说,我都走了一半了,现在进行不下去了,那么我前面走的那些路都白走了,除了回头重新走的打路,就不能解决这些阻碍,让我继续前进吗?比如给我座桥、或者给我支船,让我一条路顺利的继续走下去。

这个搭座桥建只船的行为,就是提升空状态的价值,给它赋予更多能力的可能性。给用户一条顺畅连贯的使用体验的同时,提升业务的转化。

那我们应该怎么来搭建这座桥,提升空页面的价值,主要有5个方法:①使用操作指引;②使用系统推荐、猜你喜欢;③使用缓存;④情感化表达;⑤提供新的任务(惊喜、创新)。

1. 利用操作指引,教育用户进入新手使用流程(常适用于:第一次使用)

对于工具类、UGC类产品,新手用户初次使用时,通常都会出现初始无数据的空状态场景,比如空着的工作任务、空着的动态、空着的作品列表、空着的文章等等。

这种初始化状态,没有任何内容,所以:需要用户进行某种操作才能产生内容的界面。

而这时的新用户是个小白,对产品没有过多了解,需要我们教用户接下来该做什么,让用户快速的进入到产品创造生产中,减少新用户流失。

解决方法:设计带有“行动性指令”文案的操作按钮、或者尝试带有“行动性指令“的交互动效,让用户创造内容。

ue设计师都用什么工具(UE新手提升空状态页面)(2)

豆瓣:利用可滑动的卡片交互形式,吸引用户参与感兴趣的话题,促成动态内容的发布。

ue设计师都用什么工具(UE新手提升空状态页面)(3)

钉钉:排列出可以做的任务主题,让用户可以“立即开始”。

ue设计师都用什么工具(UE新手提升空状态页面)(4)

小红书:微动效气泡引导用户“发布你的第一篇笔记”。

2. 系统推荐(猜你喜欢):留存用户,引流、提升业务转化(常适用于:第一次使用)

对于一些内容信息浏览页面来说,某些功能的使用与否直接影响整体业务运转,例如社交产品的关注功能、电商类产品的购物车、收藏功能等。这些功能在初始进入的时候都是空数据状态,然而商业产品对于这些数据通常都会是很重要的业务指标,比如电商类产品的商品浏览量、下单率等;比如社交产品的关注人数、点播量、点赞量等指标;再比如对信息进行搜索,无法获取数据时,产生的无结果空数据时,如何解决用户当时的心理需求?

那么该如何在“空”的状态下抓住用户的注意力,让他们开始感兴趣呢?

解决方法:利用系统推荐,把有趣的内容或者功能部分直观的展示在空状态页面,增加曝光率,吸引用户。也可以通过智能匹配同类项展示,比如关键字相似搜索结果、热门搜索等。

ue设计师都用什么工具(UE新手提升空状态页面)(5)

小米有品:空的购物车里的“为你推荐”

ue设计师都用什么工具(UE新手提升空状态页面)(6)

陌陌:没有关注时,为你推荐优质用户及内容,吸引观看并关注

ue设计师都用什么工具(UE新手提升空状态页面)(7)

网易云音乐:没有关注时,推荐你可能感兴趣的人

ue设计师都用什么工具(UE新手提升空状态页面)(8)

多点:搜索无结果时,推荐“热卖商品”

3. 使用缓存(适用于:错误提示无网络)

无网络是一种很特殊的空状态,最投机取巧而且效果极好的处理方法,就是“使用缓存”,把之前加载好的页面内容存储下来,再次进入时先展示这部分内容。

ue设计师都用什么工具(UE新手提升空状态页面)(9)

头条:没有网络连接,可以看历史缓存视频

ue设计师都用什么工具(UE新手提升空状态页面)(10)

网易云音乐:无可用网络,你可以播放已下载的音乐

4. 情感化设计(适用于:第一次使用、用户清除、出现错误)

空界面在某些时候是无法避免其只是一种告知的简单存在,那我们是否还有办法让它变得有价值?

有。解决方法:品牌视觉的价值。

大部分设计师通常最容易想到的就是插图 文案的样式,那我们完全可以在插图上来想办法,比起好看的插图,利用品牌IP形象并赋予“个性”,更容易让人产生记忆点,并对之产生一定情绪记忆。

用IP来讲故事,每一个空状态的场景都是故事的一个展现,联结产品、服务的功能和独特的个性,传达产品品牌的价值观,让用户产生愉悦感,更加能记住你的产品。

ue设计师都用什么工具(UE新手提升空状态页面)(11)

躺平:设计特别符合产品的IP形象,赋予性格和情绪来设计空状态(超喜欢这个又懒又屌丝的小人儿人设,看看这完全就是宅家最真实的你…)

5. 惊喜,新的任务(常适用于:出现错误)

人是情绪化的动物,用户体验就是要让用户爽,爽就是要“愉悦、满意”,因此我们才总谈产品如何可以给用户带来惊喜,因为惊喜是情绪中最极致的愉悦与满足。

如何在信息如此少的缺省页里,给用户带来惊喜,发出惊奇的“咦”的一声感慨呢?

解决方法:创造新的任务给用户的负面情绪变为意外的惊喜,比如:小游戏、公益、好看好玩的视频动画、音乐……

ue设计师都用什么工具(UE新手提升空状态页面)(12)

内容清空时,出现一个可以玩耍的交互小游戏,将用户的负面情绪变成意外的惊喜。

ue设计师都用什么工具(UE新手提升空状态页面)(13)

页面被删除时,公益寻人启事,提升页面价值

小结一下

最好的「空状态」页面设计,要让用户感受不到它的存在,像一个方向导航仪,有效引导用户很顺畅的继续体验流程,激活用户对业务的转化提升业务指标。

用户体验就是从细节上去优化提升产品的使用感受,每一个细小环节,都可能创造设计价值。

作者:早鸭同学;公众号:早鸭同学

本文由 @早鸭同学 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

,