Books & People

Books, People

Book Reviews

Links & More

	Print version
Related Links
	Review of the Book
	Review of Information Visualization
	Review of Elements of Graph Design
	Recommendations for Charts and Graphics
	Perceptual Edge (Stephen Few)
Background Links
	Books
	People

Book Review: Information Dashboard Design – Summary

By Kai Willenborg, SAP AG, SAP User Experience – June 22, 2007

On this page, our author Kai Willenborg collected a summary of the book Information Dashboard Design by Stephen Few. For a concise overview read the review instead.

History, Current Situation, and Purposes

After a short history of dashboards, from executive information systems (EIS) in the 1980s to modern business performance management tools, Stephen Few provides a selection of twelve state-of-the-art dashboards that he has collected from various Web sites (without any rating).

His list of the most important goals of dashboards is valuable:

Dashboards are visual displays.
They use a lot of graphics, because they are compact and quick and easy to grasp – if designed properly.
Good dashboards display the information needed to achieve specific objectives.
They provide the appropriate selection of included information.
A good dashboard fits on a single computer screen.
This allows a quick overview at a glance – without scrolling, filtering, or manipulating the page in any other way.
Good dashboards are used to monitor information at a glance.
They provide the right level of aggregation and enable navigation to further details.
Good dashboards have small, concise, clear, and intuitive display mechanisms.
The visualization of the information is compact, sufficient an not misleading.
Dashboards are customized.
They are adapted to the individual needs of the end user – using customization or even personalization.

Types of Dashboards

Before giving specific recommendations on how to improve dashboards, he categorizes them in several ways:

Role	Type of data	Data domain	Type of measures
Update frequency	Interactivity	Mechanisms of display	Portal functionality

In particular, the different roles have different requirements:

Strategic	Analytical	Operational
Simple design High-level measures Comparisons Histories, trends Forecasts No real-time data*) Not with interaction	More context More comparisons More histories, trends Subtler evaluators No real-time data ^*) Navigation to more details and other related info	Simple design Very detailed info level Critical issues strongly highlighted (Near) real-time data ^*) Frequent updates Navigation to operational applications

*) Comment:

While I agree with most aspects, I think that meanwhile the trend has shifted toward the need for real-time data, even for executives and analysts. Furthermore, there are dashboards that have to serve more than one of these three purposes.

Enrichment of Visualization

To help the user to quickly evaluate the presented data, it has to be provided with appropriate contextual information, for example:

Histories and trends (maybe with forecasts / extrapolations)
Comparisons with:
- Values in previous periods or specific points in time
- Planned or predicted values
- Average or standard values
- Competitors' same measures
- Related or correlated measures
Pre-Evaluation:
- Color-coding via thresholds
- Calculated measures
- Time-series or category series
Arrangement of single items:
- Spatial or by relationship
- Sorting, for example, by severity (top-n list)

Types of enrichment can be combined, for example, a time series showing the difference between planned and actual values, color-coded using thresholds that are based on the average values across the top-n different categories. But not all of them need to be used in every case.

Most Common Design Mistakes

Illustrated with screenshots of different business intelligence vendors Web sites plus comments, Few shows the typical reasons why it can be difficult to grasp the most important pieces of information quickly and accurately.

Space-related ^*)

Exceeding a single screen
Resulting in scrollbars or switches (for example, shufflers, tab-strips, or multiple screens)
=> No overview, awkward comparisons, excessive navigation
Supplying inadequate or even no context for the data
For example, missing enrichment or visualization (see above)
=> Most important or critical information cannot be detected so quickly.
Displaying excessive detail or precision
For example, single items instead of aggregation, too many digits
=> Too much to read
Choosing a deficient measure
For example, if deltas are interesting, show the deltas (not just the comparison values).
=> End users have to think too much because they have to calculate things themselves.
Choosing inappropriate display media, for example:
• 3D charts
• Pie charts whose segments do not add-up to 100%
• Comparisons of 2D areas instead of bars or charts, for example
=> Comparisons and determination of precise values and are unnecessarily difficult or impossible
Encoding quantitative data inaccurately
For example, missing zero in numeric scales of histograms and line charts
=> Misleading display, perception illusions, unwanted implications
Arranging the data poorly
For example, unimportant data in the upper left corner or separation of values that are to be compared
=> Unnecessarily difficult comparisons, emphasis not on the most important information

