信息可视化中的重要准则——以扇贝单词app中的可视化为例

1、简介

这篇博客是一个信息可视化的案例研究。

这学期我们学习了一门信息可视化课程，发现信息可视化居然是一个非常有趣并且相当有挑战性的领域。在完成了这门课的学习后，我们迫不及待地想找到一些真实的、有影响力的可视化案例来实践一下我们的专业技能。

但当我们从互联网上寻找有关数据可视化的案例研究时，我们感到有一些失望，因为网络上关于数据可视化的文章或博客基本上都在讨论一些很fancy很复杂的可视化。虽然它们确实很牛X也很具有启发性，但对我们来说可实践性并不强。作为大学生，我们更想研究一些简单的、有着常见错误的图表，比如折线图或者箱线图，以使我们的论文、网站等作品更加专业，对读者或用户更加友好。

突然，我想起来，在一个我每天都在使用的app里，有一个可视化完全符合我们的要求！

这是不是更有意思了——网络上关于产品级的可视化案例研究并不常见！

注：后文中的配图里可能会出现英文注释，这是因为我们这门课的教授是个老外，这篇博客直接搬的课程作业中的配图

2、可视化的背景

我相信很多朋友都听说过扇贝单词，如果不了解的话可以看一下他们的官网。了解可视化的背景是很重要的，我们将在下一节中讨论这一点。

假设现在大家都已经了解了扇贝单词，下面就让我们来看一下这个可视化——

为了让用户能够更加科学地背单词，扇贝在“学习数据”板块中画出了用户的记忆曲线，并将其与艾宾浩斯遗忘曲线进行对比。可视化及其相关界面如下图所示：

因为扇贝单词app是一款竖屏应用，而这个图表又太长，所以用户必须左右滑动屏幕才能查看完整的可视化。下图展示了完整的图表和滑动方式：

如果您仔细查看这张图表，您肯定会觉得它阅读起来有些别扭，就和我们当时一样。这也是我们想要研究这个可视化案例的原因。确实，它有一个明显的缺点，但还不止于此。现在，就让我们一起着手分析并改进它吧！

2021年1月10日更新：下图中可以更容易地看到这个缺点。

3、分析和改进

正如上文中提到的，如果我们想要分析一个信息可视化，必须首先明确它的上下文（背景）。可视化的上下文主要包括以下四点：

目的：它用来做什么？（探索性的还是描述性的）
读者：它的读者是谁？
媒介：它是在什么地方呈现的？
视觉引导：有没有向读者呈现其他的引导？

首先，这个可视化的目的是向用户呈现记忆曲线，而不是探索数据（比如通过散点图探索变量间的相关性）。或者说，它是描述性的可视化而不是探索性的，这意味着它的质量必须过关（探索性的就没必要了，比如建模前的探索性数据分析时画的图）。另一方面，它被呈现在扇贝单词app上，它的用户是app的用户。值得注意的是，扇贝是一款竖屏手机应用。最后，正如在上面的图中所看到的那样，这个可视化没有其他的可视化引导，所以我们只关注图表即可。

为了能够更好地分析并改进可视化，我们使用Python和matplotlib复现了这张图表，如下图所示：

现在我们可以更深一步地分析它了。首先，正如您所看到的，它的x轴是不均匀的。这很容易让用户感到迷惑，尤其是在看得不仔细的时候。但是，正如我们在上一节中所提到的，不要忘了扇贝是一款竖屏app，这意味着图表太长的话看起来会非常不方便。既然如此，那我们为什么不把它分成两个x轴分布均匀的图表呢？这样的话我们甚至都不用左右滑动屏幕了！

注意，第一张图中x轴的刻度间隔是1天，第二张图中是30天。

现在我们已经解决了最主要的问题。但是，如果你仔细观察图表，你会发现图中还有一个令人困惑的地方。既然x轴上已经标注了“N日后”，为啥x轴0刻度处的label要设置为“今”？把它改为“0”不是更合适吗？

为了缩短篇幅，我们只展示此后的改进结果中的第一张图。

接下来，我们的工作将与认知理论有关。认知理论通过理解人类的心理过程来解释人类的行为。因为信息可视化是通过视觉元素与人们交流信息的技术，这就意味着一个优秀的可视化作品必须考虑人类有关视觉的记忆和注意等认知心理学要素。

隧道效应（Cognitive Tunneling）是有关信息可视化的认知理论中最重要的理论之一。隧道效应是人们在一个特定事物上集中注意力时无法观察周围事物的心理学效应。这个理论支持了很多信息可视化的黄金法则。下面是其中一条最重要的法则之一：

直接注释（label）视觉元素，避免让用户不直接地查看视觉元素。只有当空间很小时使用legend。隧道效应经常发生在查看视觉元素时。如果发生了隧道效应，用户将会无法顺利地取得相关信息，除非视觉元素离它的标签很近。如果用户只能来回地查看legend，他们的工作记忆（working memory）有可能超负荷。

那么，就让我们直接注释图表中的两条曲线吧：

现在，我们将要解决图表垃圾（Chart junk）的问题。图表垃圾是一个图表中对用户理解信息起不到任何帮助，反而会干扰用户获取信息的视觉元素。图表垃圾会占用读者的工作记忆，干扰读者的注意，使得他们无法最有效地获取可视化中的信息。

可能在app的可视化中，因为图表长度的问题，不得不使用（虚线和背景构成的）网格（grid）来引导读者的视觉。但现在，它确实起不到任何作用了，我们可以把它当成图表垃圾移除。注意，网格是最常见的图表垃圾之一，在使用之前一定要想好有没有必要使用它！

最后，让我们来考虑一个非常特殊的问题——色盲问题！据统计，色盲影响着大约8%的男性和0.5%的女性（我记得当年我们高考的时候理综还出过这题），占比并不低。其中，红绿色盲是最常见的，然后是蓝黄色盲和全色盲。让事情变得好些的一个简单方法就是使用对色盲友好的配色，详见https://personal.sron.nl/~pault/。

在改变了曲线的配色之后，我们得到了最终的可视化——

4、总结和讨论

最后，让我们总结一下我们都做了哪些工作：

分析了可视化的上下文；
将图表拆分成了两个x轴刻度均匀的图表；
将图表x轴第一个刻度的标签改为了“0”；
直接注释了图表中的曲线；
移除了网格和背景；
将曲线的颜色改成了对色盲友好的配色。

现在，我们得到了一个更加科学的可视化！

但是，考虑一下，我们改进后的可视化是否过于simple？它真的适合作为app中产品级别的可视化吗？ 我们是否可以添加一些装饰性的视觉元素，以使可视化效果更加美观，但又不降低太多可读性？信息可视化离不开用户反馈。不知道您有没有不同的见解？欢迎讨论哈！