Gestalt Principles

People process visual information in milliseconds. The common assumption follows information logic: more details lead to better understanding. Yet designers consistently observe the opposite—complex layouts overwhelm users, important elements get lost, and people abandon the experience. The critical question is: What rules does the brain use to organize visual stimuli into meaningful units, which patterns dominate perception, and what evidence supports these mechanisms?

Studies

The Phi Phenomenon and Apparent Movement

Max Wertheimer published the foundational work of Gestalt psychology at the University of Frankfurt in 1912. He showed test subjects two points of light that illuminated sequentially at different positions. At an interval of approximately 60 milliseconds, all participants reported seeing a single point moving—even though objectively no movement was occurring. At shorter intervals, they saw two simultaneous points; at longer intervals, two successive ones. The remarkable finding: the brain constructs movement from static stimuli when the timing is right. This principle forms the basis for film and animation—24 individual frames per second create the perception of fluid motion.

Proximity versus Similarity in Grouping

Stephen Palmer conducted systematic experiments on the hierarchy of Gestalt laws at UC Berkeley in 1992. In his study, 156 participants viewed dot patterns in which proximity and similarity (color) suggested competing groupings. In one pattern, red and blue dots alternated, but spatially, two same-colored dots were positioned close together—meaning similarity and proximity were aligned. In other patterns, spatially close dots had different colors—causing the principles to conflict. The results showed that at moderate distances, proximity dominated grouping in 73% of cases, while at very large distances, similarity prevailed in 68% of cases. This demonstrated that the strength of Gestalt laws is not absolute but depends on specific parameters.

The Gestalt Principles

Max Wertheimer published the fundamental Gestalt principles in 1923, introducing Gestalt psychology. In a series of experiments, he showed test subjects various arrangements of dots and lines. When presented with six dots arranged in two groups of three with a larger gap between them, 100% of participants spontaneously reported seeing two groups—not six individual dots. Even when he colored the dots differently, the spatial grouping remained dominant. The remarkable finding: the grouping happened automatically and could hardly be suppressed through conscious effort. Wertheimer thus demonstrated that proximity is one of the strongest organizational principles of visual perception.

Proximity versus Similarity

In 1992, Stephen Palmer conducted research at the University of California, Berkeley, to determine which Gestalt principle is stronger: proximity or similarity. Sixty-four subjects viewed displays containing black and white squares in various arrangements. In one condition, squares of similar colors were grouped together but spatially separated; in the other, squares of different colors were positioned close together. When distances were equal, color similarity and proximity influenced perception about equally. However, when Palmer changed the spatial distances only slightly—from 2mm to 4mm between groups—87% of subjects shifted to proximity-based grouping. The conclusion: proximity is the most powerful Gestalt principle, but only when distances are sufficiently distinct. A difference of just 50% is enough.

Proximity Compatibility Principle

Stephen Palmer and Irvin Rock conducted a series of experiments on perceptual organization at the University of California in 1992. 128 participants viewed dot patterns on a screen, with distances between dots systematically varied. At distances below 2 degrees of visual angle (approximately 3-4mm at normal reading distance), dots were automatically perceived as a group—independent of instruction. From 5 degrees of visual angle (approximately 8-10mm) onward, the grouping dissolved. The remarkable finding: This threshold was notably consistent across different contexts and remained stable even with conscious effort. Visual grouping occurs preattentively and cannot be prevented through willpower.

Proximity Compatibility in Complex Interfaces

Christopher Wickens and his colleagues tested the proximity principle in realistic applications at the University of Illinois in 1992. Sixty-four pilots completed flight simulations using different cockpit layouts. In one layout, functionally related instruments (altitude, speed, rate of climb) were spatially grouped with distances under 15mm. In the other layout, the same instruments were evenly distributed with distances exceeding 40mm. The results were dramatic: spatial grouping reduced reaction time by 34% (from 2.8 to 1.85 seconds) and cut the error rate in half from 12% to 6%. The effect was strongest for tasks requiring integration of multiple values. When pilots needed to read only a single value, proximity made no difference.

Wertheimer's Dot Pattern Experiment

