辅助功能优先的图表可视化设计方法

作者：Kent Eisenhuth是皇家艺术学会的会员，也是Drawing Product Ideas的作者，Kent开发了改善协作的视觉语言使用数据可视化案例研究，我们将探索可访问性优先的方法如何引导我们走上为图表创建更好的视觉设计的道路。在整篇文章中，我们将重点介绍如何使用看似受约束的 Web 内容可访问性标准 （WCAG）成为我们设计过程中的授权因素。我

设计狗和程序猿

196人浏览 · 2022-07-22 13:51:04

设计狗和程序猿 · 2022-07-22 13:51:04 发布

作者：Kent Eisenhuth是皇家艺术学会的会员，也是Drawing Product Ideas的作者，Kent开发了改善协作的视觉语言

使用数据可视化案例研究，我们将探索可访问性优先的方法如何引导我们走上为图表创建更好的视觉设计的道路。在整篇文章中，我们将重点介绍如何使用看似受约束的 Web 内容可访问性标准 （WCAG）成为我们设计过程中的授权因素。我们还将讨论这种方法如何使我们为每个人带来意想不到的更好结果。

您是否听说过为可访问性进行设计会为每个人带来更好的结果？下面是一个关于辅助功能优先的方法如何为图表带来整体更好的视觉设计的故事。

2018年，Kent是Google Cloud第一个专门的数据可视化团队的创始成员。凯在团队成立后不久就加入了。早期，我们在许多Google产品中创建了几个突出的可视化效果。我们的团队是一群充满激情的设计师、研究人员和工程师，他们还编写了Material Design的数据可视化指南。然而，随着我们继续履行我们的使命，我们意识到我们的工作并不像我们希望的那样具有包容性，当我们开始采用新的可访问性标准时，我们意识到我们还有更多工作要做。我们强烈认为，可访问性超越了合规性，我们有机会创造真正有用的东西。

对可访问数据体验的需求

数据可视化是能力主义者

可视化效果仅适用于那些能够完全看到的人。根据全国盲人联合会的数据，美国有760万人患有视力障碍。我们还知道，色盲影响全球每12名男性中就有1名。这些人通常不依赖辅助技术（如屏幕阅读器）来消费Web内容，他们将成为我们案例研究的重点。对于大多数人来说，图表提供的价值和见解会丢失，在某些情况下，图表提供的信息很少甚至没有。作为我们组织世界信息并使其普遍可访问的使命的一部分，我们有责任通过使每个人都可以访问数据来成为网络的好公民。

可访问性优先的方法带来了更好的视觉设计

与移动优先类似，可访问性优先方法在设计过程的一开始就考虑了可访问性要求和约束。为了正确地做到这一点，我们通常会与可访问性测试团队一起验证我们的想法，并与残障人士共同制定我们的解决方案。通过这个过程，我们学到了很多东西，它完全改变了我们对表示数据的看法。

有许多方法可以使数据可访问，但现在，让我们专注于视觉设计的可访问性优先方法。在过去的两年中，我们的团队提出了很多关于数据可访问性的问题。信不信由你，这些问题中的大多数都集中在可访问的图表颜色，编码和视觉设计上。这就是为什么我们现在想把重点放在视觉设计上。我们的可访问性优先方法可确保可访问性是图表视觉设计的核心，而不会影响焦点，牺牲可读性或添加不必要的图表摘要。

让我们将这种方法与纽约市的古根海姆博物馆（Guggenheim Museum）进行比较。在这个博物馆中，所有的展品和艺术品都围绕着一个大型的无障碍坡道排列，该坡道螺旋式地穿过建筑物的各个楼层，如下图所示。

古根海姆博物馆标志性的内部螺旋坡道和中庭景观。（图片来源：Evan-Amos）

这个坡道是每个人在建筑物中体验艺术品的核心部分，它本质上是可访问的。这比在建筑物中的经验要好得多，这些建筑物具有隐藏的坡道，电梯和改装设备，供行动不便或没有行动能力的人使用。

现在，让我们来看看如何将这种思维应用于可视化图表设计。

挑战

最近，我们的任务是帮助开发人员了解其应用、网站和数字体验的整体延迟和性能。应用的基础代码库通常由一系列函数组成，这些函数的执行是为了使其功能正常工作。代码结构越高效，函数执行速度越快，整个应用的性能也越好。

