Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm a UX newbie and I'm trying to design a page of image thumbnails. I came up with this:

ow!

The trouble is that this layout creates the Hermann Grid illusion. When looking at the grid, most people see flickering black dots in the corners. These dots don't exist in reality; they're created by the human visual system. They're nonetheless very distracting.

Can anyone suggest how I might modify my layout to avoid creating this optical illusion?

share|improve this question
4  
I would suggest reducing the padding between thumbnails to an extent that the grid illusion does not occur. –  Vikram Deshmukh Mar 12 at 5:17
36  
Use a gray background, then use eye tracking and jQuery to put lighter white dots in the corners closest to where the user is looking. –  aslum Mar 12 at 13:22
4  
@aslum: I already wondered (in all seriousness) whether putting faint grey dots there would actually "stabilize" the issue. –  peterchen Mar 12 at 13:31
4  
It's not a bug, it's a feature. –  David Starkey Mar 12 at 19:30
4  
Couldn't see the dots until you told me about them. Now I can't unsee them. +1 –  Daniel Cook Mar 13 at 14:09

5 Answers 5

up vote 114 down vote accepted

The illusion is caused by bright areas exciting retinal neurons while surrounding dark areas simultaneously inhibit them, causing bleed (lateral inhibition). Thus, the idea is to reduce the bright areas at the corners so that those neurons aren't excited as much. By putting the images closer together, you can lessen the illusion and use screen real estate more efficiently.

closer_images

You can reduce the bright areas further by removing rounded corners at intersections. This practically eliminates the illusion.

without_corners

You can extrapolate from the underlying neurological theory to create other possible solutions.

Reducing the contrast by making the background darker avoids the conflicting bleed between those neurons, so that also eliminates the illusion. (Sorry for the poor editing in this one)

darker_background

You can also move the images far enough apart that they go out of range of lateral inhibition.

out_of_range

Granted, not every solution will be good UX.

share|improve this answer
5  
Although it reduces the effect which is a good thing, the effect isn't removed. I still get the idea of flickering black dots in the centre. –  GWv Mar 12 at 13:17
4  
Indeed, as I said it only lessens the illusion. The illusion is caused by bright areas exciting retinal neurons while surrounding dark areas simultaneously inhibit them. Thus, the idea is to reduce the amount of bright area so that the neurons aren't excited as much. Here making the middle areas smaller makes the effect less noticeable, but you can do better by eliminating the rounded corners to reduce the bright areas even further. –  Matthew Piziak Mar 12 at 13:37
    
And validating the solution with a neuroscientific theory makes the answer especially elegant. Great job. –  dB' Mar 12 at 14:23
10  
For me at least, the first solution has actually made the effect worse...anybody else? –  Joshpbarron Mar 12 at 16:20
    
You can reduce the bright areas further by removing rounded corners at intersections. THIS is the way to go! +1 –  Code Maverick Mar 13 at 17:33

As Franchesca explains the problem seems to arise when there are strong contrasting colors in the grid. In your case: Dark images and white background.

This page describes how the problem can be dealt with when styling tables:

"Avoid using dark and heavy grids".

Another post I found discussing this (and other) optical illusion(s) states the same answer:

The Hermann grid illusion will not work if there is a low contrast between the colours involved in the grid. As a sidenote, this is why Excel has light blue cells with a white background: there is not enough contrast between the light blue and the white colours to confuse the visual system, so the illusion does not appear.

Try considering a different color for the background, like a soft gray or blue to ease the contrast. Easing the color on the images will also help you if that is an acceptable solution.

share|improve this answer

The contrast between the white background and the dark edges is a significant factor. If you can't change the colours themselves, try setting a radial transparency gradient on each thumbnail which fades towards complete transparancy at the edge instead of having a hard edge. See this page on gradients in css for ideas on how to achieve this effect.

share|improve this answer

According to the article: How the Hermann Grid Illusion Affects What Users See

The hermann grid illusion occurs when a grid of images have equal margins of more than 2 pixels. Users will see gray ghostlike blobs at the intersections of the grid. But when they focus on the intersection, they won’t see anything.

It lists 4 ways to avoid the illusion in image grids:

  1. 2 pixel margins - grid margins of 2 pixels or less
  2. Ragged margins - aligning different sized images together
  3. Wider row margins - making row margins wider than column ones
  4. Colored background - putting the grid on a colored background

See article for illustrations.

share|improve this answer

Use a different background color instead of white, like black b/c seems to me that the effect you describe would be less prevalent in a dark to light miraging. If the images are dark colored, border them with a light border (and nifty effecting as described in some of the other answers).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.