In 1923, Max Wertheimer described a series of experiments on visual perception in his seminal work "Investigations in Gestalt Theory." In a classic experiment, he showed subjects patterns of dots: first with uniform spacing, then with alternating close and wide spacing, and finally with alternating colors. The surprising result: although the same dots were presented, subjects perceived completely different groupings. With similar spacing, rows emerged; with similar colors, columns appeared—automatically, without conscious effort. The brain constructs relationships based solely on similarity. This effect was so powerful that it could override competing grouping principles.

Category Entry Through Visual Similarity

Byron Sharp and Jenni Romaniuk investigated the role of visual similarity in market entry at the Ehrenberg-Bass Institute in 2016. They analyzed over 200 product launches across various categories and compared success rates. Products that used the established visual codes of their category—in color, shape, and layout—achieved on average 23% higher recognition and 34% higher purchase intent in the first year compared to products with radically different designs. The surprising finding: this effect was stronger for premium products. Those that didn't look like their category had to invest significantly more in explanation and trust-building. The most successful brands used category codes for 70-80% of their visual elements and differentiated themselves in only 20-30%—mostly through a distinctive color or shape.

Koffka's experiment with incomplete circles

Kurt Koffka conducted a series of perception experiments at Smith College in 1935. Test subjects viewed shapes drawn on cards: incomplete circles with gaps ranging from 5 to 60 degrees. The task was simple—describe what you see. With small gaps up to 30 degrees, 94% of participants reported seeing a complete circle. The brain automatically filled in the missing segments. Only with gaps of 45 degrees or larger did most perceive an interrupted circle. Koffka varied the experiments with rectangles, triangles, and more complex shapes—the pattern remained consistent: The visual system prefers closed, simple, symmetrical interpretations. A circle with a gap is completed into a full circle because that represents the simplest, most stable form.

Kanizsa Triangles and Subjective Contours

Gaetano Kanizsa presented one of the most influential experiments on visual perception at the University of Trieste in 1955. He showed test subjects three Pac-Man-like circles with their openings facing each other, along with three incomplete angles. Although no solid lines were present, 94% of observers reported seeing a white triangle that appeared to float above three black circles. Eye movement measurements revealed that subjects followed the non-existent edges of the triangle with their gaze. The astonishing part: The brain not only generates the missing lines but also creates a brightness difference—the imaginary triangle appears whiter than the background, even though both are identical.

Bluma Zeigarnik and Unfinished Tasks

In 1927, Bluma Zeigarnik conducted a series of experiments at the University of Berlin investigating how people respond to incompleteness. She assigned 164 subjects 18-22 short tasks, such as threading beads, solving arithmetic problems, or forming figures from wire. For half of the tasks, participants were interrupted before completion. One hour later, they were asked to recall the tasks. The remarkable result: interrupted tasks were remembered twice as often as completed ones (68% vs. 34%). Participants reported feeling compelled to finish the incomplete tasks. The principle: incompleteness creates cognitive tension that is only resolved through completion—a mechanism that underlies progress bars, checklists, and gamification elements today.

Principle

Which principle for Customer Experience Design can be derived from this? Structure information according to natural laws of perception rather than logical categorization—the human brain interprets visual relationships automatically before conscious analysis begins. While companies often impose their internal organizational logic onto websites and apps, they should instead leverage evolutionarily rooted Gestalt principles to create intuitive user experiences. This approach proves particularly effective for complex information structures such as product catalogs or dashboards, where clear visual hierarchy is essential. However, overemphasizing visual grouping can create misunderstandings among highly diverse audiences with different cultural viewing habits. The following guidelines demonstrate how to implement this principle in practice.

Guidelines

Group related elements spatially

Place related information close together and separate different functions with whitespace. The law of proximity is one of the strongest design principles—what appears spatially together is interpreted as semantically related. Specifically: position form field labels directly above or to the left of their fields, not equidistant from other fields. Group product information (price, rating, availability) in one visual block and purchase buttons in another. The spacing between groups should be at least 1.5 times larger than the spacing within groups.

Consistent visual language for function types

