This image (source: Guardian Business) exhibits strange behavior when scrolling on some browsers. At 100% in Safari (on OS X on an LCD display), it flickers red when scrolling; at some zoom levels it exhibits a moiré-like pattern.

The flickering is distracting to me, and could obviously be avoided by using a solid fill instead of the dot pattern. But why exactly does it occur, and how could one show a similar pattern while avoiding the flickering?

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.
If this question can be reworded to fit the rules in the help center, please edit the question.

Yes I see the flickering. People who wore fine checked shirts used to produce the same kind of effect on the TV.
–
PhillipWSep 30 '11 at 11:51

It would be helpful if the Close vote posted their reason.
–
gef05Sep 30 '11 at 18:40

@CharlesBoyung I think that's a false dichotomy. My question had two parts—a technical part and a design part, all directly related to the overall user experience when interacting with a type of image.
–
DanSep 30 '11 at 20:29

@Dan - Why do some patterns flicker in strange colors while scrolling? That is a purely technical question with a purely technical answer. Just look at the answers that you got. Both of them (including the one you accepted) are technical answers. No UX part in either answer whatsoever. If you had a UX question in there, why did you accept an answer with no UX aspect to it?
–
Charles BoyungSep 30 '11 at 20:35

2 Answers
2

The issue is in this due the shading being done with a regular matrix of squares in two colors in classic newsprint style. It leads to two problems:

At small scale, the matrix dimensions do not evenly divide into the screen pix available. The rendering algorithms try their imperfect best, but an uneven shading results (including the gradient towards the darker border lines). That's exactly what you have here (as you can see be zooming to different scales and examine with a magnifying glass). When you scroll, the shading divisions change as the shading grid moves over the pixel grid and the math resolving the fit comes up with different answers (actually nothing to do with screen response times.. it is a classic stroboscopic effect). Once you zoom out to the point that there is no detectible issue in drawing the shading grid within the pixel grid, the effect stops.

But at that point, you run into another problem.. The Herman grid illusion - which is interesting but probably not what you want your users focused on;-)

If you avoid shading with regular patterns and a small palette you shouldn't have the problem.

Regarding the flickering red, I'm not so sure as I don't see that on my screen. That aspect may be a technical idiosynchrasy of your display or graphics card/driver trying to deal with shading the grid.

It happens because the pixels on an LCD take a non-zero amount of time to transition between on (black) and off (white). The larger the change, the longer it takes. Essentially the effect is due this, but is made obvious due to the uniformity and fineness of the pattern.

Scale up the pattern to have larger white/black areas and the effect will be less noticeable.