Visual Principles, Part 2

This is part five of a series on dashboard visualization.

Yesterday, I covered three visualization principles:  cognitive load, the idea that less is more, and a quick look at where the eye looks.  Today, I’m going to look at three more principles:

1. The Rule of Thirds
2. Glanceability
3. Color Vision Deficiency

The Rule of Thirds

We typically think about the rule of thirds when looking at photographs or paintings.  The idea is that if you take an image and slice it into three zones horizontally and three zones vertically, people naturally gravitate toward the intersections of lines.  For example, check out the photo below.

A sample photograph showing off the rule of thirds.

In this case, my flower picture takes advantage of the rule of thirds.  The stem follows the bottom horizontal line, and the petals dominate the top-left intersection, with berries flanking the lines.

The rule of thirds can also work for dashboards.  For example, let’s take another look at the strategic dashboard from earlier:

An example of a strategic dashboard. (Source)

If we put on gridlines, here’s what we see:

Adding gridlines to the strategic dashboard.

Just like with my photograph, you can see that the most interesting elements of this dashboard generally fit in the gridlines.  It would have been better if the dashboard developer could shift the graphs over to the left just a little bit, but you can see that the spots the eye gravitates toward generally will have the most interesting-looking visuals in them, and that’s a good idea.

This doesn’t mean that you absolutely need to follow the rule of thirds, but it is smart to keep this idea in mind.

Glanceability

Now we move on to one of my hobby horses:  glanceability.  This is a straightforward word with a straightforward meaning and a lot of implication.  The idea of glanceability is that a human can, at a glance, gain important information from your dashboard.  In other words, suppose you’re building a dashboard for the CEO as she shuffles from one meeting to the next.  She has about 5 seconds to look at your dashboard and make a decision.  If you can provide her accurate information that meets her needs within that five-second window, you succeed.  That is glanceability in a nutshell.

In a bit more detail, you can make a dashboard glanceable by following these guidelines:

1. Ensure that there is clear purpose in your metric design and display.  In other words, think about which metrics you want to show, how you want to show them, and where you put metrics in relation to one another.
2. Group metrics by function into sections.  Look at the dashboard above.  It has four clusters of metrics:  those around revenue, new customers, revenue per customer, and customer acquisition cost.  All of the revenue metrics are clustered in the top-left quadrant of the dashboard.  Furthermore, all revenue-related metrics (that is, revenue metrics and revenue per customer metrics) are on the left-hand side of the dashboard, so the CEO can focus on that half and learn about revenue and revenue per customer.  She doesn’t need to look in the top-left corner for one revenue measure and in the bottom right for another; she can focus down to a portion of the dashboard and get an answer.
3. It should be easy to see and differentiate those clusters of metrics.  Our natural instinct might be to put borders around the clusters, but whitespace is your friend—remember, less is more.  If you add a bit more whitespace between clusters of measures, you’ll make it easy for people to see that there’s a difference without distracting them with unnecessary lines.
4. There should be no scrolling on the dashboard.  If a user has to scroll, the dashboard is not glanceable:  you could end up on the wrong section of the dashboard and need to scroll around to figure out where you can even begin to look.  If it doesn’t fit on one dashboard, then you probably need multiple dashboards with separation of concerns, or maybe some of those measures and graphs should be in a report instead of a dashboard.
5. Make sure that the individual measures are easy to read.  That means using a large enough font that people can see it without squinting.  It means using a dark enough color that the title doesn’t blend into the dashboard.  Those, by the way, are things that Power BI is not very good at by default…  But something that Power BI is good at is rounding big numbers.  For example, if I tell you that revenue is 27482649.97, that is useful information but it is also hard to read.  You’re having to count from the left, mentally draw out the commas, and try to figure out if that’s $2.7 million or $27 million.  Formatting it as $27,482,649.97 is nicer.  But you know what’s even better on a dashboard?  $27.5m.  That is a much easier number to see and understand.  It also takes up less space on the screen, so it’s win-win.  If a person really needs to see the exact number, Power BI does offer the ability to mouse over a visual element and get the exact value as a tooltip.  But for people glancing at a dashboard, the big round number is enough.

Following these basic guidelines will make your dashboard a lot easier for people to read.

Color Vision Deficiency

 

Color Vision Deficiency (aka color-blindness) affects approximately 8% of men and 0.5% of women.  There are actually several forms of CVD, each of which will affect people in different ways, but fundamentally it comes down to certain cones in the eye not perceiving light normally.  For example, 5% of men have deuteranomaly, in which the cones acting on green light do not fire as expected.  For the more extreme case, about 1% of men have deuteranopia, where they lack entirely green cones.

Where this can affect you is if you use colors which a person with CVD cannot differentiate.  For example, check out this bar graph:

Six perfectly distinguishable colors.

If you have normal color vision, you can easily see the six colors:  pink, light blue, orange, green, purple, and brown.  But I chose each of these colors because they lead to trouble when used in concert.  For example, here’s what it looks like if you have deuteranopia (green cone deficiency):

The view for someone with deuteranopia.

Notice that the first two colors are practically indistinguishable.  I opened this image in Paint and the RGB codes were very close; not perfect matches, but so close that I can’t tell the difference.  Also note that bars 3 and 4 are really close, too.

Here’s what it looks like for someone with protanopia (red cone deficiency):

The view for someone with protanopia.

Now bars 3 and 4 are really tough to separate, and bars 1 and 2 aren’t that different either.  You can see that protanopia and deuteranopia have somewhat similar effects, which is why people talk about “red-green” color-blindness.

Finally, let’s look at tritanopia.  This is the least common type, with tritanomaly and tritanopia combining to affect approximately 0.5% of men and 0.5% of women.  So here’s what they see:

The tritanopic viewpoint.

The bottom two bars are very close now.

As a side note, tritanopia is pretty wild, almost like you’re living on an alien planet.  Everything just looks so red and pink.  Here’s the flower photo from earlier seen from the perspective of someone with tritanopia:

How someone with tritanopia sees our flower.  But hey, at least they can still see the gridlines and follow the rule of thirds!

Notice how we basically lose the green in this photo, replacing it with pinks and blues.

One last bit.  You may not think it makes much of a difference, but it’s the reason that SSIS no longer looks like this:

How SSIS used to look, back in the day.

That’s because if you’re protanopic, this image looks like:

SSIS with protanopia.  The greens have become yellow and reds have become a yellowish brown.

And if you’re deuteranopic, it looks like:

SSIS with deuteranopia.  The greens have become a sandy tan and the reds have become a light brown.

Either way, making green and red indicate success and failure?  That’s a failure.

If you want to learn more, Martin Krzywinski has an awesome page on colorblindness.  I was able to piece together overlapping colors thanks to that resource.  I also used Coblis to show the effects of different forms of CVD.

Conclusion

This was an image-heavy post today, but that’s what I get for putting together a data visualization talk…  Anyhow, we covered three important visualization principles:  the rule of thirds, glanceability, and Color Vision Deficiency.  Combined with the first three principles, you have a lot of information at your disposal to improve your visuals.

Tomorrow, we’re going to continue the series by looking at a bunch of data visualization formats.  Stay tuned!

Advertisement