数据可视化的7大罪(伪可视化如何杀死实用性)

本篇文章转自:https://medium.muz.li/dataviz-sins-976f3a08948c 

翻译:阿晴,如需转载本篇译文请注明出处!(第一次翻译文章,若有翻译不足之处请谅解,可自行查阅原文获得更明确的阅读。)

已获得作者授权,(见下图)

跑到了原作者的dribble主页的,用我蹩脚的英文评论,作者同意我转载啦~嘻嘻嘻(我怕写简书他不知道,所以写了WeChat)

开森~作者回复我了,嘻嘻嘻,好好学英语啊~!

文章目录:

1.“蛇”

2.“嵌套的甜甜圈”

3.“贝壳”

4.“山”

5.“香肠”

6.“摩天大楼”

7.“小方块”



1.“蛇”

你是否见过以多汁的3D管作为图形的CRM或ERP仪表板设计?我称这种方法为“蛇”。

尽管这种可视化在视觉上似乎很吸引人,但它们对真实数据无能为力,而且更重要的是难以使用。

上面的图表几乎所有内容都是装饰,而实际数据仅包含10个数据点。在如此大的小部件上,你可以显示所有数字而无需任何提示!

“斑马”网格,厚度,体积,阴影和渐变没有任何实际好处,但却占据了空间并且徒劳地吸引了人们的注意。

除此之外,还有足够的空间来显示20、30,甚至更多的数据点,而不仅仅是10。“蛇形”可能表示实际上没有什么数据可显示,并且设计师试图用令人愉悦的东西填充这个空白区域。

现在,想象有必要同时显示多种趋势。 “蛇”不允许你这样做。在下面的图片中,发光管造成了完全混乱。


简而言之的风险

很难显示多个图形并保持可读性。

线条粗细掩盖了实际数字,因此需要使用诸如“斑马”色或网格之类的笨拙替代方法。

该图形的平滑曲线仅在“完美”的模拟数据下才有可能被真实数据压碎。

连接数据点的曲线意味着存在一些中间点,但这只是一种错觉。

如何避免

如果数据点很少,请使用条形图。

如果有许多数据点,意味着数据是连续的,请考虑一个简单的细图。


2.“嵌套的甜甜圈”

像“蛇”一样,心爱的设计师的“甜甜圈”(尤其是嵌套的甜甜圈)也会影响准确性,并将数据比较变成麻烦。另外,这两种方法都无法有效利用空间。

图2-1

人们可以或多或少地处理偶数百分比:整圈= 100%,半圈= 50%,四分之一= 25%,三分之二= 75%。但是,如果圆圈在“一半”和“三分之二”之间结束,如图2-1中的绿色,该怎么办?你能多快计算出50 + 25÷2并假设它应该在62.5%左右?

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

图2-2

可以在图2-2中注意到,百分比与视觉重量不符。蓝色环显示较高的百分比,但看起来并不比绿色环大很多。


现在,四舍五入。它可能使图表看起来很可爱,但最终会扭曲数据。这种舍入在视觉上在实际值之上增加了2-3%的“重影”百分比。让我们来看看,图2-3这些是非圆形的边缘:

图2-3


看看仅舍入了三个简单的数据点就花了多少装饰(包括舍入):图2-4

图2-4

好消息是,图表可以更加简单。(图2-5)三个条形图传达相同的信息,需要的空间更少,并且无需工具提示即可显示数字,这对于数据驱动的界面至关重要。

图2-5


使用简单的栏,也可以摆脱图例,并使小部件更加紧凑,如图图2-6。而且您不再需要颜色,因为标签现在随条带在一起了。

图2-6


简而言之的风险

圆形很难解释。人们甚至可以很好地识别甚至25%,50%,75%或100%之类的百分比,但通常会遇到中间值。

嵌套的圆需要图例或工具提示,因为标签通常不能优雅地附加到相应的环上。

嵌套图表中的圆拱形末端使比较具有挑战性。

如何避免

考虑使用条形图来准确指示百分比。

但选择圆形图时,请避免嵌套圆和舍入。


3.“贝壳”

著名的统计学家和数据可视化基础书籍的作者爱德华·塔夫特(Edward Tufte)多次警告人们,可能存在视觉上吸引人的图表。“贝壳”是甜甜圈图的一种时髦变体,其中彩色段的宽度不同且彼此重叠。

简而言之,数据可视化的本质是通过颜色,区域,长度和其他方式直观地表示数字。例如,数字越大,竖线越长;反之,百分比越低,面积越小。但是,当我们分析“贝壳”图表时,它们应该如何工作?较高的百分比不仅会获得更宽的圆形截面,而且该段也会更厚。

重叠和超调背后的逻辑是什么?一个人如何解释这一“数据”?这是否意味着图表显示了超过100%的角度和超过360度的角度?

可以在形状相同的图表(饼图)上可视化此信息。当然,数据点的数量应保持有限;否则,图表将变成一团糟。

此外,您可以将图表类型用作树形图,其中相应区域的矩形代表百分比。尽管人们通常最擅长比较长度-还是条形图!各个区域的可比性也很好。

简而言之的风险

与传统的饼图不同,“贝壳”背后的逻辑尚不清楚:数据是用面积,曲线厚度还是扇形角表示的?

重叠的扇区会使数据失真,并且无法传达含义。

这些图表的流畅3D样式只有使用模拟数据才有可能,并且会被“不完美”的真实数据所破坏。

如何避免

如果没有太多数据并且准确的比较不重要,请随时使用经典饼图。

树形图可能也是一种方便的方法,可以通过该区域显示百分比。


4.“山”

你是否曾经在业务仪表板中看到过“山脉”?(图4-1)我将此术语用于彩色重叠图,这是另一种流行的技术。

