【译】10大仪表盘的设计指南

原文作者:Neil Turner。

如果你是一名专业的骑行者,那么你很可能听过“Domestique”这个词。对于那些不熟悉莱卡、剃腿和惩罚骑行的陌生世界的人们来说,domestique是用来描述车队中特定角色的术语。就像很多用于专业骑行的术语一样,“Domestique”是一个法国词,被翻译为“仆人”,这几乎涵盖了众多domestique骑手。Domestiques是骑行世界中真正的无名英雄,他们从车上取水并分发给车队的其他成员。如果车队的车出了机械问题而且无处可看,他们会把自己的自行车或备用轮胎交给领导者,一旦他们把珍贵货物安全交付,就会把队友拖到领先的一队,并努力的降低骑行速度。Domestiques就是这样的骑行者,无私地转移和搬运,但从来没有赢得一场比赛,也肯定不会获得应得的荣耀和赞美。

那么仪表盘能和domestiques联系起来吗?
我认为仪表盘就像domestiques一样,是数字世界的一些无名英雄。它们也是搬运者。它们不知疲倦的在后台运行,没有一丝荣誉。数字时代为我们展示了越来越多的数据,仪表盘由此变的更加重要。它们阻止我们淹没在数据的海洋里,至少好的设计是如此做的。仪表盘就像这个数据奇迹之地的窗户,它们帮助用户总结数据,解释数据,试图揭开数据想要告诉我们的信息。
仪表盘设计从没有如此重要,但要想设计一个好的仪表盘,并不是你想的那么简单。
当你再次设计数字仪表盘时,需要牢记下面的这10条准则。

1. 从用户开始,而不是从数据开始

从本质上说,究竟什么是仪表盘?它不仅仅是数据的一种可视化表达方式,而且还是展示数据的优美手段。《信息仪表板设计》的作者Stephen Few将仪表板定义为:

为实现一个或多个目标,所需要的最重要信息的可视化显示

你可以看到一个仪表盘,至少是一个好的仪表盘设计,不仅仅只是展示数据,它是体现相关信息的,是让用户利用信息解决问题的。例如这样的问题,“事情进行的怎么样了?我现在应该担心什么?老板今天要问我些什么?”不了解这些问题,就不知道这背后的重要信息,那么,怎么能设计一个好的仪表盘呢?你不能,就这么简单。你可以把数据直接扔到屏幕上,希望用户能用它来回答他们的问题,但如果你从数据开始,很可能就已经偏离了方向。

从用户开始,你可以确定什么是最重要的信息,可以找出用户目标和他们想回答的问题,可以了解仪表板使用背景,最终构建一个对用户真正有用的仪表板。

那么从用户开始,实际上意味着什么呢?它意味着你在接触任何数据之前,都要与用户交谈;它意味着你需要询问用户,他们想要了解的信息、他们需要回答的问题和他们的最终目标;它意味着你要找出仪表板的用户,了解他们作出选择的原因、确定他们的需求;它意味着你要找到满足用户各种需求的仪表盘,而且要了解他们是如何访问仪表盘的,甚至可能,他们先得有一个仪表盘。通常这些问题最好通过用户访谈和调查相结合的方式来了解。
理想情况下,你应该采访一个固定类型用户,以获取令人满意的定性数据,并通过一次或多次调查用定量数据进行捆绑分析。

2.不要给予用户过多数据

一个糟糕的仪表盘设计有点像 “Wally在哪里?”,如下图所示。有些人可能不太了解“Wally在哪里”(在美国叫“Waldo在哪儿?”),Wally是一个有趣的卡通人物,你必须在一张图片中找到他,一般来说应该挺容易的,但是这些的图片会有很多很多,而且图片上还有很多视觉干扰,所以要找到不起眼的Wally,就困难多了。你可能往往要花费5分钟的时间来试图找到这个小家伙,但是一旦找到他,也许就立马又看不见了。这是一种奇妙又令人愉快的精神折磨,但它不是那种可以应用在仪表盘设计上的方法。给予用户过多的数据和干扰,并不能让他们像掘金那样敏锐地找到Wally,他们只能得到一次头疼的尝试。

Wally在哪里

寻找Wally可能是一个很有趣的游戏,但对于仪表盘用户来说就不一定了。

当你考虑用仪表盘为用户呈现数据的时候,你需要回答一个关键问题,“这个数据对用户来说真的是有用的吗?”若有用,好好的展示它,反之,忽略不展示。另外,不要给用户展示未处理的数据,增加用户负担。比如说,不要向用户介绍制作蛋糕的所有原料,因为他们真正想做的是吃掉它。

3.提供概要数据,允许用户挖掘深层信息

一个好的仪表盘就像一份有质量的报纸。不至于有那么多的小男孩会把报纸送到你的门前,但如果有,可以把它捡起来,浏览一下头版头条,就能很好地了解正在进行的重要事件。如果你想了解更多,可以深入了解报纸的其他部分,但首页本身需要提供较好的概述。

