消灭空状态

设计师在做设计的时候,常常会忽略的一个页面状态就是空状态。空状态,顾名思义就是空白的状态,比如说:一个新闻的列表中没有新闻,这个时候列表就是空的,用户打开之后看到的就是白惨惨的一片。空状态的用户体验非常差,就好比千辛万苦经历九九八十一难的唐僧师徒最后取到了一堆空白的佛经一样,用户在经历了查找,在万千的APP中选中了你,然后经过漫长的下载等待和安装,最后你竟然给我一个空页面。用户只会想:Are you kidding me(你在逗我玩吗)?所以随之而来的,用户当然头也不回就走了。

当然,以上只是举了一个例子,空状态有可能出现在APP首次启动时,但是却不仅仅局限于此,有很多地方都有可能出现空状态,一不小心就会放过这些空状态,影响APP的用户体验。APP的空白状态可能出现在如下的场景:用户未进行操作、用户操作结果和网络出错。

1.用户未进行操作

在我一开始举的例子中,用户第一次打开APP时有可能会空状态,特别是一些UGC应用。当然这种设计也很好理解,用户第一次启动,又是UGC应用,用户什么操作也没有,所以当然是空白的啦。只是,这种空白状态看似合理,但是在合情上面却值得商榷。而且,据我观察,空状态的出现不仅于此。有些APP在每次启动的时候都会采用一个空白刷新的逻辑(详细请看文章:无意发现的刷新类型区分),这时候也会出现一个空白的页面。所以,在设计应用启动时,需要关注一下有可能出现的空状态。

2.用户操作结果

第二种空状态是一种用户操作的结果。这种状态常常出现在一个任务列表中的所有任务都处理完成的时候。比如垃圾邮件、广告邮件列表,有些用户会有清空这些邮件的习惯,清空了之后自然而然就会出现一个空状态。其次就是,当用户进行检索或者筛选的时候,没有符合的结果,这样子沉陷出来就是空状态。

与第一种情况不同的时,由于用户操作形成的空状态是无可避免的。不可避免的意思就是说,我们只能告诉用户这是一个空状态,除此之外,我们没有其他的方式。而在启动是出现的空状态时,我们可以通过其他方式去掩盖“这里有一个空状态”的事实,具体我们下面再表。

3.出现错误

最后一种空状态出现在异常流的时候。比如说,当网络错误的时候,可能就会出现空白状态。当然,原理也很简单。本来是要从互联网中加载一些东西,现在加载不了了,所以当然就是空状态咯。当然,一般来说,出现错误的时候会有错误描述。只是,如果只有两行空洞的文体告诉你除了问题,貌似用户感受起来也不会太舒服吧。所以,如果只是两三行的文字,我个人觉得这跟空白其实区别也不大。

对于空状态出现的情况,暂且讨论到这里,下面谈谈如何消灭这些空状态,提升用户体验。总结一下,主要有如下的几个措施:①使用系统推荐项;②使用操作指引;③使用缓存;④情感化表达;⑤提供新的任务。

1.使用系统推荐项

既然空状态如此影响用户体验,那么最直观的想法当然是往空白界面填充一些东西,这样就不是空状态了。对于一些信息浏览页面来说,这的确是一个非常简便易行的方法。既然没有东西,那么我们系统就推荐一些东西给用户,这样界面就不会空荡荡啦。所以说,这种方法非常适合在应用启动时(并且是初次启动时)使用,而且,这种方法其实现在已经非常流行了。

比如说:在除此打开Anyview时,系统在展示“书架”这个页面,按理说,我没有进行任何操作,这个界面当然是空的啦。不过既然空状态如此不堪,那么Anyview就自动塞进去了一堆书。这样就完美地解决了问题。不过塞什么东西进去是有讲究的,通常是一些热门的东西。至于Anyview,他会先让我回答一些问题,在获取了一些基本数据之后,它才给我推荐了这些书籍,这样推荐的精准度也会高些。现在的阅读软件基本都沿用了这种方法。

当然,在其他的浏览页面,比如说lofter、花瓣等图片社区,也会采用这种方式。所以,现在对于此类应用,空白界面越来越少见了。

