在复杂的UI设计应用中设计空状态的3个准则

空状态为设计人员提供了沟通系统状态、提高系统可学习性以及为关键任务提供直接途径的机会。本文为无内容容器设计空状态对话提供了指导。

有时,用户会在应用程序中遇到空状态:容器、屏幕或面板,其内容尚不存在或无法显示。

特别是在尚未由用户完全配置的复杂应用程序中,空状态在入职和初始使用中非常常见。当用户在应用程序中遇到空状态时,一些典型情况是:

  • 当用户尚未指定任何项目为收藏夹或尚未打开任何文件时,用于显示收藏或最近查看的项目的列表的容器将空无一人。
  • 当应用程序支持警报,但用户尚未配置任何警报时,可能会有一个空窗格或对话,这些警报最终将出现。
  • 当应用程序由各种工作空间或仪表板组成,但用户没有向这些区域添加内容时,这些页面或屏幕将空无一人。
  • 搜索结果列出了什么都找不到的情况,以及其他命令创建空输出的情况。

空位的默认值是保持空位:在空间配置或个性化之前,不向用户显示任何内容。虽然这种方法可以节省开发时间(甚至是产品早期 β 设计过程中的有意决定,其中必须首先优先考虑其他功能),但它最终会造成混乱并降低用户信心 , 错失了增加应用程序可用性和可学习性以及关键功能可发现性的机会的金矿。

故意设计的空状态 - 不留作为事后的想法可以用来:

  • 向用户传达系统状态
  • 帮助用户发现未使用的功能,提高应用程序的可学习性
  • 为开始执行关键任务提供直接途径

使用空状态来通信系统状态

完全空的状态导致系统如何工作以及是否工作感到困惑。当用户在尝试筛选、查询或显示特定内容后,在界面中遇到空面板或屏幕时,他们可能会想知道无数问题:系统是否完成了对请求的处理?内容还在加载吗?是否发生了错误?我设置错误的过滤器或参数了吗?

例如,请考虑对话以显示下面的日志详细信息。当用户指定并应用没有日志的日期范围时,对话中的表 - 逻辑上 - 不显示任何日志详细信息。但是,由于没有提供系统反馈,用户无法知道是否真的没有要显示的详细信息、是否发生了错误,或者系统是否仍在处理请求。用户可能会浪费时间刷新查询几次,然后才感到足够自信,可以继续前进。

这种对话缺乏适当的反馈:不清楚表中是否有要显示的细节,或者系统仍在收集和显示细节。

完成过程后,内容区域内的简短系统消息(例如,"选定日期范围没有记录可显示")将是提高系统状态的可见性,从而提高用户对结果的信心的简单而有效的方法。

一个简单的消息(没有选定的日期范围的记录显示)传达系统的状态,提高用户的信心。

更糟糕的,但同样常见的情况,特别是在信息密度高和处理时间长的应用程序中,是当系统默认为误导性的系统状态消息时:声明没有项目要显示,但在流程完成后才将其替换为内容。

例如,当在下面的员工管理软件中加载内容时,用户会遇到带有系统状态消息"无记录"的空状态容器。如果事实上没有记录,这些信息将非常有用。但是,等待几秒钟后,系统将不准确的系统状态消息替换为请求的项目。

进入新屏幕后,用户最初会遇到不准确的系统状态消息"无记录"(左图)。几秒钟后,当系统完成加载内容时,消息将被相关项目列表(右)替换。

空州不准确的系统状态消息尤其有害。在最好的情况下,用户等待过程并发现相关内容,但对应用程序产生严重的不信任和厌恶。在最坏的情况下,触发快乐用户(即大多数用户)看不到相关内容,无法完成其工作。

使用空状态提供学习提示

当用户开始执行任务时显示的上下文学习提示帮助用户在探索系统时了解如何实时使用应用程序或系统。在大多数情况下,此方法通常比初始使用时向用户显示的强制教程更成功。这是因为上下文帮助通常可以立即应用,因此更令人难忘的是 - 用户几乎没有时间在冗长的入职内容和实际界面之间建立关联。

