Pie graphs (charts) stink

Posted on by

A few years ago, I read the piece by Stephen Few titled “Save the Pies for Dessert” and it really made an impact on my thinking of data presentation. I realized that some graph forms go out of their way to make it difficult for the user to interpret and understand the data being presented. I’m not even talking about when the author decides to turn their pie sideways, explode it and add a glossy third dimension on it. I’m just referring to a standard flat-out pie graph construction.

Below is an example from a few years ago on Google’s Analytics Dashboard. This happens to be a chart and pie graph showing which versions of Macintosh operating systems the users were using who visited a website. Unfortunately, it’s difficult to read. The data starts at 3 o’clock (many pies start at 12), and then luckily the data is sorted as you travel around the pie clockwise. With most pies you don’t get so lucky as to have a rotational starting point or even sorted. Then you need to figure out which direction the author chose to spin their data.

When I first saw this pie graph and associated chart, I found my eyes flickering back and forth trying to consume the data. Pies with more competing items in the list are extra challenging since there are so many colors to remember. Sure, this could be improved if they had used adjacent labels, but that breaks down for the smaller slices. I don’t have eye-tracking software, so I tried to draw an estimation of where my eyes looked.

Contrast this with a simple bar graph. I decided to use Google’s Graphs API for this, plugged in the same data values as above and got the following bar graph. The labels are right next to it, making it easy to compare relative values and seeing the labels immediately adjacent to them. I could have added the absolute values to the left or the right – either would have been easy to find.

I tried to draw where my eyes glanced to explore this data. Compare with the messy nest above, and imagine how much more cognitive load the above knot required to only halfway grasp the point of the data.

Posted in UX

Affordance and adjacency vs. contrast

Posted on by

Over the summer, I took a road trip and on my way back stopped at a gas station to fill up. My mind was focused elsewhere – the rest of the route home, the book on CD I had been listening to, the family dynamics inside the car, etc. Anyways, I pulled out my wallet, swiped my card and tried to select the “unleaded” or cheap gas level. Nothing happened. I tried again, why won’t this pump register my choice? I backed up and took a look at the larger display – only  then did I notice the “push to start” button, which did what I wanted.

Why was I confused? The information which was there to help me make my decision was the label “unleaded” and the price per gallon, $3.89. The label had a white border with rounded corners with a further embossed border with even more rounded corners around that, plus the adjacency to the price is overwhelming. It’s screaming “press me – I’m a button”…

But no, I had to hit the obnoxious “push to start” yellow box with arrow in it. Apparently adjacency won out over high contrast.

If you look closely at the picture, you’ll see I’m not the only one who has made this mistake… enough other people have done the same thing that the label has been polished smooth.