804591-06d443923d0c62c2

Anyview

2.使用操作指引

在有些场景下,的确是可以通过系统推荐项来达到无中生有的目的。比如说:在我的关注人的状态中,可以插入系统推荐的状态来以假乱真。但是,这种方法确实不是万能的。举个例子,假设有一款图片分享类的应用,然后有个页面是“我的图片”,如果在我从来没有发布过图片的时候,这个页面理所应当就是空的。并且在这个时候,第一种方法显然是不可行的。当然,空荡荡的界面有不好,所以此时可以通过操作指引来引导用户产生内容。

这时候的逻辑是这样子的:界面展示用户产生的内容→用户没有产生内容→我们来指引用户产生内容。这样子即消灭了空页面,又可以让用户产生内容,一举两得。而且,这种方法还可以解决一种问题:用户不知道生产内容的入口在哪。所以,这么一看,这种方法简直是一石三鸟。

操作指引有两种方式,一种是通过浮层来引导操作入口,另一种是创建快捷入口。说文字比较苍白,直接看下面的配图吧。

804591-a65a6ce7ba40c1c1

引导操作入口

804591-67a716086b06b785

创建快捷入口

对于这两种方法,各有利弊吧:创建快捷入口的引导性非常强,用户容易注意到,操作也简便;浮层指引的话引导性没有快捷入口那么强,不过胜在用户教育好,下次用户就知道从这里产生内容了。相比较而言,我会更加偏向浮层指引这种方式。

3.使用缓存

虽然我在无意发现的刷新类型区分中针对空白页面刷新这种情况的出现做了一番解释,但是我至始至终还是觉得这种方式体验不太好。针对这种情况,使用缓存是一种非常直观的方式。把之前的的内容存储下来,在展示页面的时候先展示缓存的内容,再加载新内容,这样就非常简单地把空状态消灭了。现在大多数的资讯浏览类的页面都会采用这种方式,比如说朋友圈,网易新闻等等,以至于大家都习以为常了,反而忘了其实这也是消灭空状态的一种方式。

4.情感化表达

当空白界面是用户操作的结果时,我曾说过这里其实没有太多的方法,我们只能老老实实地跟用户说这里就是空白状态。只是,在这样一个追求用户体验的年代,大家也开始把这个提醒表达得更加生动形象一些。在这里会加入一些情感化的表达,而不仅仅只是冷冰冰的文字,比如加上俏皮的图像,或者把文案写得更加戏剧化一些。这些配图在让用户明白当前的状态的同时,往往也能引发用户会心一笑,从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图:

804591-57fc9e721bb629e4

情感化表达

这是一个吃药计划的app,设置好之后,每天按照时间表来按时吃药。当天计划完成的时候,列表显示为空,但是上面有个大大的笑脸,还加了一句话“今天的用药计划完成咯,明天再见吧”。不得不说,这种情感化的表达确实比空白状态或者单纯的几句话要来的更加贴心。

804591-aa00ede4330f6443

情感化表达

这是一个出错的页面,图案是一个流落荒岛的场景,文案是“糟糕,连接掉线了。冷静一下,生个火然后下拉刷新一下吧”。通过一种俏皮的图案和文案,确实可以舒缓用户掉线时的挫败感。

更多的情感化表达的例子可以参考:Empty States

5.提供新的任务

前面的四种方法其实说到底,都是在弥补当前任务失败造成的失落感。也就是说,我们的落脚点仍旧在当前的任务中。不过,当当前的任务完全不可行的时候,这时候就需要考虑新的方法了。比如,提供给用户新的任务,让他暂时忘记当前的任务,自然而然就不会有挫败感了。

举个例子吧,当在断网的情况下用户使用chrome浏览器浏览网页的时候,界面会显示一个小游戏。这是一个通过空格键操纵小恐龙躲避障碍的游戏,游戏虽小,但是趣味性十足。在浏览网页失败的时候,提供这么一个小游戏去分散用户的注意力。不得不说,这确实是一个非常好的维度。

