如何让用户更好地理解可视化图形?

无需加好友免费技术支持

编者按：随着数据可视化平台的扩展、应用领域的增加和表达形式的不断变化，数据可视化的边界不断扩大，就像所有新兴概念一样。我们在实施可视化设计时应该注意哪些方面？如何让用户更好地理解可视化图形？本文以十个案例告诉您上述问题的答案。

数据可视化一直处于热状态，已成为互联网产品的基本配置。它用于帮助用户更好地理解数据背后的故事，从商业智能到信息传输。

我们的大脑擅长处理可视化信息，这使我们更容易理解图表或图形中的可视化数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来显示数据，从而吸收和理解数据。它应该考虑用户对视觉处理的理解，以改善和简化用户的数据体验。

目前，有许多工具和框架可以用来构建数据可视化图形。今天，让我们回到可视化设计的基础上，了解是什么使数据可视化有效？我们在设计数据时应该遵循哪些指导原则？

以下 10 一个关键点和实践案例将帮助你思考，完成丰富而有洞察力的数据体验。

可视化以视觉表达的形式提取信息，提供上下文，描述数据中的关系。虽然设计师对给定的数据集中模式和关系没有影响，但他可以根据用户的需要选择显示哪些数据和提供什么上下文。毕竟，就像其他产品一样，如果用户不能使用它，可视化就毫无意义。

为新手用户设计的可视化产品应具有结构性、清晰性和吸引力。他们应该用文字直接解释观众应该从数据中得到什么。

改变父母的工作时间：母亲 VS 爸爸

来源：

另一方面，专家用户的可视化产品可以显示更精细的数据视图，驱动用户探索和发现。细节和数据密度应简单明了。

工作来来往往民失业:

来源：

《纽约时报》网站上只有 10 – 15％ 参与视觉交互的用户实际上点击了按钮。《纽约时报》的图形团队制作了业内最好的视觉作品，但很少有人与它们互动。

这表明，在可视化设计中，我们不能依靠交互操作来帮助用户建立理解。关键数据不应隐藏在交互操作后面，而应清楚地显示在图表中。

然而，怎样在可视化中融入交互比较好呢？

设计师应允许在图表中整合更多的数据(不包括非关键数据)，并允许感兴趣的用户对数据集进行更深入的研究。

Nathan Yau 流动数据是合理应用可视化中交互操作的知名案例，广泛应用于可视化行业。下图是他在图表中应用交互操作的案例，顶部是关于死亡原因和预期寿命 tab 切换数据显示维度，点击曲线，查看相应的数据。

2005 年至 2014 年死亡率数据：死因如何因性别和种族而异？

来源：

或者，交互可以作为吸引点，让用户在浏览图表之前亲自参与项目。 Quartz 这部有趣的写作和文化作品。这部作品首先要求读者在分析和概述文化形态之前简单地画一个圆圈 ，这个圆圈表现出有效的可视化特征。

画圆圈的方式讲了很多关于你的故事

来源：

