空状态——用户体验中最容易被忽视的方面

尽管对用户体验很重要，但空状态经常被忽略。 了解它们是什么以及如何使用它们，并应用 UX 最佳实践，可以产生巨大的好处。

什么是空状态？

用户体验设计师有很多机会创造令人愉悦和有意义的体验。 一种经常被忽视的机会是“空状态”或空屏幕。 空状态是用户体验产品的时刻，没有可显示的内容。

以下是一些常见的空状态情况示例：

• 没有创建文件或文件夹的新 Dropbox 屏幕。
• 完成待办事项列表管理器中的所有任务后的结果屏幕。
• 当命令不受支持时，在 Slack 中出现错误屏幕。
• 开始一个新的社交网络帐户并且没有连接。
• 在 Gmail 中搜索内容但没有得到任何结果。

这些中间时刻提供了改善用户体验并因此扩大商机的机会。 对于用户体验设计师来说，抓住每一个机会来提升用户体验并为业务增加更多价值是一件好事。

一个有用的空状态会让用户知道发生了什么，为什么会发生，以及如何处理它。 以下是两个良好的空状态 UX 设计示例：

以下是一些错过机会的空状态设计示例：

空状态的类型

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

• 首次使用——在新产品或服务仍然没有可显示的情况下发生，例如新的 Evernote 或 Dropbox 帐户。
• 用户已清除- 当用户完成清除收件箱或任务列表等操作时发生，结果是一个空白屏幕。
• 错误- 当出现问题或由于网络问题导致手机离线等问题时，会发生错误。
• 无结果/无数据– 没有可显示的内容时发生。 如果有人执行搜索并且查询为空或没有可显示的数据（例如，在过滤没有数据的日期范围时），就会发生这种情况。

随着空状态设计受到更多关注，用户体验设计师发现，无论从业务角度还是用户体验角度，使用它们都会产生有益的结果。

用户尝试了很多应用程序，但在最初的 3-7 天内决定他们想要“停止使用”哪些应用程序。 对于“体面”的应用程序，大多数用户保留 7 天的时间要长得多。 成功的关键是在关键的前 3-7 天期间让用户着迷。 – Ankit Jain

使用精心设计的空状态的好处

设计经过深思熟虑且有用的空白状态屏幕有助于提高产品参与度、取悦用户并减少客户流失。 这减少了用户流失到竞争对手产品的机会，从而使他们感到沮丧或迷失。

Scott McKain 在他的《客户真正想要什么》一书中列出了卓越客户体验的六项指导原则。

他写道，客户想要：

1. 引人入胜的体验
2. 个人焦点
3. 互惠忠诚
4. 差异化
5. 协调
6. 革新

当应用于空状态设计时，这些原则可以对企业大有裨益——例如，提高产品满意度和降低放弃率。

以下三个领域也可以从良好的空状态设计中受益：

• 用户入职——除了提升用户体验外，还提供建立信任和持续使用产品的机会。
• 品牌建设- 提高知名度并促进公司发展，以增加品牌资产。
• 个性化——在各种使用状态下可以是有趣的、有趣的、严肃的或动态的； 创造一种个人风格的感觉。

设计良好的空状态的好处不可低估。 它们不仅有助于提供引人入胜的客户体验，而且随着让客户满意和参与的机会之窗变得越来越短，它们只是普通的好生意。

避开：用户体验设计中被遗忘的屏幕

既然设计良好的空状态有明显的积极结果，为什么一开始就忽略它们呢？

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

其次，估计只有 2-5% 的用户看到空状态，这并不总是对设计师时间的经济或实际使用。

最后，空状态并不总是能很好地理解它们出现在哪里以及如何处理它们，因此它们退居二线，转而支持更流行的屏幕和页面。

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

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

幸运的是，随着设计良好的空白状态屏幕的好处和机会成为用户体验设计过程中更重要、更高优先级的部分，事情开始发生变化。

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

以下是一些 UX 最佳实践，可确保空屏幕被设计为有用、有用和信息丰富。

共情。 添加惊喜和喜悦、情感和个性都是 UX 设计师在产品最黑暗的角落创造更好体验的所有方式。 对于空白屏幕，移情消息增加了多样性并创造了更具吸引力的个性化体验。

意象。 有一种设计原则称为亲生物效应。 这是一种减轻压力和提高注意力的状态，源于自然观。 添加一些风景图像（例如，空白状态错误屏幕的背景）可以带来更愉快的用户体验。

