计划数据可视化交互界面 – Designing Data-Driven Interfaces


统筹数据可视化交互界面

讲述您多少的故事

*BY  Erik K(Uber设计老板)     *
*翻译:Kevin嚼薯片*

“数据仪表盘”、“大数目”、“数据可视化”、“数据解析”——人们和店铺们都在试图用他们的多少做有趣的事体。在自己的职业生涯中,有幸做过几十个以多少为着力的并行产品工作,我想享受部分关于如何实现一个独特而有意义的制品的想法。

洋洋人早就探究过这一个题目,所以我将长远介绍我们经过中最有影响的一部分。

1. 两样的用户,需要不同的数码

当你在筹划复杂的成品系统时,用户必然会是多种角色。管理人士、老总和分析师,在那些常见角色里,每个人都有投机的工作流程和数目需求。

概念卓绝的用户角色和举行用户洞察本身就是一门艺术,这不是本身在那边要深切的东西。如若您对这很奇异,这就去找找库珀的连带资料啊。

至于用户角色的显要的就是要事先定义他们,从而围绕他们去协会信息架构任务和制图线框图。

下边是大家二零一八年的医治报告应用程序的付出成果。系统所有不同的用户,每个用户都亟需团结的数目工作流。一旦我们树立了关键人物,我们会将她们放入到每次审查会议的交付物中。

把人选角色标注在各种设计稿上方。我们的客户已经默许了这种方法。

向一房间的客户去显得小说是一项勤奋的任务。不管您是在诠释线框图仍旧流程图,依然去商讨视觉方案,都很难让每个人都留目的在于上头。

由这厮物角色去形象地协会你的创作,可以协助您(和客户)在这个议论中保持自然水平上的注意。

2. 扶植页面

多年来我收获的一项技术就是作育页面概念。要旨理念非凡简单:

向用户体现他们首先需要见到的始末,然后遵照用户场景或消息层次来构建页面的其它部分。

陶铸页面概念是写诗文(和不少其他互换格局)的骨干标准,在写完一本书后,我变得更其贯通起来。多年来,我花了诸多岁月去读书《风格:清晰和优雅的底蕴》。除了作为优良的作文参考之外,它还有条理地讲述了这一个概念:

当你起来时是分散的时候,你的用户不仅很掉价到各类元素是如何,也很难聚焦于漫天段落。

这是在UX设计时要铭记的一个管用的尺度。上边是大家作育页面的三种常用方法。

给您的仪表盘一些协会。问问你协调——我用这一个音信来什么讲述场景?(至关重要的、方便查看的、音讯丰盛的)(总体预览、详细总括、特定项目/任务)

自己在behance和dribbble上观察的大队人马仪表盘和数目可视化项目都统筹得很赏心悦目(视觉上),但大多数都是令人不尽人意的。它们依然是大度的图形小部件被部署在一个尚无层次结构的pinterest样式的布局中,要么是不吻合数据的过分可视化设计。

左手的图像显示了堆砌式的数目可视化处理办法,左边是一个从数量的角度出发装饰物的事例。

在上图(左边),仪表板映现文档采取指挥为主的点子来表现信息…显得非常堆砌。为了防止这种情状,大家品尝通过团体信息的章程来规划这类界面,使其更像是在读书杂志小说。

不是说并辰时间和地方去做那类指挥主旨式的UI…我个人希望计划这样的东西。但在大部气象下,在同一时间看到所有音信是不必要的。

要去考虑的要害是——避免创设一个简短的可视化界面。在页面上突显信息,这样用户就足以先得到重大音信,然后再依照需要的内容举办操作。

3. 挑选“正确”的可视化图表

有许多(真的要命多)的计划性以美学的名义在滥用图表。

最不好的是,这个“坏习惯”似乎正在成倍增添。我时常来看,这么些区域图的地点应当用饼图代替,或线图的地方应该用柱形图代替。所以大家应同步去防止这种状态…那里有一对小技巧来做多少判断:

始于数据

原始的表格行——它一点也不性感。不过,这是最好的起点。它将扶持你去考虑数据中的可用变量以及各类数据实体是什么样关联的。

原有数据的扁平化特性将援助你去研究系统中数据里面的涉嫌。

除了盯着一排排的数量和期待灵感到来,你可以更积极一点,看看那个巨大的资源,接济您去发现有意思的关系:


Charted
—  由Medium开发的全自动可视化数据工具。

– 用 Google Sheets、Illustrator 和
Sketch

去设计更好的图形。

Tableau — 
这是最好的工具之一,可是很贵。

在这一个进程中,没有什么灵丹妙药。无须惧怕投入到数码中,尝试通过混合和匹配不同的变量来打造中央图表。这亟需时间,但很值得。我的有的最好的想法都是从修改原始数据文件先导的。

