The Dashboard Spy

Executive Dashboard project participants are fortunate when they have the opportunity to work with true graphic designers on the visual design portion of the dashboard. There is a real opportunity to see that design is a real discipline and that the value the visual design team is not merely skin deep, but integral to the success of the dashboard interface. Of course, graphic designers vary in skill and understanding, but you know you are in the presense of a real master when they teach you the fundamentals of their trade. When they expose the “why” of their decision making, you learn that making your business intelligence dashboard intuitive relies on understanding factors of human perception.

Let me illustrate the point with a great example from the incredible book, Designing Interfaces by Jenifer Tidwell.

In the chapter on “The Basics of Information Graphics”, the author points out a topic of great interest and value: Pre-Attentive Variables. Basically, the idea is that you have to choose your visual features very carefully because they operate “preattentively” - that is, they convey information before the user pays conscious attention.

The author walks us through a great demonstration that we replicate for you Dashboard Spy readers. Here is a series of graphics to study to understand the principle so that you can apply it to your business dashboard designs:

Look at this first figure and find the blue items. 

Assuming you’re not color-blind (and probably even if you are), you can easily pick out the blue items.

Now try it with a larger field of data items:

Still not a problem, as you can see. No matter the number of balls in total, you can easily pick out the blue ones, right? In fact, if you think about it, the time it took for the larger data set was not more than that for the first smaller set. You just look at it and see the blue ones. Instead of being a linear relationship with the number of objects, the time is not dependent on the number. That’s because this example operates on color. That’s the key, because color recognition happens at a primitative cognitive level. Your visual system does the heavy lifting for you and it works in a massively parallel manner. I bet we could show you a page full of balls and it would not take any more time to notice the blue ones.

Now, for the exciting part. Take a look at a text table.

Search through the above table for values greater than one. Not so easy, is it? But the real upshot is that if I were to increase the table size, it would take you longer, wouldn’t it? In this case, our parsing of the data values IS linear with the number of values displayed.

Now take a look at this version of the data table:

What if we make the size of the text bigger in the cases where they are greater than 1?

And that change brings us back to constant time again. Size is another preattentive variable. If you got a pageful of data and the ones requiring identification were larger, you would pick them out in the same amount of time.

As you see, size (or another preattentive variable treatment) does matter in terms of presenting an intuitively understandable table of data. We all know the value of conditional formatting, but when we tie it back to graphic design fundamentals and get an understanding of human cognition, we really value its importance.

Now that you know how important it is to use preattentive variables when you need to impress upon your user a quick understanding, wouldn’t you like to know what the actual preattentive variables are? Of course, so here you go. Use these techniques in your business intelligence dashboards and reports and enjoy the level of understanding they can bring:

1. Color
2. Position
3. Brightness
4. Orientation
5. Saturation
6. Size
7. Texture
8. Shape

The beauty of all this is that you already know and use these techniques. All we are doing here is formalizing them and presenting them as an information visualization best practice!

And the grand upshot of all this theory? Well, here what it has to do with your metrics charting on your BI Dashboard:

Tags: Dashboard Design Principles, Preattentive Variables, Business Intelligence Dashboard Layout, Information Visualization