Information Dashboard Design读书笔记

第一章:

Everybody wants a dashboard.

dashboards are sexy.

好的仪表盘设计能够speak clearly and immediately.

An effective dashboard is the product not of cute gauges, meters, and traffic lights, but rather of informed design.more science than art, more simplicity than dazzle. It is, above all else, about communication.

 

用户清楚的知道他们需要做什么,但是不清楚软件如何设计来满足他们的需要.

 

要足够简单,甚至一个执行总裁也能理解.

 

这些年的重点在于收集,订正,集成,存储和访问信息方面,都是为了保证数据的精确,及时和有用.鲜少涉及到信息如何以更好的方式去传递给用户.

 

这里我们谈到仪表盘,那么什么是仪表盘呢?

 

仪表盘是为了实现一个或者多个目标而需要用到的最重要的信息的可视化展示,能够在一屏上统一和调整,能偶快速的获取信息.

除了上面的定义,仪表盘还有其他的一些特性:

1,Dashboards have small, concise, clear, and intuitive display mechanisms

2,dashboard can be customized.

A dashboard is a type of display, a form of presentation, not a specific type of information or technology.

Dashboards transform data repositories into consumable information.

 

 

第二章:

Dashboards can be tailored to specific purposes,不同的用户角色(决策,分析,操作)对仪表盘的要求不同.

 

仪表盘的分类:

按照用户角色区分:决策,分析,操作

数据类型:定量的,非定量的.

数据域:销售,财务, 市场,生产,人力资源等.

数据的跨度:企业级,部门级,个体级

更新频率:monthly,weekly,daily,hourly,real time  or near real time

交互性:静态展示,交互式(支持下钻,过滤)

展示的机制:图形为主,文本为主,图形和文本兼具

门户功能:能够接入额外的数据,没有门户功能

 

1,说到role,具体的分类对于仪表盘的要求:

决策型(strategic):quick overview ,monitor  the health and opportunities of the business .聚焦在高层的指标,知道目前发生了什么,涉及到绩效,包含未来的预测等.不需要放很多冗余的信息,避免分散注意力.

 

分析型(analytical):经常需要上下文,需要支持与数据进行交互,支持探索,不仅仅知道发生了什么,还要能够支持去分析原因.(毕竟作为一个监控,不需要提供后续所有的交互分析,但是可以跟其他信息进行无缝链接)

 

操作型(operational):动态的,及时的特点.对活动以及事件比较关心.比如呼叫中心的话务监控.信息需要很简洁以及能够吸引的用户的注意力,进行及时的干预处理,能够支持到详情,特定的事务.有时候值得注意的信息是自动展示出来的,或者是一步步点击进去的,所以提供一定的交互性也是很有用的.

 

2,典型的仪表盘数据

除了按照上面的数据主题域来看(诸如财务,人力资源等),按照时间也可以来分:

YTD,WTD,QTD,yesterday,MTD,today so far

 

通过比较来丰富数据.通过不同的维度来进行对比,比如环比,同期比,与目标值的对比,不同版本的数据.

 

比较很多时候会通过图像化的方式来表达,但是很多时候,文本就足够了.

 

Time series in particular provide rich context for understanding what's really going on and how well it's going.

因为没有比较,你是不知道数据是好是坏的.

通过评估来丰富数据,比如红绿灯,通过其他的颜色,着重等.

 

3,非量化的数据

很多时候,人们会把仪表盘和KPI等同起来.但是实际上不是所有的量化信息都有用.实际上,有很多信息不是量化的,但是对于用户而言是特别重要的.

比如:top 10 customers,待调查的事宜,待处理的任务,要接触的人员

 

还有比较少的就是关于实体以及关系之类的.比如跟踪项目的进度,项目的依赖关系等.

 

第三章:仪表盘设计的13个误区

1,内容超出了一屏的边界---最好把内容以一屏的方式展示,不要进行拖动等. 

     最好能all within eye span.

     Fragmenting data that should be seen together is a mistake.

     A banking executive needs to see these measures together in a way that enables comparisons to understand how they relate to and influence one another.

 

2,数据缺少上下文---没有上下文,就没法理解数据,比如成交额要是不说时间范围,谁知道是多少呢?

3,展示了过度的细节与精度---比如对于数字,不需要展示到小数点后,整数其实就可以了.

     多未必好.

4,选择了不充分的指标.---比如用户想知道利润如何,你给他的缺失成本和收益的数值,这样用户还需自己去算一把,看下差额或者比率等.

5,选择了不合适的展示媒介---比如用了饼图,Beyond that, pie charts don't display quantitative data very effectively.

比如对比性的,往往红饼图就不合适.

