In this chapter we look at a few laws of gestalt and their application in digital interfaces, and the evolving field of interaction design.
Now that we have conceptual clarity about the intention of the solution and insights about the user’s expectations, along with an architecture for information, we can shift our focus toward shaping the visual graphical interface. Take this opportunity to think deeply about the form of your product. Form is a function, and nothing brings that to life better than the principles of gestalt.
To elevate the visual form of our product we could employ the principles of gestalt. These help us understand how we process visual information by either starting with the whole and then working our way to the parts, or by attempting to break a confusing whole into its simpler component parts. While it’s not a hard science, the laws of gestalt broadly include:
A century after their inception, let’s look at how the logic of gestalt theory continues to find relevance in digital interface design today.
Isolation Effect First off, the figure-ground perception finds it’s application as the Isolation Effect in user experience design. Gestalt states that we instinctively perceive objects as either being in the foreground or the background. This speaks directly to the Von Restorff effect or the Isolation Effect, which predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. The simple takeaway is that we should make important information or key actions visually distinctive.
The Gestalt psychologists called this the Law of Prägnanz (aka “good figure” or “law of simplicity”) — possibly a forerunner to the aesthetic-usability effect—which speaks to the user’s tolerance of minor usability issues when they find an interface visually appealing. Tools can make it tempting to add all sorts of elements to your interface. Just because you can, doesn’t mean that you should — be deliberate about the additional information that you add to focus user attention.
As Edward Tufte, put it so beautifully in his book, The Visual Display of Quantitative Information, “Clutter and confusion are not attributes of data — they are shortcomings of design.“
Alternate points of view argue that the more accessible an interface is, the less aesthetic appeal it will have. A point of view on why some badly designed websites do well.
Law of Closure Our brains tend to fill in the blanks of an incomplete picture, to perceive a complete image (a consequence of confirmation bias). In digital interfaces this maybe experienced when you see a partial image above the fold on a screen, your brain wants to complete it by viewing the whole picture, which unconsciously drives you to scroll down a screen. Or sideways, as in the Spotify app.
Law of Common Fate Users expect associated elements to move in the same direction, and vice versa. To fulfil users’ expectations, you should ensure that the elements that belong together move in the same direction and at the same speed. You can use this when designing nested menus and dropdown navigations. This can often supersede or override other laws of Gestalt such as grouping by proximity, especially when applied as an animation of uniform motion for unrelated objects.
Typography isn’t about making your text look good, it’s about building trust. Consistency in fonts, spacing, and design across a user's journey creates a cohesive brand image. Whether it’s your website, social media, or printed materials, using the same system and rules of font and hierarchy makes your brand recognisable and professional.
Clarity focuses attention: Cognitive overload is a problem in today’s digital landscape. Users are more likely to pay attention when what you have to say is coherent — both visually and in tone.
Personality brings engagement: Fonts can evoke powerful emotional responses. A playful script typeface can make your brand feel youthful and energetic, while a classic serif font exudes sophistication and trust. Think of it like choosing the right outfit for your message.
Accessibility widens scope: Legibility and readability are non-negotiable. Universal design principles are a way to bridge mismatch of a user and their environment. Enable users to edit font weights, contrast, and letter spacing if required.
Good typography is measured by how well it reinforces the meaning of the text, not by an abstract scale of merit. Typographic choices that work for one text won’t necessarily work for another. Don’t rely on rote solutions. One size never fits all.
The essence of the word "interaction" implies a relationship between a human and an environment. Interaction design is an art form to make experiences that fluidly respond to human intent. When does a swipe trigger an action? Do gestures retain momentum? What happens if a finger is covering content? How can we predict intent based on context? Executing well on details like these make products feel like a natural extension of ourselves.
Figure-Ground
The tendency for the human eye to distinguish between a main object (the figure) and its surroundings (the ground). It's how we identify what's important in a scene from what's not, enabling us to make sense of visual information.
Simplicity or Good Figure
The tendency to interpret ambiguous or complex images as the simplest form possible. The German word "Prägnanz" means "good figure" or "conciseness," and it describes the tendency of the mind to simplify visual information.
Closure
The tendency to perceive incomplete shapes or patterns as complete entities. Our brains automatically fill in missing information to create a recognisable whole, even when parts of an image are obscured or missing.
Common Fate
The tendency to group together elements that move or change in the same direction or manner. This principle is particularly useful in understanding how we perceive motion and relationships between objects in dynamic environments.
Continuity
The tendency to follow a path, perceiving it as a continuous, unified element rather than separate lines or shapes. When visual elements are aligned, we automatically organise them into continuous forms, even if there are breaks or intersections.
Similarity
The tendency to group similar elements together based on shared visual characteristics like color, shape, size, or orientation. Items that share attributes are seen as belonging to the same group, even if they are physically separated.
