Just saw this information graphic posted on the NYTimes.com site, about the state of the Iraq war.
I don’t subscribe to the print edition, but I’m betting this graphic was originally created for the physical newspaper (printed at higher resolution, etc.) and then unfortunately mis-appropriated for the web by simply “sticking it online”, given the pragmatic nature of tight deadlines, limited people resources, and the fact that the creator of this information graphic is referred to as a “graphic designer” in the byline.
However, I am viewing this graphic on the web, an inherently interactive digital medium that lends itself to certain abilities, so this design becomes rather problematic for a variety of reasons, as noted below:
– Pops up in a separate window floating above the main browser window (as opposed to say a Lightbox JS, or similar “in place” method)
– Image is larger than the pop-up window, thus forcing (painful) horizontal and vertical scrolling
– The visual presentation is an awkward, forced attempt at a very literal translation of a “war chart” clipboard metaphor, complete with the photograph of clipboard clip at the top and border, which is gratuitous (eats up valuable real estate in the constrained pop-up) and adds no additional value to the reading/interpretation of the chart data
– The designer completes the ill-used metaphor with “blotchy” type, mimicking a classic typewriter, again interfering with legibility, and clear efficient scanning and glancing
– The gray shades are not quite distinct enough to convey at a scanning glance the differences across rows
– The literal translation of the chart vertical gridlines interferes with the reading of the gray shades (thus the gray shades and lines counter-act each other, sabotage overall reading)
– Just to say again, the horizontal scrolling makes it harder to read, interpret, compare data points, and map them to the row label, which runs off the screen as user scrolls rightward, user loses context for the data in a row
And the biggest error, is a complete and total disregard for the digital medium’s potential: a compelling presentation that would have made use of digital affordances, like transitions, animated data, hovers/tooltips, to result in something that could be clever, simple, elegant, and playful yet informative.
(Again, this critique is from the POV of the web viewing, not the print edition)
Ultimately this serves as a nice object lesson in designing for fit, or “appropriateness”, given the context and medium that the user will be viewing and engaging with the designed artifact. If done well, there’s a valuable transparency that permits the user to simply have a compelling satisfying experience. If done poorly, as here, it becomes awkward and painfully present in the user’s consciousness, inhibiting a fluid engagement, resulting in “distraction and dispersion” as Dewey notes as a factor in “inchoate experiences” that are unaesthetic.