Keeping an eye on the web

Perceptual psychology for browsers of the web

There are a number of visual problems currently associated with existing web browsers.

Those discussed here are associated with:

• Anti-aliasing;
• Dithering;
• Images.

Anti-aliasing

The advantages of anti-aliased text are evident upon inspection; it simply looks nicer.

The reasons behind this fact are numerous:
Anti-aliasing is often described as a means of increasing the apparent display resolution by the use of additional colours. These colours are used to reduce the contrast over pixel boundaries. This produces the perceived effect of smoothing the sharp edges of the pixels.

Anti-aliasing works in part because it reduces the activity of edge detection cells in the retina. These cells take a small domain of retinal cells as their input and analyse their activity to decide whether they are currently situated near an edge.

The stimulation of these cells with the sharp edges of pixels causes them to generate constantly conflicting information about the local direction of the perceived edges. This in turn causes difficulties for higher level structures within the brain responsible for constructing a model of the world.

What is more, for a number of reasons the eye is constantly making microscopic movements. These move adacent pixel edges between different domains on the retina, producing conflicts within individual edge-detection domains about the direction of the edge as well as between adjacent ones.

Messages from these constantly changing edge-detection cells is interpreted by higher level structures in the visual cortex as motion, producing a small but noticable squirming effect all over the affected characters.

The only disadvantage to anti-aliasing on perceptual grounds is that it tends to prduce a blurred effect, and this sometimes causes the eye to think that it is not properly in focus when in fact it is. There is no solution to this problem, except to increase the resolution of the display. Anti-aliasing is also, of course, more computationally expensive and more difficult to implement.

Dithering

One place where dithering should not be used at all is when rendering anti-aliased fonts.

Because dithering is only used at low colour depths the possibility of generating jagged edges (even between two very similar colours) outweighs the advantage of more closely approximating the desired colour over a large area.

Images

The main problem with current web page background images is the bandwidth they take up; almost all of their current problems stem from this. While it is possible to use small JPEG images as backgrounds, this solution is far from optimal (as is explained elsewhere).

Background fetching

This state of affairs amongst some browsers means that the size of a background image is of critical importance. The author has encountered a number of webmeisters who shy away from background images on their commercial sites for fear of losing their window shopping customers to less graphics-intensive pages.

All in the background

If there is an area which contains no text or images, then in there is no background image, the brain loses all access to visual depth cues. This means that when the eye moves to some text, it may have to refocus again.

Also, texture is an important method used by the brain in providing depth cues which provide information about the three-dimensional model of the world locally. Although this effect is relevant when viewing web pages, it becomes most important when the textured surface is part of a three-dimensional model, as is possible in three-dimensional images and in virtual reality.

Also, with no background image, edge detection and motion detectors can experience no stimulation whatsoever whenever their part of the retina falls on an empty area. When the enture nervous system is receiving minimal stimulation, the state is often referred to as sensory deprivation. This causes the firing thresholds of the associated neurons to decrease, increasing their susceptability to noise from within the nervous system. If maintained for long periods, this effect can give rise to perceived motion, hallucinations and nausea. Although only retinal cells are being talked about here, the consequences for these can still be unpleasant; retinal cells and those higher up the nervous system can behave almost as though they are bored and begin to daydream. As in other states of deprivation, when cells lose touch with an external world with is not feeding them information, they invent their own forms of stimulation derived from an inner world.

The eye makes use of visual feedback to make corrections when executing fine movements. With no useful information in the visual field, this mechanism is starved of information, making it more difficult to focus on near objects.

In such an impoverished environment, these mechanisms have less data to operate on, causing the eyes to make inappropriate movements in the absence of feedback.

Tips

Having elucidated some physiological reasons why using backgrounds is helpful to the user, to close are a couple of tips for those trying to reduce their file sizes with the minimum degradation of the effect:

• If images have a particular direction, then this direction should normally be more horizontal than vertical. This is because:
  • When reading text the eye moves horizontally, and any vertical lines cause a kind of resistance to the motion, in a manner related to the effect produced by the horizontal stop lines when leaving motorways.
  • Vertical lines can exaggerate the effects produced by failing to focus on the image at the correct depth. This effect will be familiar to SIRDS viewers.
  • Not entirely irrelevantly, if using GIFs, these images compress better, reducing file size.
• Images will have an aspect ratio, and this should normally be biased towards the horizontal direction. This is because the eye is more sensitive to patterns which repeat horizontally than vertically. The reasons for this are complicated, but here goes anyway:
  • When reading text the eye moves horizontally, and any repetition of the background image will be made more intrusive along this axis.
  • Because of effects connected with localising images in three dimensions, many brains have built in machinery for analysing images which present similar images to both eyes. Rapid horizontal image repetition can also exaggerate the effects produced by failing to focus on the image at the correct depth. These effects will be familiar to SIRDS viewers.
  • Lastly due the heritage of our ancestral environment, and because of the ways of the world, many objects in motion are likley to be moving horizontally rather than vertically. When the eye is in motion, this mental machinery can also be confused by horizontal repetition.

Links