Amar Sagoo

Showing posts with label information design. Show all posts
Showing posts with label information design. Show all posts

8 August 2007

On pie charts etc.

On the subject of pie charts, information design god Edward Tufte has the following to say in The Visual Display of Quantitative Information:

A table is nearly always better than a dumb pie chart […]. Given their low data-density and failure to order numbers along a visual dimension, pie charts should never be used.
Although I tried for some time to convince myself and others that this is true, I have failed to come up with a really convincing argument against using pie charts. In fact, I have decided that they aren’t useless at all. Consider the following data, shown as a table, a pie chart, a bar chart and a stacked bar:

One basic feature of all the graphical representations is that they give an immediate impression about which are large and which are small contributors. The table, on the other hand, has no physical attribute that is analogous to quantity. Instead, you need to read and interpret the arbitrary symbols we use for numbers, form a more conceptual representation of the quantities in your head and compare them. You can get around this by ordering the table by value, but you’ll lose the original ordering of the items.

With regards to precision, the table obviously wins. The bar chart also offers pretty good precision as long as you don’t make it too small. The stacked bar may seem to have the upper hand over the pie chart because it has a scale, but reading values isn’t as easy as you may think. Only the first and last section are reliably easy to read. For all the sections in between, the grid lines are of little help. For example, can you confidently say at a glance whether the red section represents more or less than 50%? In the pie chart, you can at least tell straightaway that A contributes slightly over a quarter, B more than half and C around one eighth. And often that’s all you want to know. Do you really care whether an item contributes 27% or 29%? (I’m not saying that you don’t, only that that’s a question to ask when deciding what representation to use).

The stacked bar is also pretty impossible to label (no, legends are not a satisfactory solution). However, this can also be true for pie charts, especially if there are many segments and/or if they have long titles.

A further restriction of pie charts is that they don’t allow adding a further dimension to provide comparisons between different sets of data. Multiple pie charts shown side by side aren’t really comparable, because the whole structure of each pie will be different. This is where tables or bar charts can do much better.

In summary, I’d like to suggest the following guidelines for using pie charts:

  1. Use them if you want to give a high-level impression of the distribution of proportions.
  2. Don’t use them if precision is important, or include numbers if you have space.
  3. Don’t use them if order is important.
  4. Don’t use them if you need to show multiple data sets, e.g., changes over time.
  5. Keep labels short. Legends suck.
  6. If the context allows, use colours that are familiar to the viewer, and use them consistently.

Lastly, I’d like to briefly address the recently fashionable “pixel charts”. Although it’s a terrible waste of time, really. I mean, come on:

In case you still have doubts: the four areas in the following chart are all the same size:

Or are they different sizes? I’m not sure, and I can’t be bothered to count right now.

13 January 2007

NSCompositingOperation visual quick reference

I have never been able to remember what the different compositing operations in Cocoa's NSImage class do. So whenever I need to use one, I find myself having to read the documentation, which is not particularly easy to understand, because it describes the operations in words rather than graphically.

M. Uli Kusterer has had the same thought. However, I wanted something that would work at a quick glance, at a small size, and that would print easily.

So I decided to fire up OmniGraffle and create this visual quick reference:

You can download it as a PDF here.

Let me know if you find this useful or if you can think of any improvements.

26 April 2006

If Microsoft had designed Finder Labels...

... they would look exactly how they do now.

When colour labels made a return in Mac OS X 10.3 Panther after years of waiting, it was a bit of a letdown. For most, this was because they were functionally the same as what the Classic Finder used to offer. Personally, however, I don't really need more than 7 colours, and the colours are distinct enough, so I don't really feel the need to customise them either.

But this doesn't mean that I was happy when I saw the new implementation. It wasn't a matter of functionality, but one of visual design. Consider this:

Somehow this look immediately made me think of Windows XP, with its overpoweringly saturated, bevelled window frames and buttons. It just didn't look like Apple. But even leaving taste aside, it simply doesn't work very well. The colours are so strong and dark that it becomes harder to read the actual names of the folders. And why those gradients? They just add more clutter.

In his book Visual Explanations, Edward Tufte explains the principle of the smallest effective difference, which implies using the most subtle visual distinctions that still achieve the desired effect. The word effective is important here. There's no point using the smallest perceivable difference if it doesn't tell the story you want it to tell. In case of Finder labels, I see two possible desired effects:

  1. To allow you to quickly spot all the files of a particular colour, whose meaning you have memorised, e.g., "All archived stuff is grey."
  2. To bring certain files to your attention that you have previously marked with that intention, e.g., "I must review this document, so I'll make it red to remind myself later."

So applying the principle of the smallest effective difference for Finder labels would mean finding a set of colours that fulfil these two purposes when set against the white background of a window.

You can now easily read all the folder names and ignore the labels if you wish, but you can still choose to focus on all the files of a particular colour. Toning down the labels also makes the selection much more prominent. (Also notice I tried to improve how the labels of selected items are shown.) Although the colours look paler, they are still bright enough to have an attention-grabbing quality, especially in isolation:

It's a real shame how simple, proven design principles like this are ignored for the sake of eye candy (and not very good eye candy in this case). I think what we need is an option in the system preferences to switch from "Shop Demonstration Mode" to "Work Mode".

30 June 2005

buzztracker

http://www.buzztracker.org/

If you aren't using it yet, you have to try it.

This is a great piece of information design. I've been checking it regularly for the last two weeks or so, and I find that I pick up news that would have previously completely passed me by. This is because buzztracker draws your attention to the most significant (from the press's point of view) news, whereas on traditional, headline-based news sites you are most likely to notice news associated with regions or topics familiar to you.

I only wish the article titles weren't truncated.

Also check out the About page, which is quite interesting.