Gestalt and Design: Closure
This weeks post explores the Gestalt principle of closure
Closure
When individual visual elements are organized in a way that creates an incomplete version of familiarity, the human perception fills in the gaps to form a complete object
The image above is of three circular sectors. However, rather than seeing three individual shapes, the visual system interprets it as a triangle covering three circles.
Closure is about drawing conclusions from the information provided. When looking at the image above, although it appears to be only a few unconnected lines, the mind is able to fill in the blanks and see the shape.
Closure can only happen when there is enough useful information to create the correct boundaries and parts. In the next two images, it is nearly impossible to create something from the lines. The image on the right does not give enough information and the image on the left does not give the correct pieces.
Closure is often utilized in logo design. The logo here makes use of the negative space inside of the paint bucket to create a perception of a city when the mind fills in the area between the boundaries.
The icon above represents a received notification. Even though the circle covers part of the shape, it is still seen as a bell
The filter results show individual sections that are separated by lines, which are automatically perceived as full boundaries separated each section from one another
Closure is used to inform the user that a pattern isn’t finished. In the example above, the user perceives the half-circle as a whole which is an indication to slide to see more options. If the entirety of the pattern was complete on the screen, the user would less likely realize that there was more to it.
Source:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3
- https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/
Check out the other articles in the Gestalt and Design series
