作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
谢恩·凯特曼的头像

Shane Ketterman

Shane拥有建筑和设计背景, 信息技术, 内容营销, 并且对用户体验研究充满热情.

分享

虽然对用户体验很重要,但空状态UI经常被忽视. 知道它们是什么以及如何使用它们, 以及应用用户体验最佳实践, 能产生实质性的好处.

什么是空州?

用户体验设计师有很多机会创造愉快和有意义的体验. 一个经常被忽视的机会是“空状态”或空屏幕. 空状态是用户体验产品时没有任何东西可显示的时刻.

下面是一些空状态的例子:

  • 一个新的Dropbox屏幕,没有创建任何文件或文件夹.
  • 在待办事项列表管理器中完成所有任务后的结果屏幕.
  • 当命令不受支持时,在Slack中获得错误屏幕.
  • 开通一个新的社交网络账号,却没有任何联系.
  • 在Gmail中搜索一些东西,却没有得到任何结果.

这些 中间的时刻 提供改善用户体验的机会,从而扩大商业机会. 对于用户体验设计师, 抓住每一个机会提升用户体验,为业务增加更多价值,这是一件好事.

一个有用的空状态会让用户知道发生了什么, 为什么会这样, 以及该怎么做. 以下是两个优秀的空状态UX设计的例子:

Dropbox用户登录UX空状态设计


没有搜索结果的空状态设计


以下是一些错失机会的空状态设计:

空状态设计与错失的机会


空白状态设计空白网页

空状态的类型

以下是四种常见的空状态:

  • 第一次使用 -出现在新产品或新服务还没有什么可展示的时候, 比如一个新的印象笔记或Dropbox账户.
  • 用户清除 -当用户完成清除收件箱或任务列表等操作时发生, 结果是一个空屏幕.
  • 错误 -当出现问题时发生, 或者当出现诸如手机因网络问题而离线之类的问题时.
  • 没有结果/没有数据 -没有数据发现UI设计发生时,没有任何显示. 如果有人执行搜索而查询为空或没有可用数据可显示(例如,当过滤没有数据的日期范围时),就会发生这种情况。.

随着空态设计越来越受到重视, 用户体验设计师发现,利用它们会产生有益的结果, 从业务和用户体验的角度来看.

用户尝试了很多应用程序,但决定了他们想要哪个 3-7天内“停止使用”. 对于“不错的”应用,大多数用户停留7天的时间要长得多. 成功的关键是在关键的前3-7天内吸引用户. – Ankit耆那教徒的

招聘美国全职自由用户体验设计师

使用设计良好的空状态的好处

设计经过深思熟虑且有用的空状态插图和屏幕可以帮助推动产品粘性, 高兴的是用户, 减少流失. 这减少了用户流失到竞争对手产品的机会, 因此让他们感到沮丧或迷失.

在他的书中, 顾客真正想要的是什么, Scott McKain列出了6条优秀客户体验的指导原则.

他写道,客户希望:

  1. 引人入胜的体验
  2. 个人关注
  3. 相互忠诚
  4. 分化
  5. 协调
  6. 创新

当应用于空状态设计时, 例如,这些原则可能对企业有很大的好处, 产品满意度的提高, 以及放弃率的降低.

以下是另外三个可以从良好的空状态设计中获益的领域:

  • 用户新员工培训 -除了提升用户体验外,还提供了建立信任和持续使用产品的机会.
  • 品牌建设 -提高公司的知名度,提升公司的品牌价值.
  • 个性化 -能玩得开心, 有趣的, 严重的, or dynamic in various states of use; creates a sense of a personal touch.

精心设计的空状态的好处不容小觑. 它们不仅有助于提供引人注目的客户体验, 但随着保持客户满意度和参与度的机会之窗变得越来越短, 他们只是单纯的好生意.

回避:用户体验设计中被遗忘的屏幕

因为设计良好的空状态有明显的积极结果, 为什么他们一开始就被忽视了?

第一个, 与应用程序、产品或网站的屏幕总数相比,很少出现空状态情况, 因此,他们经常被忽视,因为他们不被视为优先事项, 设计师 倾向于把精力集中在设计中更明显的部分.

第二,只有一个 估计有2-5%的用户看到空状态,这并不总是对设计师时间的经济或实际利用.

最后, 人们并不总是很好地理解空状态在哪里发生以及如何处理它们, 因此,它们让位于更受欢迎的屏幕和页面.

当空状态被忽略时会发生什么?

没有指导的空白屏幕会导致混乱、不确定和失望. 这可能导致更高的放弃率和更低的产品总体满意度.

幸运的是, 随着设计良好的空状态屏幕的好处和机会变得越来越重要,情况开始发生变化, 用户体验设计过程中最重要的部分.

如何有目的地填满空白的屏幕

这里有一些UX最佳实践,可以确保空屏幕的设计是有用的, 有帮助的, 和翔实的.

同理心. 添加 惊喜和喜悦, 情感, 个性 用户体验设计师是否在产品最黑暗的角落创造了更好的体验. 对于空屏, 移情信息增加了多样性,创造了更吸引人的氛围, 个性化的体验.

用情感和个性来填补空白的屏幕

图像. 有一个设计原则叫做 化的影响. 这是一种减少压力和提高注意力的状态,是自然景观的结果. 添加一些风景图像(空白状态错误屏幕的背景), 例如)可以产生更愉快的用户体验.

亲生命效应可以创造一种减压状态