尝试在仪表板视图的初始位置为用户提供此头版类型的概览。为用户展示最重要的信息,若他们想要获取更多内容,允许他们对数据进行深入研究。需要思考的是,如何把数据化为最重要的部分,以及如何利用良好的视觉设计来呈现最重要的信息。

Dribbble仪表盘

Dribbble分析仪表盘就是一个很好的例子,页面底部的这些数据就是一个信息概述。

4.用可视化数据,帮助用户理解

数据能够可视化,是非常好的。你可以使用一些可视化方法,例如图表、图形来帮助用户理解和分析数据。但不要过多使用,不要给用户太多的可视化数据,否则,他们会想一头撞死(多么可怕)。

想一下,在给用户讲述数据详情时,怎么设计是最有效的呢?图表通常比饼图好一点,当然,要避免过分的可视化图形,例如爆炸饼图和堆积条形图。

提供合理数据可视化方法,少用难以理解的图形

5.帮助用户轻松导航和定位

页面上的仪表盘往往不只有一个,可能存在多个。页面中通常会有一个概览型仪表盘,下面还会有更详细的视图。重要的是,用户不仅想要轻松定位一个仪表盘进行查看,还想能在多个仪表盘间互相切换,所以可以尝试使用熟悉的导航设计模式,例如一个左面板或顶部选项卡,但前提是,这些设计模式必须是经过用户测试的,并且是清晰可用的。给用户提供清晰的标签和指示,让他们明白自己去哪做什么,可以考虑进行一些卡片分类,并进行用户测试和验证。如果是一个有层级关系的仪表盘,需要提供面包屑来告知用户当前所处位置。

Google Analytics

Google Analytics 是一个非常好的示例,它采用左侧面板让用户轻松浏览仪表盘。

6.设计一个干净整洁的仪表盘

一个好的仪表盘应该像修女的房间那样干净整洁(当然,我只是在猜想,或与也有凌乱不堪的修女房间)。一个好的仪表板不应该显示任何无用的文字、图形或图像,应该使用良好的视觉设计方法,如空白、对齐和分组,凸显相关信息,消除仪表板上的杂乱和干扰。

避免使用不必要的背景图来干扰仪表盘

7.使用颜色帮助数据可视化

颜色是帮助用户分析和解释数据的好方法。例如,红色、琥珀色和绿色的指示器被用来传达一种状态,深浅不同的颜色也可以用来表示事件重要性的高低程度。一定要合理地使用颜色,例如,你在一个仪表盘中用绿色指示器表示一件事情,就不会想在另一个仪表盘中代表另外一件事情。另外,也不要过分使用颜色,你肯定不希望一个仪表盘看上去像是小朋友设计的,如彩虹一样绚丽。

Google Analtyic合理利用颜色展示用户分布情况

8.必要时提供帮助和指导

理想情况下,一个好的仪表盘是不言而喻的。你不会需要一个需要大量解释的仪表盘,这样的设计绝对是糟糕的。若仪表盘很少使用,或用户第一次频繁使用,提供一些额外的帮助和指导就很有必要了。设计仪表盘时,在必要的地方,要考虑加入帮助提示,例如,提供帮助信息来描述特定的可视化数据,或解释所展示的数据值。为了避免那些帮助信息的文案打乱仪表盘的排版,可以通过点击或hover图标、链接来显示帮助信息。

9.使用用户熟悉的可视化数据、语言、图表和设计模式

在设计过程中,试着使用用户熟悉的可视化数据、语言、图表和设计模式吧。一种新颖的可视化方法也许看上去是很棒的,但是它有可能会让用户不理解。一般设计规则是,使用众所周知、用户熟悉的设计标准或模式,除非有一个很好的理由可以不这么做,否则我们就需要按照这个规则进行设计。

10.用户测试和迭代测试

仪表盘的10条设计指南从用户开始(就像第1条所说的,从用户开始,而不是数据),也从用户结束。因为如果没有定期接触用户并获得他们的输入和反馈,就不会设计出一个好的仪表盘。在设计仪表盘时,不仅要从用户开始,还需要定期回归用户来研究和验证设计,这些设计可能是早期设计的线框图,甚至是草图,也有可能是完整的视觉稿。时刻进行自问,“这个仪表盘设计,用户理解吗?有重要信息丢失吗?是否展示了用户不关心的信息?”,最重要的是你需要了解用户是否能通过仪表盘达到目标,这就是可用性测试。
让用户执行他们使用仪表盘的所需的各种任务,例如查找一些信息,或追踪某事物的状态。捕捉他们所做的、所说的,以及任何可用性问题,构建一个不仅有用而且可用的仪表板的唯一方法就是“测试、迭代、测试、迭代和重复”。

原文地址:
http://www.uxforthemasses.com/dashboard-design

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

推荐阅读更多精彩内容