Figure / Ground Distinction (Gestalt Theory for Web/UX/UI/App Designers)

This is a lecture in our online course available at Udemy where you can learn about the gestalt theory, which teaches web designers to account for cognitive biases of visitors and to appeal to their subconscious minds by catering to how the human perceptual system works. You can apply gestalt psychology consciously when designing user experiences so that your target audience will perceive the whole rather than individual parts.

Summary of this lecture:

The fourth gestalt principle of perceptual organization is the principle of “figure / ground distinction” and states that we perceive an object either as a figure in the foreground, or as part of the background.

The brain determines the figure / ground relationship before it makes any other resolutions about what it sees. Using its innate ability to see in 3D, it separates what is in the front and what is in the back. Thus, by filtering out what is not immediately important, it simplifies its perceptual field and can focus on relevant elements.

Unless there are specific reasons to go against the figure / ground distinction, web designers should pay utmost attention to clearly differentiate between figure and ground, in order to focus the attention of users and to minimize perceptual confusion. Key elements should be made figures in the composition to increase their probability of recall. As a general rule, elements in the lower regions of a design are more likely to be perceived as figures, whereas elements in the upper regions are more likely to be perceived as ground.

When an element or a colored area overlaps a larger one, we tend to perceive it as the figure and the larger area as the ground. Similarly, a region that has higher contrast than its surrounding, an image that is symmetrical, or an area that is textured will usually be seen as figure. We generally perceive contours as belonging to the figure. This is a concept referred to as “boundary-ownership”.

It is possible to intentionally go against the principle of “figure / ground distinction” and to use the negative space of the background as part of the foreground, to achieve specific effects. The incorporation of negative space into an image is one of the most widely used concepts in logo design.