May 7, 2011 Off

Use color with intent; Eliminate moiré vibration

in Experiments in Info Design, Not So Great Information Design

Just about a week ago, Apple released new iMacs with shinier, faster processors.  How much faster?  Primate Labs ran some benchmarks and put together the chart below to help us understand what we would get for our money.  Unfortunately they made a few mistakes in presenting that information too us.  Though pretty, their use of alternating colors serves no purpose – the new and old iMacs both end up being shown in both blue and green.  This makes it very difficult to understand the very point of the article – the improved speed of the new iMacs.

The chart also falls victim to the moiré effect – essentially, an optical illusion that makes the bars appear as though they are vibrating.  This distracts the viewer from the message – the data itself.

Minor annoyances include too many horizontal rules (viewers can easily identify positions in a group of  3 or 4) and some repetitive language (re-stating iMac at the beginning of each label).  Check below for my redesign, which does the following:

  1. Highlights new iMacs in a different color to make the chart’s main point obvious, and used that color repetition in the data labels as well
  2. Increases contrast between the title and chart, and increase the descriptiveness of the title
  3. Formats the data labels in a more readable number format (addition of commas)
  4. Shifted the data labels inside the bar to eliminate a mental connection for the viewer (and reduce the size of the chart)
  5. Eliminated some of the horizontal rules, and reduced the prominence of the remaining rules
  6. Eliminated repetitive language in data labels (‘iMac”)
  7. Eliminated the moiré effect from the data bars by using solid colors

Click for a larger version:




Powered by Facebook Comments

Comments are closed.