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

特别是在复杂的应用程序在用户没有完全配置的情况下,空状态是很常见的入职和最初的使用。用户可能在应用程序中遇到空状态的一些典型场景是:

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

空白空间的默认设置是保持空白:在空间配置或个性化之前,不向用户显示任何内容。虽然这种方法可能会节省开发时间(甚至是在产品的早期beta测试设计过程中有意做出的决定,在测试设计过程中,其他功能最初必须优先考虑),但它最终会造成混乱,降低用户信心,并错失了提高性能的机会可用性易学性应用程序,以及可发现性主要特征的定义。

有意设计的空状态(不是事后考虑的空状态)可用于:

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

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

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

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

用于显示特定日期范围内日志项的表的面板。面板为空,包含到项,没有系统消息。
这个对话缺乏适当的反馈:不清楚是否在表格中没有显示细节,或者系统仍在收集和显示细节。

在流程完成时,在内容区域内发送一个简短的系统消息(例如,“对于选定的日期范围,没有要显示的记录”)将是一种简单而有效的增加系统状态的可见性因此,用户对结果有信心。

用于显示特定日期范围内日志项的表的面板。面板包含一条系统消息,说明“所选日期范围内没有可显示的记录。”
一条简单的消息(对于所选的日期范围没有可显示的记录)传达系统的状态,并提高用户的信心。

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

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

左图显示一个屏幕,用于显示带有消息“无记录”的电子邮件模板。右图显示几秒钟后的屏幕,填充了多个电子邮件模板项。
进入新屏幕时,用户最初会遇到不准确的系统状态消息No records(左)。几秒钟后,当系统完成加载内容时,消息将替换为相关项的列表(右)。

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

使用空状态提供学习提示

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

空状态提供了提供与用户任务相关的上下文帮助的机会。这些帮助消息有时被称为揭秘因为它们只在用户与相应的UI元素交互时显示,并且不会以任何突兀或中断的方式“推送”。

例如,考虑警报来自企业资源规划(ERP)应用程序的下面的面板。当警报面板中填充了警报,很明显人们可能会如何处理内容。(面板的这种状态可能是模拟和测试此元素的方式。)但是警报面板为空,它显示了前面讨论的问题:用户可能想知道是否发生了错误,或者他们是否准确地创建了触发警报所需的参数。(如前一个示例中所示,此处将显示一条简短的系统状态消息,说明没有警报。)

而且,尽管如此,这个完全空的警报Panel错过了向用户介绍警报功能的机会。一个简短的对话可以提供关于警报是什么以及如何开始使用它们的信息。

左侧屏幕显示一个由个性化警报填充的警报面板。右侧面板在未触发警报时显示相同的警报面板。
当存在活动警报(左)时,很容易理解如何取消和查看警报的详细信息。如果不存在或未创建警报(右),面板将恢复为完全空状态,从而错过了向用户提供上下文帮助的机会。

与此相反,数据监控应用程序DataDog在空状态下使用上下文帮助内容。当用户没有为任何项目添加星号以创建收藏夹列表时,可能的内容区域将显示消息在此处列出您的收藏夹

未添加收藏夹时,侧边导航菜单包含消息“在此处列出您的收藏夹”
DataDog:当用户未选择任何收藏夹时,消息在此处列出您的收藏夹,显示在空状态容器中,向用户介绍偏好功能,并解释如何使用空区域。

在一个类似的例子中,当最近没有在Microsoft Power BI中查看条目时,空状态屏幕包含一个简短的系统消息,描述如何在那里添加内容。

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

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

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

例如,在一个应用程序开发软件中,以下系统状态消息没有记录;发送请求以查看工作区中的详细信息在任务期间无法显示任何记录时,在空状态下遇到。虽然此消息确实提供了有关的上下文信息什么用户可以做什么来查看这些记录(即,它说邮寄A.要求查看工作区中的详细信息),它不会告诉用户怎样完成该任务,或者在系统中的何处找到必要的功能。

此空状态中的系统状态消息提供有关用户可以执行哪些操作来查看记录的上下文帮助,但它不会告诉用户如何完成任务。

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

例如,下面的应用程序在空状态中提供了一个直接链接——一个标有标签的按钮创造它允许用户创建警报。对于那些可能需要更多信息来理解警报为什么有用以及如何使用它们的用户,a了解更多链接项还直接指向相关文档。

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

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

Loggly:空状态屏幕提供了两种直接的入门途径:添加日志源或使用演示数据进行探索。

结论

不要让空状态设计成为应用程序的后顾之忧。有意设计的空状态可以帮助增加用户信心,提高系统易学性,并帮助用户开始关键任务。

总结几点要点:

  • 不要默认为完全空状态。这种方法给用户造成了困惑,他们可能会怀疑系统是否仍在加载信息,或者是否发生了错误。
  • 当屏幕、页面或面板的内容尚不存在时,请使用空状态提供帮助提示。告诉用户可以显示什么,以及如何使用该内容填充该区域。
  • 提供直接途径(即链接)以开始与填充空状态相关的关键任务。
  • 当进程正在运行时,使用进展指标以增加系统状态的可见性。
  • 如果流程完成后没有要显示的相关数据,请使用空白区域在空白区域中提供系统状态消息,简要说明没有可用内容。