Color-related ^*)

Introducing meaningless variety (for example, colors or types of charts)
Implying semantic differences that are not there
=> Users have to think too much and are misled.
Using poorly designed display media, for example:
• Too similar colors
• Numeric values not near their visualization in the chart (=> unnecessary legend)
• Too obtrusive or missing scales
• Hidden values
=> Unnecessarily difficult, misleading, or even impossible to read
Highlighting important data ineffectively or not at all
Important data should be eye-catching.
=> Slow to grasp the important pieces of information
Cluttering the display with useless decoration
For example, large headers, too many frames, excessive screen-elements
=> Distraction
Misusing or overusing color (including neglecting accessibility aspects)
=> Painful for the eyes, misleading visualization
Designing an unattractive visual display
Nice and easy-to-read dashboards make the work more pleasant.
=> Painful for the eyes, less attractive work

*) I added the consequences (=>), but the author illustrates them later in the book.

Visual Perception

Means for Differentiation

Having illustrated the limited capacities of the different types of human memory, Few discusses several ways to speed up perception using differentiation: ¹⁾

Means	Quantitative Encoding	Categorical Encoding	Draws Attention?	Comment
Color				Beware of perception illusions, regard readability
-Hue	No	Yes, <= 9	Yes, if distinct
- Intensity ²⁾	Yes, limited	Yes, <= 5	Yes: intensive = important
- Position	Yes, best	Yes	Yes, top-left or centered	Only 2D, for 3D is mapped to 2D and too difficult to grasp correctly
Form
- Orientation	No ³⁾	Yes, <= 8	Yes, if distinct
- Line length	Yes, best	No	Yes: long = important
- Line width	Yes, limited	Yes, limited	Yes: thick = important
- Size (2D)	Yes, limited, for ranking	Yes	Yes: large = important	Linear can be visually measured more easily
- Shape	No	Yes	Yes, if distinct	Only use simple ones
- Added marks	No	No	Yes
- Enclosure	No	No	Yes
Motion: Flicker	Yes (speed), limited	No	Yes, strong	Use only for immediate attention/reaction

1) I added content in italics
2) Saturation, lightness/brightness: intensive = medium or dark and high saturation; light = light and low saturation
3) Here I slightly disagree (consider, for example, pie charts and speedometers).

Means of Grouping

Few lists several principles for grouping derived from the Gestalt School of Psychology:

Proximity: placed close together
Similarity: same color, pattern, shape, size, and so on
Closure: combined, forming a (nearly) complete shape
Continuity: combined, one following the other, forming a larger shape or a flow
Connection ¹⁾: linked by lines
Enclosure ²⁾: enclosed by a visual border (e.g. a colored area or a line)

1) second strongest principle; 2) strongest principle

Appropriate grouping not only helps organize the data and thus accelerate perception, it also suggests and facilitates meaningful comparisons and thus facilitates or even enables the evaluation.

Eloquence Through Simplicity

Having shown the most frequent errors and discussed the human visual perception mechanisms, Few now explains how to create informative, easy-to-read dashboards that are optimized for daily work rather than marketing. They are:

Exceptionally well organized
Condensed, primarily in the form of summaries, exceptions, and top-n rankings
Specific and customized for the end-users and their objectives
Displayed using concise and often small media that communicate the data and its message in the clearest and most direct way possible

Less Space for Non-Data

