浅谈空页面状态

96
卢蔚
2016.09.04 18:20* 字数 2410

设计师在做设计的过程中,往往会考虑各种状态下的页面设计,却常常会忽略一个状态——空状态。空状态(Empty States),顾名思义就是空白或零数据状态。例如一个视频列表区域内没有视频,这个时候的视频区域就处于空状态;网站购物车内没有商品时,这个购物车就处于空状态;包括像我们常见的404出错页面等,都属于空状态。如果当这个区域处于空状态而设计师没有对该区域进行相应的处理时,用户进入之后就会看到空荡荡的一片,很有可能用户会迷失,不知道下一步该做什么。这样的空状态用户体验非常的差。大多数设计师都是在主要流程界面设计完成之后才会想到要进行空状态的完善和处理,因为不管是从性质上还是其展现形式上看,空状态是一个临时性的很短暂的状态,显得有些微不足道。

可是,空状态真的像我们所想的那样暂时且微不足道吗?答案是否定的,空状态在很大一定程度上对产品的用户体验起着不可忽视的决定性作用。

在使用产品的过程中,空状态的出现大多有三种场景:用户的初次使用(未进行操作)、用户的操作结果和操作过程中出现错误。空状态通常发生于常规内容页面不能显示的情况下,可能是暂时没有条目的列表,或者是一个没有返回结果的搜索,又或者是由于网络等原因出现的错误反馈。虽然这些情况并不是典型的,但是也是展示良好设计以避免用户失望或者是困惑的好机会。

那么,如何消灭空状态呢?

解决空状态的做法通常有以下几种:

1.使用系统推荐项。现在大多数的信息浏览类的网站,都采用了使用系统推荐项来消灭空状态的办法,这是一种我们常说的“简单粗暴还好用”的处理办法。既然没有内容,那么系统就给推荐一些东西给用户,这样界面就不会显得空荡荡了。

例如:当新用户初次登录LOFTE首页时,如果该新用户在一开始做偏好选择时没有关注任何人,那么当他进入到登录后LOFTER首页时,LOFTER会给用户推荐一些“可能感兴趣的”内容,消灭空状态。

2.使用操作指引。在有些场景下,通过填充系统推荐内容项的确可以达到“无中生有”的目的,如上所说的LOFTER使用系统推荐的内容来充当目前“我关注的”信息。但这种方法并不是万能的。

例如:当使用的是一个C2C的电商网站时,如果我查找的某一个类目下没有卖家提交的商品信息,这个时候我们是没有办法进行内容填充的(因为如果我们这么处理了,一旦有买家对这个感兴趣点进去之后发现不能购买或者是信息是假的,那么我们很有可能就流失一个用户了:))。

在这种情况下,整个流程应该是这个样子的:界面展示内容→当前页面没有相关内容→我们来指引用户产生内容/查看其它内容。这么做的话,既消灭了空状态,又能够让用户产生内容/查看其它内容。同时,还可以解决用户不知道相关入口在哪儿的问题——我们提供快捷入口/提供入口位置引导。

操作引导的方式一般分为两种:一种是通过浮层(或暗示)来引导操作入口,另一种是直接创建快捷入口。

在mac版的iBook中,当用户首次使用iBook时,页面上会通过左上角的箭头+文字“find great book”以及下方的“go to the iBooks Store”按钮提示用户下一步的操作。

在这个页面中,通过页面中部的图案和文案,暗示用户应该进行的操作应该是点击右上角的蓝色按钮,这样的引导十分具有趣味性。

网页上的空状态多用创建快捷入口的方式,创建快捷入口的操作性非常的强,用户很容易就能注意到,操作也简便;浮层引导的形式多出现于移动端的产品上,浮层的引导性相较于快捷入口稍弱一些,但是在用户教育上比较好,下次用户就知道该操作的入口在哪里了。如上述的iBook的例子,用户进入时很容易的就被下方的蓝色按钮吸引,能够直接点击进入相应的操作页面,而左上角的浮层指引则是告知用户,当本页面不再有任何快捷入口指导(如书架上放上书了这个页面就不再是空状态了)时,用户要进行该操作应从哪个入口进入。

3.使用缓存。这种解决办法我们每天都有机会看到,那就是微信朋友圈的刷新。有没有发现当出于某些原因没能够成功刷新出新的朋友圈信息时,系统展示的还是缓存的朋友圈信息。下拉刷新时,这个状态其实也属于一种空状态。先展示以前缓存的内容,等刷新成功后显示刷新成功的内容。

4.情感化表达。当空状态表现的是用户操作的结果时,我们没有办法采用前面提到的123种方法,我们只能告诉用户他所在的是一个空状态页面。但是现在是一个重用户体验的时代,大家都在想办法把这个提醒表达得更加生动形象。此时就需要一些情感化的表达,让用户在明白当前状态的同时,能够获得一些趣味感。

这是gmail邮箱的空状态设计,当用户将邮箱里面的邮件筛选归档完毕之后,屏幕上会显示这样一个小太阳以及一行小字。这就像是系统对用户完成任务(整理收件箱)之后的一个小彩蛋似的奖励。这种情感化的表达确实比空白状态或者是单纯的“No Email”要更加贴心。

这个是一个煎蛋的404页面,页面通过诙谐的文案调侃用户“你运气不错嘛,居然能看到这只鸡”。通过这种俏皮诙谐的图案和文案,确实可以舒缓用户掉线时的挫败感。

5.提供新的任务。前面的四种方法都是在努力弥补任务失败/内容为空带给用户的失落感,此时我们给用户的定位是用户仍在任务中。如果当当前任务完全无法继续的时候,就要考虑从别的地方入手了。比如,暂时提供给用户一个新的任务,让用户跳出当前任务,自然就不会有挫败感和失落感了。

例如:在使用chrome浏览器时,如果刷新页面时网络断开,界面上会显示一只小恐龙,用户可以通过空格键让小恐龙跳跃躲避障碍物,这样一个小游戏,能够成功的分散用户的注意力(不过使用chrome的用户并不全都知道这样一个游戏小彩蛋)。

再比如,(masswerk.at/)的404界面,就提供了一个小的法拉盛循环动画向用户展示了心电图的画法。用户在观看这个小动画时,很容易的就会沉浸其中,从而达到分散用户注意力的目的。

在设计的过程中,我们往往聚焦于各种数据和功能、需要权衡的布局和界面上,这的确是让很人兴奋的点。但是,对于很多产品来说,用户和产品中间大多隔着一个空状态。能否合理地设计空状态,让空状态更好地做到引导和提醒的惩戒作用,这是值得我们投入更多的时间和经历去关注的。

参考文献:https://medium.com/@InVisionApp/why-empty-states-deserve-more-design-time-44b5adc7eb52

~( ̄▽ ̄~)(~ ̄▽ ̄)~

written at 2016/06/16

thinking&writing