Book Review: Information Dashboard Design

Visually Encoding Data for Rapid Perception

Preattentive processing is an early stage of visual perception that occurs in iconic memory without conscious thought. It lets us rapidly recognize particular visual attributes that make certain things stand out or cause us to perceive visual groupings. “Attentive processing is sequential, and therefore much slower,” says Few. The preattentive attributes of visual perception belong to four categories:

• color—hue and intensity—which combines both saturation and lightness
• spatial position—2-D location
• form—orientation, line length, line width, size, shape, added marks, enclosure
• motion—flicker

Few explains, “Each of these visual attributes can be consciously applied to dashboard design to group or highlight information.” While many of these attributes can communicate only categorical data, those which can also communicate quantitative data include 2-D position, line length, and, to a limited extent—allowing the “perception of one thing as greater than, equal to, or less than another, but not with any degree of precision”—intensity, line width, size, and flicker—based on speed. “There is a limit to the number of distinct expressions of a single preattentive attribute that we can quickly and easily distinguish.”

Using Gestalt Principles of Visual Perception

The Gestalt principles of visual perception let us “intentionally tie data together, separate data, or make some data stand out as distinct from the rest.” You can apply the following six principles of visual perception in dashboard design:

• proximity—“We perceive objects that are located near one another as belonging to the same group.” In addition to using white space or proximity to either separate or group objects, respectively, you can use proximity “to direct viewers to scan data on a dashboard predominantly in a particular direction: either left to right or top to bottom.”
• closure—“We perceive open[, incomplete, and unusual] structures as closed, complete, and regular whenever there is a way that we can reasonably do so.” The principle of closure is useful in minimizing the number of visual elements on dashboards and in graphs. For example, you can “group objects… into visual regions without the use of complete borders or background colors to define the space,” and you can define the area of a graph using only a set of X and Y axes rather than full enclosure.
• similarity—“We tend to group together objects that are similar in color, size, shape, and orientation.” You can apply the principle of similarity to identify different data sets in a graph or similar data that is not proximate and thereby encourage comparisons of such data.
• continuity—“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.” You can use this principle to show relationships between the data on a dashboard.
• enclosure—“We perceive objects as belonging together when they are enclosed by anything that forms a visual border around them….” You can use enclosure—by either borders or fill colors—as the strongest means of communicating the grouping of information.
• connection—“We perceive objects that are connected in some way, such as by a line, as part of the same group.” Connection produces a stronger perception of grouping than proximity or similarity. “The principle of connection is especially useful for tying together non-quantitative data….”

Few declares, “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. An understanding of the preattentive attributes of visual perception and the Gestalt principles provides a useful conceptual foundation for facing these challenges.”

Simplicity and Emphasis

According to Few, “The guiding principle in dashboard design should always be simplicity: display the data as clearly and simply as possible, and avoid unnecessary and distracting decoration. … Eloquence in communication is often achieved through simplification. … When designing dashboards, you must include only the information that you absolutely need, you must condense it in ways that don’t decrease its meaning, and you must display it using visual display mechanisms that… can be easily read and understood. Well-designed dashboards deliver information that is

• exceptionally well organized
• condensed, primarily in the form of summaries and exceptions
• specific to and customized for the dashboard’s audience and objectives
• displayed using concise and often small media that communicate the data and its message in the clearest and most direct way possible

Dashboards tell people what’s happening and should help them immediately recognize what needs their attention.” Few recommends:

1. Simplifying a dashboard display by eliminating all unnecessary non-data pixels—such as borders, fill colors, gradients, 3-D, non-essential grid lines in graphs and tables, and purely decorative elements—and de-emphasizing and regularizing those that remain.
2. Enhancing the data to give it as much clarity and meaning as possible by eliminating all unnecessary data—including information that is not essential to the user’s current task and non-essential instructional or descriptive text—“condensing data through the use of summaries and exceptions,” and highlighting the most important of the remaining data pixels.