One means to achieve this is to aim for a low information-pixel ratio (derived from Edward Tufte's data-ink ratio):

Low total amount of pixels necessary to display the whole dashboard
High percentage of the dashboard's pixel devoted to the non-redundant display of data
No parts of a graphic that can be erased without loss of data-information

De-Emphasized Non-Data Pixels

Another means is to increase the information perception speed by de-emphasizing and regularizing the non-data pixels that remain.

Typical violations of these means are:

Large logos, headers, and navigation areas
They reduce the amount of space that is available for the charts and tables.
Eye-catching graphics, logos, and background decoration (images, pattern)
They can be distracting.
Different colors without semantic reason
They can irritate users who associate visual differences with semantic differences.
Exception: Backgrounds in wide tables can have alternating colors that differ only slightly.
Unnecessary frames and different colored backgrounds
Often, better means of grouping are spacing and bold, larger title texts.
Shadows and color gradients
They are distracting and can cause visual perception illusions.
Distracting grid lines
It is better to use soft grid lines (for example, thin light gray ones) or even no grid lines in charts and tables and omit the chart borders opposite the scales.
Area gauges (for example, pie charts or speedometers)
Usually a linear gauge ("bullet graph") can present the same information and is smaller, easier, and faster to read.
3D charts
Comparisons and quantitative estimations are much easier in 2D charts.

However, later he admits that this can but should not lead to dashboards that are not visually appealing.

Enhanced Data Pixels

Further improvements can be achieved by enhancing the data pixels:

Eliminate all unnecessary data pixels
For example, redundant information, too much precision in numbers (digits, parts of date and time [depending on the given time-range], aggregation levels)
Emphasize the most important information by
- Placing the most important information in the upper left corner or – surrounded with a border – in the center (in the chart/table as well as in the window)
- Highlighting it using stronger colors, a different shape or an additional, simple symbol

The Best Display Media

Different types of information require different display media for optimized display.
Examples of decision-making criteria are:

Is it about one, a few, or many numbers?
Are comparisons between them needed?
Are thresholds provided?
Is the main focus on the comparisons, the qualitative result, or the precise numeric values?

Bulleted Graphs

Few's first favored graphical visualization is what he calls a "bulleted graph," a horizontal or vertical linear gauge (that is, a bar chart with only one bar). However, his examples have two shortcomings:

The scale – although appropriate on printouts – is too small for current on-screen displays.
The bars always have the same color rather than a highlight color, making it a bit more difficult to quickly grasp the current severity of the value.
By providing black bars, he removes the possibility of adding value numbers directly to the bulleted graph.

Few's Version	My Suggestion

Since the bars are not black in my suggestion, the numerical values (if precise values are of interest) could even be placed on the bulleted graphs instead of next to them. This approach is followed in Microsoft Excel 2007, for example (although without different colors).

Multiple horizontal bulleted graphs placed one above the other in a table column are similar to a bar chart with the advantage that the bulleted graphs can have different scales.

Bar Charts and Line Charts

Next, he compares bar charts versus line charts:

Bar charts are more appropriate if single values are to be compared whereas
Line charts are more helpful to grasp shapes and trends.

This implies that line charts are only appropriate for interval scales (that is, quantities, amounts, or times) and not for nominal scales (for example, countries) or ordinal scales (for example, different qualities).

Bar charts are also easier to read than pie charts and stacked bar charts. Few only recommends stacked bar charts if multiple bars are involved where the components add up to a total value – and even then he prefers one or three bar charts instead.

In two cases, he recommends a combination of bar and line in one chart:

The line as sum or difference of two value series
Pareto charts:
This is where the succeeding values (bars) of a sorted series (not necessarily a time series) add up to an interesting total (line).

Comment:

As Few correctly stresses the importance of comparative values (that is, thresholds and target or reference values), I am surprised that he only mentions and shows target values (as an additional graph) here. I would have expected background areas of very light colors to convey the thresholds.
Furthermore, he does not mention the benefit of two scales – one with absolute values and the other one with percentages compared to a target or reference value:

Sparklines

What Few calls a "sparkline" is a small line chart without axes that does not show precise values but does show a trend:
Sparklines are similarly small to bulleted graphs. They are much more meaningful than trend arrows and less ambiguous.

Comment:

Here again, colored thresholds can be a bit more meaningful:

Box Plots

Few believes that just a simple bar chart is not sufficient to display aggregated values because it does not reveal information about the distribution of the underlying values.

		Instead, he prefers a bar chart in which each bar Starts with the minimum value Ends with the maximum value Has a horizontal line for the median (not the mean)

		He recommends to enhance these bars by Reducing them so that they represent only 50% of the values Extending them by whiskers (vertical lines that end in small horizontal lines like those in classical statistic charts) that include further 90% or 95% and Extending them further with dots that visualize the remaining 5% to 10% This would visualize the optimal amount of information.

		Nevertheless, in dashboards he prefers a slightly simpler version, where the bar Represents about 80% of the values Is extended by vertical lines that represent the remaining 20%

Further Chart Types and Parts

Rarer Chart Types

Scatter charts are easier to read and to interpret, if the axes and grid-lines are in light color and the trend is displayed by a (usually straight) line.

In trend charts, he recommends a combination of two or three different charts next each other with different time ranges and a different time granularity. A finer time granularity is often not necessary for older values.

Treemaps, invented by Ben Shneiderman, help display large sets of hierarchically or categorically structured data, making the most efficient use of space.

Network (Pert) and hierarchy charts have nodes (shapes) that can contain simple charts. In his example, the links (connections) do not convey any additional meaning.
Trees and hierarchical tables are often used instead of hierarchy charts because they require considerably less space.

Gantt charts are only mentioned to show that bars can be equipped with progression indicators.

Geographical charts are only displayed in contexts where they are not used appropriately.

Comment:

Concerning Gantt charts, Few omits to mention that they can be combined with tables similarly to bulleted graphs and bar charts. And he does not describe the additional information that can be derived from a bar chart when combined with a histogram (for example, to show available resources during tasks or processes).

Chart Types That Are Not Recommended

Pie charts are more difficult to read than bar charts and even stacked bar charts because areas and angles cannot be estimated as easily as linear visualizations. However, bar charts do not show directly that the percentages add up to 100%.

Area charts may have hidden data if an area in the background is covered by another area in the foreground.

3D bar charts create the same problem. Furthermore, precise values cannot be recognized as easily in these charts.

Radar charts are also more difficult to read than bar charts. Few considers them only appropriate if the categories of the angular dimension are naturally visualized in a circle (for example, hours of a day or months of a year).

Icons

Few mentions three use-cases for icons:

Rating
Few recommends keeping them as simple as possible (for example, LED icons instead of traffic-light icons). Furthermore, icons for critical issues are more eye-catching if there are no icons at all for non-critical status. Therefore, in his own dashboards he only uses circles in two different shades of red:
Trends
If no sparklines are used (which he prefers), Few only mentions upward or downward pointing triangles (but no arrows) since he says that they are the conventional icons for trends. To grade these trends, the icons can be light green or intensive red:
State On/Off
Here he recommends asterisks, checkmarks, and crosses:

Comments:

Example icons for process status like waiting, started, running, and stopped are missing.

Organizers

Few mentions three organizers:

Tables
Here, data is arranged in columns and rows – not just texts, numbers, and icons, but also small charts (for example, bulleted graphs or sparklines).
Few does not mention trees, probably because they allow interaction that is not appropriate for dashboards and because hierarchies easily compete with more appropriate top-n rankings. But he does give examples of tables with hierarchies.
Small Multiples
Few considers "small multiples" to be groups of charts and tables that share axes and legends, thus combining related data and sometimes saving a considerable amount of space. ^*)
Spatial Maps
These can be geographical maps, floor plans of buildings, or logical or architectural maps.
The areas can be colored and contain small simple charts.