图4-1

我已经在“蛇”一章中介绍了这个缺陷-虚假数据,但让我们详细讨论一下。上面精心制作的可视化效果可归结为20个蓝绿色和橙色点。


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

但是,为什么对业务接口有危险呢?以图4-4为例,在某些工程图上,我们有两个相邻的点:12:00为50 kg /m²和13:00为60 kg /m²。这些点以优雅的平滑曲线相连。结果,用户看到在12:30时压力约为55 kg /m²,但这是一个谎言,因为没有人进行测量。

图4-4


双色条形图也不是唯一的选择

你可以选择一个图形,甚至在实际数据和有用的视觉效果之间形成足够对比的情况下,将点与线连接起来。如图4-6

图4-6

简而言之的风险

“山脉”给人的印象是连续的数据,但基于一组有限的点。

尽管不知道实际点之间发生了什么,但曲线始终显示平滑的数据动态。过渡可能是快速,逐渐或波动的。

必须放松图表以维持曲线的平滑度。结果,它占用空间并且显示很少的数据。

如何避免

确保数据点与有助于识别趋势的视觉效果(例如连接线)有明显的区别。

如果小部件上有多个重叠的图形,请尽量不要使用颜色填充来保持良好的对比度。


5.“香肠”

图5-1这张表怎么了?为什么我们不能拥有比无聊的矩形更吸引人和新颖的东西?我应该承认3D“香肠”不是一个好选择,这就是原因。

图5-1

我计算出,如果整个列在上表(图5-1)中为100%,则彩色条之间的每个微小间隙大约等于3%。乍一看不多吧?但是我们有三个不同颜色的部分,需要两个间隙,因此总的可视“盗窃”现象更为严重——每列6%!而且,如果你从圆形图表中计算出被盗的百分比,它将达到7%左右,每个缺口大约为3.5%。

我将缺少的条形部件放回下面建议的变量中,(图5-3)并摆脱了图例作为单独的项。此外,以前未命名的甜甜圈部分获得了新的格式和名称(第四季度的平均值)。

图5-3

简而言之的风险

“香肠”掩盖了真实数据的很大一部分,因此对于分析和严肃的决策而言不够准确。

而且,这样的图表在紧凑性方面具有经典的麻烦。他们需要额外的空间,以免显得凌乱。

如何避免

不要通过间距破坏整体数据。通常,不要在各部分之间添加间隙,其总和应等于100%。

检查图表边缘是否合理舍入-过多的舍入会掩盖有价值的数据位。


6.“摩天大楼”

与华丽的费尔南多·巴普蒂斯塔(Fernando Baptista)的《国家地理》图表不同,业务仪表板不是等距的“摩天大楼”而不是精确的普通条形图的合适位置。

3D图表缺乏准确性,当用户快速浏览界面以发现异常和趋势时,这是一个严重的障碍。在图6-2中,我试图模拟一下吸引注意力的事物。你能分辨出用彩色圆点标记的条的高度是否相同吗?

图6-2

带有绿色方块的标记是相等的;至于带有红色圆圈的方块,第一个方块高出3%。如果问题是数据准确性不足,那么为什么设计人员不使其余平行六面体变暗而只突出显示前部呢?

图6-3

但是,准确性不是唯一的问题。正如尤达大师在模因中所说:“还有另一个。” 已经猜到了吗?我的意思是紧凑性和反映自然、细微数据波动的能力,而不是这种夸张的过山车总是起伏交替。图6-3

如果保持简单,则可以更好地区分所测量参数的细微变化。如果存在适当的精度和突出显示(例如,选定时间范围内的最高和最低值),则它可以保持深色主题。顺便说一句,我还没有压缩条形宽度,但是现在图表缩小了两倍!

简而言之的风险

与数据量相比,“摩天大楼”以及其他等轴测图可视化占据了巨大空间。

这样的图表也无法揭示细微的数据波动。

当“摩天大楼”突出显示“屋顶”时,它们甚至更难以阅读,因为顶部使条形看起来更高。

如何避免

不要在业务图表上使用3D效果。

确保图表设计将支持实际数据,通常这些数据不会像样机那样完美地波动。


7.“小方块”

如果您有孩子,您可能会知道一个叫做婴儿立方体或活动立方体的玩具。这是一个盒子,侧面装有各种手柄,闩锁,插座,开关,算盘,按钮,图形等。当然,这样的“婴儿仪表板”的所有组件都无法正常工作,但是孩子们在玩立方体时会训练他们的手部动作技巧。

那么,这与数据可视化有何关系?如今,我看到了有害的设计师的做法:绘制视觉上吸引人的仪表板,但仔细检查后,它们在现实中几乎没有任何价值。

“婴儿多维数据集”是前几章中所有危险样式的结合,是一种误导性插图,而不是有用的工具。在示例中您可以注意到,它充满了时尚的细节:阴影,透明度,体积,辉光,倒圆角,等距形状等。但是,所有小部件都很笨拙:它们填充了屏幕空间,但提供了零洞察力。

这里不会出现“正确”的示例,因为我们已经详细讨论了如何逐步修复数据可视化。

简而言之的风险

“婴儿立方”可能旨在使数据对眼睛更友好,但不幸的是,它们也失去了准确性和实用性。

与普通形式相比,圆形,阴影,渐变填充和3D效果更难以承受“不完美”的真实数据。

如何避免

事先进行用户和业务研究,并根据研究结果进行仪表板设计。

避免因业务需要而过度简化仪表板设计。

通过没有提示的现实任务与用户进行测试。例如,“第二季度的收入是多少?” 与“你是否可以在屏幕中间看到大窗口小部件显示收入?”

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342