Important information includes “information that is always important,” which you can emphasize using static means, and “information that is only important at the moment”—such as “when it reveals something out of the ordinary”—that require dynamic emphasis. “Few aspects of visual design emphasize some data above the rest as effectively as its location.” The location of data is generally static, so you can emphasize data that is always important by placing it in the upper-left corner of the screen. Emphasize information that is currently important by dynamically displaying it in a pop-up at the center of the screen. You can also highlight important information—either statically or dynamically—by using visual attributes that are either greater than the norm—such as color intensity, size, or line width—or contrast with the norm—such as hue, orientation, enclosure, or added marks.

Few explains, “When highlighting important information, you must always be careful to restrict the definition of what’s important. If you highlight too much information, nothing will stand out and your effort to communicate will fail. When used with discretion, however, visual highlighting can achieve the goal of immediate recognition and quick response.”

Few’s focus generally remains on the effective display of data rather than good interaction design, and there is one point on which I disagree with him. He says, “Another category of content often found on dashboards that can be considered non-data pixels is that which supports navigation…. These elements might serve an important function, but they don’t display data. As such, they should not be given prominence. If they must exist, place them in an out-of-the-way location such as the bottom-right corner of the screen….” In my opinion, this is bad advice. The standard location for navigational elements is in the upper-left corner of the screen. While a very simple dashboard application might not require a discrete navigation system, complex applications do. You can offer both easy-to-use navigation and a simple visual display by displaying a navigation panel to the left of a dashboard, but letting users collapse the panel whenever they don’t need it.

Effective Dashboard Display Media

At the heart of the book is Few’s library of dashboard display media, which he introduces as follows:

“Dashboards must be able to condense a lot of information onto a single screen and present it at a glance without sacrificing anything important or compromising clarity. Consequently, they require display media that communicate effectively, despite these conditions. Every section of data on a dashboard should be displayed using the clearest and richest possible means, usually in a small amount of space. This requires an available library of display media that have been selected, customized, and sometimes created especially for dashboards, and an understanding of the circumstances in which each medium of display should be applied.”

According to Few, “Two fundamental principles should guide the selection of the ideal dashboard display media:

• It must be the best way to display a particular type of information that is commonly found in dashboards.
• It must be able to serve its purpose even when sized to fit into a small space.”

He goes on to say: “The best medium for displaying data will always be based on the nature of the information, the nature of the message, and the needs and preferences of the audience. A single dashboard generally displays a variety of data and requires a variety of display media, each matched to specific data.”

“When communicating quantitative information, the strength of written words and numbers compared to graphics is their precision. … Displaying individual values does not require graphics—indeed their use would only retard communication.” However, if you want a bigger picture of the whole or comparisons of multiple measures…, text alone doesn’t support this.

“Text, especially when organized into tables…, is a superb medium for looking up information. … Graphs don’t support looking up individual values as efficiently, and certainly not as precisely. … Giving values shape through the use of grid coordinates along two axes [lets] us visualize numbers…. This is the strength of graphs.”

“Effective dashboards need to combine text and graphics in a way that supports a rich and meaningful display of data, along with the desired level of quantitative precision, in a way that can be perceived efficiently.” Once you’ve decided whether to display data using text and/or graphics, you must decide which dashboard display media to use for the graphical display of specific data.

Few’s ideal display media for dashboards include

• graphs—bullet graphs, bar graphs, stacked bar graphs, line graphs, a combination of bar and line graphs, sparklines, box plots, scatter plots, and treemaps
• icons—to indicate alerts, up/down, and on/off
• text—labels and numbers
• images—photos, illustrations, and diagrams, which are occasionally of use
• drawing objects—which can represent hierarchy or flow
• organizers—tables, spatial maps, and small multiples

Designing Usable Dashboards

Introducing his discussion of designing dashboards for usability, Few states:

“One of the most challenging [aspects of a dashboard’s visual design] is the need to arrange many items of information—often related solely by the viewer’s need to monitor them all—in a manner that doesn’t result in a cluttered mess. This arrangement must support the intrinsic relationships between the various items and the manner in which they must be navigated and used to support the task at hand. A dashboard’s design must optimally and transparently support its use.”

To ensure that your dashboards are easy to use:

• “Organize the information to support its meaning and use.”
  • “Organize groups according to business functions, entities, and use.
  • “Co-locate items that belong to the same group.
  • “Delineate groups using the least visible means.
  • “Support meaningful comparisons.
  • “Discourage meaningless comparisons.
• “Maintain consistency for quick and accurate interpretation.
• “Make the viewing experience aesthetically pleasing.
  • “Choose colors appropriately.
  • “Choose high resolution for clarity.
  • “Choose the right text.
• “Design for use as a launch pad,” or portal, so users can drill down to supplemental information that they need to perform a task.

Writing & Copyediting

Few develops his ideas logically and concisely, while providing all of the background information a reader might need to understand them. After first clearly describing each of the book’s mistakes, principles, and guidelines, Few ensures his meaning is clear by providing illustrative examples and thoroughly analyzes each of the examples.

This book is well written and contains very few copyediting errors. Few writes with clarity and grace—though he does sometimes tend to overuse passive voice. Some of the chapter tables of contents and quite a few introductory bulleted lists don’t reflect the order of the corresponding information in subsequent sections. The most egregious example of a poorly ordered list is in Chapter 2: a list in which the items should have appeared in order by timeframe. Also, Few occasionally uses non-standard terminology for standard elements in graphic user interfaces. I’m still wondering what he meant by “selection boxes.”

Illustrations

Most chapters of this richly illustrated book contain numerous figures, illustrating the following:

• Chapter 1—13 examples of representative dashboards (See Figure 1.)
• Chapter 3—26 examples of mistakes in dashboard design and 6 examples of ways to present similar information more effectively
• Chapter 4—9 illustrations of attributes of visual perception and 10 illustrations of Gestalt principles of visual perception
• Chapter 5—3 conceptual illustrations, 14 examples of good visual design, and 21 examples of poor visual design
• Chapter 6—5 conceptual illustrations, 49 examples of effective dashboard display media, and 13 examples of less effective displays
• Chapter 7—1 conceptual illustration, 6 examples of principles of good dashboard design, and 3 examples of poor dashboard design
• Chapter 8—4 examples of good dashboard design, 8 examples of poor dashboard design, and one key for an example dashboard

Book Design

This is a gorgeous book. Abstractions of several types of charts grace Few’s simple, elegant cover art. From the book’s beautifully designed, easy-to-read table of contents to the spare graphics on the odd pages that back some chapter title pages and the well-designed page layouts to the spacious index, the book designers’ attention to detail is evident throughout. The book’s neutral color scheme reflects Few’s recommendations for the use of color on dashboards and, more generally, for the visual communication of data. The full-page bleeds on the book’s chapter title pages—each in a different neutral hue with contrasting white text—make it easy to find your way around the book. Printed on thick, glossy paper, the book’s text and many images are crisp.

The information design is appropriate to the content, and therefore, varies somewhat from chapter to chapter—though the basic formats are the same throughout. Each of the book’s various content elements is well designed, including chapter title pages, the chapter tables of contents, the minimally designed tables, simple bulleted and numbered lists, lists that comprise paragraphs of detailed information with a run-in head introducing each item, side notes, galleries of images with accompanying descriptive text, and an appendix of recommended reading. Though the vertical lines extending along both sides of all figures other than those in the galleries violate Few’s guideline: “Eliminate all unnecessary non-data pixels.” In some cases, the vertical lines contain figures that would otherwise have no clear boundaries—such as conceptual illustrations or graphs—and work well. But where they surround a rectangular image such as a screen shot, they add visual noise and serve no useful purpose. In this case, the desire for absolute consistency in visual design has prevailed over the optimal presentation of individual figures.

Conclusion

Written by one of the foremost experts in the field of data visualization, this is one of those rare books that seem to make the publication of other works on the same topic unnecessary. As dashboard design continues to evolve over time, I hope O’Reilly will publish updated versions of this book. It will be interesting to follow the evolution of dashboard design from Few’s point of view.

This is a very complete book and was obviously developed with great care. I highly recommend Stephen Few’s Information Dashboard Design to any information designers who are focusing on the visual display of data and, more particularly, to dashboard designers.