Literature on Visual Perception

Here’s the entire UX literature on Visual Perception by the Interaction Design Foundation, collated in one place:

Vision and Visual Perception Challenges

It sounds so simple; take some light and turn it into an understanding of the world around you – we all do it every day; yet, there isn’t a single computer on earth, no matter how powerful, that can mimic the feat of vision to any real extent.

Vision requires us to separate the foreground from the background, recognize objects viewed from an incredible range of spatial orientations, and accurately interpret spatial cues (or risk walking into doors rather than through them).

Visual Perception – The Eye

Vision begins in the eye, which receives the inputs, in the form of light, and finishes in the brain which interprets those inputs and gives us the information we need from the data we receive. The components of the eye are pictured below.

The eye focuses light on the retina. In the retina, there is a layer of photoreceptor (light receiving) cells that are designed to change light into a series of electrochemical signals to be transmitted to the brain. There are two types of photoreceptors – rods and cones.

Rods tend to be found in the peripheral areas of the retina and are designed to respond to low levels of light. They are responsible for our night vision and because of where they are placed on the retina – you can improve your night vision by learning to focus slightly to the side of whatever you are looking at, allowing the light to reach the rod cells most successfully.

Cones cells are found in the fovea (the center of the retina); cone cells handle the high acuity visual tasks such as reading and color vision. Cone cells respond to red, green or blue light and by combining the signals from these three receptors, we can perceive a full range of color.

Once the light has been processed by the photoreceptors, an electrochemical signal is then passed via a network of neurons to the ganglion cells further back in the retina. The neurons are designed to help detect the contrasts within an image (such as shadows or edges) and the ganglion cells record this (and other information) and pass an amended electrochemical signal, via the optic nerve, to the brain.

Marcus Tullius Cicero, the Roman orator, said, “The face is a picture of the mind with the eyes as its interpreter.” In fact, the eyes are simply the first step in interpreting the mind – the brain is the essential second part of the process.

Visual Perception – The Brain

Visual perception takes place in the cerebral cortex and the electrochemical signal travels through the optic nerve and via the thalamus (another area of the brain) to the cerebral cortex. In addition to the main signal sent to the cerebral cortex – the optic nerve passes additional data to two other areas of the brain.

The first is the pretectum which controls the pupils and enables the adjustment of pupil size based on the intensity of light that we see. It’s why your pupils contract in bright sunlight and expand in the dark.

The second is the superior colliculus. This part of the brain controls the motion of the eye, which is actually not smooth but rather a series of short jumps. These jumps are called saccades. The reason that the eye jumps rather than moves in a smooth action is that a smooth action would create motion blur (in the same way that a long exposure photography shot can be used to create motion blur) – the jumps allow for a “reset” of the information condition and eliminate that blur.

In the thalamus, the projections from the retina are processed in the lateral geniculate nucleus. This separates the outputs from the retina into two streams. The first stream handles color and fine structure within the output and the other handles the contrast and motion perceived.

The first stream is then sent to the visual cortex, which is pictured below, to an area known as the primary visual cortex or V1. V1 has a bunch of cells whose job is to calculate where objects are in space relative to us. The signal received is mapped on a 2-D map to determine the overall placement of objects and then the third dimension is added when the map from each eye is compared with the other. In short, they calculate the depth by triangulating every point within the image.

In 1981, David Hubel and Torsten Wiesel, won the Nobel Prize for demonstrating that a column of orientation cells within V1 enables the brain to determine the edges of objects by focusing on the spatial orientation of objects within the image received by the brain.

There are other areas of the central cortex that help further process the image; V2, V3 and V4. V2 helps us control our color perception by helping us separate the color of an object from the color of ambient light – interestingly, the color we perceive an object to be when this process is complete is usually the color we expect to perceive the object in. This suggests that the V2 area is not just handling color processing but also comparing the color of the processed image with our memories of previous examples of an object of that type.

V3 and V4 handle face and object recognition and normally do a very good job of this – though they can be “pranked” with optical illusions.

All the data from all these areas of the brain are then combined over and over again throughout the day to help us make sense of what we see.

Visual Perception – The System Demands

It isn’t clearly understood just how much data the visual perceptive system in human beings processes. We do know that the storage capacity of the human brain is enormous; though the network of neurons is only a trillion or so neurons, each neuron is capable of combining with other neurons to store much more information in parallel than they could in series.

