10个web数据可视化的最佳实践

数据可视化已经迅速成为在web上传播信息的标准。它被广泛应用于各行各业,从商业情报到新闻,帮助我们理解和交流数据中的洞察力。 我们的大脑对视觉上呈现的信息进行处 […]

2018年8月3日

数据可视化已经迅速成为在web上传播信息的标准。它被广泛应用于各行各业,从商业情报到新闻,帮助我们理解和交流数据中的洞察力。

我们的大脑对视觉上呈现的信息进行处理,使我们更容易理解图表和图表中显示的数据,而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的这些优势来显示数据,以便易于吸收和理解。它应该考虑到我们对视觉处理的了解,以增强和简化观众对数据的体验。

现在有这么多工具和框架可以构建这些图形,现在是时候回到基础上来了。什么使数据可视化有效?在设计数据时应该遵循什么指导原则?

下面的最佳实践将帮助您设计丰富、富有洞察力的数据体验。

1  为特定受众设计

可视化用于显示模式、提供上下文和描述数据中的关系。虽然设计人员不会影响给定数据集中的模式和关系,但她可以根据用户的需要选择显示多少数据,以及提供什么上下文。毕竟,就像其他产品一样,如果用户无法使用可视化工具,那么可视化工具就毫无意义。

对于新手来说,可视化应该是结构化的、明确的、吸引人的。他们应该直接说明观众应该从数据中拿走什么。

另一方面,面向专家受众的可视化可以显示数据的更细粒度的视图,从而允许读者驱动的探索和发现。细节和数据密度应该胜过简单和清晰。

2  使用(但不要依赖)交互性来促进探索

这里有一个令人警醒的数字:只有10-15%的纽约时报网站上互动视觉效果的访问者会点击按钮。纽约时报的图形团队制作了一些最好的业务,几乎没有人与他们互动!

这对交互式可视化设计的启示是,我们不能依赖于交互来构建理解。关键数据不能隐藏在交互元素后面,而应该在没有交互的情况下可用。

然而,交互的好处是允许集成额外的数据(否则可能被排除),从而允许感兴趣的查看者更深入地研究数据集。《流动数据》的Nathan Yau用这种交互可视化方式垄断了市场,在他的死亡原因和预期寿命的图表中可以看到。

或者,交互可以用作钩子;一个吸引注意力的工具,它能让你的观众在他们能够走得更远之前,亲自投入到这个项目中。看看这个有趣的文字和来自Quartz的文化。这篇文章首先让读者简单地画一个圆圈,然后再去勾勒出一种对文化形态的分析,它的特点是一些简单而有效的可视化。

类似地,《布丁》最近发布了一个互动的可视化图来告诉读者生日悖论。虽然大多数非统计学家可能会发现生日数悖论——概率论中的一个标准问题——非常枯燥和不直观,但这种可视化让它看起来非常有趣。创建者合并最近用户的交互的方式使整个体验非常可信赖。

这两个交互示例都可以工作,因为它们允许查看者参与数据,而不需要交互来理解。

3 利用视觉上的突出来集中注意力,引导体验

视觉显著性是使视觉元素在周围环境中脱颖而出的特征,是数据可视化的有力工具。它可以用来引导用户关注可视化中最重要的信息,以帮助防止信息过载。通过利用视觉上的显著性来突出一些细节,抑制一些细节,我们可以使我们的设计更清晰,更容易理解。

一些视觉上的差异——颜色和大小,主要是——是我们创造和控制视觉显著性的关键。

色彩计划是伟大的数据可视化的关键,因为我们都知道,颜色特别擅长打破伪装。我们可以使用温暖的、高度饱和的颜色来突出关键数据点,并使用冷的、不饱和的颜色来将不太重要的信息推送到背景中。

大小也很明显。大元素比小元素需要更多的关注,所以要将元素放大,以便您希望查看者首先阅读,并缩小文本和不太相关的元素。

4  用位置和长度对定量信息进行编码,用颜色对分类信息进行编码Cleveland 

克利夫兰和麦吉尔在信息可视化方面的著名工作调查了视觉编码的有效性(即数据维到视觉属性的映射)。在他们的研究结果中,根据我们对视觉编码的准确程度,他们对不同类型的视觉编码进行了排序,给了我们这个(简化的)列表:

1. 沿着一个共同的刻度的位置

2. 长度

3. 角度

4. 区域

5.  颜色

