数据可视化7大致命错误

在处理数据可视化,设计师更注重数据图形的美观度,我们更喜欢圆滑的曲线,规则的轮廓,而忽略了数据本身。

在此罗列出7个设计师在处理数据时常范的错误。

1. “Snakes”


这种质感Q弹的3D管图表充斥在个大设计平台,但作为CRM或ERP仪表板设计并不妥帖。我称这种方法为“蛇”。

尽管这种可视化在视觉上很吸引人,但它并不能反应真实数据的数值及变化趋势,而且更重要的是对于用户来说这种图表太难以使用了。上面的图表几乎所有内容都是装饰,而仅包含10个实际数据点。在如此大的控件卡片上,本可以显示所有数字而且无需任何工具提示!


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


除此之外,还有足够的空间来显示20、30,甚至更多的数据点,而不仅仅是10。“ Snakes” 可能表明实际上没有数据要显示,因此设计师试图填补这一空白区域,从而带来视觉上的愉悦感。


现在,想象如果需要同时显示多种趋势。 “ Snakes” 并不能满足这个需求。在下面的图片中,发光管造成了完全混乱。


简而言之

1.很难显示多个数据图形并保持可读性。

2.粗线条使实际数据信息模糊不清,因此需要使用诸如“斑马”色或网格之类的笨拙替代方法。

3.图表中平滑曲线只有在“完美”的模拟数据下才有可能出现,并且会被真实数据压碎。

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

如何避免

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

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


2.“Nested donuts”

像“蛇”型图表一样,“甜甜圈”(尤其是嵌套的甜甜圈)也是设计师的心头爱。然而这种图表的精确度也是非常差的,并且很难反映数据之间的对比关系。所以这两种图表的可用性都非常局限。


人在潜意识里可以或多或少地感知百分比:整圈= 100%,半圈= 50%,四分之一= 25%,三分之二= 75%。但是,如果圆圈在“一半”和“三分之二”之间结束,如图片中的绿色,就无法即刻辨认出来?能快速计算出50 + 25÷2并假设它应该在62.5%左右的用户想必获得过珠心算冠军吧。

此外图表上你应该能看出,百分比与视觉重量不符。蓝色环代表较高的百分比,但看起来并不比绿色环大很多。

如果四舍五入,图表看起来会更可爱,但会严重扭曲数据。这种舍入在视觉上在实际值之上增加了2-3%的“重影”百分比。看下非圆形的边缘的图表,这个结论会更明显:


如果再简化些,只保留起止点,此时你的是不是已经黑人脸了???


值得庆幸的是,条形图表可以更加简单。三个条形图传达相同的信息,需要的空间更少,并且无需提示即可显示数字,这对于数据驱动的界面至关重要。


条形图还可以更加简化些,去掉图例,使图表数据更加紧凑。而且不再需要颜色,因为标签现在随条带一起出现了。


简而言之

1.圆形的可读性较低。人们可以很好地识别25%,50%,75%或100%之类的百分比,但遇到中间值就会非常困难。

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

3.嵌套图表中的圆环始末端的处理比较具有挑战性。


如何避免

1.考虑使用条形图来准确表明百分比。

2.如果选择环形图表,尽量避免“巢式”。


3. “Seashells”

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

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


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


这些信息在形状相同的图表(饼图)上看起来更加明白。当然,数据点的数量应保持在同一极限值上;否则,图表将变成一团糟。


此外,将图表类型用换为树形图,相应的矩形区域代表百分比多少。尽管人们通常最擅长比较长度-还是条形图! 但这个图表各个区域也具有明显的可比性。


简而言之

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

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

3.这些图表流畅3D样式只适用于模拟数据,实际情况下会被“不完美”的真实数据所破坏。

如何避免

1.如果没有太多数据并且不需要准确的比较,请尽量使用经典饼图。

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


4. “Mountains”

你是否曾经在商业仪表盘中看到过“山脉”?这种彩色重叠图,也是另一种流行的技术。

我已经在“蛇”一章中介绍了这一缺陷——虚假数据,以上面的图表为例,可视化数据可归结为20个蓝绿色和橙色点。

所有的连接曲线都与数据无关,它们是人为添加的。也许是为了最求视觉美观度——将各个点组合成一个清晰的趋势,或者填补“空白”并使它看起来“更小”。

但是,这对于商业化界面来说非常危险。举个例子,在某个工程图上,有两个相邻的点-12:00为50 kg /m²和13:00为60 kg /m²,这些点以平滑曲线相连。结果,用户看到在12:30时压力约为55 kg /m²,这是个错误,因为这个测量值。

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


使用双色条形图不是唯一的选择,但我们可以来还原下数据。

接下来可以选择一个与实际数据具有明显视觉对比的线条,将点连接起来。


简而言之

1.“山脉”给人的印象是连续的数据,但其实这些数据点是离散的。

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

3.为了维持曲线的平滑度必须让数据松散排布。结果,它占用较大的空间并且显示很少的数据。

如何避免

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

2如果数据图上有多个重叠的图形,请尽量不要使用颜色填充来表示对比度。


5. “Sausages”

嗯,这张图怎么了?为什么我们可以拥有比无聊的矩形更吸引人和新颖的东西?但必须承认3D“香肠”不是一个好选择。

此类可视化存在很多问题,最关键问题是数据被盗。 “香肠”是图表世界中最真实的窃贼,因为它们在真实数据中添加了空白区域。诚然,“香肠”通过绿色和橙色之间的边缘可以保持高对比度,但是这种对比度的代价太高了。

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


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


简而言之

1.“香肠”掩盖了真实数据的很大一部分,因此不够准确,无法进行分析和做出严肃的决策。

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

如何避免

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

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


6. “Skyscrapers”

与华丽的费尔南多·巴普蒂斯塔(Fernando Baptista)的《国家地理》信息图表不同,商业仪表板适合放置等距的“摩天大楼”,因为这些数据都不是精确的。

3D图表本身就缺乏准确性,用户无法快速浏览图表发现异常和趋势时。在下面的图片中,我试图模拟一下吸引注意力的事物。你能分辨出用彩色圆点标记的条的高度是否相同吗?

绿色方块的标记的形状高度是相等的;至于带有玫瑰色圆圈的方块,第一个方块高出3%。好吧,如果问题是数据准确性不足,那么为什么设计人员不将其余的平行六面体调暗,而只将正面突出?如下图所示:

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

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

简而言之

1.与数据量相比,“摩天大楼”以及轴测图式图表可视化占据了巨大空间。

2.这样的图表也无法展现细微的数据波动。

3.当“摩天大楼”突出显示“屋顶”时,它们变得更难阅读,因为顶部使“楼层”看起来更高。

如何避免

1.尽量不要在商业图表上使用3D效果。

2.确保图表设计将反应真实的数据,通常这些数据不会像样机那样完美地波动。


7. “Baby cubes”

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

这与数据可视化有什么关系?如今,我看到一种有害的设计师的作法,即绘制视觉上吸引人的仪表板,但仔细检查后,实际上没有什么价值。

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

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

简而言之

1.“婴儿立方体”可能旨在使数据看起来更美观,但不幸的是,它们也失去了准确性和实用性。

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

如何避免

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

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

3.进行用户进行测试是尽量使用没有提示性的问题。例如,“第二季度的收入是多少?”对比“您是否可以在屏幕中间看到大窗口小部件显示收入?”

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