展示方式的不合理,也会给用户带来困惑.比如雷达图就很少用到,但是要是觉得很酷,而特地使用雷达图可能会带来很差的效果.

 

6,引入无意义的多样化

比如为了界面的丰富,可能引入很多其他的图表展示方式,搞的界面貌似很丰富多样,实际上没有意义.

 

7,使用了设计很差的展示媒介

选择了合适的展示媒介还不够,你还有设计的简介和高效,不分散注意力.

作者举了几个不好的例子:比如饼图采用了不太区分的开的颜色来表示各部分.bar chart的背景的网格往往没有必要存在,也不需要设计成3D的效果,因为3D反而影响用户看数据.条状的颜色也不需要搞成各不相同(因为已经有文案在旁边了).色彩太艳丽,分散了用户的注意力.

 

8,encoding quantitative data inaccurately

比如柱状图里,两项指标Y轴没有从0开始,导致在视觉上,(两个指标的高度),两个指标的倍数关系有可能会以为很大,带来了错觉.

 

9,布局很差,信息位置放置的不合适

The goal is not simply to make the dashboard look good, but to arrange the data in a manner that fits the way it's used.

页面上最突出的位置应该放最值得用户关注的信息,而不是为了美观,放了公司的logo等其他无关紧要的信息,浪费了空间.

右下角一般是最不引入注意的地方.

 

10,没有高亮重要的信息或者全部高亮

当你看仪表盘的时候,你的眼睛需要立即被catch,关注到需要你关注的,而不是需要自己一个个扫描完了,来识别出来哪些是有问题的,哪些没有问题.

都是重点等同于没有重点,如何让信息stand out

 

11,不必要的装饰导致很杂乱

很多图案或者图形做的很炫,模拟的很真实.可能一开始给用户眼前一亮的感觉,但是一段时候后,就没有什么价值了,因为反应的数据才是有意义的.

 

12,误用或者过度的使用颜色

颜色的选用,要求我们必须理解人们对颜色的认知,以及颜色的区别.比如有些color-blinded的人,对于有些颜色就是无法区分开的.

 

13,设计的仪表盘不吸引人

说的不好听的话,有些仪表盘设计的很丑陋.不协调等.

设计的不吸引人的仪表盘,往往让用户认为,数据不重要,不方便使用等.

以上并不意味着要设计的多么漂亮,多么酷,而是能够将数据清晰的展示给用户,又不失美观.

 

第四章:taping into the power of visual perception  

视觉一般是最有效果的.看和思考往往立即被联系起来.我们需要对visual perception多一点理解.知道在仪表盘里如何运用这些元素.

 

不同的信息渠道带来的认知效果也不同.

1,理解短期记忆的局限,记忆一般分为三种(iconic memory--可以理解为瞬时极易忘记的,short-term memory,long-term memory)

2,

 

2,快速认知,进行可视化的编码

比如一串数字中要发现有多少个5,直接看,需要一个个数,花费很长的时间去识别.但是如果把这串数字里的5全部高亮或者用不同的颜色区分出来,那么用户很快就能数出来了.

 

对信息可视化方面,the preattentive attributes of visual perception can be organized into four categories:

颜色,形式,空间位置,以及motion.

颜色可以分为色度,明度

位置:2维空间里物体的位置

形式:方向,线条的宽度,线条的长度,物体的尺寸,物体的形状,物体的enclosure

motion:比如闪烁引起注意

 

色彩的三要素:

http://baike.baidu.com/view/0571.htm

色调,饱和度(纯度),明度

 

形式的属性:

一般不建议使用斜体的文本.

the attribute of line length is most useful for encoding quantitative values as bars in a bar graph

物体的相对大小能够表达重要性程度

 

This is especially true for dashboards that are constantly updated with real‐time data and are used to monitor operations that require immediate responses.

 

以上类型的分类的属性,不是都可以进行量化的表示数据.

比如颜色的不同就不能表示量的大小,不过线条的长度却可以表达含义.

 

Colors that are common in nature, such as soft grays, browns, oranges, greens, and blues, work very well as a standard color palette for dashboards.

不那么刺眼的颜色不会让用户觉得感觉很stressful,柔和的色彩可以让人感觉calm.

 

Even when data that we wish to link resides in separate locations on a dashboard, the principle of similarity can be applied to establish that link.(类似的东西认为属于一类)

 

连续性元素:

We perceive objects as belonging together, as part of a single whole, if they are aligned with one another or appear to form a continuation of one another.

 

空白的文本间隔(其实有时候未必需要线框之类的),或者合理的分组信息,让人一目了然的感知.如下图:

 

 

连接的原则:

 

the perception of grouping produced by connection is stronger than that produced by proximity or similarity (color, size, and shape); it is weaker only than that produced by enclosure.

