156

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.

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

dB'
  • 1,513
  • 2
  • 10
  • 8

5 Answers5

147

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.

Matthew Piziak
  • 1,445
  • 1
  • 9
  • 9
  • 6
    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 '14 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 '14 at 13:37
  • And validating the solution with a neuroscientific theory makes the answer especially elegant. Great job. – dB' Mar 12 '14 at 14:23
  • 14
    For me at least, the first solution has actually made the effect worse...anybody else? – Sarima Mar 12 '14 at 16:20
  • 2
    You can reduce the bright areas further by removing rounded corners at intersections. THIS is the way to go! +1 – Code Maverick Mar 13 '14 at 17:33
  • 1
    Just one data point, but unlike Code Maverick removing rounded corners doesn't do it for me. The illusion is exactly the same as the previous picture, except that the dots are smaller. In practice that might mean I'd be less likely to notice them if I wasn't expecting them, but once noticed they're just as bad (for me). I'm reminded of LCD screen vendors who considered a single-pixel failure to be acceptable ;-) The darker background solves it though (again, for me). – Steve Jessop Mar 13 '14 at 19:38
  • @Joshpbarron Same here; I actually see it pretty strongly in all (including the no rounded corners one) but the last far apart one. Of course, I also think the one without the rounded corners looks pretty cool, and outweight any illusions (plus like Steve Jessop's experience; I probably wouldn't have picked up on it in that one had I not been looking for it). – Jason C Mar 14 '14 at 07:24
20

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.

Graham Herrli
  • 7,416
  • 7
  • 38
  • 58
GWv
  • 3,723
  • 1
  • 18
  • 28
12

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.

Franchesca
  • 12,525
  • 3
  • 23
  • 36
8

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.

Fluke
  • 121
  • 1
  • 2
3

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).

stackuser83
  • 131
  • 2