【海外2.7K点赞量好文】数据驱动的界面设计

告诉你关于数据的故事

“仪表盘”,“大数据”,“数据可视化”,“数据分析”-在这里,期待利用数据去做一些有趣的事的人和公司呈现爆发式增长。在我的职业生涯中,我曾非常幸运参与很多重度数据的界面设计工作。对于如何实现一个独特和有意义的产品,我想分享下我的想法。
很多人已经提起过这个问题,所以我将围绕部分最有影响的方法。

1.不同的用户,不同的数据

无论何时你要设计一个复杂的系统,都不可避免要为不同的用户或角色设计。经理,管理者,和分析者都是普通的用户,他们每个人都有他们各自的工作流程和数据需求。
定义良好的角色和生成洞察力本身就是一门艺术,这并不是我将要在这里详细说的。如果你好奇如何做到这一点,可以在Cooper看看这个有用的帖子
最需谨记的是在前期确定角色,组织信息架构任务,以及围绕它们设计线框图。
下面是我们去年用于医疗报告应用程序的交付成品。这个系统有不同的用户,每个用户都要求有他们自己的数据工作流程。一旦我们建立了关键人物角色,在每个评审会议,我们就把它们放在我们的交付成品中。

注意人物角色顶上的每个画板。我们的客户已经接受这种方法。

向客户展示艺术品可能是一项艰巨的任务。无论你是解释线框图和流程图或争论视觉处理,很难让每个人都跟上你的思路。
通过人物角色组织你的作品,将有助于你(和你的客户)在这些讨论中保持冷静。

2适应页面

我多年来学到的一个技巧是塑造页面的概念。核心理念真的很简单:

先展示用户需要查看的内容,然后根据用户的故事或信息层次构造页面的剩余部分。

塑造页面的概念是写散文(以及许多其他交流形式)的核心原则,这个是在我写了一本书之后所熟悉的。多年来,我花了很多时间在这本书《“风格:清晰和优雅的基础”》上。它除了是一本优秀的参考写作,还形象地描述了这个观点:

当你开始分心时,你的听众不仅很难看到每一个元素是什么,而且无法得到整个流程的焦点。

当进行交互设计时,这是需要谨记的有用原则。下面是我们常用来塑造页面的两种方法。

给你仪表板结构。问问你自己 - 我要用信息阐述什么故事?

许多我在BehanceDribbble看到的仪表盘和数据即项目虽然(视觉上)设计精美但往往极其平庸。他们要么没有层次地将无数的图形组件组织在Pinterest风格的布局里,要么过度设计不适合数据的可视化。

左边的图像展示了过多的数据可视化信息。右边的图像像一个装饰品,降低了对数据的关注度。

在上面的图片(左边),报告仪表盘采取任务控制的方式来呈现信息……这是相当有压迫感的。为了避免这种情况,我们试图通过规划信息来处理这些类型的界面,让其更像是你在阅读杂志上读的一篇文章。

但并不是说对于任务控制界面是没有时机和场景使用的…我个人喜欢设计这样的东西。但在大多数情况下,没有必要一直看到每一个。

最关键要考虑的是-避免创建一些一知半解的可视化。在页面上组织信息,使得向用户首先提供关键信息,然后跟踪提供支持内容。

3.选择“正确”可视化

有很多(太多)的设计为了好看而滥用图表。
最糟糕的是-这些“坏习惯”似乎成倍增加。在我看来,我看到的区域图应该是饼图,或折线图应该是条形图。因此,让我们一起尽力停止这种行为……这里有几个规范数据的建议:

从数据开始
原始表格的数据是不直观形象的。然而,这是最好的开始。它将帮助你开始思考数据中有哪些变量,以及各种数据实体是如何关联的。

原始数据的扁平性质将帮助你思考系统中实体之间的关系。

除了从空白的数据开始,期待灵感最终溜进你的潜意识,你可以更主动地审视这些丰富的资源,借此发现数据间有趣的联系:

这个部分的过程没有技巧。不要害怕摸索数据,尝试通过混合和匹配不同的变量来制作基本图表。它需要时间,但是值得的。我想出的一些好的想法,都是从摆弄原始数据文件开始的。