There are almost certainly chemical “tricks” that the brain pulls to reduce the amount of data compared to, say, the data processed by a camera operating at the same speed (as the eye and the brain), but what those tricks are – we are yet to understand fully.

It is estimated that 70% of all the data we process is visual, but again this is not a “hard fact” but based on our understanding of how data works in computer systems.

Challenges Associated with Visual Perception

While long-sightedness and short-sightedness can both be considered challenges associated with visual perception, they are typically easily corrected with glasses and are not a major concern for designers in any field. The two most common challenges that designers may face are visual stress and color blindness.

Visual Stress

Visual stress is a peculiar phenomenon affecting a small but significant percentage of the population. When striped patterns (at about three cycles per degree) are shown at a flicker rate of about 20 Hz (cycles per second), they can cause seizures in people susceptible to visual stress.

Back in 1997, a Japanese TV network pulled the plug on a TV show which caused visual stress in over 700 children. It caused seizures and, in extreme cases – vomiting of blood.

Visual stress is sometimes known as “pattern-induced epilepsy,” and while this is the most extreme manifestation of visual stress, it’s worth noting that visual stress can be induced at milder levels by striped patterns in most people.

Even normal text (which is arranged in horizontal stripes) can cause problems for some people, and certain fonts may exacerbate the problem. Visual stress, in this instance, can distort print and cause rapid fatigue when reading. In some respects, the effect of visual stress is very similar to the ways dyslexics see print, as pictured below.

Color Blindness

Color blindness is mislabeled. It’s not blindness but rather a deficiency in color vision. It is the inability (or sometimes decreased ability) to see certain colors or perceives color contrasts in normal light.

For some reason, men suffer from color blindness more often than women. 1 in 12 men have color blindness compared to 1 in 200 women. Color blindness is normally genetic and the trait is inherited from the mother but in some cases, it may be induced by disease or aging.

The most common form of color blindness is red/green color blindness – this doesn’t mean that the person cannot see red or green but rather that they confuse colors that have some elements of red or green within them. There are other less common forms of color blindness that affect different pairings of colors too. There are many tests for color blindness (some are pictured below), but the condition should not be self-diagnosed but rather diagnosed by an optician or medical professional.

Awareness

Designers should be aware of visual stress and color blindness and ideally test their designs with people known to suffer from these conditions to ensure that the effects are muted or eliminated entirely.

The Take Away:

Human vision is complex and more powerful than any of today’s computers. The process by which the signal (in the form of light) is passed through the retina of the eye and then processed in the brain is complex and still not completely understood.

Designers need to be aware that there are common processing errors and, in particular, to be aware of visual stress and color blindness so that they can adjust their designs to minimize the impacts of these errors.

References and Resources:

Course: The Ultimate Guide to Visual Perception and Design

Read about the capacity of the human brain.

You can find a detailed account of the components of the visual cortex here.

Learn all about sensory processing in the brain.

Find out more about color blindness here.

Learn more about Visual Perception

Take a deep dive into Visual Perception with our course The Ultimate Guide to Visual Perception and Design .

Human vision is an amazing ability; we are capable of interpreting our surroundings so as to interact safely and accurately with little conscious effort. However, we are well attuned to nature and things that occur naturally in our environment, which has significant implications for design. Unless man-made products are attuned to, and support, human visual perception, the viewing experience suffers and there is significant potential that users will be unable to use your products quickly, safely, or without error. For this reason, it is essential that we investigate how we see the world and why we see things in the way we do in order to know what we can do to ensure our products provide the best viewing experience possible. This is why we have developed “The Ultimate Guide to Visual Perception and Design,” and why it is such an important topic for designers to master.

For those of us who are blessed with good eyesight, we seldom consider it. That’s why going off to investigate the whys and hows involved is a little like trying to get behind the wind for the sake of finding the exact spot where it comes from. Happily, getting to the bottom of the phenomena involved in visual perception is a lot less laborious, and perhaps infinitely more fascinating. During the course, we will first cover the basic anatomy of the human eye so as to understand how vision is formed. We will then look at lots of different designs, evaluating each one according to specific aspects of the human visual experience. We will also identify how we can improve designs to support human vision better and improve usability as a direct result. Using the knowledge it imparts earlier on, this course will then analyze the design of icons in screen-based interfaces.

All open-source articles on Visual Perception