同样， The Pudding 最近发布了一个交互式可视化软件，告诉读者关于生日悖论的知识(生日悖论，如果房间里有 23 个或 23 至少有两个人的生日概率大于一个以上的人 50% ）。虽然大多数非统计学家可能会发现生日悖论，这是概率论中的一个标准问题，非常枯燥且不直观，但这种可视化使得它看起来有趣且易于理解。创作者融入最近的用户互动，使整个体验非常相关。

生日悖论实验

来源：

由于它们利用交互带读者参与数据研究，因此将交互操作融入可视化产品中非常成功。

视觉突出是数据可视化的强大工具，使视觉元素从周围环境中突出。它可以用来引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉突出一些细节并抑制其他细节，我们的设计更清晰、更容易理解。

一些视觉变量 —— 颜色和大小 —— 它是我们创造和控制视觉显著性的关键。

色彩方案是数据可视化设计的关键因素。众所周知，颜色特别容易被视觉识别。我们可以使用温暖和高饱和度的颜色来突出关键数据点，并使用冷色调和低饱和度的颜色来将不太重要的信息放在背景中。

2014:最热年份

来源：

尺寸也很容易创造视觉突出。大元素和小元素更有吸引力，所以扩大你想让用户先阅读的元素，减少不相关的文本和元素。

用颜色表达分类信息

Cleveland 和 McGill 著名的信息可视化研究 —— 视觉编码的有效性（即数据维度和视觉属性的映射）。根据人们对视觉编码的准确感知，对不同类型的视觉编码进行了排序，并给出了以下（简化）列表：

这种数据可视化设计的意义在于，我们显示定量信息的首选应该是根据位置编码(如经典散点图和条形图所示)。与基于角度(如饼图)或区域(如气泡图)的编码相比，基于位置的编码有助于用户在更短的时间内进行更准确的比较。

然而，这并不意味着所有的可视化都必须是条形图或散点图。在研究可视化数据的新方法时，记住这些原则是个好主意。

我真正想强调的是，颜色不应该用来编码定量信息，而应该用来编码分类信息。换句话说，我们可以使用颜色来表示不同类别的数据。

出生时的预期寿命

来源：

不管你是否支持 Edward Tufte 在设计中使用极简主义的极端方法需要不断思考如何消除图表的视觉混乱。通过在数据元素和非数据元素之间创建可视化对比，您的数据就像 Nadieh Bremer 他在获奖作品《美国出生时间》中所做的。

婴儿潮:白天工作时间出生高峰期

来源：

删除不起作用的结构元素，使数据清晰（如背景、线条和边框）。削弱必要的结构元素（如轴、网格和刻度线），否则这些元素将与数据竞争。（网格为浅灰色，最宽 0.5 pt，轴是黑色或灰色，最宽 1 pt )

图表中的每个数据都用图例标记，让读者理解它所代表的内容，对吗？

错误。太多的设计师通过图例告诉用户哪些符号或颜色代表图表中的数据。虽然设计师很容易列出图例，但读者很难列出图例。它们迫使读者在图例和数据之间来回扫描，给读者的记忆带来不必要的压力。

更好的方法是直接在图表上标记数据。作为一名设计师，你的工作是改善体验，方便用户阅读。在下面的例子中，Nathan Yau 去除图例的设计创建了一个带有大量直接标签的小型交互式多重显示。

每人每日平均消费量

来源：

最好的可视化讲述着引人入胜的故事。这些故事通过图表中的趋势、相关性或异常值展示，图表数据周围的元素可以进一步丰富故事内容。这些故事将原始数据转化为有用的信息。

从表面上看，数据可视化似乎与数字完全相关，但一个伟大的数据故事不能用语言讲述。只有通过信息传递清晰的视觉层次，读者才能逐步阅读数据。

例如，可视化标题应该清楚地澄清一个关键观点，以便读者能够理解它。分散在数据中的小注释可以通过异常值或趋势吸引读者的注意，从而支持关键观点。

来源：

我在这里想说的是:帮助用户准确告诉他们在数据中寻找什么！

正如上一条建议所提到的，我们可以在可视化中使用注释来丰富数据故事。有时可以添加图形元素，使这些注释更有意义，以便更直接地与我们的数据相关联。

以这张来自 Susie Lu 以图为例。夏季大片和奥斯卡季的数据重叠赋予了看似随机的高峰和低谷。它们帮助观众理解数据的重要性，比单独使用字幕或注释更直接。

2015 – 2017.08 票房趋势：强劲的开局和后期爆发

来源：

静态可视化通常是 JPG 和 PNG 等位图像格式的发布对移动用户来说是一个明显的挑战。许多数据可视化的美在于它们的视觉细节 —— 小数据点和微妙的编码 —— 许多细节在静态格式的小屏幕上丢失了。

例如：Accurat 诺贝尔奖工作室精美复杂的作品在印刷和高分辨率视网膜显示器上看起来非常棒，但在移动设备上几乎很难识别。

视觉数据

来源：

为移动体验设计，使用图像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化，试图为印刷、桌面和移动设备创建相同的静态可视化设计。

今天提到的所有最佳实践都可以归结为一件事：在复杂性和清晰度之间找到合适的平衡，以满足观众的需求。

制作精美、探索性的可视化细节总是有吸引力的，但这并不一定是最合适的方法。在设计图形时要仔细考虑 ，让读者的知识和目标决定应该包含哪些数据和数据，并整理数据来讲述他们想讲的故事。

作者：Midori Nediger；译者：桃花果；编辑审核：TCC翻译情报局

原文链接：

本文由@TCC翻译情报局 每个人都是产品经理，未经许可不得转载翻译。

题图来自 pixabay，基于CC0协议。