使用离散与连续数据
我花了一段时间才意识到这一点,有些图表比其他图表更好地表达了你的数据。你会很轻易地只站在你自己的角度挑选好看的图表,从而希望自己的数据产生作用。我很自责在尝试很多次才发现(我是一个散点图爱好者)。
根据你所处理的数据类型,某些类型的可视化比其他见效更好。选择适当的图表的一种方法是评估你所拥有的数据类型。数据主要有两种类型:

离散数据-可计算的不同值。例如,一些进球分数或脸谱网的点赞数。

条形图最能表现离散数据

连续数据-范围内的任何值。例如,一个季节的降雨量或一个人的身高/体重。
线图最能表现连续数据

总之,线图最适合连续数据,条形图最能表现离散数据。

对我来说,真正巩固我的观点的一个资源是由Dona Wong创作的“华尔街日报:引导信息图形”。但愿我几年前就拥有这本书。对于选择适当的图表和展示信息应注意的事项,这本书有宝贵的参考意义。

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

4.基本与定制可视化

最后,作为这些有丰富数据的系统的设计师,你必须不断问自己:“我应该走不寻常的路径去实现定制化?还是我应该用可靠寻常的图表来表达信息?”。
我最近在37 Signals遇到这篇文章-3个图都是我需要的。作者强调了为何可视化的可用性取代其视觉效果。我完全能理解在他的处境的感受。然而,我认为他的观点是一种非常功利的观点。我相信定制可视化往往可以提高数据的可用性,使其看起来独特和引人注目。

一个基本条形图的例子

对我来说,这里有“通用”的图表和“最适合”图表。表、行和条形图可以适应多种类型的数据,但它们也非常通用(一个尺寸适合所有的)。作为一个专业的设计师,我希望我的作品的外观和感觉是独特和有用的
例如,纽约时报做了一件了不起的事,定制交互可视化来充实他们的文章。你可以在这里看到更多他们做的事。让我们探讨几个无可挑剔的定制可视化的例子:
这个例子是提供点击数据可以钻取下级数据的功能,使一个线图变得耳目一新。

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

最后,来自我们与美国有线电视新闻网做的一个项目,我们使用彩色编码显示政党偏好,同时用3D凸显效果来实现人口统计信息的可视化。

http://truthlabs.com/work/cnn

一般来说,当数据和技术需要的时候,我们才会试图拿出定制的可视化,但我们始终有一个后备计划以防万一,比如事情不成功或客户喜欢一个不那么消耗资源的方法。

5.那又怎样?

那么为什么我们把所有的数据放在页面上呢?答:这样人们可以用它来-无论是做出决定,调查,还是预测未来。重点是,你的用户不会因为你选择了漂亮的颜色表示惊叹,他们都在尽力做好本职工作。

所以我的建议是-当你已经得到了你的页面布局,一切都精雕细琢地恰到好处后,反问自己“那又怎样?“。看看每一个图表,小部件,图表,表格,并思考什么人会从中收集信息。很多时候你会得出这样的结论:“没关系”,这是减少或重新思考的一个重要标志。

这种事经常发生在我身上-我创造了非常复杂的仪表板,包含了一系列趋势图、饼图和成千上万的数据点图。但是客户只问了我:“我只是想知道产品是否有效,我在哪里可以看到?”或者“我只需要知道3件事:X轴、Y轴和Z轴。我在哪里能找到这些?“

哎。在这一刻,你才意识到你迷失在杂草中,而错过了大局。

我想到了一种策略来帮助解决这个问题,就是尝试和使用文本来表达人们想知道的信息。

从较高层次来看,文本摘要比图表更有用。

上面的图片取自我们最近的两个项目。都直接明了地告诉用户他们需要通过文本来了解,而不是依赖于需要解释的图表。

这种方法引起了我们客户的共鸣,特别是对于高层次的信息。但正如我前面提到的,总是有多个人物角色要考虑,所以要在适当的地方使用。

像所有形式的设计一样,这是一种平衡的艺术。

力求以独特的方式呈现你的数据,但避免过度设计和不必
要的干扰。

为您的数据选择正确的图表,但不要忘记用层次结构构建页面。

原文作者:Erik K
原文地址:https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631

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

推荐阅读更多精彩内容