这对于数据可视化设计的建议是,我们显示定量信息的首选应该是按位置对数据进行编码(如经典的散点图和条形图所示)。与基于角度的编码(如饼图)或基于区域的编码(如气泡图)不同,基于位置的编码帮助观众在更短的时间内做出更准确的比较。

然而,这并不是说所有的可视化都必须是条形图或散点图。在探索新的、令人兴奋的数据可视化方法时,最好记住这些基本原理。

这里我想强调的是颜色不应该用来编码数量信息,而应该用来编码分类信息。也就是说,我们可以使用颜色来显示不同的数据位属于不同的类别。

5  使像记号和轴这样的结构元素清晰但不显眼

不管你是否支持Edward Tufte在设计中极简主义的极端方法,帮自己一个忙,从你的图表中去除视觉上的混乱。likeNadieh Bremer在她的获奖作品《美国出生时间可视化》中,通过创建数据元素和非数据元素之间的视觉对比,让你的数据闪闪发光。

删除任何结构元素(比如背景、线条和边框),这些结构元素不能澄清数据。衰减基本的结构元素(如轴、网格和刻度标记),否则将与您的数据竞争以引起注意。浅灰色的样式网格,最大重量为0.5 pt;黑色或灰色的样式轴,最大重量为1 pt。

6  直接标签数据点

需要对编码某些数据的每个视觉元素进行标记,以便查看器理解它所代表的内容。简单,是吧?

错了。太多的设计师依赖于图例来告诉读者哪些符号或颜色代表他们的图表中的数据系列。

虽然对设计者来说很容易,但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描,给读者的工作记忆带来不必要的压力。

更好的选择是直接在图表上标注数据序列。这通常是一个挑战,但嘿,你是设计师。你的工作就是完成你的工作,这样读者就不必这样做了。在下面的例子中,Nathan Yau已经做了避免使用图例的工作,创建了一个具有许多直接标记的交互式小倍数显示。

7  使用消息传递和视觉层次来创建一个叙事流

最好的视觉效果会讲述引人入胜的故事。这些故事源于数据中的趋势、相关性或离群值,并被数据周围的元素所强化。这些故事将原始数据转化为有用的信息。

从表面上看,数据可视化似乎都是关于数字的,但一个伟大的数据故事离不开文字。消息传递具有清晰的视觉层次结构,可用于一步一步地引导读者通过数据。

例如,一个可视化的标题应该通过明确地指出读者应该从可视化中获得的单一关键的洞察力来展开叙述。分散在数据之间的微小注释可以通过吸引对异常值或趋势的关注来为这种叙述提供支持。

我在这里想说的是:帮助查看者,告诉他们在数据中应该寻找什么!

8  将上下文信息直接覆盖到图表上

正如我刚才提到的,我们可以在可视化中使用注释来帮助创建一个叙事流。有时我们可以添加图形元素,使这些注释更有意义——将信息更直接地连接到我们的数据。

以苏茜·卢为例。“夏季大片”和“奥斯卡季”叠加在一起,赋予了山峰和山谷的意义,而这些山峰和峡谷本来可能看起来是随机的。它们帮助查看者理解数据的重要性,其方式比仅使用注释或注释更直接。

9  为移动体验设计

静态可视化,通常以位图格式(如JPG和PNG)发布,对移动观众来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节——微小的数据点和微妙的编码——而这些细节在静态格式的小屏幕上丢失了。

举个例子:Accurat studio公司制作的关于诺贝尔奖的精美复杂作品,在打印和高分辨率的视网膜显示屏上看起来都是完美的全尺寸,在移动设备上几乎无法辨认。

要设计移动体验,可以使用JavaScript可视化库(如D3)构建响应性可视化。或者为打印、桌面和移动创建相同的静态可视化的多个变体。

10 平衡复杂性和清晰性以促进理解

我今天所接触到的所有最佳实践都归结为一件事:在复杂性和清晰性之间找到合适的平衡点,这与你的听众的需求是一致的。

人们总是倾向于做一个详尽的、微妙的、探索性的可视化,但这并不是最合适的方法。在设计图形时要考虑周全——让听众的知识和目标来决定应该包含多少数据,并对数据进行管理,以讲述你想要讲述的故事。

 

 

 


作者: MIDORI NEDIGER

翻译:高慧

责编:洪宇轩

发表评论

电子邮件地址不会被公开。 必填项已用*标注