减少延迟是任何良好应用体验的重要组成部分。毕竟，谁愿意整天盯着加载屏幕呢？很明显，可视化将提供应用底层代码的可概览诊断视图，并且可用于帮助开发人员发现应用代码中的低效率。

选择图表

为了可视化应用性能和延迟，我们考虑了几种图表类型。为此，我们希望将代码库中的每个函数表示为其自己的图表。对于每个函数，我们都会绘制每次运行时执行所需的时间。

有几个图表用于显示变量的分布。下图中的早期探索显示了代码库中同一函数的所有记录的执行时间：

绘制在图形上的示例函数的执行时间。

考虑辅助功能标准

首先，我们遵循了Web内容可访问性指南（以下简称WCAG），以确保我们的可视化符合必要的可访问性标准。这些指南通常用于确定审计员是否可以将数字体验视为可访问。这使我们能够缩小选择范围并选择一个大方向。最初，我们考虑使用直方图（见上文），因为它比前面显示的示例更具可扩展性。

显示为函数记录的执行时间的示例直方图。

考虑低视力用户

我们知道，可视化需要提供一目了然的见解，即使对于视力低下的人，以200%的缩放级别查看内容也是如此。因此，默认情况下，可视化应该是可扩展的，并占用尽可能少的屏幕空间。这样，在放大时，低视力用户不必滚动即可阅读图表。

当直方图减小时，比较其条形的高度并将其值映射回压缩的 Y 轴尤其困难。在这些情况下，可读性会迅速下降。下图突出显示了压缩直方图的一些常见可读性问题：

具有压缩 Y 轴的直方图示例。突出显示的条形表示的值很难相互比较。（大预览)

在某些情况下，我们知道我们想要比较多个函数的性能。比较两个堆叠直方图之间的条形高度并不容易：

堆叠直方图示例。突出显示的条形表示的值很难相互比较。（大预览)

由于我们减小直方图大小的能力有限，我们也知道滚动将成为一个问题。因此，我们很快消除了使用直方图的可能性。

相反，我们考虑使用连续色带来表示代码库中多次运行函数的记录执行时间（见下图）。我们还可以堆叠多个泳道以提供额外的见解。

示例热图。（大预览)

考虑颜色对比度要求

WCAG 辅助功能指南要求图形与其背景的对比度至少达到 3：1。有了这个要求，我们对颜色值的选择更加有限，尤其是在白色背景上显示可视化效果时，这是Google当前品牌的核心部分。为了适应这种情况，我们决定使用有限的离散顺序调色板，而不是应用映射到连续值范围的连续色带。

颜色可以映射到一组分组的值范围或条柱。这种技术被称为数据分箱，它使我们能够将较小范围的颜色应用于可视化。在这样做的过程中，我们可以确保我们使用的颜色符合WCAG的最低3：1对比度要求。

下图显示了连续调色板和分箱离散连续调色板的比较：

连续调色板和离散顺序调色板的比较。（大预览)

为了实现所需的 3：1 颜色对比度，我们在每个热图图块之间打开了空白。这样，我们就不必担心颜色的阴影满足彼此的对比度。

具有高对比度调色板的热图示例。（大预览)

虽然此更新满足 WCAG 辅助功能要求，但它使热图更难阅读。此外，这种可视化的大胆性质可能会将焦点从可视化之外可能更重要的屏幕元素上移开，例如警告和警报。

考虑色盲用户

为了减少对解释颜色的依赖性，WCAG要求使用颜色之外的东西来传达意义。这可以是纹理、图形元素、图标符号或其他编码。很容易添加任何纹理，图标或图形元素来满足此要求。但是，必须非常小心地完成。在对可访问图表设计进行的几项可用性研究中，我们发现参与者误解了这些添加的内容。通常，人们觉得它们代表了额外的指标，状态或带有意想不到的含义。最后，我们必须选择一些微妙而有效的东西。

经过仔细考虑，我们选择了其他编码。一旦我们引入了将值范围装箱的想法，我们就可以再次考虑使用框高度来表示五个可能的值范围，如下图所示：

图表图例，演示如何使用框高度来表示值范围。（大预览)

通过此更改，我们可以绝对控制箱子高度的范围，并且可以确保很容易比较所有箱子的高度。下图说明了应用于图表的这一想法：

演示使用框高度表示值范围的可视化效果。（大预览)

回避颜色对比度要求

