设计仪表盘实用指南

图片

现代仪表盘已从汽车仪表盘中大量借用。 在1960年代的NASA飞行控制中心和自动化时代的曙光中也可以看到有趣的元素。 如今,无论是导弹发射还是托尼·史塔克(Tony Stark)头盔与外星人的战斗,任何相当复杂的情况都不可避免地以某种仪表板的形式出现。

但是我们不是在这里上历史课,而是在学习如何创建一个好的仪表板。 我们的任务是研究在监视现代系统中使用的仪表板和显示图表的类型,但是,许多经验教训也适用于其他情况。

该主题中的信息太多,很难找到从哪里开始! 但我会帮助你。 在研究仪表盘设计的过程中,我们将经历以下几点:

  1. 结构和方案。
  2. 演示和可访问性。
  3. 选择使用的图形。
  4. 改善环境。

第1部分。结构和方案


让我们先停下来,问自己两个问题:谁是我们的目标受众,目标是什么?

了解目标受众及其任务对于其余工作至关重要。 如果您的目标受众是开发经理,他们需要了解有关系统功能的高级信息,那么他们所需的数据将与新任工程师的需求大不相同。

在开始创建仪表板之前,先做一张纸并写下目标用户会问的问题,并按优先级对它们进行排序,并确定需要显示的最佳数据以回答问题。


我在接受本人采访时写的笔记。

考虑形式


添加到仪表板的每个元素都应明确地服务于目标受众的任务,并且小部件的位置应由其重要性确定。 此信息应放在一个屏幕上而不滚动。 我们的人类用户只能在其工作记忆中存储视觉信息的三个或四个元素,因此您需要将所有重要信息存储在一个地方(Few,79)。 为了帮助用户,您可以确保一眼就能看到所有信息1 ,而他不需要记住任何东西。

如果您需要可视化其他信息,请考虑创建单独的仪表板,这些仪表板旨在满足用户的任务,例如,研究垃圾收集问题或使下游依赖项崩溃。 在最佳情况下,这样的研究程序应该能够在不同的系统中重复使用。

最好使用模块化布局 。 在分组原则中描述的小领域中,人们特别容易适应。 这很方便,因为几乎所有现代仪表板系统都以类似的方式工作。

通过编写优先级列表并创建模块,我们可以开始添加仪表板元素。 您可能已经有了一个直观的想法,即最重要的元素需要放在左上角,并且需要将它们从左到右,从上到下放置。


最有可能的是,您不需要此插图。

这是习惯于使用西方语言阅读的人的标准模式:他们的眼睛通常首先注意左上角(Few,107-108) 2 。 但是,重要的是不要忘记您的目标受众:在某些语言中,从右到左或从上到下3的工作更为熟悉。

花点时间来执行!


我知道您迫不及待,但是在开始之前,请先创建一个草图:


这是草图。

看他 与用户讨论。 挂在冰箱上,一边喝咖啡一边享受。 与团队分享。 素描和试验想法很有用。 例如,在创建草图后,我决定在继续之前需要更改顺序。 我的用户(我自己)认为,了解持续时间比犯错误更重要。

好吧,让我们开始吧!


创建了模块化方案后,开发人员通常开始在网格上放置相同大小的图形和其他小部件,并在位置用完时移至下一行。 您不能坚持相同的大小,但可以调整元素的宽度以强调重要性或提高清晰度。 较宽的图不仅更加突出,而且还具有其他有用的属性。 塔夫蒂(Tufty)说,更宽的图形类似于地平线,“人眼自然已经适应了跟踪地平线的偏差”(186) 4 。 另外,在宽图中,需要传输的文本较少,这强调了许多图的因果关系。 对于许多仪表板中使用的折线图尤其如此。 测得的效果(例如,占用的内存或延迟)将显示在Y轴上,时间显示在X轴上,通过增加图表宽度而获得的空间允许“更详细地指定主值”(187) 4


我们扩大了时间表以强调成功率的重要性。

请注意,即使是此仪表板上的“常规”图形也要比高度宽。 出于上述原因,这很好,此外,由于黄金分割率的原理,看上去也不错。

总结一下


恭喜你! 您开始在仪表板开发的最佳思想指导下创建仪表板。 这将是开发仪表板的重要基础。