有用的指导。 根据产品的类型，可以使用空状态来引导用户。 一个很好的例子是项目管理应用程序。 有了新帐户，还没有任何项目在进行中，这为帮助用户快速入门提供了一个潜在的绝佳机会，从而减少了放弃的机会。 这是一个例子：

入门内容。 有很多屏幕空白的时间足以让用户感到沮丧并离开。 对于某些产品，提供良好的入门内容有助于他们直观地了解正在发生的事情以及他们接下来可以做什么。

下面是一个带有入门内容的空状态屏幕示例：

提供行动步骤。 对于某些产品，我们不需要提供指导或在屏幕上填满任何内容，因为这没有任何意义。 在这些情况下，设计人员可以简单地提供一个操作步骤。

但是，最好将操作保持在最低限度。 希克定律指出，“做出决定所需的时间随着选择的数量和复杂性而增加。” 因此，当号召性用语最多保持一到两个时，用户可能会更快地采取行动。 这是一个很好的例子：

另一个很好的例子是 Instagram。 当人们刚接触该平台时，他们还没有关注任何人（也没有人关注他们）。 专注于 Instagram 的所有强大功能很容易，但是例如，一个好的空白状态屏幕可以让他们选择“添加要关注的人”。

空状态用户体验最佳实践——来自现场

Toptal 在所有设计领域都拥有顶级的全球自由职业人才。 以下是几位 Toptal UX 设计师关于他们设计空状态屏幕的经历所不得不说的。

顶级设计师：塔玛拉奥尔森

设计学科：用户体验设计

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

我观察到的良好的现代空状态设计通常是两部分说明，一部分是喜悦。 如果 UI 是空的，那么 UX 设计师的工作就是帮助用户了解填充空间时会发生什么。 如果填充它是用户的工作，则消息应该包含有关如何填充的说明。 （例如，教育科技产品中的空白“班级”表可能包含通知教师如何创建第一堂课的副本。）

我还看到许多应用程序利用空置州的慷慨房地产作为注入一些愉悦和俏皮的品牌个性的机会。 您可能会说它是网站 404 页面的网络应用程序版本。

你有没有忽略过空状态，如果有，为什么？

当然，这是一个简单的陷阱。 当我们有远见时，我们会在应用程序和产品全速运行时描绘它们，其中充满了内容和用户。 当我在谷歌工作时，一位产品副总裁评论说产品就像飞机航班； 大多数问题发生在起飞和降落期间。

当用户第一次进入您的产品时，空状态是不可避免的，我们不希望他们在开始之前就陷入死胡同。 我鼓励初级设计师设计一组单独的线性设计来展示用户的入职流程。

你见过使用空状态的客户成功吗？ 如果有，以什么方式？

我最近与全国小说写作月合作，重新设计了他们的平台，允许用户围绕他们的写作进度设定和跟踪目标。 我们的产品团队在空状态下拥有绝对的优势； 这是介绍和调侃平台功能和个性的绝妙方式，并鼓励用户开始记录他们的进度。

你经历过的最成功的空状态使用是什么？

作为一个“零收件箱”，我一直对 Gmail 应用程序的空收件箱插图感到高兴：一个人在雨伞下，在阳光下看书，标题是“你已经完成了！” 从技术上讲，它打破了我提到的关于需要行动号召的空状态的规则，然而，它没有，因为潜意识 CTA 是“放下你的电子邮件，去享受你的生活”。 我喜欢那个。

顶级设计师： Michael Clingerman

设计学科： SaaS产品设计

如果您为空状态设计，您最常看到的类型是什么？

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

你见过使用空状态的客户成功吗？ 如果有，以什么方式？

是的。 我见过一些案例，其中空状态屏幕成为引人入胜且令人愉悦的内容和通信策略的一部分。 在其他情况下，客户使用它们来建立自己的品牌个性。

你经历过的最成功的空状态使用是什么？

我一直很喜欢 Dropbox 使用简单和单色的插图风格来建立企业品牌的个性、基调和特征。

结论

在 UX 设计中很容易忽略空状态（或空屏幕），因为它们很少发生并且并不总是很好理解。 然而，将它们包含在内的好处被低估了，因为它们增强了用户体验并有助于创建更具凝聚力的产品。

• • •

进一步阅读 Toptal 设计博客

• UI 设计最佳实践和常见错误
• 移动用户体验设计——最佳实践、约束和与开发人员合作
• 移动界面的启发式原则
• 设计的影响——色彩和情感指南
• 设计原则及其重要性