*) Comment:

Considering that a column of horizontal bulleted graphs is similar to a bar chart and a column of horizontal sparklines is not very different to a line chart, there is often nearly no difference between tables or trees and the most often used business charts. Similarly, tables or trees are often combined with Gantt charts in practice.

Organizing for Usability

There are several strategies that can be combined to make the dashboard as usable as possible in terms of practical work:

Support the information's meaning and use
Group the data spatially according to business function, entity, and use by co-locating them. These groups should be separated by the least visible means (white space and/or light, thin lines).
Spatial groups also facilitate meaningful comparisons. Further comparison aids are common colors or shapes and additional comparative values. On the other hand, similarities to different aspects or meanings should be avoided to discourage meaningless comparisons (for example, do not use the same red that is used as "critical" for a completely different category value).
Maintain consistency
To facilitate quick and accurate interpretation, always use the same charts, colors, shapes, and kinds of values for the same means and purpose and vary them to express different means and purposes.
Make the viewing experience aesthetically pleasing
Here, the challenge is to make the dashboard and its elements visually appealing without distracting from the important information: Use as little complexity as possible for non-data display, reserve intense colors for critical issues, and use easy-to-read text fonts.
Design it as a launch pad
Since not all interesting data can be displayed directly in the dashboard, it is necessary to provide easy ways (for example, double-click or context menu) to navigate context-sensitively to additional details, background information, or – if appropriate – applications to solve the issues.
Test, test, test
No dashboard is optimally designed at the first attempt. Designs need to be presented to end users, tested on them, and refined in several test cycles before they are finally delivered to end users.

