在处理数据可视化,设计师更注重数据图形的美观度,我们更喜欢圆滑的曲线,规则的轮廓,而忽略了数据本身。
在此罗列出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.进行用户进行测试是尽量使用没有提示性的问题。例如,“第二季度的收入是多少?”对比“您是否可以在屏幕中间看到大窗口小部件显示收入?”