Use the law of similarity: All elements with the same function should look identical in color, shape, size, and typography. For example, all primary CTAs should share the same color and shape, all secondary links should follow a different design, and all status messages should maintain the same visual style. This enables preattentive recognition—users can scan at a glance to locate buttons without reading each one individually. Important: Similarity must remain consistent across all touchpoints; otherwise, the learned pattern breaks down.

Closed shapes for completeness

Use the Law of Closure: Enclose related content with subtle lines, boxes, or color fields. The brain interprets enclosed areas as complete units. This approach is particularly effective for pricing tables, feature comparisons, and card-based lists. Note: Keep enclosures subtle—overly strong lines create visual clutter and distract from the content. A light background color or 1px border is often sufficient to communicate grouping.

Leveraging continuity for process management

The Law of Continuity states: The eye naturally follows smooth lines. Apply this principle to step-by-step processes by visualizing the purchase journey as a continuous path (using progress bars or connected dots) rather than isolated steps. Arrange form fields in a natural reading direction without interruptions—the eye should flow smoothly from one field to the next. In multi-stage processes, maintain continuity by showing users: where they came from, where they are now, and where they're headed next. This approach reduces cognitive load and abandonment rates by making the next step visually intuitive.

Group related elements together

Elements that are related in content must be positioned close to each other spatially. The spacing within a group should be significantly smaller than the spacing between groups—at least 1.5 times smaller, preferably twice as small. For example, in forms, labels and input fields should be closer together than separate form fields are to one another. In pricing tables, the price, currency, and time unit form a single visual unit.

Avoid faulty associations

Systematically verify that elements aren't inadvertently positioned too close together, which can suggest false relationships. Common mistakes include: buttons placed closer to the previous section than to their relevant form, or disclaimer text positioned closer to an unrelated offer. The rule of thumb: an element's distance to its associated object must be smaller than its distance to all other elements.

White space as a structuring element

Use spacing consciously as a semantic signal, not merely as decoration. Greater white space between sections indicates a topic change. Without this spacing, the entire page appears as a dense, impenetrable block. The principle is hierarchy through spacing. Main headings require more space above than below to visually connect with the following paragraph. In complex dashboards, consistent spacing between tiles makes the structure immediately comprehensible.

Properly Placing Call-to-Actions

Primary buttons must be spatially positioned near the content they relate to. A 'Buy now' button placed centrally below a product comparison creates ambiguity. Instead, position it directly next to the product being purchased. For long forms, place the submit button at the end—but with enough spacing from the form fields to prevent it from being mistaken for another input. The principle: CTAs should be positioned according to the decision point, not the layout structure.

Functional Grouping through Whitespace

Use spacing as your primary hierarchy tool. Related elements—such as product image, name, and price—should be positioned within 8-12mm of each other. Between different groups, maintain at least 24-32mm. This doubling of distance creates clear visual units without requiring additional graphic elements. Forms benefit particularly from this approach: keep fields within a section close together, with distinct spacing between sections.

CTA isolation through spacing

Call-to-action buttons lose effectiveness when positioned too close to other elements. A "Buy Now" button placed 8mm from text is perceived as part of the text block rather than as an independent action option. Create at least 40mm of spacing in all directions around primary CTAs. This "protective space" visually isolates the button and dramatically increases its prominence.

Progressive Disclosure with Proximity

For complex products or configurations: Initially display only core options with generous spacing (20-24mm). Advanced options appear only when clicked and are then tightly grouped (8-12mm) beneath the activated core option. This spatial hierarchy communicates "important versus optional" without requiring text. Users scan faster and feel less overwhelmed.

Place error messages proximity-based

Error messages positioned more than 30mm from the affected field fail to create a clear association with the problem. Place notifications directly below or beside the field at a distance of 4-8mm so that users automatically perceive them as grouped together. When a form contains multiple errors, position each notification near its respective field rather than collecting all errors at the top. This spatial proximity eliminates the cognitive burden of mentally matching errors to their corresponding fields.

Identify visual codes of the category

