The human mind and usability part 4: Visual perception

In the fourth and final of our series of blog posts looking into psychology concepts that affect design, we're considering visual perception.

How perception works

What you see is what you get, and seeing is definitely believing, right? Except that's not always the case...

Perception is the way our brains organise and interpret visual information gained through our eyes and put it into context; in other words, it's the process that allows us to gain meaning from our senses (such as vision, smell and touch) to experience and understand the world around us.

When it comes to perception our brain does all the work; our eyes just feed it raw data. Without perception people's faces are just a combination of shapes, and writing is just spots of ink on a page. So what we see actually happens in the mind, not in the eye -- meaning that our perception can be influenced by things such as expectation, experience, moods and even culture.

In the image above ("Kaninchen und Ente", taken from the 23 October 1892 issue of Fliegende Bl├Ątter) what animal do you see -- a rabbit or a duck? Or did you see both? This optical illusion shows an ambiguous image in which either a rabbit or a duck can be seen. However, if the same image was shown again surrounded by Easter eggs then you would be more likely to see the rabbit (despite the fact that ducks are more likely to be near eggs in reality) as the context would affect your perception.

Subtle visual cues influence people's expectations and make see what we want them to see. So often believing is in fact seeing (and not the other way around).

Gestalt laws of perception

German psychologists developed the Gestalt laws of perception, which attempt to describe in detail the process of perception, in the 1920s. As visual designers, Gestalt principles are the foundation of everything we do. Once you understand these principles design becomes much simpler and your creative ideas and design decisions become far easier to articulate.

Here are the three principles we use most often:

1. Figure-ground relationship

Definition: the organisation of the visual field into objects (the figures) that stand out from their surroundings (ground)

Determining the figure-ground relationship is the very first thing people do when directing their gaze. When new things come into view our brain needs to work out which elements are 'figures' (and therefore require our immediate attention), and which are 'ground' (are not as important so can be safely ignored). This process is important to humans and has likely evolved from our need to detect threats.

The mind is fed a huge amount of information especially through the eyes so we have the ability to determine figure-ground instantly and without effort in most cases, mainly because we are usually in familiar surroundings and looking at familiar things.

In the unfamilar example above, though, the image on the left appears to show a grey figure on white ground whereas the image on the right seems to show a grey figure with a square hole in it rather than a white figure on grey ground; this is because our brains identify the grey colour as indicating the 'figure'.

Likewise, when we are looking at an unfamiliar website figure-ground relationship clues can determine the overall success of our experience. The design of a webpage layout should work to distinguish figure, the main focus of attention (positive space), and ground, which should support the figure without distracting the viewer; it should help us to differentiate content from structure.

As designers we can utilise many techniques and styling treatments in order to communicate important clues to establish figure-ground relationship, such as contrast and texture, to give affordance to primary calls to action.

2. Proximity principle

Definition: Objects that are closer together are perceived as more related than objects that are further apart

One way our minds organise lots of stimuli into something coherent is by following rules of grouping, like organising things by proximity. The image above demonstrates that by simply placing a series of dots near to each other we end up perceiving them as two distinct groups.

So when designing a webpage related items should be grouped visually and items that are unrelated to each other should be placed further apart to emphasise their lack of relationship. Utilising white space and/or boxes can help to create a visual structure making your design easier to scan, read and understand.

3. Similarity

Definition: Elements that share similar characteristics are perceived as more related than elements that don't share those characteristics

In the image above, most people see vertical columns of circles and squares because we perceive similar shapes as being grouped. As well as shape there are lots of other factors that can cause objects to be perceived as being similar such as colour, size, texture, dimension and orientation to name a few.

When designing webpages it's important to provide visual clues to show which interface elements are similar to one another, allowing users to quickly make sense of what they are seeing so they know what to interact with; for example, hyperlinks need to stand out from the other page content, but all links have the same function so should look the same as each other -- and difference in styling of links would communicate a difference in function or category.

How we used websites in 2014