仪表板设计 - 注意事项和最佳实践

收听本文的音频版本

仪表板是一种独特而强大的方式来呈现基于数据的智能，使用数据可视化技术显示相关的、可操作的数据以及跟踪统计数据和关键绩效指标 (KPI)。 仪表板应以快速、易于扫描的格式呈现这些数据，其中最相关的信息一目了然。

该术语起源于传统的汽车仪表板，并且它们已经演变为在数字世界中提供相同的功能。 Stephen Few 在他的书中说得最好：

仪表板是实现一个或多个目标所需的最重要信息的直观显示； 整合并安排在一个屏幕上，使信息一目了然。

在本文中，我们概述了战略性、分析性、操作性和信息性示例，以及每个成功的仪表板设计的核心基本原则，无论其类型如何。

拥有正确的数据可视化方法是为成功的仪表板奠定基础的关键特征。 数据可视化是通过图形和图片呈现数据——其主要目标是帮助决策者识别模式或理解在基于文本的应用程序中可能未被发现的困难概念。

Noah Iliinsky 和 ​​Julie Steele 在他们的《数据可视化》一书中指出：

设计者设计数据可视化的目的是创建一个易于被读者接受和理解的可交付成果。 所有的设计选择和特定的实现都必须服务于这个目的。

大仪表板的主要特征

有效的仪表板一目了然地显示可操作和有用的信息。 它简化了复杂数据的可视化表示，并帮助利益相关者理解、分析和呈现关键见解。

出色的仪表板清晰、直观且可自定义。

• 他们迅速传达信息。
• 它们清晰有效地显示信息。
• 它们显示了数据随时间的趋势和变化。
• 它们很容易定制。
• 最重要的小部件和数据组件有效地呈现在有限的空间中。

根据关键用户需求对视觉数据和信息进行初始定制将有助于提高可用性并消除对不同用户角色的需求。

出色的仪表板一键即可提供一切。

• 所有重要信息都可以立即访问。
• 数据优先。
• 信息以视觉层次清晰地显示在一个屏幕上。
• 该设计提供了一个连贯的概述，其中包括稀疏、清晰的初始数据，并有额外的机会深入了解更多信息。
• 元素（图表、表格、表单）显示在最小化视图中，能够在模式窗口中显示更多详细信息或转到具有更多详细信息的页面。
• 该设计通过过滤器提高了可用性，允许用户自定义数据的显示方式，并使用标签、类别和 KPI 过滤内容。

降低复杂性提供清晰

在一个被数据淹没的世界中，提供清晰的信息是最难完成的事情之一。 在仪表板上只显示最相关的数据是必不可少的——我们显示的信息越多，用户就越难找到他们需要的东西。

当面临太多可供选择的数据时，设计人员应该只显示最相关的子集。 我们需要优先考虑并仔细删除误导性和不明确的指标。

有效的仪表板设计决策应遵循以下原则：

• 项目目标
• 数据的性质
• 用户的需求

在阅读可视化（或任何其他类型的交流）时，你的读者只有有限的脑力来解决这个问题。 其中一些脑力将专门用于解码可视化； 剩下的任何脑力都可以用来理解信息（如果读者还没有沮丧地放弃的话）。 Noah Iliinsky 和 ​​Julie Steele（数据可视化）

仪表板的核心目标是使复杂的信息易于访问和消化。 因此，呈现数据的界面应该简洁明了，以尽量减少用户的认知负荷和搜索时间。

信息架构应首先呈现基本数据，同时允许访问支持或次要指标。 应该设计一个渐进式向下钻取系统，从总体概述开始，然后进入更多细节——它有助于数据优先级排序，并创建清晰。

确定仪表板目标并显示适当的数据

在设计仪表板时，成功的仪表板设计师从一组明确定义的目标开始，重点关注要解决的问题以及人们需要从数据中获取的关键、可操作的见解。

良好的设计目标促进高效和精确的执行。 使用 SMART 框架进行目标设定将重点放在具体、可衡量、可操作、现实和基于时间的目标上。

确定仪表板设计目标时要问的几个关键问题：

• 用户需要采取多少步骤才能实现特定目标？
• 界面是否足够直观，用户可以自行实现目标？
• 用户需要哪些信息才能成功实现其目标？

要确定特定仪表板设计的目标可能是什么，请通过询问“该设计将为用户解决什么具体问题？”来定义它。 答案将提供有关哪些指标、属性、价值、视觉效果和数据具有重要意义的见解。

以目标为中心的设计专注于解决实际问题，是所有出色仪表板设计的基础。 从清楚了解业务目标开始，考虑用户目标，然后传达需要传达的关键信息。

仪表板设计中的上下文

