翻译：先森  审校：Mancy  |  UXRen翻译组 #320 译文

 

在《经济学人》，我们对数据可视化非常重视。每周，我们都会在印刷刊物、网站和App上发布大约40个图表。对于每一个图表，我们都试图找到最适合的数据可视化方式，但有时我们也会犯错。如果可以从这些错误中汲取教训，我们可以做得更好，同时也让更多的人也能从中获益。

在深入分析我们的设计文档后，我发现了几个有教育意义的例子。我们在数据可视化中常犯的3类错误：1）误导性；2）表意不明（或混淆）；3）重点不突出（或无重点）。对于上述问题，我们进行了图表的再设计，在印刷发布的时候这很重要。

（免责声明：大多数的原始图表是在图表改进设计之前发布的，在设计后的图表更符合我们的新规格，但数据是相同的。）

 

1. 误导性的图表

我们从数据可视化最严重的错误开始：误导性图表设计。我们不会故意进行误导，但是误导性问题却时常发生。我们来看看三个案例：

错误案例1：坐标轴被截断

这个数据图表展示了左派政治家Facebook发帖的平均点赞数。这个图表的重点是展示杰里米·科尔宾（英国最大反对派工党领袖）发帖的平均点赞数和其他发帖的差异。

原始图表不仅低估了杰里米·科尔宾的点赞数，还夸大了其他人的点赞数。在优化后的设计中，完整展示了杰里米·科尔宾以及其他人的点赞数。

除此之外，原始图表色彩的应用也有些问题。为了更好地模仿工党的颜色，我们使用了不同饱和度的橙红色去区分杰里米·科尔宾、工党以及其他国会议员和政党团体。但是我们没有解释不同色彩的含义。虽然很多读者很了解这些色彩背后的逻辑，但是不了解英国政治的人可能就不太明白。

 

错误案例2：通过改变坐标轴比例来突出数据间关系

上面的图表描述了狗体重随着年份增加而下降的事实。乍一看，还以为狗的体重和颈部尺寸是显著相关的。但这是真的吗？并不完全是。

在原始图表中，体重和颈部尺寸各下降了3个单位（左边从21下降到18，右边从45下降到42）。按百分比算，左边的下降了14%而右边的下降了7%。在优化设计后的图表中，我保留了双侧坐标轴，但调整了比例以更合理地反映变化比例。

考虑到这个图表主题相对轻松，这个错误看上去影响较小。但是这个案例带来的启示是很重要的：如果两个数据系列看起来紧密相关，我们建议仔细看看变化比例。

 

错误案例3：选择了错误的可视化方式

我们在新闻应用ESpresso上发布了一个关于脱欧公投结果的态度的投票图表，并以折线图呈现。这些数据看上去似乎大家对公投结果态度不太稳定——周与周之间数据有增有减。

我们不是使用平滑曲线来显示趋势，而是连接每次民意调查的实际值形成折线图。发生这种情况主要是因为我们的内部图表工具没有绘制平滑曲线的功能。之前，我们对使用更复杂的可视化的统计软件（如R）不太熟悉。如今，我们所有人都可以绘制类似上面重新设计的投票图表。

这个图表另一个注意点是坐标轴范围。原始图表的坐标轴向上拓展到了数据真实范围之外。在重新设计的图表中，我们在纵轴起始位置以及最小数据点之间留出了更多的空间。 在这一点上，Francis Gagnon提出过一个很好用的准则：对于纵轴不是从零开始的曲线图，应当在图形下方留出至少33%的空白空间。

 

 

2. 表意不明

虽然不像误导性问题那样严重，但是数据可视化做不到位就会使人很难理解。

错误案例4：过多的“联想”

在《经济学人》，我们被鼓励制作“引人深思”的新闻报道。但是有时候我们会用力过猛。上面的图表展示了美国贸易逆差和制造业就业人数的变化趋势。

主要有两大问题导致原始图表非常难以阅读。首先，贸易逆差全部是负数，而制造业就业人数是正数。将差异如此大的数据结合在一个图表中并且完整保留两个数据的变化趋势是非常有挑战性的。原始图表的解决方案导致了第二个问题——两组数据的坐标原点不同。贸易逆差的坐标原点在图表的最上方（表中红色线条标注的位置），而制造业就业人数的坐标原点在图表的最下方。

重新设计的图表说明没有必要把两组数据结合起来，也可以非常清晰明了地展示两者之间的关系，并且只使用了非常少的额外空间。

 

错误案例5：颜色逻辑不明确

这个图表比较了各国政府养老金福利的支出占比以及65岁及以上老年人的人口占比，其中特别突出巴西。

为了保持图表最小，设计师用天蓝色标记了部分国家，并用浅蓝色标记经合组织的平均值。

设计师（正是我本人）忽略了一点——通常颜色变化意味着类别的变化。乍一看，以为所有的天蓝色是一组，深蓝色是一组。但事实不是这样，这些国家唯一的共同点是他们被重点突出出来的。

在重新设计的版本中，所有的国家都使用同一个颜色的圆点。然后我调低未被选择的国家的透明度以突出选择出来的国家。其余的部分用文字来表现：重点关注的巴西，使用加粗文本，经合组织则用斜体文本。

 

 

3. 重点不突出

最后一类错误不是很明显。这类图表不会误导、也不会让人困惑。他们只是没有明确表达自己的观点——这通常是因为错误的可视化或者在很小的空间塞了太多东西。

错误案例6：过多的细节

为了展示展示德国的财政预算盈余，我们曾发布过一个彩虹一般的图表。图表展示了十个欧元区国家的预算余额与当前账户余额。由于使用了过多的色彩，其中一些很难去区分或者根本看不清，图表的信息很难识别。对于这样的图表，用户只会一扫而过。更为重要的是，由于我们没有绘制所有欧元区国家，堆叠数据没有任何意义。

我重新审视了这个数据，看看有没有办法进行图表简化。该数据包括了德国、希腊、荷兰、西班牙和欧元区总数。在重新设计的图表中，我决定只强调这些数据。为了解决仅堆叠展示部分国家的问题，我添加了一个额外的类别（“其他”），其中包括所有其他欧元区国家。（因为欧盟统计局的数据修订，重新设计的图表中的当前账户余额总值低于原始图表。）

 

错误案例7：数据太多而空间不足

受到页面上有限空间的限制，我们经常试图一次性强行展示所有数据。虽然这可以节省页面上的宝贵空间，但也会造成一些问题。图表展示了科学出版由男性主导的情况。所有数据点都同样有趣且切题。但是，由于展示了四个研究领域以及发明人共五个类别之多数据，读者很难理解图表要表达的信息。

经过深思熟虑之后，我决定不对这个图表进行重新设计。如果我要保留所有数据，则不得不用一个过于大的图表来表达这样一个简明的观点。在这种情况下，削减一些内容会更好。或者，我们可以展示一些平均值，例如所有领域的女性作者的出版物的平均占比。

数据可视化的最佳实践正在快速发展：今天可以接受的东西可能会在明天不受欢迎。新的、更好的技术一直在涌现。您是否犯也犯过数据可视化的错误？让我们知道！
——Sarah Leo，《经济学人》数据可视化记者

 

原文来源：https://medium.economist.com/mistakes-weve-drawn-a-few-8cdd8a42d368（Sarah Leo，2019.03.28）
版权声明：该文章在UXRen公众号（cnUXRen）首发后方可转载，转载时请注明出处及译者、审校者信息，如有违背，UXRen社区保留侵权追责的权力。

4+