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:
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.
Let’s use carousels as our example for closure. Once you learn its principles, you’ll see closure everywhere.
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:
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.
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:
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.
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.
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.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
What makes a design skeuomorphic in modern UX? What key challenges are there in modern-day skeuomorphic design?
Growing design teams hit roadblocks. DesignOps clears the way. Here’s how to create processes that actually work.
Our team kept running into misalignment, rework, and wasted effort. A simple design kick-off meeting helped us fix it — here’s how.
Progressive disclosure is a design technique that involves revealing information gradually based on the user’s needs.
Learn more →