仪表板设计的最大挑战之一是服务于多个角色。 一旦定义了每个用户角色，了解他们的需求在哪里重叠和在哪里分歧就变得至关重要。

有效的沟通是每一个成功的仪表板设计的基本原则。 预见用户可能会发现自己的潜在场景将有助于更好地了解用户的情况。

在设计时始终牢记用户的上下文——确定他们的技术知识、他们对整个系统的熟悉程度、他们的目标等等。

在尝试确定用户行为和上下文时，请务必提出以下问题：

• 设计是否考虑了访问者习惯阅读的方向？
• 与仪表板的交互是否需要技术知识？
• 用户只需点击几下就能完成大部分操作吗？
• 设计是否通过创建向下钻取菜单与用户上下文保持一致； 它使用暗示性的图像和调色板吗？

仪表板设计中使用的调色板也应被视为上下文。 许多企业对企业 SaaS 产品仪表板都是在深色主题 UI 中设计的，因为它们会连续使用几个小时。

深色主题的 UI 可以帮助减轻眼睛疲劳并支持界面内的视觉清晰度。 但是，采用这种方法需要对设计方向进行仔细评估——如之前的设计博客文章中所述的优点、缺点和潜在缺陷：Dark UI Dos and Don'ts。

更好的仪表板设计与用户研究

用户研究有助于创建一个环境，在该环境中，用户可以看到相关、清晰和简洁的数据。 这有助于他们思考他们正在寻找的内容和数据，而不是如何使用和访问它。

一些仪表板必须工作，或者可以轻松地为查看相同基本仪表板的不同角色的用户定制。 用户研究很重要，因为它有助于确定用户的目标、心理模型、环境背景和痛点。 这些因素极大地影响了最终的仪表板设计。

用户体验设计师、研究员和作家 Mike Kuniavsky 指出，这是“理解设计对受众影响的过程”。

设计师必须定义不同的用户类型，并了解他们的目标在哪里相同，在哪里不同。 对于一种用户类型与另一种用户类型，哪些信息最可操作？ 他们必须考虑是否需要从一种用户类型到另一种用户类型的不同布局，或者是否有针对更一般用例的解决方案。

考虑到这一点，最好从基本的线框图开始，然后转向可以在用户研究阶段与实际用户一起测试的原型。 真正有价值的洞察力可以来自只有五个用户的短暂用户研究阶段——这将节省大量时间。

仪表板设计中的渐进式披露

渐进式披露是一种通过减少混乱来保持用户注意力的技术。 创建渐进式披露系统有助于创建以用户为中心的环境，这有助于优先考虑用户的注意力、避免错误并节省时间。 它还允许用户专注于对他们重要的关键功能，而不是被迫浏览所有功能——包括他们不需要或不感兴趣的功能。

渐进式披露是仪表板设计的最佳实践，也将大大降低错误率； 当系统基于功能优先级时，它将提高效率并帮助用户提高对仪表板的理解。

渐进式披露将高级或很少使用的功能推迟到辅助屏幕，使应用程序更易于学习且不易出错。 ——雅各布·尼尔森

动画是满足各种用户需求同时还实现多种功能的好方法。 它是在加载数据和视觉效果时使用的绝佳选择，是一种先进的渐进式披露解决方案。

动画是创造运动错觉的过程； 它是一种动态，可以创造一种进步感和不断的反馈，从而减少用户的不确定性并提高感知性能。

在仪表板中使用渐进式披露的优点：

• 减少用户的不确定性和焦虑（通过显示进展迹象，用户确信一切都按预期工作）
• 为用户提供可查看的内容（部分显示数据）而不是让他们等待
• 为用户提供对即将到来的步骤的明确期望，并了解信息的分层呈现方式

渐进式披露和数据加载的潜在问题包括：

• 以不恰当的方式使用指标和披露。 较短的加载时间和无用的步骤会让人分心并违背可用性原则。
• 在没有明确的进度指标的情况下检索数据的滞后可能会导致用户不确定性和更高的跳出率。
• 使用静态进度指示器是一种意义不大的解决方案，并且不能提供足够的进度信息，这也可能导致用户不确定性和更高的跳出率。

概括

仪表板是一种传递数据和其他信息的强大方式，特别是对于遵循仪表板设计最佳实践和适当数据可视化的以用户为中心、以目标为中心的设计。 尽管每个仪表板都不同，并且有自己的目标、要求和限制，但遵循这些基本原则将有助于创建出色的设计，而不管具体情况如何：

• 首先，理解您的用户类型并了解他们的目标。
• 通过使用暗示性视觉效果、标签、渐进式披露技术和动画向用户传达清晰的故事。
• 通过应用用户研究技术使复杂的事情变得简单。
• 在向下钻取系统中适时显示数据和信息。
• 使用数据可视化以有意义的方式表达信息。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验