Skip to content

Hermann Grids, An optical Illusion Best Avoided

An interesting optical illusion is the so-called Hermann Grid illusion: the effect of seeing gray dots at the intersections of a black grid on a white background or a white grid on a black background.

image_thumb3

 

 

 

 

While it’s an interesting optical illusion, it’s something we should avoid in management reporting:

image_thumb16

 

 

 

 

 

 

 

 

 

Tables formatted with medium or thick black or gray borders tend to produce Hermann Grids. Just scan the table above and you should see the gray dots in the grid intersections.

To avoid this unpleasant and distracting effect, and to maximize the data-ink ratio follow this simple but very effective table design rule:

  • Avoid using dark and heavy grids
  • Use light gray grids instead

image_thumb19

 

 

 

 

 

 

 

 

 

Above is the same table with light gray borders. This eliminates the Hermann Grid illusion and – by de-emphasizing the grid –  puts more emphasis on the numbers.

Here are some images I found on Google Image Search that show how popular it is to put your data behind Hermann Grids:

image_thumb8

 

 

 

 

 

 

 

 

 

 

image_thumb11

 

 

 

 

 

 

 

 

 

 

So I hope you are with me – get rid of the heavy grids and free your data!

Categories: Table Design.

Tags:

Comment Feed

5 Responses

  1. That’s if you have to have a grid at all. I am ruthless with my colleagues and format my tables so that the only vertical lines are the virtual ones created by left or right alignment of the columns (for this reason I avoid centre alignment, which is only really useful for huddling away from the cage bars of a grid).

    Sometimes I relent and allow a light grating of horizontal lines, but not vertical ones.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Continuing the Discussion

  1. [...] weight, than normal fonts, and de-saturated colors. White space has no or negative visual weight. Heavy Grids have a lot visual weight can have some other unpleasant [...]

  2. [...] the grid lines format your table headers with light gray grid lines, enable the major grid lines in the chart and also format them with light gray. Set the chart area [...]