Systematically analyze the visual patterns of successful competitors: Which colors dominate? Which shapes, layouts, and typographies are standard? These codes aren't coincidental—they've proven functional. Customers expect them. Use 70-80% of these established codes for quick category recognition, then differentiate yourself in only 20-30% through distinctive brand assets.

Characterize product groups by similarity

Design related products or variants to be deliberately similar: use the same color for a product line, the same shape for related services, or the same icons for a feature group. These visual clusters enable quick navigation and reduce cognitive load. Customers don't need to analyze each element individually—they can recognize patterns at a glance.

Leverage industry standards for trust

In regulated or sensitive industries—finance, healthcare, and insurance—visual standards establish immediate trust. Professional typography, industry-specific color codes (blue for finance, green for sustainability), and clear layouts signal professionalism and competence. Innovation in these sectors is required in service and product delivery, not in design. Companies that deviate radically from visual conventions must work considerably harder to build trust.

Ensure visual consistency across touchpoints

Maintain high visual consistency across all customer touchpoints—website, app, emails, documents, and packaging. This consistency leverages the law of similarity: customers immediately recognize that all elements belong together. It creates coherence, reduces uncertainty, and strengthens brand recall. Inconsistent visual language appears unprofessional and fragments brand perception.

Visual hierarchy through simple basic shapes

Structure interfaces using clear geometric basic shapes—rectangles for containers, circles for actions, and clean lines for separation. Avoid irregular shapes, diagonal angles, or complex polygons that serve no functional purpose. The brain processes simple shapes 40–60% faster and retains them more effectively. Use symmetry as an organizing principle: symmetrical layouts are perceived as more harmonious and trustworthy.

Reduce information density through grouping

CX Guideline: Reduce Information Density Through Grouping Group related elements into visual units rather than presenting all information with equal weight. Use whitespace to create clear boundaries. For example, instead of displaying 15 individual data points, organize them into 3 groups of 5 points each. The brain processes 7±2 units simultaneously—through strategic grouping, a page with 30 elements can feel clear and manageable when structured into 5 distinct areas.

Establish consistent visual patterns

Maintain consistent visual structures across all touchpoints. When product cards follow the same layout, the brain stops reinterpreting each card—the structure becomes an automatically recognized unit. This dramatically reduces cognitive load. Test new designs to ensure they don't break existing patterns. Every exception costs mental energy and slows users down.

Progressive Disclosure over Completeness

Display only what's necessary for the immediate next step, rather than presenting everything simultaneously. Divide lengthy forms into multiple brief stages. Conceal advanced options behind a "Show more" link. Each additional piece of information on screen increases cognitive load, even when optional. The guiding principle: multiple simple steps are preferable to a single complex one.

Show progress through incomplete elements

Use incomplete visual elements intentionally—such as progress bars, checklists with open items, or partially completed profiles—to activate the drive for completion. Show what's missing, not just what's been achieved. In onboarding processes, "Profile 60% complete" motivates more strongly than "You have completed 3 of 5 steps." The incomplete element creates cognitive tension that drives continued engagement.

Directing attention through strategic gaps

Use deliberate visual interruptions to direct attention to important elements. A cropped testimonial at the bottom of the screen signals, "There's more here—scroll." A partially visible call-to-action generates more engagement than a fully visible one. Important: The incompleteness must be obviously intentional. Overly fragmented elements appear as errors. The rule of thumb: at least 60–70% of the element must be recognizable.

Let customers close mental gaps

Allow customers to actively fill in information rather than stating everything explicitly. For product descriptions: Present benefits through before-and-after comparisons that let customers deduce the transformation themselves. For complex processes: Signal the next step without detailing every intermediate action. The mental effort of completion deepens engagement and processing. However: Never leave gaps in safety-critical or legal information—here, explicitness is essential.

Avoid open loops before critical points

Close visual and content loops BEFORE customers complete purchases or make critical decisions. While incompleteness motivates continuation, it undermines commitment. A checkout process with an incomplete progress bar ('Step 2 of...?') increases abandonment rates. A form where the number of remaining fields is unclear creates frustration. The rule: Activate the closure drive in early phases (Awareness, Consideration), then resolve all loops before conversion. Communicate clearly: 'Just one step remaining'.