很好的开始。

简短重复


让我们重复我们在这里学到的东西:

  • 有意识地采取行动,研究用户以及他提出的问题
  • 保持简单性,不要强迫用户滚动并记住
  • 根据需要创建其他相关的仪表板
  • 在重要的地方张贴重要信息以提高意识
  • 使用模块化布局,并优先选择宽而不是窄的图表。

资料和注释


  1. 人们通常只有一双眼睛。
  2. 斯蒂芬·芬(Stephen Few)(很少,斯蒂芬)。 信息仪表板设计 。 分析出版社,2013年。
  3. 如果您的仪表板适用于外星人或机器人,请阅读相应的设计指南。
  4. 爱德华·塔夫特(Edward R. 定量信息的可视化显示 。 图形出版社,1998年。

第2部分。演示和可访问性


因此,我们有一个漂亮的网格,并为此网格的每个元素选择了必要的视觉权重。 现在,我们需要考虑向用户显示数据。 而且这里的所有内容都会出错,因此您需要保持设计的清晰度和稳定性。

指导原则应该是用户的任务和所显示数据的完整性。 由于这些参数的差异很大-用户数量,花费在垃圾收集上的时间以及不可预测的错误数量,因此我们必须创建某种可用于选择解决方案的框架。

为此,我们来研究一下高质量的系统指标可视化内容。

资料选择


您可能希望在本节中,我将说明应在仪表板上放置哪些特定数据。 实际上,这完全取决于您,读者! 记住用户及其目标。 使用您的列表,确定最适合信息监控的四个阶段的最佳方法(32) 1

  1. 高级别更新情况数据。
  2. 确定需要注意的具体要素并将重点放在这些要素上。
    1. 更新有关此项目的信息,增加详细信息
    2. 确定采取行动的必要性
  3. 如果需要采取措施,则必须访问其他信息以确定所需的信息。
  4. 回应。

通常, RED方法和/或USE方法提供了高层系统操作和感知的最佳信号。 在最佳情况下,仪表板应仅包含关键绩效指标(KPI),这些指标必须使您熟悉情况,而不是研究数据(很少,30-31) 1 。 但是,在许多情况下,除了标准KPI之外,还需要更具体的信息。 如果不确定哪一个,请查看用户的目标。 执行用户任务是否需要考虑每个要素?

还应记住,此类仪表板通常是跟踪系统,其读数经常变化。 您将需要添加单独的单位图或时间小部件以跟踪新的有趣的KPI,或者仅跟踪对于当前任务重要的数据。 随着组织的发展,您的组织必须严格检查仪表板并处理不再有用的所有工件。 查看出现文件描述符泄漏问题时添加的表,并问自己:今天是否需要它? 你知道我要记住哪张桌子。

可视化效果


在仪表板的小部件面板中,很可能会有很多选项可供选择。 并用最漂亮的拉! 但并非所有人都平等-人们对视觉信息的类型有所不同。 用户想要快速导航,因此我们的任务是以最有效的方式显示数据。

感知准确度排名。

感知任务按准确性排序。

上面是人们感知任务的数字指标(Mackinley,125) 2 ,这使人们很容易理解可视化对用户大脑的简单程度。 实际上,某些视觉组件是通过在次阈值注意级别上的感知下意识地处理的。 正确使用颜色,形状,位置和移动可以极大地促进并加速仪表板上重要信息的感知(Few,80) 1

注意前的属性样本!

次阈值关注级别的属性示例。 您甚至无需考虑它们就可以注意到它们!

规模和单位


克利夫兰和麦吉尔(830) 3对形式的研究进行了更深入的研究后,按准确度对任务进行了排名,并发现在一般尺度上的位置比在不同尺度上的位置更准确。 很少有人(40-41)通过建议使用度量单位和必要的详细信息来对此进行补充,从而使用户不必执行不必要的计算。 因此,如果可能,应使用相同的比例尺,轴和度量单位。

对齐和单位轴示例

相同数据的三个图形:无单位,有单位和按比例放大。 250为什么?! 左图和中间图更易于比较,而中间图更易于理解。 对齐和单位很重要!

由于有了这些信息,您可以更有效地选择可视化选项,并选择那些可使读者快速感知数据的选项。

时间


我们积极使用时间序列图 ,因此我们需要仔细考虑时间的显示。 图表应使用相同的时间窗口。 如果第一张图在一个小时内显示一个切片,并且与当前时刻相关联,则所有其他图中的图也应相同。 如果使用时间选择器或其他“全局”控件,则尤其如此。

许多仪表板都有一个有用的“光标”:当您将鼠标悬停在一个图表上时,其他图表也会指示相同的时间点。 如下面的示例所示,这有助于用户理解时间,并使时间和空间关系中的所有偏差都显而易见,如下面的示例所示,其中一个图形比另一个宽。

宽幅图表中的光标演示

下方的图形比上方的两个图形宽,但是“光标”的垂直条使您可以对齐它们。

相同的原则适用于水平布局。 在时间和空间之间不保持相同关系的小部件或图形应通过视觉差异(例如,具有“单个值”的小部件)或清晰的指示清楚地传达这一点。

隐藏的聚集


请记住,在许多可视化中,我们需要处理自动进行的数据聚合。

为了使系统正常工作,仪表板必须支持时间窗口,该时间窗口的取值范围可能很大。 默认情况下,大多数系统的仪表板使用“当前”视图,显示从一小时到最后十五分钟的时间间隔中的值。 假设以十秒钟的间隔捕获数据,则每小时应包含360个数据点! 由于每个单独的图表都包含很少的信息像素,因此仪表板工具必须决定如何将所有这些点放入小尺寸字段中。

自动聚合样本

上图显示15分钟的数据,下图显示一周。 请注意,由于平均数据的标准聚合,我们完全失去了有关延迟周期性增加的信息。 窗口小部件分辨率显示在图表标题的右侧。

通常,这是使用数据聚合来实现的:图形显示平均值,数量或类似内容。 默认选择会极大地影响显示。 让我们看一下上一个图表,最大值不是汇总平均值,而是合计的:

最大汇总样本

当汇总一周的最大数据值时,延迟将增加约30%。

您可以在仪表板创建工具的文档中找到其工作方式。 在讨论不同类型的图表时,我们将考虑这个主题。

加法:比率和金额


以我的经验,这是系统仪表板中最常见的问题之一。 通过将计数器显示为比率或总和,我们可以极大地影响用户对数据的理解。 如果我们将错误的数量显示为比率,则图形中的每个点将是错误的总和除以经过的时间。 如果显示总和,那么自然地我们将看到总和。 这意味着数据形式将相同,只是比例不同。

建议您在图表标题中明确指出显示的数据类型:比率或数量。 在两个选项之间进行选择时,请与用户讨论此问题,然后选择最适合您需要的表格。 他期望在图表上看到什么?

注意 :使用聚合时,请考虑使用比率和总和!

警告:没有数据


如果在测量过程中出现任何问题,则可能会丢失一些数据点。 如果用户期望定期显示数据点,则可能会出现问题。 如果发生这种情况,请考虑使用插值。 通常,系统仪表板使用线性插值来连接丢失的数据。 有时他们甚至根本不知道数据丢失了。 有时,数据的分辨率会发生变化。

线性插补样品

蓝线用零填充丢失的数据。 红线使用线性插值。

为了适应这种学问,我联系了斯蒂芬·菲尔本人,问了一个关于这个问题的问题。 我对这项任务已经很长时间了 ,我很好奇他如何建议使用以不规则,不断变化的间隔消失的数据:

如果在时间线上显示值,则该时间线上的间隔通常是恒定的。 也就是说,它们彼此之间的距离相等。 如果间隔改变,则间隔之间的距离也应相应地变化以直观地指示这种变化,并且除非间隔的大小再次改变,否则间隔应保持恒定,此后距离也必须改变。 与连续时间间隔关联的值必须通过一条线连接,但是如果由于某些原因间隔中没有值,则这些间隔中的线不应继续。 如果不时读取值(例如,当发生某些事件时),并且值的读取间隔不相等,则它们不应通过线连接。 在这种情况下,您需要使用单独的数据点或列来编码值。 祝您找到实施该工具的好运。

真有趣! 我不确定该如何以编程方式实现,因此为了解决该问题,我绘制了草图。

如何可视化化更改间隔和丢失数据

中间部分是更快的间隔。 两侧都没有数据。 丢失的数据未连接。 粉色突出显示用于提供信息,不会显示在用户看到的图形上。

您可能想知道:为什么一个仪表板创建包都不实现这种功能? 主要是因为开发人员不知道数据是否丢失。 通常,我们会在度量到达的时间间隔内进行干预,而在现代抽象容器中,这些度量会在一瞬间出现或消失。 是的,这是一个复杂的问题,会激发您寻找解决方案。

一般建议


一些更有用的技巧:

  • 偏爱柔和的自然色彩。 , . .
  • . , . .
  • , , 3D-, .


如果仪表板不符合残疾人可访问性的原则,则可能难以理解仪表板。为了方便用户,请遵循W3C辅助功能指南有些实现可能比其他实现更容易(具体取决于特定工具),但是无论如何都值得考虑。

  • 色盲非常普遍:世界上有1/12的男性和1/200的女性无法区分红色和绿色这对于仪表板尤为重要,因为绿色和红色通常会指示“好”和“坏”状态。对信号使用各种技术(请参见“效率”一节):大小,颜色,文本和图标。
  • : W3C 4.5:1 . . Consumer Finance Protection Bureau .
  • , (). . , CSV , .
  • 使用可用的导航和数据挖掘功能,通过WAI-ARIA之类的工具来利用浏览器帮助程序功能
  • 用户显示的内容是什么?大型电视的仪表板很可能与访问工程师的笔记本电脑的13英寸显示屏上使用的仪表板不同。在为设备设计仪表盘时,请记住这一点。

总结一下


数据映射用户需要仔细考虑。应该考虑到许多方面,在本文的这一部分中,我详细解释了应该考虑哪些设计人员和开发人员创建系统监视工具。

简短重复


  • 使用RED和USE等KPI。根据用户的任务确定其他指标。
  • , , CASE , !
  • , , , . , !
  • .
  • , . .
  • , . .
  • . , .


  1. (Few, Stephen). Information Dashboard Design . Analytics Press, 2013.
  2. . (Mackinlay, Jock D.) Automating the Design of Graphical Presentations of Relational Information. ACM Transactions on Graphics, Vol. 5, 1986
  3. . , (Cleveland, William S., McGill, Robert). Graphical Perception and Graphical Methods for Analyzing Scientific Data. American Association for the Advancement of Science, 1985.

3. ?



等等,但是表格真的是可视化的吗?是的,还有更多!几乎没有1提醒我们,如果我们显示单位值,则没有理由使用(114)1个图表如果只有几个值,那么使用该表将非常有效。


好的旧桌子。

表格是常见且易于理解的可视化工具,用于查找含义。上表使查找值及其相关参数变得非常容易。对于系统仪表板,此版本可能太重载了,但是我们可以将其转换为“单个值”,如下所示:

表中的即时值

该表被压缩为适合该小部件的卷。

如果用户需要知道一个值,例如总和,平均值或瞬时值,那么使用单个数字或表格是理想的。

折线图


折线图非常适合显示的大多数数据。线图是由直线段连接的点。还应注意的是,在时序图上,此数据插值使用户感觉到了形式和时间的联系您经常会从观看图表更新的人那里听到该指标上升或下降的信息。

形状清晰的折线图

形式是视觉的。事情正在延迟发生!

折线图是流行的可视化效果,因为它们在亚阈值关注级别以最少的像素数体现了许多属性。线条具有倾斜度和角度,位置和颜色,可让您毫不犹豫地提取大量信息。您可以使显示复杂一些,并使用线条的粗细和亮度吸引注意:

注意线条粗细和强度的示例

显然,棕线是最重要的。

并非所有内容都限于折线图。


在关闭带有文章的选项卡并将所有窗口小部件转换为线形图之前,我将讨论一些需要注意的方面。图表上太多的线会隐藏其形状,模糊颜色,增加感知延迟并使其无用(在此图表上,您只能分析离群值)。在这种情况下,热图将为我们提供帮助(请参见下文)。

折线太多的折线图

线条之间的距离非常近,很难区分。

折线图使用一条线在两个点之间插入数据。在大多数情况下,这是理想的,因为线条所形成的形状有助于感知。不幸的是,插值还会隐藏丢失的信息,甚至会造成伤害:让我们认为我们拥有的数据实际上是没有的。以上面的折线图为例,为每个读数添加点:

线图,每个测量点

点告诉我们,每一次延迟变化我们只会得到一个读数。

线的长度可能会误导测量数量多于实际数量,例如,如上图中的变化。

面积图


首先,请勿使用区域不重叠的图表一个图表与另一个图表重叠只会隐藏数据并且令人困惑。

一张未堆积的面积图,包含被遮挡的数据

这是怎么回事?除了绿色以外,什么都看不到。

所有总数都很重要时最好使用面积图它们与折线图的共同点在于形状。不幸的是,这种形式也是它们的缺点:当下部区域之一发生变化时,上方的所有区域都会发生相同的情况。用户可能不理解是什么导致了更改。在这种情况下,寻找真正的变化可能是具有挑战性的。

堆积面积图显示无法看到贡献者

延迟大约在4秒左右,但是我们无法确定是什么因素影响更改。所有行的值都会改变吗?

代替区域图,很少有人建议使用一个带和的折线图和一个附加图来显示各个值的贡献(Few,146)1这使跟踪更改更加容易。

两张图表显示总和和贡献

此处提供的数据与上面的面积图相同。 左图显示了延迟的总和,右图显示了影响延迟的每个元素。 影响延迟的值已广为人知,同时我们可以看到总和!

条形图


线图显示形状,条形图显示“准确”值。 使用折线图可以使大多数系统指标更好。 可能是比较多个指标的图形例外:

条形图样本

我们可以使用列轻松比较这两个时间序列。 如果有更多的价值,那将更加困难。

由于间隔之间的明确关系和比较长度的简便性,条形图有助于比较每个间隔的值。 如果选择条形图,则意味着对用户而言最重要的是比较少量值。

要小心,并尽量避免产生波纹 。 如果列较小且等距分布,则会发生这种情况。 在各列之间添加一个较小的空间,以在视觉上分隔它们,如上图所示。

重叠栏


查看有关带有​​区域的重叠图的所有内容。 重叠列通常很少使用,仅当整体值很重要时才需要。 用户很难比较堆积的列。

热图


如果折线图太多,请使用热图。 热图使用颜色亮度的变化,因此可以在很小的空间中打包大量数据。 在折线图中,线的重叠会影响感知,而在重叠的情况下,热图会增强颜色。 这具有很好的副作用:热图在叠加图上显示带状,这有助于识别图案和异常值。

折线图和热图的比较

线图除了异常检测之外,在所有方面都非常糟糕。 热图显示主数据数组的分组位置。

显示更多数据和模式识别的能力是有代价的。 在热图中,由于人们无法轻易地区分多种颜色的亮度,因此精度会降低。 很少有人说可分辨性的极限是亮度的5个等级(Few,86) 1 。 这意味着在精度不如可视化的一般形式重要的情况下,最好使用热图。

刻度,标记,间隔等


仅当数据实际具有约束时,才在可视化中使用约束。 例如,以秤的形式显示每秒的请求数是令人困惑的,因为该指标没有最大值!

如果您需要显示一个限制,例如百分比或具有最大深度的队列,那么使用这种可视化效果可能会非常有用。 它们使我们可以报告极限值,并且还可以清楚地知道极限值与极限的接近程度。 当指标具有比较基础时,请使用这些类型的可视化!

范围图样本

这是使用间隔的可接受示例,因为它具有边界并可以帮助用户导航。

在为该可视化添加颜色时,我们将允许用户快速了解当前值,上下边界以及当前值的紧迫性。

不幸的是,我不知道有什么工具可以让您充分使用图表比例尺 。 仪表盘工具充其量只能使用一个标记。

其他图


其他图形不值得一整节。

  • 饼图:请勿使用。 人们通常无法估计图表的扇区面积。 改用列。
  • 甜甜圈图:这通常是显示单个含义的一种好方法。 或只是内部有孔的饼图。
  • 重叠线图:类似于带有区域的图,但比它们差,因为在区域中缺少填充会使它们出乎意料。 避免他们。
  • 火焰图:非常适合某些用例,但通常不适用于系统仪表板,但更适用于探查器。
  • 迷你图:非常适合显示单个值,但是由于没有熟悉的折线图元素,它们通常缺少上下文。 很少有建议的图形,他称其为sparkstrip-他们添加了颜色或阴影条纹来帮助用户导航。 不幸的是,我不知道拥有这些图表的任何工具。
  • 框图:在我们的工具中很少见
  • 散点图:改为使用条形图。 如果稀有数据在很长一段时间内到达,它们也许会派上用场?
  • 散点图:非常适合查找相关性,但这是一个专门的应用程序,因此我们在这里不再赘述。
  • 磁盘和规模:如果您的数据实际上没有上限和下限,那么以磁盘指示符的形式显示它们会造成混淆。 另外,它们徒劳地占用了大量空间。

总结一下


在开始批评我没有提及您的工具具有的一些罕见的可视化效果之前,让我提醒您,如果用户理解仪表板,图形或可视化效果,那么它们是很好的 。 如果扩展了使用场景和用户群,则应返回第2部分中的可视化选择指南。

图表类型的适用范围

最可能的是,这条线是您所需要的。 也许别的东西会派上用场。 龙虾不是时间轴。

使用折线图,它们很棒! 单个值或表格图非常适合显示即时/单个值。 列非常适合比较少量数据集,并且热图也有其自己的应用领域。

资料来源


  1. 斯蒂芬·芬(Stephen Few)。 信息仪表板设计 。 分析出版社,2013年。

第4部分。改善环境。


基础知识:文字


人们读得很好。 仪表板开发人员通常很简洁。 在第2部分中,我们研究了规模和单位。 通过标记数据并仔细考虑这些标签的形式 ,我们可以增强对数据的感知。

但不要更深入:只需改善图表上的签名即可。 请勿更改字母! 假设您是一名新操作员,并且首先看到了一个仪表板。 你要知道什么

有标签和无标签的的图表比较

左图的创建者并没有付出太多努力。 在右侧,有逻辑签名可以帮助用户理解可视化的上下文。

基础知识:后续步骤


如果用户想了解有关特定可视化的更多信息,那么他该怎么做? 通常,单击标题就足够了,然后将打开全屏版本,使您可以更深入地研究可视化效果。 这是放置数据表和其他有用信息的方便位置:

全屏带桌

当您全屏打开图表时,会出现新的工具,因为用户对更深入的研究表现出了兴趣。

如果用户在图表上看到不好的读数,则可能需要使用其他工具或通知同事。 为什么不将这些功能嵌入图表菜单?

图表操作菜单示例

该菜单可能会引导我们使用跟踪异常,将信息传输到Slack或启动记录事件的过程的功能。

人为行为,管理数据


在第3部分的“线性图”部分中,我们谈到了运行图中的时间显示在X轴上这一事实的重要性。这对于用户来说非常有用,因为它可以显示时间的变化,但是时间的流逝并不是我们数据的因果关系 。 为此,我们需要更多上下文。

变化的源头

许多原因都会导致变化。

塔夫蒂建议通过“将其他变量插入图形设计”来改善显示效果(38),以提高因果关系2的可理解性。 这对于系统仪表板非常有效,因为人员或自动化系统所做的更改通常是系统影响的来源。 跟踪和可视化此类事件为用户提供了有关可能与系统行为相关的事件的重要信息。

范围图样本

蓝色菱形表明部署时刻与等待时间的减少高度相关。 太好了!

控制级别数据的频率比我们系统中测得的信号低得多。 有必要给予高度重视,以便使用仪表板将此类更改记录并显示在一个位置。 这大大提高了用户完成任务的速度。

实施:标记事件


不幸的是,大多数用于创建系统仪表板的工具都对该数据提供了部分支持,通常称为“注释”。 事件通常很难重用,它们没有类型,通常被认为是瞬时的 。 某些软件包支持带有开始和结束时间戳记的事件,以执行部署和其他“步骤”更改。

此外,要将注释传输到仪表板,通常必须手动配置数十个拆分系统。 然后,您必须寻找将所有相关事件与仪表板联系起来的方法。 很不舒服!

以下是正确实现此行为的一些技巧:

  • 使用通用输出,例如CloudTrail Events和CI / CD系统。
  • 努力重用事件,以便用户不必创建自己的事件,而仅在其仪表板上工作。
  • 避免混乱:太多的事件与没有事件一样糟糕!
  • 确保事件中有一个链接,以便用户可以单击它并查找更多信息。 这为用户提供了上下文,但允许仪表板不转变为管理界面。 最好是用户只需单击链接即可。

标准,任务和协议


一些关键绩效指标具有可接受的范围,内部目标甚至合同义务。 将此信息添加到相关图形中可以是可视化的一部分(请参阅第3部分的“比例,标记,间隔等”部分),也可以是小部件内的上下文。 此上下文使用户可以避免对图表应如何“外观”或当前值如何影响涉众的要求。

许多工具都支持类似的水线功能。 添加它们可以为用户提供其他上下文,即时间顺序不是一个任意值,而是与我们的期望进行比较。

图表中SLO值的样本

我们服务的SLO以“水线”的形式添加到图表中。

我们可以通过添加时移,平均偏差或各种类型的异常检测来扩展此功能,以显示期望值:

时移指导的样品

这就是正常读数的样子。 这种循环模式看起来不错!

由于我们知道这些极限值和期望值,因此我们可以进一步向前迈进,并提前为用户处理信息。 在违反规范或期望的地方,我们可以主动指出这种违反情况。 然后,用户将注意最重要的信息(很少,54) 1

突出显示的SLO违规

看起来我们在当前图表上正在打破SLO!

我们将图表上的匿名行留在了具有大量上下文并清楚指示系统状态的情况下。 我们清楚地看到了SLO的多余部分!

危险或其他不适情况的信号


通常,系统仪表板用于诊断崩溃,尤其是响应危险信号时。 上面显示的控制速度范围可以补充来自危险信号的数据。 它们何时以及如何工作?

警报上下文示例

危险信号,突出显示的违例和超过阈值的着色值的时间轴标签。

此信息使用户可以了解引起警报的原因,并帮助他解决问题。 其他图表可能会提供其他上下文,否则我们添加的菜单将有助于采取进一步的措施。

投影和其他综合数据


显示数据的主要部分是对系统读数的直接测量。 因此,您需要小心显示预测的,预测的或以其他方式合成的数据,以便用户理解他应该信任的内容。 消费者金融保护局(Consumer Financial Protection Bureau )指导如何淡化此数据

这样的问题的一个例子是临时风扇图


估计值和可能的未来值范围使用户可以看到可能发生的情况。

简短重复


  • 仔细考虑图表上的签名,在其上添加标题,子标题和所有其他必要信息。
  • 我们的工作并没有按时间顺序结束。 用户需要上下文来了解其他情况。 此上下文应来自组织/公司的各个部门。
  • 按时间顺序显示事件数据可帮助用户了解可能发生的变化。 这样的事件是观测数据,具有较高的信噪比。
  • 可以通过添加正常值,期望值或目标值来改善图表上的数据,从而使用户能够更好地导航。
  • 添加危害信息有助于加快事件响应时间。
  • 使用任何类型的投影都需要仔细考虑的可视化。

总结一下


在用户的帮助下,我学到了很多有关如何创建好的仪表板的知识。 许多课程与我以前的观点和建议相矛盾。 其中许多建议表明,我们需要改进工具的量,尤其是在上下文方面。

这一切非常重要 。 许多组织将这些仪表板用作有关关键任务服务的状态,性能和可用性的主要信息源。 它们也是设计组织信息交换的来源。 在许多情况下,仪表板业务,因为公司无法看到使用该网站的人员。 我们唯一的观察方法是我们收集和显示的数据。

仪表板和图形是可以极大地提高开发人员工作回报的资源。 经过几天的深思熟虑的设计开发,工程师,经理和/或用户可以节省数千小时。 在许多情况下,它们可以导致对问题的更快响应。

值得您花时间,对吗?

我希望您也喜欢阅读本文,因为我研究并编写了这些信息。 我建议您研究每一部分末尾指出的资源,以更深入地研究该主题。

资料来源


  1. 斯蒂芬·芬(Stephen Few)。 信息仪表板设计 。 分析出版社,2013年。
  2. 爱德华·塔夫特(爱德华·图夫特)。 定量信息的可视化显示。 图形出版社,1998年。

Source: https://habr.com/ru/post/zh-CN449048/


All Articles