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

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

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

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

有意设计的空状态——而不是事后留下的——可以用于:

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

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

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

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

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

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

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

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

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

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

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

使用空状态来提供学习线索

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

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

例如,考虑警报来自企业资源计划(ERP)应用程序的面板。当警报面板中充满了提醒,很明显人们会如何与内容互动。(这个面板的状态可能就是这个元素模拟和测试的方式。)然而,当警报面板为空,则会出现前面讨论的问题:用户可能想知道是否发生了错误,或者他们是否准确地创建了触发警报所需的参数。(与前面的示例一样,一条说明没有警报的简短系统状态消息将在这里非常有用。)

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

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

相反,数据监视应用程序DataDog利用空状态中的上下文帮助内容。当用户没有在任何项目上加星号以创建收藏列表时,潜在内容区域将显示消息给你最喜欢的标上星号,在这里列出它们

当没有添加收藏夹时,侧边导航菜单会显示这样的信息:“在您的收藏夹上加星,将它们列在这里”
DataDog:当用户没有选择任何收藏夹时,消息给你最喜欢的标上星号,在这里列出它们,向用户介绍收藏功能,并解释如何使用空白区域。

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

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

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

除了提醒用户系统状态和通过拉式启示增加系统易学性之外,空状态还可以用来提供直接途径,让用户开始关键任务或完成与当前工作流相关的步骤。

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

空状态中的系统状态消息提供了上下文帮助,帮助用户查看记录,但它没有告诉用户如何完成任务。

更好的方法是提供简短但显式的说明,或者直接链接到完成与填充空状态相关的任务所需的步骤。(这里的文本发送一个请求可以直接链接到消息中心或启动消息对话框。)

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

空状态警报面板链接到其他相关文档,并提供了一个按钮,可以直接在空状态中创建警报。

这种类型的空状态设计对于刚开始使用复杂应用程序特性的用户也很有用。例如,当用户还没有在Loggly(一个基于云的日志管理应用程序)中向他们的帐户添加日志数据时,空状态包含进入工作流的2条直接路径:添加外部日志源或将演示数据填充到应用程序中以用于安全探索。

Loggly:空状态屏幕为开始提供了2条直接路径:添加日志源或使用演示数据进行探索。

结论

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

总结几个要点:

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