A closer look at closure: The little design rule that makes a big difference

The principle of closure is a fascinating visual bias and affects how we perceive elements or objects. It explains our natural tendency to “fill in the gaps” when presented with incomplete information. As designers, we can exploit this tendency and use it as a tool for building intuitive and engaging design and user experiences.

These visual illusions were discovered and studied by Czech-born psychologist Max Wertheimer who started the Gestalt school in 1911 alongside Wolfgang Köhler and Kurt Koffka, who proposed that in terms of human perception, “the whole is different than the sum of its parts,” which is often misquoted as “the whole is greater than the sum of its parts.”

Icons and logos are common examples of closure in action. Think of the negative space forming the white face of the panda in the WWF (World Wildlife Fund) logo:

Icons are another form that shows this principle in action. Designers tend to simplify icons because simpler icons are easier to perceive than complex ones, especially in a busy interface. This is why we use shortcuts when creating icons.

As you can see with these icons, there are gaps between the elements. The principle of closure suggests these elements to the viewer, so we see the grouping as a whole:

Closure in action: The carousel

Carousels are those rotating image or content sliders, those ubiquitous on news sites and beyond. While their origin remains unclear, their usefulness is undeniable. They allow for showcasing a variety of content while limiting screen clutter and encouraging discovery.

How closure works in a carousel

Let’s use carousels as our example for closure. Once you learn its principles, you’ll see closure everywhere.

Partial visibility

A glimpse of an image cut off at the edge hints at more to come. This technique, while simple, simulates what we perceive in the real world, like a peek around the corner. Hover effects that reveal more content on hover, I like to call it a “peekaboo” effect.

If the picture looks complete, so to speak, or the interface looks too uniform, and there is no cue to show that there is more content, this is called the illusion of completeness:

Suggestive transitions

Smooth transitions, like images sliding left or right, subtly suggest additional content exists beyond the current view. This hopefully entices users to interact and explore further.

More cues

The ubiquitous “three dots” called ellipses is a common way to indicate more content. Fading out content (ghosting) at the end of the carousel also visually implies there’s more to see:

Beyond carousels: Closure for UI design

Closure extends beyond carousels. Leaving design elements incomplete can create a sense of mystery, encouraging user interaction. Progress bars exemplify this. A bar with a subtle gradient, instead of a solid fill, suggests ongoing content and motivates users to wait for the download to complete.

Benefits of closure in UI design

It simplifies complexity by breaking down complex information into digestible chunks, improving user comprehension.

It enhances engagement by mentally “completing the picture” can be intrinsically rewarding, leading to a more engaging experience. However, closure relies on inherently engaging content to be truly effective.

Signals hidden content by suggesting in a subtle way the presence of additional information, prompting users to explore further.

Powerful and subtle design tool

Closure is a powerful tool for UI designers. By strategically using incomplete elements, negative space, and suggestive animations, designers can create interfaces that are not only visually appealing but also intuitive, user friendly, and ultimately, more engaging.