数据可视化的7大致命错误!

蛇型图,贝壳图,山脉图——这些是设计师能非常快地画出来,但不适用于展示数据的图表。为什么这么说呢,我举个例子:假设在健身或电子游戏中,图表的作用更多倾向于娱乐时,这些图标都是不错的创意;但你的目标是更好地提供信息、推动决策的话,那我不建议你们使用太花哨的图表。接下来,我将与大家讨论7种错误的数据处理方式,以及它们的改进方法。

数据可视化的7大致命错误!

01 蛇型图(Snakes)

这种用3D管道图形当作CRM或ERP仪表板的设计,大家肯定都见过吧?我称这种绘图方法为“蛇型图”。

数据可视化的7大致命错误!

虽然这种可视化在视觉上很吸引人,但它们并不能如实地反应数据,难以应用。上图中几乎所有内容都在强调装饰,而实际包含的数据点只有10个。其实在这种大小的控件上,是可以显示所有数字而不需要任何提示的。

数据可视化的7大致命错误!

“斑马”网格、厚度、体积、阴影和渐变不仅占据着大量空间,还吸引着用户过多的注意力,但并没有提供实际价值。

数据可视化的7大致命错误!

且画面中是有足够的空间去显示20个、30个甚至更多的数据点,不止图里显示的这10个。蛇形图可能适合没有太多数据要展示,但需要填充空白的区域,以此提升视觉上的愉悦感。

数据可视化的7大致命错误!

如果我们用蛇形图来表示多种趋势,像下图这样,设计了N条五颜六色发光的3D管道,相信用户看了也会疯掉。

数据可视化的7大致命错误!

应用风险

-既要保证可读性,又要同时显示多个图形,难度非常大;

-线条的粗细模糊了实际数字,所以需要采取笨拙的方式去变通,比如加入“斑马”色或网格等;

-只有在数据相差不大的情况下,才会出现平滑的蛇形曲线,真实的数据往往会将图形压扁;

-连接数据点的曲线并不存在中间点。

如何避免

-如果数据点很少,使用条形图吧!

-如果有许多数据点,不妨用一个简单的细线图表示(这种数据多是连续性的)。

02 嵌套式甜甜圈(Nested donuts)

像蛇型图一样,受到设计师喜爱的甜甜圈,尤其是嵌套式甜甜圈,同样会影响数据准确性、增加数据比对难度。另外,这两种方法在有效利用空间方面,也同样存在问题。

数据可视化的7大致命错误!

这些甜甜圈式的百分比数,用户或多或少都会识别出个大概,如:整圈是100%,半圈是50%,四分之一是25%,三分之二是75%。但是,如果圆圈终点在“一半””和“三分之三”间结束——就像图片中的绿色圆圈,该怎么读?你能多快就能算出50+25÷2,它应该是62.5%左右?

如果只有一个圆圈,可以在中间放置一个百分比数字,但如果小部件包含三个圆圈呢?

数据可视化的7大致命错误!

上图中圆环们的百分比与视觉重量也不匹配,蓝环的百分比更高,但看起来并不比绿环大多少。虽然圆角的边缘看起来很可爱,但会让真实数值增加2-3%,影响数据读取。让我们再来看看下图的非圆角边缘圆环,是不是比前者读取起来更清晰:

数据可视化的7大致命错误!

我们再来简化下,仅用数据点表示:

数据可视化的7大致命错误!

其实图表可以简单得多,三个带有数字的条形栏,用更少的空间就可以传递同样的信息,这对于数据驱动的界面至关重要。

数据可视化的7大致命错误!

简单的条形栏,连图例都可以去掉,让小部件更紧凑,甚至都不用增加多余的颜色。

数据可视化的7大致命错误!

应用风险

-圆环很难解读,虽然用户能识别25%、50%、75%和100%的百分比,但通常会纠结于特殊的中间值;

-嵌套圆环需要图例或提示工具,因为标签无法附加到相应的圆环上;

-嵌套图表中,圆环尾端使数据对比变得困难。

如何避免

-请考虑使用条形图显示百分比;

-选择圆环图表时,避免使用嵌套圆环与圆滑边缘。

03 贝壳(Seashells)

