InfoNice: 轻松创建信息图 (InfoNice: Easy Creation of Information Graphics)

信息图可以以美观的、难忘的和吸引人的形式传达数据中的信息,通常用于展示对于数据的洞察,而非用于数据探索和分析。该工作主要关注视觉修饰(visual embellishment)。视觉修饰传统上被认为传达的数据与使用的显示资源之比(Data-Ink Ratio)较低。但是,近年来的研究发现它对于数据的传播有价值:可以增强观众对信息的记忆;提供上下文;标记数据;ISOTYPE类型的信息图可以达到和可视化图表相同的阅读速度和准确率。

然而,使用现有的工具很难创建信息图。一些传统的设计系统要求用户有专业的设计能力,并且需要手动进行数据和图元的绑定;通常的可视化构建系统在表达能力上有所限制。最近有一些数据驱动的信息图构建系统被提出,比如 “数据驱动指南”(Data-Driven Guide, DDG),它提供了设计者熟悉的界面和操作,并允许用户将信息图元素属性与数据属性进行绑定,灵活常见丰富的信息图形式。但是这些工作存在2个主要的缺点:

  1. 这些工具和数据探索分析的环境分离,当用户通过可视分析得到一些有趣的结果,想要创建对应的信息图来展示时,需要打开另外的工具,重新导入数据,从头开始构建。这一过程耗时且容易造成错误;
  2. 没有设计背景的普通用户,如数据分析师,也需要通过信息图吸引用户注意,更好地传达数据探索的结果。但是DDG对他们来说使用起来过于复杂。

针对这些问题,[1]中Wang等人提出了一种构建信息图的工具,InfoNice。它集成进了常用的可视分析系统,Microsoft Power BI。用户得到可视化图表后,只需要在其上直接修改图元,系统会保持模版原有的结构,数据驱动地将简单图元替换为用户设计的图元,生成信息图。用户可以方便地在数据探索和展示之间迭代。InfoNice提供的简单易用的界面和操作,使得没有设计背景的一般用户也可以绘制丰富的信息图。

InfoNice

InfoNice界面包括工具栏、预览窗格、格式窗格和布局窗格。

InfoNice的编辑界面

InfoNice使用户可以设计图元,从而设计信息图。InfoNice提供如下定制图元的功能。

视觉元素

在InfoNice中,图元由视觉元素组合而成。InfoNice提供了3种视觉元素:

(1)基础形状和图标(icon):系统提供的基础几何形状和内置的ISOTYPE图标库;

(2)图片元素:用户上传的图片;

(3)文字元素:一行或多行的文本框。

元素布局

InfoNice定义了内边界和外边界,内边界的大小与每个数据值有关而外边界则对应数据的最大值。用户通过指定不同元素的大小和相对于内外边界的位置来进行视觉元素的布局。

InfoNice中的内外边界

元素重复

使用重复元素映射数值是信息图常见的形式。InfoNice提供高层次的功能封装使用户可以通过简单的交互定义元素重复。InfoNice提供2种设计:使用对齐的元素,但是有些元素可能只有部分被填充颜色;或者要求每个元素都被完整地填充,这样可能造成元素不能对齐。

元素重复设计:元素对齐,可能会有部分填充。

元素重复设计:元素完整,可能不对齐。

InfoNice也允许用户灵活定义元素堆积的方式:可以固定行和列的元素数,也可以固定一个方向的元素数,另一个方向的数量由系统自动计算。

InfoNice定义元素重复方式。

数据绑定

InfoNice允许用户绑定元素属性和数据属性。元素属性包括颜色、图标、文本、长度、比例;数据属性包括类别型、数值型和数值区间。允许的绑定方式如下表。

InfoNice允许的元素属性和数据属性绑定。

多视图

对于small multiples,当用户将其中一个转换为信息图后,其它视图也会根据各自的数据创建相同形式的信息图。

同时,当创建的信息图与其它可视化视图进行组合时,可以通过刷选和连接与其它视图进行联动。

评估

信息图样例

作者们提供丰富的样例证明InfoNice具有很强的表达能力。比如,支持柱状图、折线图和多序列的柱状图、折线图;不同的元素重复方式;不同的方式映射数值(长度或填充比例);支持用户上传的图片作为元素等。

InfoNice创建的信息图样例

实验室环境用户调研

用户调研有16位被试参加,其中只有2位被试有设计的背景。由于目前没有与InfoNice的目标完全一致的工具存在,作者们选择了DDG进行对比。被试需要使用2个工具在不同数据集上进行数据探索和数据构建,使用2个工具的顺序是随机的。被试首先完成主试提供的简单任务,然后自由探索数据,创建信息图。

结果显示:

  • 时间方面,被试使用InfoNice创建信息图要快于使用DDG。
  • 质量方面,请一些外部志愿者对被试创建的信息图按照1~10进行打分。结果发现使用InfoNice创建的信息图得分比DDG创建的分数更高。
  • 表达能力方面,2个工具都允许创建通用图表的很多变种,但是InfoNice的表达能力弱于DDG,比如,InfoNice不支持径向布局。
  • 易用性方面,InfoNice更加容易学习和使用,主要是依靠它提供高层次的功能支持常见的信息图构建方法且提供普通用户熟悉的操作方法,拖拽和点击。
  • 设计过程方面,InfoNice使用户更好地在探索和展示之间进行迭代。

实际用户反馈

从收集到的实际用户的反馈来看,大部分用户明确地表达了对InfoNice的正面评价。他们对InfoNice提供的创建有吸引力的信息图的能力印象深刻。一些用户也报告了使用中的一些问题,如图片的格式问题等。

终端用户调查

通过对35个用户进行问卷调查发现:

  1. 用户对InfoNice的整体评价,包括有效性,表达力,美观性、易用性、易学习性和满意度方面,评价很高。相对而言,易用性和易学习性的得分最低,作者们希望通过提供更多的样例和教程来解决这个问题;
  2. 用户对各项功能的评价都很高,在5分量表中达到4分左右,即用户认为这些功能非常有帮助;
  3. 在使用频率方面,大约三分之二的用户定期地使用InfoNice,其中4名用户每天都在使用InfoNice。

结论

这个工作提出了一个新颖的信息图设计工具InfoNice,帮助没有设计背景的普通用户快速地将可视化图表转化为更能吸引读者的信息图。InfoNice被集成进现有的可视分析系统中,连接了数据探索和展示,加快用户在二者之间的迭代。作者们进行了实验和调查,证明了InfoNice的有效性。

参考文献

[1] Y. Wang, H. Zhang, H. Huang, X. Chen, Q. Yin, Z. Hou, D. Zhang, Q. Luo, H. Qu. “InfoNice: Easy Creation of Information Graphics”, In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (p. 335). ACM.

评论关闭。