Sample Dashboards

In the last chapter, Few presents four dashboards that he has created for different purposes, covering the most typical types of dashboards:

Sales dashboards (strategic)
CIO dashboard (strategic and operational)
Telesales dashboard (operational)
Marketing analysis dashboard (analytical)

For the first of them, he also presents eight designs from eight business intelligence companies that participated in a contest to create a dashboard for the same data for the same target end users. These dashboards were all very different and had design flaws of varying severity.
Few encourages readers to evaluate them themselves before reading the author's remarks. None of these dashboards displayed as much information that was as clearly organized as Few's one, which had by far the best information-pixel ratio .

In his dashboards, Few extensively uses bulleted graphs and sparklines that help combine graphical and textual information in tables and small multiples. He uses white space and very light borders to group information but never puts frames around the tables or charts.

He used color sparingly: The titles are light brown, the bars (even the thresholds) are shades of gray, and the highlighting icons are two shades of red. Compared to this, the competitors' dashboards were much more colorful and more appropriate for marketing purposes – but also much less readable, more distracting, put more load on the eyes, and provided increasingly inappropriate information. This made them less usable for daily work.

In several cases, Few explains why he selected that piece of data in that granularity and why he arranged it in that way, giving additional aspects to consider in dashboard design.

Comments:

Few created his dashboards very well. I especially like his effective use of small multiples. In fact, none of his proposals requires more real estate on the computer screen than can be provided by a 1024x768 pixel screen. However, the 800x680 pixel canvas left by the L-shape header and navigation area is too small: Assuming that the font size of the table entries is 10 pt, the sizes of his example dashboards are about 990x780 pixels (or for 8 pt it is 896x624 pixels). But on a 1280x1024 pixel screen, his dashboards fit on the canvas area.

How he reached his goal:

No frames around the tables, chart with borders and a colored title area, practically no grid-lines
Small multiples that reduce space for axes and legends and for the separation of tables and charts
Heavy use of sparklines and bulleted graphs instead of classic charts
Reuse of the title rows for example, for small legends and precise scoping
Minimalistic numbers: Few digits, appropriate factors, dates without year or even month, times without seconds or even minutes
Units mostly in the title and not in the columns or column headers

Few encourages the reader to provide feedback on how they could be optimized. Here are my proposals:

In some cases, the column headers could be more consistent.
In the bulleted graphs, sparklines, and box plots, I would have added thresholds in light background colors of low saturation.
In contrast to Few's doctrine of consistency, the different chart types show their target values by different means: a shaded background area, a line, or even both. I would prefer to always have a black line and to reserve the shaded background areas for thresholds.
I wonder whether the severity ratings would be even more helpful if – alternatively or additionally – the critical KPIs were highlighted (rather than just preceding the characteristic with a severity icon).
In tables with many columns, different columns may have different severities, which means they should be highlighted individually.
Although a default ranking by the most important criterion is provided, in some cases it is desirable to have the option to sort by a different column. Even though this is not the primary intention of a dashboard, it avoids the need to navigate to a more detailed screen.

Read also my final comments, which are part of my review.

top

Books & People

Books, People

Archives

Book Reviews

Links & More

Related Links

Background Links

Book Review: Information Dashboard Design – Summary

History, Current Situation, and Purposes

Types of Dashboards

Enrichment of Visualization

Most Common Design Mistakes

Space-related *)

Color-related *)

Visual Perception

Means for Differentiation

Means of Grouping

Eloquence Through Simplicity

Less Space for Non-Data

De-Emphasized Non-Data Pixels

Enhanced Data Pixels

The Best Display Media

Bulleted Graphs

Bar Charts and Line Charts

Sparklines

Box Plots

Further Chart Types and Parts

Rarer Chart Types

Chart Types That Are Not Recommended

Icons

Organizers

Organizing for Usability

Sample Dashboards

Space-related ^*)

Color-related ^*)