离散的 和 连续的 数据

自己花了一段时间才发现到这或多或少,有些图表比此外图表更能说明你的数码。在你的库中选择美观的图样很容易。我已经多次犯过这样的谬误(我很欢喜用散点图)。

依照你所使用的数据类型去挑选,某些项目标可视化效果要比另外品类更好。采用适宜的图形的一种方法是评估您所享有的数据类型。那有二种重点的数据类型:

离散数据
你用来计量的不比数值。例如,四个得分数据,或非死不可的点赞数。

柱形图最适合于离散数据

一连数据
在早晚限制内的任何值。例如,一个时节的降雨量,或一个人的身高/体重。

线条图最适合连续的数额

简单易行,线条图最符合连续的多少,而柱形图最适合离散数据。

一个自家的确必用的资源是 Dona
Wong的《华尔街日报:信息图片指南》。我真希望能提早几年前碰到这本书。它对于采取合适的图纸和判断是否出示对应音讯,极度管用。

http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281

4. 通用的 与 自定义的 数据可视化方案

终极,作为这一个数量增长的系统的设计者,你无法不不停地问自己“我是不是应该使用更少路径,或者使用定制化?又或者自身应当用靠得住的图片来抒发消息?

我方今从 37 Signals
中发觉了这篇随笔——《我只需要三张图片》。作者提议了一个有关可视化“解决方案”特性如何取代其视觉特性的观点。我完全同意他的理念。但是,我觉着他的理念十分功利主义。我信任自定义可视化平日可以提高数据的可用性,并且看起来很奇异和明明。

一个基本柱形图的事例

对本人来说,有“一刀切”的图形和“最适合”的图形。表格、线图和柱形图在适应多体系型的数量方面做得很好,但它们也是非凡通用的(一刀切的)。作为一名专业的设计师,我期望自己的小说的外观和感觉是新鲜的和与别不同的

例如,《伦敦时报》做了一项宏大的做事,用自定义的交互式可视化来宏观他们的稿子。你能够点击这里看看更多他们的随笔。让我们来打通多少个圆满的自定义可视化例子:

其一例子通过在图纸的数码底部扩张“简要音讯”来完善线形图。

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?\_r=0

在这多少个3D图中,视角的生成是丰硕有吸重力的,同时也赞助用户更好地问询多少的相关性。

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?\_r=0

这么些事例来自
Selfiecity.net
用实际的内容来展现了一个可视化的好方案。

http://selfiecity.net/

末尾,在大家给CNN做的一个系列中,我们运用颜色编码和3D方块来彰显政坛偏好,以同时可视化人口总括音讯。

http://truthlabs.com/work/cnn

用作一种经验——当数码和技术能实现时,大家试着做出自定义的可视化方案,不过我们连年有一个后备方案,以防事情并未展开,或者客户更爱好一个不那么独特的方案。

5. 这又何以?

这就是说我们为啥要把这个数量放在页面上啊?回答:因为这可以让众人做一些事务——做决定,调查,预测以后,等等。重点是,你的用户并从未对您所挑选的出色颜色感到惊喜,他们只关注他们正在做的作业。

于是这是本人的提出——在您把您的页面布置好未来,所有的事体都适宜后,问问你协调:“这又何以?”看看每一个图片、小部件、表格,并盘算一个人会从它们上取得什么样。平时你会得出这样的下结论:“那无关重要”,这是一种需要简单和自省的信号。

自身境遇过两回这样的动静——我制造了一个卓殊复杂的仪表盘,它有一多重的势头图、饼图和许六个数据点的地图。但客户却只是问:“我只是想清楚产品是否在运转…我在哪个地方可以看看?”
或 “我只需要领会三件事…X、Y和Z。我在什么地方能够找到这些?”

在这一刻,你意识到你迷失在了细节中,而忽视了总体。

本人利用的一种方法是尝尝选用文本来规范地发挥某人想清楚的始末。

对此高等级音信,文本摘要可能比图表更有用。

地点的图形取自我们多年来的六个体系。两者都简短地经过文件告诉用户他们需要明白哪些,而不是依靠图表去解释。

我们与客户对于这种方案达发生了共鸣,特别是对于高等级新闻。但正如我前边提到的,总是有多少个角色需要去考虑,所以请在适合的地点中应用。

就像拥有格局的设计同样,这是一个平衡的行为。

鼎力以一种特另外主意表现你的数额,但要制止超负荷设计和不必要的打扰。

为您的数量接纳正确的图形,但绝不遗忘构建的页面结构亟待带有层次。


英文原文:https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631

get到新技巧后,欢迎在底下【赞美匡助】。

打赏后,可以继续看到我简书中其他产品运营设计类随笔。开卷更多>>