Literature on Perception in UX/UI Design

Here’s the entire UX literature on Perception in UX/UI Design 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.

Hero image: © Jjw. Edits by: Ana Zdravic, CC BY-SA 3.0

Learn more about Perception in UX/UI Design

Take a deep dive into Perception with our course Perception and Memory in HCI and UX .

How does all of this fit with interaction design and user experience? The simple answer is that most of our understanding of human experience comes from our own experiences and just being ourselves. That might extend to people like us, but it gives us no real grasp of the whole range of human experience and abilities. By considering more closely how humans perceive and interact with our world, we can gain real insights into what designs will work for a broader audience: those younger or older than us, more or less capable, more or less skilled and so on.

“You can design for all the people some of the time, and some of the people all the time, but you cannot design for all the people all the time.“
– William Hudson (with apologies to Abraham Lincoln)

While “design for all of the people all of the time” is an impossible goal, understanding how the human machine operates is essential to getting ever closer. And of course, building solutions for people with a wide range of abilities, including those with accessibility issues, involves knowing how and why some human faculties fail. As our course tutor, Professor Alan Dix, points out, this is not only a moral duty but, in most countries, also a legal obligation.

Portfolio Project

In the “Build Your Portfolio: Perception and Memory Project”, you’ll find a series of practical exercises that will give you first-hand experience in applying what we’ll cover. If you want to complete these optional exercises, you’ll create a series of case studies for your portfolio which you can show your future employer or freelance customers.

This in-depth, video-based course is created with the amazing Alan Dix, the co-author of the internationally best-selling textbook Human-Computer Interaction and a superstar in the field of Human-Computer Interaction. Alan is currently a professor and Director of the Computational Foundry at Swansea University.

Gain an Industry-Recognized UX Course Certificate

Use your industry-recognized Course Certificate on your resume, CV, LinkedIn profile or your website.

Perception and Memory in HCI and UX

Closes in

-13

days

-5

hrs

-21

mins

-53

secs

booked

All open-source articles on Perception in UX/UI Design

Repetition, Pattern, and Rhythm

Let’s look at three subjects that, at first glance, may strike you as being incredibly basic and self-explanatory. Howev

1.3k shares
9 mths ago