What Every UI Designer Needs to Know About Visual Perception

‘What you see is what you get.’ ‘Seeing is believing.’ ‘I can’t believe my eyes.’ The role that vision plays in our existence and culture is a central one, evidenced by how sayings like these have made it into our everyday rhetoric.

Our sight allows us to process information from the world around us, transmitted by light hitting our eyes. Sensation is the process of our senses picking up and transmitting information from the world around us. Perception is the process by which the brain organizes and interprets the data that it is receiving from sensory organs – in the case of visual perception, the eyes. Perception is influenced by many things, including culture, past experiences, and our expectations.

Seeing is Not Believing

What do designers need to know about perception? When we design for people, it’s useful to understand some of the processes that influence how people experience and perceive our designs. Perception is an individual and complex process, and how people perceive something will never be in our full control, but what we can do is optimize how we are designing to consider some of the psychological underpinnings of perception.

The first thing to know is that seeing is not believing. There are many ways in which our perception, in particular our visual perception, can be tricked. You might recall the infuriating nature of optical illusions, which demonstrate this fact.

What we ‘see’ is also influenced by our cultural context, for example differences in depth perception leading to a ‘carpentered world’ theory. This theory suggests that when we are used to living in a world full of straight lines and right angles, we are more easily susceptible to illusions like the Muller-Lyer illusion. In a classic 1963 study by Segal et al, Europeans and Americans were found to be most susceptible to the illusion, and Kalahari hunter-gatherers least susceptible. The main take away is that our material culture, and what we see in the designed world around us, has an influence on what we perceive.

It’s important for designers to understand that culture influences perception, and they need to test with their intended user group to understand perception.

Great Rules of Thumb – Gestalt Principles

So if perception is a complex and nuanced process, what do we know about how to influence it?

A group of psychologists developed some foundational theories about visual perception in the 1930s and 40s. The main principle of gestalt psychology is that the mind works to create a ‘unified whole’ (Gestalt) from the disparate and chaotic data it receives. As Gestalt psychologist Kurt Koffka put it, “The whole is other than the sum of the parts.”

From these studies, a set of foundational principles of visual perception developed. These principles are fundamental to communicating visually in graphic and interface/web design. Understanding and applying gestalt principles can strengthen any designer’s work. There are lots of in depth guides to gestalt principles if you want to take a more comprehensive look. To start off, three gestalt principles to play around with identifying and using include:

Figure Ground Relationship

When people look at a series of elements, they will try to discern what is in focus (figure) and what is in the background (ground). This can give the feeling of certain elements being ‘in front’ of others, or more in focus. The familiar vase/two faces optical illusion is an example of the figure/ground relationship flipping back and forth – your brain switches between seeing the white ‘vase’ shape and the figure on a black background, or seeing the black ‘face’ shapes in front of a white background.

This principle can be seen at work in many interfaces – our brains work to interpret what elements are ‘in the foreground’ and thus what elements to focus on. For example, on the Everlane site, we interpret the menu as being in front of the images – bringing it more to our attention.

Proximity

The principle of proximity says that when we see an assortment of objects, we assume that proximity between objects informs their relationship. That is to say, we think that things that are closer in relative distance are a group.

Designers use the law of proximity all of the time – it is one of the common ways we arrange interface elements to indicate relatedness. Proximity is one of the most powerful ways to indicate relationship – and it can be confusing if is is not clear which elements belong together.

Similarity

When things are similar (in size, color, shape or other qualities) we perceive them as related. Similarity is again used very frequently in interface and web design – the idea of a style guide provides us codes or patterns to use that rely on styling similar elements in a similar way.

For example, all links or buttons being styles in the same way creates expectations for users of how elements will behave. On the 99% Invisible site, the yellow ‘episode tags’ immediately help the user to visually identify and group what content is of the same type.

Establishing Visual Hierarchy

When we look at posters, webpages, or app screens, we interpret elements as being of different relative importance to each other. This is ‘visual hierarchy’ and refers to the way which we scan the information and determine what pieces are more or less important.

For designers, manipulating visual hierarchy is a key way to create a good user experience because it provides cues around what we want people to focus on. The contrast of various elements inform visual hierarchy, as do gestalt principles.

http://blogs.adobe.com/creativecloud/files/2017/03/image00.png

The notification bubble on iOS home screen is an example of forcing visual hierarchy using colour and shape – the eye is immediately drawn to the app icons with these bubbles.

The flow and order of items will inform hierarchy. In a Western cultural context we read from left to right and top to bottom. The relative size of items will also impact hierarchy – think about the difference between a h1 and h4 when styling HTML! Color and shape can also affect how we perceive hierarchy. The notification bubble on iOS home screen is a great example of this. Speaking of color…

Color Me Beautiful

The brain perceives color in mysterious ways, as the infamous dress. These illusions rely on color constancy, which, as Wikipedia puts it, is a “feature of the human color perception system which ensures that the perceived color of objects remains relatively constant under varying illumination conditions.”

There are also people who can perceive more colors than those we regularly see – due to a condition called tetrachromacy. So again, when it comes to color, seeing is definitely not believing!

As a designer, the most important consideration in terms of color perception is making sure that you are not relying on color alone to communicate – as this is not an accessible way to design for people who perceive color differently (for example people with colorblindness). What we want to make sure of is that our design works for everyone, even if they experience and perceive color differently to us.

The More I See, the Less I Know for Sure

Perception is a truly mysterious process, and quickly gets into the realm of psychology and how the human brain and mind work. If you would like to learn more, check out CrashCourse Psychology episodes five and seven for a deeper dive into how visual perception works.

To be an excellent designer, being mindful of the process of perception and some key principles will go a long way to being effective in your work. As John Lennon put it, “the more I see, the less I know for sure.”