很多时候,通过线条的连接或者通过把相关的对象框起来,表达相关性.

 

 

Two of the greatest challenges in dashboard design are to make the most important data stand out from the rest, and to arrange what is often a great deal of disparate information in a way that makes sense, gives it meaning, and supports its efficient perception.

 

 

第五章:Eloquence through simplicity

设计良好的仪表盘的特点

不能浪费一个像素点,有限的空间展示必要的信息.

keep things simple.

Too often we smear a thick layer of gaudy makeup over data in an effort to impress or entertain, rather than focusing on communicating the truth of the matter in the clearest possible way.关注点要保持在传达数据的含义本身,而不是徒有其表,追求效果.

 

dashboards should provide a broad and high‐level overview that informs you instantly about the state of things.

 

全局的东西,可以用汇总或者平均来体现overview,或者列出关键的异常出来.

页面的内容的呈现,应该以业务的视角,use audience's vocabulary-用业务词汇.

A familiar graph would be better.

支持定制对于仪表盘的成功也很重要.

Display media must be designed to say exactly what they need to sayno moredirectly, clearly, and without any form of distraction.

 

Maximize the data‐ink ratio, within reason. Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information."

 

Reducing the non‐data pixels to a reasonable minimum is a key objective that places us on the path to effective dashboard design.(尽量减少非数据的元素)

两个方面:增加data pixels 或者 减少 non-data pixels

 

仪表盘的设计本身也是一个渐进迭代式的过程,however, the step of looking for unnecessary non‐data pixels will never cease to be productive.

 

Grid lines in tables, which divide the data into individual cells or divide either the rows or the columns, when white space alone would do the job as well.

 

Fill colors should be used to delineate rows in a table only when this is necessary to help viewers' eyes track across the rows.

 

3d的图形应该永远避免使用.

 

如果有non-data pixels需要保留的话,那么就对其进行弱化.

Not all non‐data pixels can be eliminated without losing something useful. Some support the structure, organization, or legibility of the dashboard.

有些非数据的信息有时候也是需要保留的.

 

The trick is to de‐emphasize these non‐data pixels by making them just visible enough to do their job, but no more.

足够用即可,无需赋予更多的关注.

 

典型的表格间,常常行间隔会用不同的颜色来表示,这个一般用light gray的背景能区分开即可(用户能够快速的定位到一行的内容),无需把颜色调的很重..

 

Don't vary the color, weight, or shape of non‐ data pixels that serve the same purpose in the dashboard.

同样目的的东西,不要搞的太差异化.

 

It usually works best to place most instructional or descriptive content either on a separate screen that can easily be reached when needed or, if possible, in the form of pop‐ups that can be accessed when necessary with a click of the mouse.

 

By removing any information that isn't really necessary, you automatically increase focus on the information that remains.

 

Exceptions are an especially useful means to reduce the data on a dashboard(关注异常)

 

 

高亮仪表盘上最重要的内容

the executives usually care about some key measures more than others.

内容在仪表盘上的布局或者位置,一般不要搞成动态的,这样很容易让用户定位信息很困难或者感到困惑.

Because location is static, this is a variable that we can leverage to highlight information that is always important.

 

从页面的位置划分上来看,左上角以及中间是被强调的区域.其他区域的注意力不高.

颜色也可以用来突出重要内容.

Color is especially useful because distinct differences in color stand out very clearly and because it is a variable that is normally easy to change dynamically using dashboard software based on predefined data conditions.

 

 

第六章:effective dashboard display media

选择最合适的展示媒介,based on the nature of the information, the nature of the message, and the needs and preferences of the audience.

 

Graphs don't support looking up individual values as efficiently, and certainly not as precisely.

需要图文结合

Effective dashboards need to combine text and graphics in a way that supports a rich and meaningful display of data.

 

各种图:

bullet graph easily handles multiple comparisons by using a distinct marker for each.

无图无真相:

 

有对比,区域划分明显,一目了然.

 

In my tests, bullet graphs outperformed radial gauges both in efficiency and accuracy of perception. 值得关注这种图.

 

条形图===display multiple instances, rather than a single instance

大概分三类:

nominal scale---不同的类别没有什么关系,属于一个大的范畴而已.(比如公司的各个部门,销售,财务,HR等.)

ordinal-顺序的.比如1st,2st,3st,或者1月,2月,3月….

interval--区间的方式(0-99,100-199,200-299)

Line graphs are useful for encoding values along an interval scale.(不太适合nominal scale的数据,因为一般是呈现趋势)

bar graphs emphasize individual values, they also enable easy comparisons between adjacent values.(强调对比)