现在我们已经添加了第二个编码，我们想看看如何改进设计。虽然WCAG建议所有颜色与白色背景的对比度达到3：1，但我们找到了一些在指南范围内工作的方法，同时使用更广泛的值范围。由于我们现在使用多种编码（例如，色调和框高度）来传达含义，因此我们意识到我们的选择有点开放。

为了达到所需的对比度，我们在每个盒子的顶部和底部添加了端盖。这些端盖的厚度为3px，对比度为4.5：1。我们添加了微妙的圆角，以赋予其视觉吸引力，并确保它符合Google材料设计系统的美学。

使用端盖标记块的顶部和底部的示例。（大预览)

由于端盖的位置各不相同，并且它们达到了所需的对比度，因此我们可以对盒子填充物应用更广泛的阴影范围，以加强意义并创建更具吸引力的视觉设计。然后，我们可以使用最初没有达到所需对比度的浅色调。我们可以在下面的实践中看到一个这样的例子。添加端盖是确保低视力和色盲用户仍然可以阅读图表的聪明方法。

应用于可视化效果的端盖示例。（大预览)

新的图表类型

生成的图形是部分直方图和部分热图 - 我们称之为热通道。它使用装箱范围来表示事件的时间和数量。这是对几种图表类型的重大修改，这些图表类型严重地成为自己的新图表类型。

样品热道可视化。（大预览)

那么，为什么对于视力充足的人来说，这是一个更好的可视化呢？

作为人类，我们大多数人生来就具有潜意识地发现环境中的趋势，模式和异常值的天生能力。我们通过我们看到的图像来做到这一点，它几乎是瞬间发生的。

想象一下，你正在杂货店购买农产品。很容易发现发霉的农产品，这些农产品可能不安全食用。这种能力被称为预注意处理，几十万年来一直是我们作为一个物种生存不可或缺的一部分。

新鲜苹果和烂苹果的视觉比较。（大预览)

可视化是利用这些核心功能的图形。在我们的例子中，我们通过设计这个特定的图表来利用这些功能。在浏览它的几毫秒内收集见解和价值是相当容易的。

在热道的情况下，在瞥一眼时会发生视觉上的“斑点”效果。当它眯着眼睛或稍微模糊时，它甚至会保持站立。我们为了满足可访问性要求和WCAG标准而做出的所有视觉设计决策都是图表设计的核心部分。由于这些想法没有修改到现有的图表中，因此我们能够创建一个可访问的图表，而无需添加无关的图表或牺牲视觉设计和抛光。

除了美学上的好处之外，我们的可访问性优先方法还为图表带来了更多有用的应用。为了开始，热通道可视化可以重复堆叠（见下文），以便人们可以了解堆栈中不同事件类型的相关性。

通过堆叠的热通道测量三种功能的性能。（大预览)

作为奖励，我们意识到这个可视化也可以作为迷你图阅读：

热通道简化为迷你图。（大预览)

它也可以很好地用作小倍数：

热车道在记分卡中作为一组小倍数工作。（大预览)

最后，它可以显示几百万个数据点。当我们开始在日常工作中应用它时，我们很快意识到可能性是无穷无尽的。在我们看来，视觉打磨在最后几个例子中确实闪耀着光芒。

结论

如果我们没有预先考虑可访问性要求，我们可能已经确定了通用热图或直方图，并且不会考虑将它们组合在一起。我们将错过创建适合每个人的更具可扩展性和可浏览性的可视化效果。与移动优先运动如何改进我们设计数字产品体验的方式类似，可访问性优先的方法可以使我们能够从根本上创建更好的数据表示，从而为每个人提供更多的见解和价值。

可访问性不仅仅包括视觉设计吗？

这仅仅是个开始。虽然视觉设计是可访问性的核心部分，但我们一直在重新思考数据可视化的整体方法，并且我们一直专注于以为每个人提供价值和见解的方式表示数据，无论他们的能力如何。例如，我们一直在以易于使用键盘导航的方式构建图表，供运动技能有限的人使用。

在构建图表时，我们确保遵循使用正确的角色、地标和属性创建可访问的富 Internet 应用程序（ARIA）的规范，以便浏览器的屏幕阅读器可以正确解释图表的所有元素。我们还在确定更好的方法来使用文本突出显示数据中的新兴趋势、峰值、低谷和异常值。在某些情况下，我们甚至使用超声处理，并提供富有洞察力的音频摘要，在数据中显示见解。请继续关注将来有关此内容的更多信息。