恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计师最常忽略的UI页面状态:空白状态
0.0°
2016-06-27 自译外文 经验/观点 原作者: Nick Babich 举报 6958 32 36 0

设计师必须让用戶在 “首次使用" 就有好的体验!本篇就要探讨设计师最常忽略的页面 – 空白状态(empty state) 页面。

大多 app 平均会失去 77% 的用户(用户下载后三天)。更糟的是,在 30 天内, 将近 80% 的用户不再使用。造成如此低的用户留存率(retention rates)是因为 app 制作或概念不良吗?恐怕有其他原因。基本上,使用者会下载许多 app 试用,并在几天内就会决定该删除那几个。这代表怎么在这个期间内让使用者上瘾,是迈向成功的关键。而你的任务就是确保用户要经常使用你的app,且能心满意足。但在达到这个目标之前,你必须让他们在 “首次使用" 就有好的体验!本篇就要探讨设计师最常忽略的页面 – 空白状态(empty state) 页面。



第一眼印象太重要了!

设计师应该通常都会先设计内容齐全的代表页面,并在示意图上呈现最佳排列的效果。直到最后(或没有)才考虑可能遇到的空白状态(empty state) 。但重要的是,"空白状态" 的呈现具有能驱动用户继续使用的潜力,我们要把握这个与用户沟通价值的时机。


什么时候使用者会遭遇 “空白状态" ?


  • 首次使用: 首次开启 App
  • 发生错误:触发某事件
  • 使用者主动清除:当使用者把内容都清空时



设计空白页面的效益并不仅是美学的提升,它能让用户预期接口可能要呈现的内容,也可增加使用者的黏着度,并告知使用者进行某些动作会发生甚么事情。设计 “空白状态" 页面,可达到下述三大效益:


  1. 教学与帮助
  2. 让使用者开心
  3. 激励使用者行动




1. 提供教学与帮助

在 “空白状态" 页面上可达成的第一个效益就是:指导使用者如何使用你的 app。如果他们不懂 如何操作,app 可能就会被打入冷宫。所以,你应该要协助他们理解下一步要干嘛?或让他们可期待会有种事件发生。


Invoice app — 搭配双色的插画,来告知用户赶紧输入相关数据,以呈现你的销售表现,并开始经营客户。


在发生 “错误" 的页面上,应该要提供有用的信息,如协助排除。此页面的设计需在 “友善的程度" 与 “帮助的效益" 中取得平衡。当错误发生时,你应该向使用者解释为什么看不到内容,该怎么解决。


负面案例: Spotify 在错误页面上仅呈现 “有错误发生" 的讯息。


Spotify 的错误页面并没有提供任何帮助


好的案例: Azendoo 留下讯息: 你就像身处荒岛,感到迷失方向且失去联系吗?跟随我们的建议,保持冷静,点把取暖的火,并且按下重整试试。


Azendoo 的错误页面就有趣且有帮助多了。



好的 “初次使用" 页面设计可以传达以下信息:

  • 解释正在使用的内容类为何
  • 告知使用者目前所在页面
  • 告知用户此步骤,需要一些资料的导入,才会显示出内容(例如先follow一些人)


2.让使用者开心

若要给使用者好的第一印象,使用性是关键但非为一,产品所呈现的 “品牌个性" 更是重要。假使你能让 “空白状态" 的页面看起来与其它竞争对手不同,其实也代表着你向用户证明 “产品体验同样也具独特性"! 而我们的目标就是设计出令人愉悦惊喜的界面。


Image title


你能做出清新或让人意想不到的创意吗?例如以下透过动画来表现的案例:


Workmates — 让可爱的动物来欢迎你,跟你 say HI!


或是你能使用开玩笑的手法:


Cognito Brain Training — 若你还没准备好,你会在画面上遭遇一只大白鲨。



Aaron Walter 由人类不同的需求层次,来解释 “成功的使用者体验" 需具备何种要素;他认为 app 应该具功能、可靠性与可用性,同时也应该是愉悦的。所以试试把 “同理心" 应用于 “空白状态" 页面吧:


Google Hangouts — 当没人邀请时,无论原因,总是会令使用者沮丧。因此,它在此页面上呈现一名哭泣小孩的插图。不过,我们可以思考,这样做能刺激或鼓励使用者透过方法来取得更多邀请吗?


为了提升使用者看到 “空白状态" 页面的体验,你可以透过一些手法来取悦他们,如下:

  • 带入品牌元素( 具差异或有趣的)
  • 具幽默感或娱乐性 ( 利用 “正面" 的情感元素,并给用户惊喜)
  • 显露出人性的那一面 ( 提供奖励,或即使你没义务解决也提供协助)




3.激励使用者行动

大家可以把 “空白状态" 想成小型的 landing page,一个成功的设计会把 “特殊功能" 或 “特色" 的信息,在此页面告知给使用者,并且导引他们去做出我们预期的动作。


Image title


在 “空白状态" 的页面上激励使用者进行某些行为,你可以这么做:

  • 鼓励使用者使用:利用适当并带激励作用的用词或设计,如 “学习更多" 或 “让我们开始吧!"

Dropbox iOS app


  •        说服使用者使用:提醒用户他们使用你的产品能带来的效益。  

Image title


给使用者指示:推荐或告知使用者最佳上手途径,并提供 CTA 按钮(或有箭头引导)来引导使用者脱离"空白状态",进行有意义的行为

Image title


设计 空白状态(empty state) 的技巧

千万不要认为 “空白状态" 页面仅是体验中暂时或次要的部分,而不去设计它。带给你的使用者愉悦的使用体验,并试图将功能或特色与情感链接。向用户解释 app 能带来的价值,这样才能让用户理解为什么他们应该关注你。 保持简单的视觉: 简洁的 icon 或 轻爽的插图,再搭配 CTA 按钮 通常就够了。 如果 “空白状态" 页面是由活跃用户的行为而产生,可在上面呈现另他们愉快的讯息。 假使是使用者的错误而出现 “无理想内容状态" 页面,你必须清楚的解释如何解决问题或返回。


结论


“空白状态" 页面的设计就如同其他项目一样重要,因为好的使用者体验是来自于整体操作旅程的总和。"空白状态" 页面是你与使用者的管道,设计上需要让讯息与操作之间达到微妙的平衡。



延伸阅读:

  1. 助你冲高下载量的七大 app 设计思维!
  2. “微互动" 将是2016年 APP 的设计新趋势





设计大舌头是一个长期关注用户体验相关(UED)议题的共笔平台,包含用户介面(UI)、互动设计(Interaction Design)、产品设计趋势、设计专利以及服务设计等,试图让更多读者了解设计师们的巧思,并推广 Design Thinking 的思维,欢迎更多人加入这一个讨论园地。


如果你也喜欢我们的文章,欢迎大家到我的 Blog(设计大舌头)瞧瞧:https://designtongue.me/


Image title


更新:2016-06-27

收藏

32人已收藏

设计大舌头

谈谈用户体验,聊聊使用者介面

  • 9

    作品

  • 325

    粉丝

  • 21

    关注

  • 回顾2016年Apple举行的 WWDC中有趣的设计主题
  • 快速验证概念、节省开发成本的方法– Prototyping
  • 小资族说走就走的机票比价神器 – HelloWings
  • 用户研究不被老板重视,身为 UED 的你该怎么办?

    猜你喜欢

      2016-06-27 自译外文 经验/观点 原作者: Nick Babich 举报 6958 32 36 0

      设计师最常忽略的UI页面状态:空白状态

      0.0°

      你确定要举报设计师最常忽略的UI页面状态:空白状态

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年06月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      36
      32
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录