Book Review: Information Dashboard Design – Summary
Back to Review | History, Current Situation and Purposes | Types of Dashboards | Enrichment of Visualization | Most-Common Design Mistakes | Visual Perception | Eloquence Through Simplicity | The Best Display Media | Further Chart Types and Parts | Organizers | Organizing for Usability | Sample Dashboards
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 |
|
|
|
*) 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: 1)
| Means | Quantitative Encoding | Categorical Encoding | Draws Attention? | Comment |
| Color | Beware of perception illusions, regard readability | |||
-Hue |
No | Yes, <= 9 | Yes, if distinct | |
- Intensity 2) |
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 3) | 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 1): linked by lines
- Enclosure 2): 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
|
|
 |
He recommends to enhance these bars by
This would visualize the optimal amount of information. |
|
 |
Nevertheless, in dashboards he prefers a slightly simpler version, where the bar
|
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.