著名统计学家、数据可视化基础书籍的作者爱德华·塔夫特(Edward Tufte)曾多次警示,视觉上吸引人的图标是会骗人的。贝壳是甜甜圈图表的一种时髦变体,圆环每一段的宽度不同,且彼此重叠。

数据可视化的7大致命错误!

简单地说,数据可视化的本质是通过颜色、面积、长度和其他方式直观地表示数字。例如,数字越大,条形越长;百分比越低,面积越小。我们来看“贝壳”图表是如何工作的,较高的百分比不仅增加了圆环的宽度截面,而且半径也会变得更大!

数据可视化的7大致命错误!

重叠和超出的背后逻辑是什么?如何解释这些“数据”?是否意味着图表显示超过100%和大于360度?

数据可视化的7大致命错误!

这些信息可以在同样形状的饼状图上表示,数据点的数量应该是有限的,否则,图表将变成一团糟。

数据可视化的7大致命错误!

还有一种办法,用树形图,其中相应区域的矩形大小表示其百分比。尽管人们通常最擅长用条形图来比较长度,但下图里各区域的对比度,也不错。

数据可视化的7大致命错误!

应用风险

-与传统的饼图不同,贝壳图背后的逻辑并不清楚:数据是由面积、弧半径还是扇形角表示的呢?

-重叠的扇区会使数据失真,无法传达准确数值;

-流畅的3D图标样式只有在模拟数据中才有可能实现,真实数据会影响图表走向。

如何避免

-如果数据不多、且数据对比性不是那么重要,请使用经典的饼图;

-树形图也是一种可行性较高的方法,可以通过矩形面积显示百分比。

04 山脉图(Mountains)

你在业务仪表板中看到过山脉图吗?这种彩色重叠图,是另一种流行技术。

数据可视化的7大致命错误!

在蛇型图部分,我介绍了虚构数据这一缺陷,以上图为例,可视化数据归结为20个蓝绿色点和橙色点。

数据可视化的7大致命错误!

所有连接曲线与数据无关,都是人为添加的。也许是出于好主意——将不同点组合成一个清晰的趋势,或者填补空白,使它看起来更好看。

数据可视化的7大致命错误!

但为什么它对业务界面是危险的呢?举个栗子(看下图),在工程图上有两个相邻的点,12:00为50kg/m²,13:00为60kg/m²,这些点都是用平滑的曲线相连。而用户在12:30时实际看到的压力约为55 kg /m²,但这个数据就是错误的,因为没有人进行测量。

数据可视化的7大致命错误!

该值可能会从50突然上升达到59,并在13:00达到60;或者它可能正在逐渐增长,甚至可能在13:00达到60之前跌至30。图表的点越少,则可以进行猜测的空间就越大。

数据可视化的7大致命错误!

使用双色条形图不是唯一的选择,还可以在实际数值间,用直线连接,减少可猜测的空间。

数据可视化的7大致命错误!

应用风险

-山脉图给人的印象是连续数据,实际上点与点之间是离散的;

-尽管不知道实际点之间发生了什么,但山脉图曲线始终是平滑的。而点之间的过渡可能是快速的、波动很大的;

-为了呈现平滑的曲线,数据点之间距离会相对松散,占用的空间也相应增大。

如何避免

-确保数据点以及连接线能帮助识别走向趋势;

-如果小部件上有多个重叠图形,请尽量不要使用颜色填充。

05 香肠图(Sausages)

这张图有什么问题?我认为3D“香肠”不是一个好选择,原因如下:

数据可视化的7大致命错误!

这种可视化存在很多问题,最关键的问题是数据盗取。香肠图可以说是界面中的“小偷”,因为在有真实数据的地方,它显示了空白。公平地说,香肠图确实可以保持高对比度,可以看到绿色和橙色间的对比,但这种对比度的代价也太高了。

数据可视化的7大致命错误!

我计算了下,如果上面图表中的柱子为100%,则彩色条之间的空白间隙大约等于3%。乍一看没多少对吧?但如果出现三个不同的颜色,需要两个间隙,那每列的空隙就达到了6%!如果从圆形图表中计算“被盗”百分比,它将达到7%左右,每个缺口大约为3.5%。我将缺少的条形部分重新设计放到新的图表内,并去掉了图例,数据显然更紧凑了。

