By Hardi Hindocha, Growth Marketing Lead
What Gestalt Principles Examples Actually Show You?
The Gestalt principles were developed by German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler in the early twentieth century. Their core claim is that human perception is not passive - the brain actively organizes visual information into meaningful wholes, using predictable rules to group, complete, and interpret what the eyes see.
The principles were documented through controlled perceptual experiments: which dots look like they belong together, which lines appear to continue, which shapes appear to be "in front" of others. A century of cognitive science research has validated their relevance to how people perceive modern interfaces. (Ware, C., Information Visualization: Perception for Design, 4th ed., Morgan Kaufmann, 2020.)
But the diagrams that appear in most design guides - dots in rows, arrows pointing at spacing - strip the principles of context. You recognize the principle in the abstract. You do not necessarily recognize it when it shows up as a checkout flow that loses 30% of users at the payment step because proximity and similarity are working against each other.
Real-life examples across multiple design contexts fix that. This post covers six principles - proximity, similarity, continuity, closure, symmetry, and figure-ground - with examples drawn from digital products, physical environments, and data visualizations for each.
Proximity Gestalt Examples - In Digital Products, Physical Spaces, And Data
The principle: Elements that are physically close to each other are perceived as belonging together, regardless of their visual appearance. Proximity is the fastest and most powerful grouping signal available to a designer.
Digital product example - navigation menus
A product's top navigation includes five items: Home, About, Pricing, Docs, and Blog. The first four are spaced 24px apart. A 48px gap separates them from Blog. Users perceive the first four as one group and Blog as a separate section - even though all five use the same font, weight, and color. The proximity gap created the grouping without any other visual distinction.
When a design team adds a sixth item (Log In) and places it 32px from Blog, users in a usability study begin clicking Log In when they are meant to access Blog. The gap between Log In and the preceding group is smaller than the designer intended, collapsing two items that should be perceptually separate.
Physical space example - supermarket aisle organization
A supermarket places breakfast cereals on one shelf, granola bars on the shelf directly below, and dried fruit directly below that. Despite three different product categories, shoppers perceive these as a "morning food" grouping because of their physical proximity. Brands have used this intentionally - placing a complementary product in physical proximity to a high-velocity item increases attachment purchase rates. (Nielsen, Global Shopper Trends Report)
Data visualization example - grouped bar charts
In a grouped bar chart comparing quarterly revenue across four product lines, the grouping is communicated entirely through proximity. The four bars for Q1 are placed close together; a visible gap separates them from the Q2 group. If that gap narrows - because a designer reduced chart width without adjusting spacing - viewers begin perceiving the Q1 Bar 4 and Q2 Bar 1 as belonging to the same group. The data has not changed, but the takeaway the reader forms has.
What breaks when it is violated:
Users assign relationship and meaning to proximity. When items that are functionally unrelated sit close together - a destructive action (Delete) proximate to a primary action (Save) - users click the wrong one.
This is one of the most common error-rate findings in moderated usability sessions. The user does not say "the proximity principle is violated." They say "I keep accidentally deleting things."
Proximity examples in real life beyond interfaces:
Hospital ward layouts use proximity deliberately: nurses' stations are positioned proximate to the highest-acuity patient rooms. Airport terminal maps place departure gates in visual clusters corresponding to airline groupings. Office floor plans use furniture proximity to signal whether a space is collaborative or individual. In each case, the proximity signal shapes behavior before any label or instruction reaches the person.
Gestalt Similarity Examples - In Design And Real Life
The principle: Elements that share visual characteristics - color, shape, size, texture, or orientation - are perceived as belonging together, even when they are far apart on a page or screen. Similarity allows a designer to create groups across distance.
Digital product example - form design
A checkout form has required fields and optional fields. Required fields use a white background; optional fields use a light grey background. Similarity does the grouping work: a user scanning the form perceives two distinct groups before reading a single label. They know which fields demand attention and which can be skipped.
When a design team changes the optional field color to white to create a "cleaner" look, the perceptual grouping disappears. Users in post-change sessions spend significantly more time on the form, and error rates on optional fields increase - users who previously skipped them are now treating them as required.
Real-life example - wayfinding systems
An airport uses a consistent color system: yellow signs point to departures, green signs point to arrivals, blue signs point to ground transportation. A traveler who has never been to that airport applies the similarity principle immediately on arrival: all blue signs form a group that is relevant to their goal (ground transportation). They follow the pattern without reading every sign.
When a building renovation moves some wayfinding signage to a new vendor who uses slightly different shades, the visual similarity breaks. Travelers report confusion not because the signs say the wrong thing, but because the perceptual grouping they were relying on no longer works reliably.
Data visualization example - scatter plots with multiple series
A scatter plot showing three customer segments (enterprise, mid-market, small business) uses three different colored dots. Similarity lets the reader track each segment across the plot without a legend lookup at every data point - the eye follows the color group. When a fourth series is added in a color that is visually similar to one of the existing three, readers begin misattributing data points. The similarity grouping has been broken.
Gestalt similarity examples in real life - research observation:
In a UX research session for a dashboard product, five of eight participants misidentified a warning state as an informational state. The warning used an amber icon; the information state used a yellow icon. Both were similar enough in hue that the similarity principle grouped them. Participants applied the same mental model to both. The design team had differentiated them by shape (triangle vs. circle), but participants were using color as the primary similarity signal, not shape.
This is the kind of finding that appears in research notes as "users did not notice the difference between warning and info states." The underlying Gestalt explanation is what makes it actionable: not "make the icons more different" but specifically "the color similarity is overriding the shape distinction - resolve at the color level."
Gestalt Continuity Examples - How The Eye Follows A Path?
The principle: The eye follows the smoothest path through a visual field. When elements are arranged along a line or curve, perception continues that line beyond the elements themselves, and interruptions in the path are noticed as breaks in expectation.
Digital product example - progress indicators
A multi-step onboarding flow uses a horizontal progress bar: Step 1 → Step 2 → Step 3 → Step 4. The continuity principle is doing two jobs here. First, it tells the user there is a path and they are on it. Second, the gap between the completed portion and the remaining portion communicates position without words.
When a design team switches from a horizontal bar to a vertical list of steps, completion rates in A/B testing drop. Continuity research by NN/G finds that linear progress indicators outperform lists for multi-step flows because they leverage the eye's tendency to follow a continuous path. (Nielsen Norman Group, Progress Indicators Make a Slow System Less Insufferable)
Real-life example - roads and paths
A hiking trail marked by blue blazes on trees uses continuity. The hiker follows the path of blazes, and when a blaze is missing, the continuity principle causes them to continue in the direction they were traveling - which may lead them off-trail. Trail designers know this: a redirect blaze (placed perpendicularly) must be large enough to break the continuity expectation, or hikers miss the turn.
The same principle governs urban sidewalk design: a continuous curb line guides pedestrians along a street. A break in the curb - without a tactile paving or visual cue - is experienced as disorienting by pedestrians who have been following the continuity signal.
Data visualization example - line charts
A line chart showing monthly user engagement over 18 months has a gap in month 9 where data was not collected. The continuity principle causes readers to mentally bridge the gap and infer a smooth trend through month 9, even if the actual data on either side of the gap would support a very different inference.
This is a known data visualization risk: missing data presented as a gap in a line chart is frequently misread as a continuous trend. Best practice is to break the line visually and add a note, forcing the reader to interrupt the continuity inference. (Munzner, T., Visualization Analysis and Design, CRC Press, 2014.)
Gestalt continuity examples in research context:
In usability testing of a checkout flow, researchers observed that users who reached the end of a horizontal step indicator and saw no "Continue" button consistently scrolled down rather than looking for the button above the fold. Their eye had followed the horizontal progress bar to its end and expected the next action to continue from that point. The button was positioned elsewhere. The continuity expectation set up by the progress bar was directing attention away from the button.
Closure Gestalt Examples - What The Brain Completes?
The principle: When a shape or form is incomplete, the brain fills in the missing information to perceive a complete whole. Partial information is enough for recognition if the gap is within the threshold of what the brain can close.
Digital product example - logo design
The WWF logo is an incomplete panda. The IBM logo is a series of horizontal stripes that the eye reads as letters. The NBC peacock is a partial fan shape. Each logo exploits closure: the brain completes the shape and perceives a recognizable figure from partial information. Logos built on closure are more memorable because the act of completing them is a small cognitive investment that increases encoding. (Ware, C., Visual Thinking for Design, Morgan Kaufmann, 2008.)
In interface design, closure enables icon design. A trash can icon is recognizable even when rendered at 16x16 pixels, where only a suggestion of the shape is possible. A shopping cart icon works with three lines and two circles. The brain closes the gap.
Real-life example - street signage
An octagonal red shape at an intersection is recognized as a stop sign even when partially obscured by a tree branch, snow, or a sticker that covers part of the text. The brain applies closure: the octagonal red form is enough to complete the pattern. This is a feature of intentional road sign design - the distinctive shape was chosen specifically because partial information is sufficient for recognition.
Data visualization example - incomplete area charts
An area chart showing projected revenue includes a dotted line for the forecast period and a solid line for actuals. Readers apply closure to the dotted portion: they mentally complete the projected line to the chart endpoint. When the dotted portion ends before the chart frame, some readers perceive the projection as terminating there rather than continuing beyond the chart boundary. Designers who want readers to understand a projection extending beyond the chart must break the closure signal - for example, with an arrow or explicit label at the boundary.
Closure gestalt examples in UX research:
In a user test for a content platform, participants were asked to navigate to a video series. The series was displayed as a horizontal row of cards, but the rightmost visible card was cut off at the screen edge - only 60% of it was visible.
Participants in the session applied closure to the partial card and understood it as an indication that more content existed off-screen. All eight participants scrolled or swiped right without prompting. This is an intentional use of closure to communicate scroll affordance. The same design team later tested a version where the cutoff was reduced to 20% visible.
Closure failed: participants did not perceive the partial card as incomplete, and scroll discovery dropped by 40%.
Gestalt Symmetry Examples - Order And Visual Stability
The principle: Symmetric elements are perceived as a single grouped unit. The brain prefers symmetry and uses it as a signal of intentional organization. Asymmetry signals distinction or emphasis.
Digital product example - modal dialogs
A confirmation modal presents two buttons: Cancel (left) and Confirm (right). Symmetric placement - equal size, equal weight, centered in the modal - signals that both are equally valid options and the user must make a deliberate choice. When designers make Confirm slightly larger or use a filled style, they are deliberately breaking symmetry to direct attention toward one option. The asymmetry signals emphasis.
A common usability problem occurs when a destructive action (Delete) and a safe action (Cancel) are presented symmetrically. Users in time-pressured situations select at chance rates - the symmetry communicated that both are equivalent choices when they are not.
Real-life example - architectural facades
Symmetric building facades - a central entrance flanked by equal wings, windows spaced at regular intervals - communicate stability, authority, and deliberate organization. Government buildings, banks, and academic institutions have used architectural symmetry as a signal of institutional permanence for centuries. A facade that breaks symmetry on one side immediately draws the eye to the break; asymmetric elements read as entrances, additions, or points of emphasis.
Data visualization example - butterfly charts
A population pyramid (butterfly chart) uses bilateral symmetry to compare two groups - typically age cohorts for male and female populations - across a shared central axis. The symmetry makes the comparison direct: a bar that extends further on one side than its mirror on the other is immediately visible as a difference. The brain's preference for symmetry makes deviation from it perceptually salient.
Gestalt symmetry examples in research observation:
A research team conducting an audit of a B2B software dashboard found that users consistently misidentified the primary action button in a three-button toolbar. The toolbar presented three buttons in equal size, equal spacing, and equal weight - full symmetry. Users chose at random. Adding visual asymmetry to the primary button (increased size, filled style) resolved the confusion in subsequent testing. The symmetry had communicated equivalence when the design intent was hierarchy.
Gestalt Design Examples - When Principles Conflict
Real products rarely present one Gestalt principle at a time. The design problems that produce the most usability failures are usually cases where two principles are working against each other.
And here are the examples of such conflicts:
Proximity vs. similarity:
A mobile app presents a list of notifications. Each notification uses a card component with consistent styling (similarity groups all cards). But a batch of three related notifications is stacked with reduced spacing between them (proximity groups the three). If the proximity gap reduction is subtle, users may not notice the grouping - the similarity signal overwhelms the proximity signal. If the gap reduction is visible, users perceive a sub-group within the list. The designer must decide which grouping signal is stronger for their use case and ensure the chosen signal is unambiguous.
Continuity vs. closure:
A multi-step form presents five fields arranged vertically. The eye follows the continuity of the vertical column. The form is interrupted by a section header midway through. The continuity signal tells the user to keep going; the section header invites a closure - a perceptual "end" to the preceding group and "beginning" of a new one. If the section header is styled subtly, the continuity signal dominates and users skim past it. If it is styled visually distinctly, it creates two perceptual groups from one continuous form.
Symmetry vs. figure-ground:
A hero section uses a full-width background image with centered white text. Symmetry pushes the design toward visual equilibrium. Figure-ground requires sufficient contrast between the text (figure) and the image (ground) for the text to be readable. When the background image is high-contrast and visually complex, the figure-ground principle is strained: the ground competes with the figure. Adding a semi-transparent overlay resolves figure-ground at the cost of slightly reducing the visual impact of the symmetry.
These conflicts are not failures of design theory. They are the normal condition of visual communication in real environments. The designer's job is to identify which principle is most important for the user's task and design deliberately toward it, rather than letting the signals compete by accident.
Gestalt Principles Examples In Real Life - A Research Perspective
When UX researchers run moderated usability sessions and observation studies, Gestalt violations are a recurring category of finding. Participants do not arrive with the vocabulary to describe what is happening. They describe the experience:
"I didn't see that button." (Figure-ground failure: the button did not read as a figure against its background.)
"I thought those two things were related." (Proximity or similarity creating an unintended grouping.)
"I kept expecting the form to continue." (Continuity expectation set up by visual layout not matched by interaction design.)
"I didn't realize there was more content below the fold." (Closure failure: the screen edge was not perceived as cut-off content.)
A researcher with a working understanding of Gestalt principles can translate these observations into specific, actionable findings for the design team. Not "users were confused by the button" but "the button shares background color with the adjacent panel - figure-ground is insufficient at that contrast ratio." That is a finding the design team can act on in one revision.
When researchers are running multiple sessions - five to ten participants through the same interface - the same Gestalt violation typically surfaces across multiple sessions. The synthesis question becomes: what is the pattern across participants, and what is the underlying perceptual cause?
This synthesis step - reading across observation notes and transcripts to identify recurring themes, grouping them by root cause, and naming them in terms of their design implication - is where the research becomes useful to the product team.
For teams running qualitative research on visual design problems, DoReveal ingests observation session transcripts and synthesizes recurring themes across sessions, surfacing which findings appear consistently and which are isolated incidents.
What it does not do: interpret what a finding means for the visual design, prioritize findings against product constraints, or analyze quantitative usability data (error rates, task completion times, heat maps). Those steps belong to the researcher and designer working together. DoReveal works on qualitative data like, session notes, observation records, interview transcripts.
Three sessions are free, no credit card needed. Try DoReveal free
Frequently Asked Questions About Gestalt Principles Examples
Q: What are Gestalt principles examples in real life?
Gestalt principles appear in nearly every designed environment. Proximity examples: a restaurant menu that groups appetizers, mains, and desserts with spacing (proximity organizes the categories without borders). Similarity examples: a hospital wayfinding system where all emergency signs are red (similarity groups all emergency information across distance). Continuity examples: a road that curves over a hill - drivers expect the road to continue on the other side because the continuity principle predicts the path will persist.
Closure examples: a brand logo composed of incomplete shapes that the eye completes into a recognizable form (IBM's striped lettering, the WWF panda). Symmetry examples: a courthouse with a symmetric facade that communicates institutional authority before a visitor reads any signage.
Q: What are some proximity gestalt examples in real life?
Physical space examples: a hospital floor plan where the nurses' station is positioned closest to high-acuity rooms - proximity signals priority. A bookstore that places staff recommendations adjacent to the books they are recommending, without a border or sign. Office furniture arranged in clusters to signal collaborative zones versus rows to signal focused work.
Digital examples: a navigation menu where items with a shared function (account settings, billing, profile) are grouped with tighter spacing than items in other sections. A form where required fields are visually closer to their labels than optional fields, reducing cognitive effort to parse them.
Q: What are gestalt principles similarity examples in real life?
Similarity appears wherever a consistent visual characteristic needs to communicate group membership across distance. Airport wayfinding uses color similarity: all departure signs share a color, all arrival signs share another. Retail environments use shelf-height similarity: premium products are placed at eye level across every category, and consumers learn to look at that height for premium options regardless of category.
In data visualization, a multi-series line chart uses color similarity to let readers track a series across the chart without consulting the legend at every data point.
In interface design, all interactive elements (buttons, links, form fields) share a distinguishing visual characteristic - usually a specific color or underline style - that groups them as "things you can act on."
Q: What are gestalt continuity examples in design?
Progress indicators in multi-step flows use continuity to communicate that the user is on a path and the path continues. Horizontal scrolling carousels use continuity to signal more content: a card that is partially cut off at the screen edge creates a continuity signal that the row continues beyond the visible boundary.
Navigation breadcrumbs (Home > Category > Product) use continuity to show a path the user has traveled. In data visualization, a line chart communicates trend through continuity - the line predicts its own continuation, which is why missing data in a line chart is frequently misread as a smooth trend rather than a gap.
Q: What are closure gestalt examples in UI design?
Icon design relies heavily on closure: a trash can, shopping cart, and search magnifier are all rendered at small sizes where only a partial shape is possible, and the brain closes the gap. Horizontal scroll affordances use partial card visibility to trigger closure: showing 60-80% of the last visible card signals that more content exists off-screen.
Logo design uses closure intentionally: logos that use incomplete shapes are more memorable because the act of completing them is a slight cognitive investment that improves encoding. Loading states that show partial progress bars use closure: users perceive the bar as headed toward 100% completion even when the actual endpoint is unknown.
Q: What is the figure-ground Gestalt principle and what is an example?
Figure-ground is the perception of one element as a distinct object (figure) against a background (ground). The clearest example is text on a screen: the text is the figure, the background color is the ground. Sufficient contrast between figure and ground is what makes text legible. When contrast is insufficient - light grey text on a white background - the figure-ground separation fails and the text becomes difficult to read.
Other examples: a call-to-action button that uses a filled color on a white background (figure clearly distinct from ground) versus a ghost button with only a border (figure-ground is weaker, which reduces the button's visual priority).
In photography and illustration, a subject is made to stand out as a figure through techniques like shallow depth of field, which blurs the ground relative to the figure.
Recognizing Gestalt Violations In The Field
Gestalt principles are not a design checklist. They are a descriptive framework for understanding how perception works - which means they are equally useful for diagnosing problems as for making design decisions in advance.
A designer who can name the principle being violated when a user says "I didn't see that button" or "I thought those were the same thing" can give the design team a specific, actionable explanation rather than a general recommendation to "make it clearer."
A researcher who can map observation notes to Gestalt violations can turn a set of user confusion moments into a coherent finding about perceptual design - one that the product team can act on in the next iteration.
The examples in this post are intended to bridge the gap between the abstract principle and the real situation. The standard diagrams show you the concept. The real-life examples show you what to look for.
Try DoReveal free for qualitative research synthesis
Questions about structuring a UX research study around visual design problems? Book 45 minutes.
Related reading
Healthcare UX design: how to run research in a complex, regulated environment
Qualitative observation: methods, types, and how to apply them
Actionable insights: how to turn research findings into decisions that stick
UX audit guide: how to run one and what to do with the findings
Observation examples: quantitative and qualitative across research contexts