空状态提供了提供与用户任务相关的上下文帮助的机会。这些帮助消息有时被称为拉启示,因为它们仅在用户与相应的 UI 元素交互时才会出现,并且它们不会以任何显眼或中断的方式"推挤"。

例如,请从企业资源规划 (ERP) 应用程序中考虑下面的警报面板。当警报面板中填充了警报时,很明显,人们可能会如何参与内容。(面板的这种状态可能是该元素被模拟和测试的。但是,当Alerts面板是空的时,它会提出以前讨论过的问题:用户可能会怀疑是否发生了错误,或者他们是否准确地创建了触发警报所需的参数。(与前面的例子一样,一个简短的系统状态消息,说明这里没有警报是有用的。

此外,这种完全空的警报面板状态错失了教育用户有关警报功能的机会。简短的对话可以提供有关警报是什么以及如何开始使用它们的信息。

相比之下,DataDog 是一种数据监控应用程序,它利用空状态下的上下文帮助内容。当用户没有主演任何项目,以创建一个收藏夹列表,可能的内容区域显示消息明星你的最爱在这里列出他们。

数据狗:当用户没有选择任何收藏夹时,消息明星你的最爱在这里列出他们,显示在空状态容器,教用户关于偏爱功能,并解释如何使用空区。

在类似示例中,当微软 Power BI 中最近未查看任何项目时,空状态屏幕包含一个简短的系统消息,描述如何添加内容。

Microsoft Power BI:最近不存在项目的空状态容器解释了内容是如何添加到此区域的。

使用空状态为关键任务提供直接路径

除了提醒用户系统状态和通过拉力启示提高系统学习能力之外,空状态还可用于为用户开始执行关键任务或完成与其当前工作流程相关的步骤提供直接途径。

例如,在一个应用程序开发软件中,以下系统状态消息没有记录:发送请求以查看工作区中的详细信息是在空状态下遇到的,因为任务期间无法显示任何记录。虽然此消息确实提供了用户可以做些什么来查看这些记录的上下文信息(即,它表示要发送一个请求来查看工作空间中的详细信息),但它并没有告诉用户如何完成该任务,或者在系统中去哪里查找必要的功能。

此空状态下的系统状态消息可提供上下文帮助,说明用户可以采取哪些方式查看记录,但它不会告诉用户如何完成任务。

更好的方法是提供简短而明确的说明,或者,更好的是,直接链接到需要采取的步骤,以完成与填充空状态相关的任务。(在此处,文本发送请求可能会直接链接到消息中心或启动消息对话。

例如,下面的应用程序在空状态内提供了一个直接链接 - 一个标记为"创建"的按钮,允许用户创建警报。对于可能需要更多信息来了解为什么警报有用以及如何使用它们的用户,了解更多链接项目还直接导致相关文档。

空状态警报面板链接到其他相关文档,并提供一个按钮,从空状态直接开始创建警报。

这种类型的空状态设计对用户开始使用复杂的应用程序功能也有有益的影响。例如,当用户尚未在基于云的日志管理应用程序 Loggly 中将日志数据添加到其帐户时,空状态包含进入工作流的 2 条直接路径:向应用程序添加外部日志源或将演示数据填充到应用程序中,以便用于安全探索。

登录:空状态屏幕提供了 2 个直接启动路径:添加日志源或使用演示数据进行探索。

结论

不要让空状态设计成为应用程序中的事后想法。有意设计的空状态可以帮助提高用户信心,提高系统学习能力,并帮助用户开始执行关键任务。

总结几个要点:

不要默认完全空状态。此方法会给用户造成混淆,他们可能会怀疑系统是否仍在加载信息或是否发生了错误。

当屏幕、页面或面板的内容尚不存在时,请使用空状态提供帮助提示。告诉用户可以显示什么,以及如何用该内容填充区域。

提供直接途径(即链接),以便开始执行与填充空状态相关的关键任务。

当过程运行时,使用进度指标来提高系统状态的可见性。

如果在过程完成后没有相关数据要显示,请使用空空间在空白空间中提供系统状态消息,该消息简要说明没有内容可用。

作者:Kate Kaplan

本页面最后更新于 2021年10月06日 14:30