Even when you wish to display values that represent parts of a whole, you should use a bar graph rather than the ever‐popular pie chart.(感觉饼图基本快没存在感了)

 

stack bar graph:看看长啥样子:http://www.highcharts.com/demo/bar-stacked 

A stacked bar graph is not the best way to display a single series of part‐to‐whole data.

Stacked bar graphs are the right choice only when you must display multiple instances of a whole and its parts, with emphasis primarily on the whole.

 

 

combination bar and line graph

pareto graph---This intimate connection merits the use of a line to encode changes in values from one to the next.

线条越陡,说明影响越大.

 

line graph---revealing the shape of dataits movement up and down from one value to the nextespecially as it changes through time.

表达趋势走向trends, fluctuations, cycles, rates of change, and how two data sets vary in relation to one another,

line graph 是最好的方式体现时间序列变化的.

 

sparkline--样子在这里:http://omnipotent.net/jquery.sparkline/

Sparklines are not meant to provide the quantitative precision of a normal line graph.

Their whole purpose is to provide a quick sense of historical context to enrich the meaning of the measure.

是仪表盘数据展现的理想选择.

 

box plots(貌似一般叫盒须图)

displays the distribution of value sets across the entire range, from the smallest to the largest, with many useful measures in between.

看看长啥样子:http://www.stat.yale.edu/Courses/1997-98/101/boxplot.htm

有中位数的哦,升级版为:box‐and‐whisker plot.---额外的体现了1/4分位,3/4分位等.可以看到分布的倾向性.

 

scatter plot(散点图)

不多讲了.

 

treemap--http://www.cs.umd.edu/hcil/treemap/ 

used to display large sets of hierarchically or categorically structured data in the most space‐efficient way possible.

Hierarchies and categories are represented as rectangles contained within larger rectangles.(往往以矩形框的方式体现数据的关系)

The purpose of treemaps is not to make fine quantitative comparisons or to rank items, but rather to spot particular conditions of interest.

不是为了量的对比或者排名,而是要引起对特别条件的兴趣.

 

 

A single alert icon catches the eye much more effectively than multiple alerts with various meanings.

I've found that a simple shape, such as a circle or square, usually works best as an alert icon.

Consistency might seem boring, but on dashboards it makes things clear.保持风格的一致.

有时候文本的展现就足够用了.比如调整字体大小颜色等.

 

The means to display images such as photos, illustrations, or diagrams is sometimes useful on a dashboard, but rarely, in my experience.

图片等其他的媒介极少使用.

 

地图:

can be used to associate databoth categorical and quantitativewith physical space.

 

 

第七章:设计易用的仪表盘

设计仪表盘的挑战何在?

One of the most challenging is the need to arrange many items of informationoften related solely by the viewer's need to monitor them allin a manner that doesn't result in a cluttered mess.

 

organize the information to support its meaning and use

----Using position to group items visually is a strategy that is preattentively and thus rapidly perceived.

----Use white space to delineate groups of data whenever possible.

----Measures of performance come alive only when you compare them to other measures

----not all the data that appears on a dashboard is meant to be compared.

maintain consistency for quick and accurate interpretation

make the viewing experience aesthetically pleasing

----effectiveness of something's design should be judged by how well it works and how easy it is to use.

----getting an intended message across in a way that results in useful understanding.

----The aesthetics of dashboard design should always express themselves simply, striving for the eloquence that emerges uniquely from simplicity.

 

design for use as a launch pad

----Allow the viewer to initiate the launch by clicking the data itself. Use consistent launch actions.

----Enabling the viewer to access additional data (such as the details beneath the overview) via direct interaction is easy and intuitive, and it saves space on the dashboard by eliminating separate controls such as buttons

test your design for usability

---提供原型给用户,不要提供给他们几个可选的方案,你是设计者,由你来觉得应该做成什么样子.

---you must put your design to the test

---good design usually results in a good reception.

 

 

第八章:put it all together

Dashboards are meant to provide immediate insight into what's going on, but text requires reading a serial process that is much slower than the parallel processing of a visually oriented dashboard that makes good use of the preattentive attributes of visual perception.

 

表格中的数字,最好不要居中,而应该right-justified

 

Using a line to connect values in a graph suggests a relationship of change between the values, but revenue values for individual products or regions are not intimately connected to one anotherthey are discrete values along a nominal scale.

 

find everything that needs to pay attention to.

 

take necessary actions without delay.

 

however, so a "Freeze Data/Unfreeze Data" button has been provided to temporarily put a halt to updates.

 

Your dashboards may not change the world in any big way, but anything you do well will change you to some degree for the better.

 

 

 

 

 

 

 

 

 

 

 

 

 

评论

1 楼 安铁辉 2016-08-26  

师兄你很久没更新博客了