Level up your data visualizations with Human Factors Principles of Display
This article explains the why behind many of the decisions we make when creating a good visualization.
Consider the cliché: “A picture is worth a thousand words…”
It’s important to think of your data visualizations in much of the same way. Our current society thrives on scroll culture, which means you need to make your visualization immune to it. It helps to assume that you care about your work the most, such that even individuals or stakeholders that requested a visualization are likely to move quickly through your work. Thus, a visualization is great when it can capture the point efficiently, quickly, and without losing the interest of your end-user(s).
The field that is most concerned with how we can do this effectively is called Human Factors. Below I borrow a few principles and apply them to make our own visualizations worth ‘a thousand words.’
We know a bad visualization when we see one…
The first graph isn’t great because there is a lot of information that is scrunched together. We don’t really know much about it at first glance and it requires context to be understood and I’m left unsure about many inaugural pieces of the figure: What do the axes represent? What about the colors? Are the colors only there to help separate out the groups? What of the different shapes by group? Barring these elusive points on the figure, it’s unfocused and cluttered. Where does my eye need to go? It’s automatically drawn to the orange circle that is away from the clutter. Is that an important point that they are trying to make or is it just an outlier?
The next graph is better, but also has a lot going on. The relation between the picture in the figure isn’t immediately obvious and therefore, just creates distractions. I’m then drawn to the brightly colored bars which appear to be sorted by value (high percentage to low). This, typically a good visualization practice, is triumphed by the need to maintain an intuitive scale. Look to the x-axis and you will notice that the scale goes from good to outstanding then to average and so on. This differs from what we would expect (outstanding to poor) and therefore runs the risk of being misleading to a scrolling user.
The last example is another problem with the axis, but with the y-axis. Here, 36% appears to be only slightly less than 91%. However, it took some digging for me to notice that because I had to sift through all of the harsh colors and other distractions.
Great visualizations minimize cognitive load
I like the two examples below because I don’t have to guess as to what the ‘story’ the creator wants to tell — it jumps out at me. The use of color, placement, and words differ in these two visualizations but they are each great choices in their own ways.
The first uses the color to drive home a point and it’s a consistent one across time and space. (Consistency is a human factors principle, but more on that later!)
The second also uses consistency (amongst other good principles), but differently. Here, competing colors are used to convey the story (competing screen time by gender).
For many of us in data, the problem isn’t the distinction between a great and bad visualization, it’s an average visualization vs. a great visualization.
So, what makes some visualizations better than others?
Human factor’s Principles of Displays help us turn mediocre visualizations into great ones. For this article, I’ll cover three of them to keep it short-ish.
- Consistency — a standard position for information, use the same colors, and features (line symbols, dashed lines, etc.) for the same information conveyed at different points in time or space.
- Data-to-ink ratio
- Leverage cultural short-cuts*
*the actual Principle of Display is minimizing information access cost, but I didn’t want use too much jargon. More on this later!
The main point is to reduce noise in your figures.
How can we leverage Human Factors Principles of Displays to make this mediocre visualization better?
Below, I have simulated one person’s blood sugar (CGM checks) for 6 months and separated them into the 3 standard categories of low, in range, and high.
First, let’s update variable order to reduce cognitive load. In other words, it’s not intuitive to have the legend in that order because the bar colors go the opposite way. This leaves room for misinterpretation of the end-user. Additionally, the months are not in an intuitive order.
Let’s employ the Human Factors Principle of Display Consistency like the great visualizations we saw above to reduce distractions. First, if you look below, you may notice that the words sugar and glucose are used interchangeably. This may be considered jargon for some end-users and there’s no real purpose as to why I did this. Let’s update it to be consistent through space on the graph.
Additionally, the subtitle gives good information about how to read the chart, but the y-axis label is lazy. We could easily update this to make the message clear. I put the information in the subtitle to draw attention to it, so it must be important. It’s okay to repeat yourself in your visualization as long as you’re following consistency.
Consistency achieved!
We now have a standard position for information, use the same colors, and features (line symbols, dashed lines, etc.) for the same information conveyed at different points in time or space. For visualizations where there are differences in the types of information conveyed in the symbol, highlight those differences by using different representations.
Data-to-ink ratio
For this principle, we want the amount of ‘ink’ used to be deliberate. In other words, any ink that doesn’t have a purpose should be eliminated.
Level-up your visualization by leveraging cultural short-cuts
As a culture, we have pre-built associations and expectations. For example, you have an expectation that if you see a bright color, specifically red, in your environment it means to warn you (perhaps stop like the stoplight below).
We can use these to our advantage and convey meaning with no words. Color is a great way to leverage these associations. For my visualization, I’m using blood glucose range categories of low, in range, and high. If you don’t know much about blood glucose for diabetes, low and high blood sugar are both (about equally) bad for you.
Let’s update the figure to convey that message. I chose one way to do this that also highlights this Human Factors Principle.
I’ve also updated the title to help illuminate my story. I want you to focus on the bad times not the good in this figure. You may notice that this person is in range quite a bit, so what if I wanted to flip my story. I’ll go with a cooler color like a blue for good.
My use of gray is pretty risky and not always recommended. While the grays are different, it’s hard to tell. You can make them more distinct or trust that the legend is in the right order.
Reducing noise allows you to present more information
If you reduce noise and distractions in your visualizations, you are giving yourself an allowance to put in more information (which isn’t always better). For the figure on the left, I was able to put in data labels of increases/decreases in headcount by major AND visualize the overall counts by term. For this figure, I was using the school’s colors (yellow and blue) as it’s required. Thus, I decided to put the term of interest (summer 2020) in yellow.
Reducing distractions will also allow you to get fancy and having moving parts in your visualization. There’s a whole Human Factors Principle of Display for items in motion as well, but I’ll cover that some other time.
By minimizing ink, I could really highlight my story here. The year 2020 was in focus (blue) and the comparison line is gray. You can grab and compare changes by month and overall counts. The animation makes it easier to get each of those pieces one at a time in an effort not to overwhelm the end-user.
Final tips
Imagine your visualization will be lifted with no context — What needs to be in your visualization so your story is clear and cannot be misconstrued? What is irrelevant or optional?
Reserve captions for data nuances — I only put things in captions that are not obvious from the visualization. This usually includes the way I filtered or gathered my data. If you find yourself writing out long captions, challenge yourself to get it in image form in your visualization. This can be frustrating and difficult, but it’s one sure way to level-up your visualization.
Leverage associations — we have so many mental shortcuts and they are posted all over the internet and in psychology blogs/texts. Use them! Color, symbols, and space can all be leveraged to save on word count.
