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's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
We’ve all made silly mistakes in apps — clicked the wrong thing, deleted a file too soon. This guide walks through 12 real UX examples that help users avoid those moments entirely.
Users rarely welcome change, even when it improves their experience. Learn how to communicate updates, handle pushback, and keep users from jumping ship.
Documentation may not be your favorite part of the UX design process, but it’s crucial to the success of any design project.
I’ve spent enough time designing with WCAG 2.2 to know it’s not enough. Here’s why I’m skeptical and cautiously hopeful about WCAG 3.0.
Learn more →