有用的指导. 根据产品的类型,可以使用空状态来指导用户. 项目管理应用程序就是一个很好的例子. 开立新账户, 目前还没有项目在进行中, 提供一个潜在的好机会来帮助用户快速入门, 从而减少被遗弃的机会. 下面是一个例子:

空状态设计UX指导用户的最佳实践

起动器内容. 有很多屏幕长时间处于空白状态,让用户感到沮丧并离开. 对于某些产品, 提供好的入门内容可以帮助他们可视化正在发生的事情以及他们下一步可以做什么.

下面是一个带有启动内容的空状态屏幕的例子:

带有启动内容的良好空状态设计

提供一个行动步骤. 一些产品, 我们不需要提供指导或在屏幕上填充任何内容,因为这没有任何意义. 在这些情况下,设计师可以简单地提供一个操作步骤.

然而,最好将动作控制在最低限度. 希克定律说 “做出决定所需的时间随着选择的数量和复杂性而增加。.“因此,用户可能会更快地采取行动,当要求最多保持一个或两个. 这里有一个很好的例子:

空状态设计与最小的行动呼吁

另一个很好的例子是Instagram. 当人们刚进入这个平台时,他们还没有关注任何人(也没有人关注他们)。. 把注意力集中在Instagram的所有伟大功能上是很容易的, 但是一个很好的空状态屏幕, 例如, 可以给他们一个“添加关注的人”的选项吗.”

Instagram用户入职UX

空状态UX最佳实践-来自现场

Toptal拥有全球顶尖的自由职业人才 所有设计领域. 以下是两位Toptal UX设计师关于他们设计空状态屏幕的经验.

Toptal设计师: 塔玛拉·奥尔森

设计原则: 用户体验设计

Toptal UX设计师塔玛拉·奥尔森分享了空状态设计的最佳实践

你做过或见过哪些好的空状态设计?

好,现代空州 设计 我所观察到的通常是两部分的教导,一部分的愉悦. 如果UI为空, 用户体验设计师的工作是帮助用户理解当空间被填充时将会出现什么. 如果填充它是用户的工作,那么消息传递应该包含如何填充的说明. (例如, 教育科技产品中的空“Classes”表可能包括告知教师如何创建他们的第一堂课的副本.)

我还看到许多应用利用空州的大量空间来注入一些乐趣和有趣的品牌个性. 你可能会说它是网站的web应用版本 404页的.

你有没有忽略过空状态,如果是,为什么?

当然,这是一个很容易的陷阱. 当我们有远见的时候, 我们会在应用程序和产品全速运行时想象它们, 用内容和用户填充. 当我在 谷歌, a VP of product made a comment that products are like airplane flights; most problems happen during takeoffs 和 l和ings.

当用户第一次进入你的产品时, 空的状态是不可避免的, 我们不希望他们还没开始就陷入死胡同. 我鼓励初级设计师设计一套单独的线性设计 用户入职流程.

您是否见过使用空状态的客户端成功? 如果是,以何种方式?

我最近和 全国小说写作月 在他们的平台上重新设计,允许用户设置和跟踪他们的写作进度目标. 我们的产品团队对这些空空如也的状态非常满意. 空状态用户体验写作是介绍和平台功能和个性的好方法, 并鼓励用户开始记录他们的进度.

你经历过的最成功的空状态用法是什么?

作为一个“零拳击手”,“我一直很喜欢Gmail应用中空收件箱的插图:一个伞下的人, 在阳光下看书, 标题是“你已经完成了。!“从技术上讲,这违反了我提到的空白状态需要行动呼吁的规则, 然而,, 它不, 因为潜意识的CTA是“放下你的电子邮件,去享受你的生活。.“我喜欢这样。.

Toptal设计师: 迈克尔Clingerman

设计原则: SaaS产品设计

Toptal UX设计师迈克尔Clingerman谈到了空状态设计

如果您设计了空状态,那么您最常看到的类型是什么?

我最熟悉的空状态是404/错误状态和用户清除状态.

您是否见过使用空状态的客户端成功? 如果是,以何种方式?

是的. 我曾见过一些案例,在这些案例中,空白状态屏幕成为引人入胜、令人愉悦的内容和沟通策略的一部分. 还有其他一些案例,客户利用它们来打造自己的品牌个性.

你经历过的最成功的空状态用法是什么?

我一直很喜欢Dropbox使用简单和单色的插图风格来建立个性, 语气, 以及企业品牌的特点.

结论

在用户体验设计中很容易忽略空状态(或空屏幕),因为它们很少出现,而且并不总是很好理解. 然而, 包含它们的好处被低估了,因为它们增强了用户体验并帮助创建更有凝聚力的产品.

了解基本知识

  • 什么是品牌个性?

    品牌个性是与品牌名称相关的一系列人类特征和特征. 它帮助消费者通过有趣、关心或严肃等情感与品牌建立联系.

  • 什么是空态?

    空状态是用户体验产品时没有任何东西可显示的时刻. 首次使用、用户已清除、无结果和错误是四种最常见的空状态类型.

  • 用户体验是做什么的?

    用户体验包含了用户与产品交互的所有方面, 服务, 或组织. 它帮助用户对品牌产生消极或积极的感觉.

  • 什么是入职体验?

    入职经历包括将新员工融入公司或使新客户熟悉产品或服务的所有方面.

  • 用户入职意味着什么?

    用户入职意味着让用户或客户熟悉产品或服务. 也可以是教程, 例子, 走查, 或者任何其他帮助用户更好地理解产品的方法.

聘请Toptal这方面的专家.
现在雇佣

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.