数据可视化的7大致命错误!

应用风险

-香肠图掩盖了很大一部分的真实数据,不够严谨,不能用分析决策;

-图表在紧凑性方面存在问题,他们需要额外的空间避免显得凌乱。

如何避免

-不要用间隙破坏数据的整体性。通常情况下,不要在各部分之间添加空白,数据总和应等于100%;

-检查图表边缘是否过于圆润,圆度太大会掩盖有价值的数据。

06 摩天大楼图(Skyscrapers)

不同于费尔南多·巴普蒂斯塔(Fernando Baptista)华丽的《国家地理》信息图表,商业仪表板不适合使用等距的摩天大楼图代替精确的条形图。

数据可视化的7大致命错误!

3D图表缺乏准确性,用户无法快速浏览去发现异常,因为3D图形会造成视错觉。在下图里,我试图模拟出第一眼吸引注意力的事物,你能分辨出用彩色圆点标记的条形图,高度都是一样的吗?

数据可视化的7大致命错误!

绿色方块标记的条形图,高度是相同的;而玫瑰色圆块,左侧的方块高出3%。如果是数据准确性不足,为什么设计师不将平行六面体变暗,而只突出显示前部呢?效果如下:

数据可视化的7大致命错误!

但准确性并不是唯一的问题,我的意思是反映自然的、细微的数据波动,而不是这种夸张的过山车式,一直起伏不定。

数据可视化的7大致命错误!

来简化一下数据,测量参数的细微变化就可以被更好地区分。如果想突出显示(例如,选定时间范围内的最高值和最低值),可以选择深色主题。顺便说一句,我并没有压缩条形图的宽度,但现在的图表比摩天楼图窄了两倍!

数据可视化的7大致命错误!

应用风险

-与数据量相比,摩天大楼以及其他等距可视化图表都占据了大量空间;

-这样的图表无法显示细微的数据波动;

-当摩天大楼图突出显示顶部时,使图表非常难阅读。

如何避免

-不要在商业图表上使用3D效果;

-确保图表设计反应真实的数据,通常这些数据不会像模拟出来的那样波动。

07 立方体图(Baby cubes)

如果你有孩子,可能会知道一个叫做婴儿立方体或活动立方体的玩具。它是一个盒子,侧面有各种手柄、闩锁、插座、开关、算盘、按钮和数字等。但这些与数据可视化是何关系?因为现在,我看到了设计师的一个很不好的作法——绘制一种非常吸引人的仪表板,但其实仔细看过后,它们没有什么实际价值。

数据可视化的7大致命错误!

立方体图是前几点中提及的危险样式的集合,是一种误导性的图示,而不是一个有用的工具。正如在例子中展示的,它充满了花哨的细节:阴影、透明度、体积、发光、圆角和等距形状等。所有的小部件都很笨拙:虽然把屏幕塞的满满当当,但性价比非常低。

这里我就不再示例了,之前和大家详细讨论的如何逐步修复数据可视化,用那些建议来优化吧!

数据可视化的7大致命错误!

应用风险

-立方体图使数据在视觉效果上更具吸引力,但它们也失去了准确性和实用性;

-与常见的设计形式相比,圆形、阴影、渐变填充和3D效果,难以承受“不完美”的真实数据。

如何避免

-事先进行用户、业务研究,根据研究结果进行仪表板设计;

-避免因业务需求而过度简化仪表板设计;

-用户测试尽量使用没有提示性的问题。例如:“第二季度的收入是多少?” 而不是“您可以在屏幕中间看到显示收入的控件吗?”

数据可视化推荐读物

《The Visual Display of Quantitative Information》,a classical book on data visualization by Edward Tufte.

《Envisioning Information》,one more great book by Edward Tufte.

《Save the Pies for Dessert》,a nerdy study on pie charts by Stephen Few.

《The Functional Art》,a book by Alberto Cairo.

业界动态

“体验设计师”你的价值到底是什么?

2021-3-31 13:41:51

业界动态

教你一种快速实现LOGO创意的技法

2021-3-31 13:51:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索