154

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?

Improve this question
10
  • 5
    I would suggest reducing the padding between thumbnails to an extent that the grid illusion does not occur.
    – Vikram Deshmukh
    Mar 12, 2014 at 5:17
  • 70
    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, 2014 at 13:22
  • 5
    @aslum: I already wondered (in all seriousness) whether putting faint grey dots there would actually "stabilize" the issue.
    – peterchen
    Mar 12, 2014 at 13:31
  • 8
    It's not a bug, it's a feature.
    – David Starkey
    Mar 12, 2014 at 19:30
  • 6
    Couldn't see the dots until you told me about them. Now I can't unsee them. +1
    – Daniel
    Mar 13, 2014 at 14:09

5 Answers 5

Reset to default
146

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.

Improve this answer
7
  • 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, 2014 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, 2014 at 13:37
  • 14
    For me at least, the first solution has actually made the effect worse...anybody else?
    – Sarima
    Mar 12, 2014 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, 2014 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, 2014 at 19:38
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.

Improve this answer
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.

Improve this answer
0
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.

Improve this answer
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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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