Visual Perception

Learn how humans perceive visual stimuli.

We'll cover the following

Introduction

Visual perception is how humans perceive objects in the surrounding environment using the light reflected by those objects. Visual perception is also known as sight and vision. The information is received by our eyes and then processed by our brains in order to distinguish between similar objects, colors, and relative distances.

Let’s take a closer look at how humans interpret size and depth, color and contrast, and context. All of these play an important role in designing effective interfaces.

Size and depth

Visual angle is the angle of an object formed on the retina of our eye. It is also called the angular size of an object. Visual angle is affected by both the size of the object and its distance from the eye. There are two proven observations regarding how we perceive visual angle relative to the object’s distance and actual size:

  • Two objects of the same size at different distances have different visual angles.
  • Two objects of different sizes at different distances may have the same visual angle.

Note: Visual acuity is different from visual angle. Visual acuity is the ability of a person to see fine details clearly.

Law of size constancy: An object’s height and size are perceived as constant regardless of the object being moved away from or towards us.

We are going to perform some activities that will solidify our understanding of these observations. Look at the image below. Humpty Dumpty is about to have a great fall because he just learned that both red lines are equal in length.

Not getting how this is possible? Take a ruler or paper and pen, and measure the length of both lines. They will be equal. The brain uses the converging lines as a source of perception and interprets that the left line is longer than the right one.

Let’s see some more examples. Here are two horizontal lines in Figure 1 and two groups of circles in Figure 2. Observe them keenly!

Figure 1
Figure 1
Figure 2
Figure 2

🤔 Point to ponder

Question

Are the two red lines in Figure 1 the same length? How about the black circles in Figure 2. Are they the same size?

Show Answer

Another cue we use in perceiving the size of an object is our familiarity with that object. If we expect an object to be of a particular size, then, regardless of the surrounding, we see it as that size and judge the distance accordingly.

Brightness and contrast

Another aspect of visual perception is how humans perceive color and brightness. Brightness is the perception evoked by the luminance of a visual object. Luminance is the amount of light emitted or reflected by the surface of an object. An object can be differentiated from its surroundings and background using contrast. Contrast is the difference between the color and brightness of an object and other objects in its surroundings and background.

Let’s take a quiz to test your visual perception.

🤔 Point to ponder

Question

Are the four suns in the above image the same color?

Show Answer

Color

The second factor involved in visual perception is the perception of colors. There are only three main colors; red, blue, and green. Any other color is a combination of these three colors. This is called the RGB model. This model is commonly used to display images in electronic devices such as a television and monitor.

The HSI model is another attractive model, as it represents the colors just like a normal human eye interprets them. According to the HSI model, color is a composition of three components:

  • Hue: The purity of color by the wavelength of light, i.e., pure yellow, pure green. Red has long wavelengths, green has medium, and blue has short wavelengths.
  • Saturation: The purity of color determined by the amount of white mixed in it.
  • Intensity: The brightness of color.

Another widely used model is the CMYK model. It consists of four basic colors: cyan, magenta, yellow, and black. The range of colors produced by this model is less than the RGB model. For example, bright colors such as neons cannot be produced using CMYK. Commercial printing presses use this model.

HSI model
CMYK and RGB model comparison

Let’s do a small experiment to better understand how the human eye interprets color.

Point to ponder

Q

Look at the image above. How many colors does this picture have? Please consider white as the background and not as a separate color.

A)

2

B)

3

C)

4

Note: The altered perception that occurred in the above picture is due to the fact that the human eye interprets a color by combining adjacent colors.

Context

Visual processing is the interpretation of a complete image. As we discussed above, familiarity with an object’s size can help in resolving the perception of size. Similarly, if the context in which an object appears is known, then our ability to exploit and interpret expectations can help in resolving ambiguity.

Question

What do you perceive from the above image: “1-113” or “HB”?

Show Answer

The same image, when used in two different contexts, can be perceived easily. Have a look at these two images.

311-113
MATCHBOX

Another example of how our expectations create illusions is the proofreading illusion, or when we fail to notice errors while reading a typed text. Read the text in the image below quickly.

Visual perception in a nutshell:
Optical illusions are the differences between how we perceive things and how they actually are. Our perception of the objects that we see depends on the way they are composed together. Hence, while designing and interacting with an interface, we should keep in mind that things do not necessarily appear exactly as they are to the viewer.