Visual Perception

Vision starts when light enters the eye and is focused on the retina, which holds two main kinds of receptor cells. Rods work in low light and give no colour. Cones work in brighter light and come in three types that respond to different parts of the spectrum, which is the basis of colour vision.

Only a small central region of the retina, the fovea, gives sharp detail. The rest of the visual field is much blurrier. We build a feeling of a detailed scene by moving the eyes rapidly in jumps called saccades and stitching the results together. Designers should therefore expect that viewers only sample a layout, not absorb it all at once.

After the retina, signals are processed in stages. Early stages pick out edges, orientation and contrast. Later stages combine these into shapes, objects and meaning, and they are shaped by memory and expectation. Perception is an active construction, not a camera recording.

The practical result is that what you intend and what is perceived can differ. Contrast edges are seen quickly, fine detail only where the eye lands, and meaning depends on what the viewer already knows. Good design anticipates this pipeline instead of assuming the viewer sees everything as the designer does.

Attention is limited, so the visual system prioritises. Salience describes how strongly an element stands out from its surroundings. Strong contrast of brightness or colour, unusual orientation, motion and size all raise salience. A single red item among grey ones is found almost instantly.

Faces and eyes are especially strong attractors, and so are text that is larger or bolder than its neighbours. People also notice what is relevant to their goal. Someone searching for a price will find it faster than someone browsing, even when the design is identical.

Salience is relative. If everything is highlighted, nothing is. A page with five competing bright elements gives the eye no clear starting point. Restraint is what makes emphasis work, which is why a single accent colour or a single large element is so effective.

Use salience deliberately. Decide what the viewer should notice first, second and third, then allocate contrast, size and position to match that order. Avoid raising the salience of decoration, because it steals attention from content.

The eye gives a flat image, yet we perceive depth. The brain infers it from cues. Monocular cues work with one eye and include overlap, relative size, texture gradient, linear perspective, atmospheric haze and shadow. Binocular cues such as the slight difference between the two eyes add to this for nearby objects.

Designers can create convincing depth on a flat surface using only these cues. Overlapping shapes, a soft shadow beneath a card, a lighter and bluer background, or lines that converge toward a vanishing point all suggest space. Interfaces use layered shadows and blur for the same reason.

Size is perceived in relation to distance. An object known to be a certain size appears farther away when it is smaller. This is called size constancy, and it can be exploited or confused. Placing a small figure beside a large one changes how big both seem.

Be consistent. Mixed depth cues that disagree, for example a shadow that implies a light from the left on one card and from the right on another, break the sense of a coherent space. Decide on a light direction and a depth system and keep to it.

Visual illusions are not failures of the eye. They show the assumptions the visual system makes in order to work quickly. When a scene breaks these assumptions, the result looks wrong even though the eye is working as designed.

Several illusions matter for design. The Muller Lyer illusion shows that line length is affected by arrowheads. The Ebbinghaus illusion shows that a circle surrounded by larger circles looks smaller. Simultaneous contrast shows that grey looks lighter on a dark ground than on a light one. Optical effects like these appear in real layouts.

A common practical consequence is optical correction. Round shapes such as the letter O are drawn slightly larger than flat letters so that they appear the same size. Vertical centring is often placed slightly above true centre because true centre looks low. Experienced designers adjust by eye, not by numbers alone.

Use illusions as a reminder to test. Measured equality is not perceived equality. When a layout looks off despite correct measurements, trust the eye, find the effect at play and adjust.

Everything in the previous modules feeds into practical decisions. Signage must be legible at a distance and in motion. Interfaces must be scannable by a viewer who is tired or distracted. Packaging must register in the second or so a shopper gives it on a shelf.

The approach is the same in each case. Define the viewing situation, including distance, lighting, time available and attention. Then choose size, contrast and layout to match. A poster read at a glance across a street needs far fewer elements than a report read at a desk.

Test with real viewers whenever possible. Five second tests, squint tests and quick recall questions reveal what is actually perceived. Ask what people noticed first, what they remember and what they think the item is for, then compare with your intent.

Document decisions with a short perceptual rationale. Writing that this headline is large because the viewer has two seconds at a distance of ten metres makes later reviews far more productive than arguing over taste.