804591-7d30f8e534f3fd48

chrome的小游戏

再举个例子,当访问腾讯系的网页访问失败的时候,网页除了显示404状态之外,还会显示一个寻人启事。把错误界面和公益结合在一起,不得不说,创意十足。既解决了空状态的问题,又做了好事,一举两得。而且用户可能可能被这个公益的举动吸引了,然后就成功地转移了这是一个404页面的事实。

804591-a4a9d8c4d2ebe418

腾讯404页面

804591-9b6408fb5e7c9c19

问题和解决方式

洋洋洒洒讲了这么多,最后总结一下就是以上这张图。记住空状态可能出现的场景,当设计走到这个场景的时候留多一个心眼,然后按图索骥即可。

作者:妖叶秋 原文地址: http://www.jianshu.com/p/a13b79c4b4fa

版权声明:作者妖叶秋已授权IAMUE转发其原创文章,未经作者本人允许请勿转载。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/12614/

(0)
iouedioued
上一篇 2016-01-28
下一篇 2016-01-29

相关推荐

  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • 隐藏在今日头条百亿市值背后的算法:巨大可能与现实困境

    文/余亮 无论2016年科技圈热门的噱头有多少,对数据基础设施方面的耕耘仍然是决定实力的关键。阿里之类电商数据帝国自不待言,今日头条、一点资讯等在资讯数据领域的开拓更加值得注目。比起电商的物流数据,资讯算…

    2016-01-27
  • 交互设计-网站页面视差效果(Axure RP 7.0 源码下载)

    很多(想)学习Axure的朋友,都是伸手党,这是一条不争的事实,直接拿过来省事又省时;
    能真正学会并驾驭这款软件的毕竟是少数(其他软件也一样,这似乎是一条无法打破的规律),不过金乌老师还是希望想使用这款工具帮你应付差事(实现梦想)的小伙伴儿们加油,自学是很辛苦的,只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法,不积跬步无以至千里。

    IxD案例 2015-01-05
  • 闪光的消亡对于用户体验来说意味着什么?

    而 Flash 是一个控制狂,那些拥抱 HTML5 的人往往是渐进增强的冠军。最后,我们的用户获胜。SuAnne 探索途径挑战现状,为现代的 web 设计。 Adobe 公司的决定停止移动 Flash 平台的开发及在 HTML5 相关的努力增加其…

    2014-09-04
  • Daydream产品设计案例 - YouTube VR

    每年这个季节都盼着来自北方的冷空气能早些把这个城市吹干、吹冷。这世上,又湿又温暖的地方未必都是好地方。 随着Daydream头显和Pixel手机的发布上市,Google官方的各路VR app也陆续上线。我个人还没有机会、没有…

    2016-12-08
  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • 【推荐】交互设计工作记录知识总结

    交互细节小结: 1.用Axure画线框图的时候,线框图网页要多大尺寸? 答:让页面缩放至100%,网页伸缩至适合电脑屏幕大小的尺寸,一般也就是真实网页的实际大小,因为很多时候这份线框图要发送给某个没有Axure的领导…

    IxD案例 2015-11-24
  • Axure-小红书APP登陆界面划屏效果制作

    有一款叫做小红书的APP(不是小黄书)登陆界面做的非常清新脱俗,教他家用Axure模仿练习一下他的登陆界面划屏效果,这个内容虽然有些多,但是制作方法并不难,耐心跟着做的话肯定没问题哒!点击观看效果 效果分析 …

    2016-01-06
  • 平衡用户体验设计和精益设计

    来源:人人都是产品经理 作者:AB Tester Blog 对你而言哪个更重要:是制作出拥有杀手级用户体验的产品来吸引用户?还是尽快制作出能满足用户的产品并抢占大量的市场份额? 如果一款产品用户体验很差的话,用户不会使…

    2014-09-27
  • [自译]企业UX案例研究:在紧张期限内提高可用性

    在四个月的时间里,LiquidPlanner塑造了一个新的dashboard模板功能,这让用户印象深刻,并且有很高的使用率和很好的商业效益。

    2016-08-24