A Note on Mozilla's Information Design

A short while ago, when updating my Firefox to the latest version, I stumbled across a most interesting graphic used on the Mozilla website. See a screenshot of it to the right of this text. Its information design immediately caught my attention as it answered the provoking question 'When Are You at Risk?' surprisingly clear and (seemingly) evidental.

I checked the data source, compiled by Brian Krebs of the Washington Post. Indeed: the Mozilla folks have improved a rather complex and junked data visualisation in a most skillful way: Mozilla's graphic

• applies a calendar layout showing days in weekly arrangement as a well-known visual metaphor to impart the temporal scale and basic set of the data, instead of merely stating numbers
• shows a well-balanced data-ink ratio
• and pairs all this with a throrough layout and color design, right to the point of doing without an obvious, striking, yet probably plump 'Firefox vs IE' color theme, instead using colors fitting the Mozilla world more smoothly.

I wondered what else the Mozilla guys could have done to present Krebs' data.

So I took the source data for IE and arranged it in the same, brilliant calendar-like fashion. I chose to show Krebs' risk levels (publicly known vulnerabilities and vulnerabilities actively exploited by attackers), though, and also kept their exact chronology. The result is somewhat less minimized than Mozilla's graphic, yet it is revealing data details the original design would omit. Now you can actually see when you have been at risk in 2006:

You see the approach could be used for a dense, clear view on the data (it sure needs some more optimization).

Too bad the Mozilla folks were not trying to give a clear picture on Krebs' data. Their true intention lies in answering 'when are you at risk?' with a simple 'not when you're using Firefox!' (Everyday users may need this kind of strong statement, I know.)

This may, or may not, be true. It is good marketing, for sure. However, as Edward Tufte puts it: ideally, 'clear and precise seeing becomes as one with clear and precise thinking'. Yet in this case, clear seeing is meant to convey emotion, and emotion alone ('IE users, beware! Firefox users, relaaaax.'). And all that based on data that is three years old ...

Displays that reveal the truth? Integrity of content? Too hell with all that.

What a waste of splendid design ideas.

ToDo: Read months by column or by row?

You may argue that when chronology actually is important, the proposed calendar layout does not clearly enough indicate whether months are arranged in two columns, or six rows. Yes, this must be reviewed. The problem here is that adding any sort of label will require a larger calendar layout, thus reducing data density. My guess is, though, that out of habit of reading left-to-right, most viewers will get this straight (it's row-wise).

If you want to improve chances, I propose you split the graphic into 24 image objects, arrange them in a table, and give each image an appropriate alt="{month's name}" attribute. On hovering the months, viewers can verify what they're looking at. Or you can implement an image map giving tooltip details on the vulnerabilities, including links to external pages giving more information ...

Mozilla's December has 34 days. Oops.

Have a closer look at Mozilla's graphic on the right. Count the dots for December ... Huh? :)