Key takeaway (TL;DR)
Uniform connectedness and common region are two particularly powerful principles of spatial organization in modern Gestalt psychology. Psychological evidence shows that a clear, continuous connection or a clearly enclosed background can override grouping based on distance, shape, or color. JVDS emphasizes that when the arrangement of existing controls in a complex enterprise interface or dense form cannot be substantially changed, shared-region cards and explicit connecting lines offer a low-development-cost way to eliminate ambiguity and restore information order.
1. The power of Gestalt grouping: how connections and enclosures override distance
Traditional Gestalt theory suggests that nearby elements belong together, but the groundbreaking research of Palmer and Rock challenged this understanding:
A hierarchy of visual grouping strength
- First priority: common region—strong enclosure by a container. A closed card border or background has the strongest perceptual organizing power, overriding existing distances and fixing the elements' group membership.
- Second priority: uniform connectedness—continuous lines link elements. A clear physical line or flow path can outweigh simple empty space and bind its nodes into the same causal chain.
- Third priority: proximity—the pull of spatial distance. Negative space and spacing establish relationships between neighbors, providing basic organization in borderless or flat layouts.
- Fourth priority: similarity—shared colors and shapes. Matching colors, fonts, or geometric forms create visual categories, with less strength than enclosure or explicit connections.
- Palmer and Rock's landmark 1990 experiment. Researchers arranged dots with horizontal gaps clearly greater than vertical gaps, which proximity would initially make people read as columns. They then connected horizontally adjacent dots with a very thin continuous line, or enclosed them in a light-gray rectangle. The previously dominant perception of columns disappeared immediately: almost 100% of participants spontaneously described horizontal rows instead. This established a perceptual principle: enclosure and connection take the highest priority in organizing visual information.
- The simple solution to the Big Bend National Park sign. In the earlier example of a Big Bend National Park sign, the place names COLIMA TRAIL, CHISOS BASIN, and SOUTH RIM were split too far apart across two columns, causing drivers to group vertically adjacent words incorrectly. Apart from completely rearranging the text, what was the cheapest effective on-site remedy? Paint two horizontal white divider lines between the three rows. These lines immediately grouped each complete destination and its arrow into a separate horizontal common region. Even when drivers scanned the sign from hundreds of meters away, misreading fell to zero.
- The structural intelligence of classic operating-system print dialogs. A Windows or macOS print panel can contain dozens of checkboxes, radio buttons, dropdowns, and input fields. Why can ordinary users still operate it smoothly? Thin group boxes enclose the controls within three common regions: printer properties, page range, and copies and finishing. The regions clearly establish each control's scope, preventing confusion between logically distinct blocks.
2. Common interface failures involving boundaries and connections
In enterprise administration systems, data displays, and complex forms, poor restraint in using common regions can create new visual problems:
2.1 Suffocating nested containers: border hell
Developers may assume that adding a box will resolve every confusing arrangement. A large gray border surrounds the page, three medium cards sit inside it, five bordered panels sit inside each card, and every field receives another heavy black outline. Dozens of competing lines fragment the screen. A common-region technique intended to create order becomes a visual cage that interrupts scanning and compresses the available layout space.
2.2 False common regions that cross logical boundaries
On a poorly designed settings page, visual symmetry may lead a designer to put an email-notification save button and several SMS-gateway switches inside the same light-gray card. An operator assumes that the button saves only email settings, but the backend also submits the SMS configuration, causing a serious cross-module overwrite. The grouping has suggested the wrong scope.
3. A four-dimensional matrix for connectedness and common regions
The following matrix helps teams use lines and containers systematically in real business interfaces:
| Evaluation dimension | Frequently used core functions/assets | Infrequent but necessary functions/assets | Redundant distractions, false functionality, or empty formalism |
|---|---|---|---|
| Defining shared-region containers | Enclose logically related functions with a fine 1px line (#E5E7EB) or a subtle background (#F9FAFB). | Provide a clear card header and dedicated toolbar at the card's upper right. | Force unrelated functions from different departments into the same colored border. |
| Connections and process steps | Use clear lines through approval-flow and timeline nodes: solid for completed stages, dashed for stages not yet reached. | Add explicit arrows and decision-condition badges to branching routes. | Draw long decorative lines with no semantic meaning across unrelated business cards. |
| A limit on container nesting | Cap nesting at two levels—the page background and business cards—to prevent Russian-doll layouts. | Use side drawers or sequential tabs for complex details instead of ever-deeper bordered panels. | Nest cards, panels, groups, and smaller boxes four or more levels deep. |
| Physical alignment of action scope | Keep a local action, such as resetting one module, inside its current card at the lower right. | Separate global submit actions from individual cards in a dedicated sticky footer bar. | Place a button affecting only one card outside it in an unrelated shared area. |
4. JVDS engineering practice: grouping without heavy borders
In complex enterprise-system redesign, low-code process canvases, and commercial interaction design, JVDS develops connectedness and common-region principles into a lightweight modern layout approach:
- Clean, borderless containers. Our technical approach rejects heavy black boxes nested inside one another. We use lightweight common regions inspired by modern architecture: remove 90% of thick enclosing borders, replacing them with 24px of comfortable negative space and a 2% difference in light background tone, or surface elevation. Containers emerge like quiet floating islands, providing clear group membership while preserving an airy, modern, minimal appearance.
- Smart routing connectors. In complex approval flows and data-lineage diagrams, the team develops an intelligent connector system based on Bezier and orthogonal routing algorithms. Connections do not pass through text or form chaotic crossings. Routes between nodes automatically find paths with minimal obstruction, accompanied by a subtle flow animation. Dependencies among thousands of data nodes become as orderly as a city's high-speed rail network. Visit our design portfolio to explore the visual order created by careful connection engineering.
- Mandatory scope-closure reviews. Before interface handoff, we conduct a strict scope-recognition test. Business users with no coding knowledge are asked: “If you change any switch in this area, where does its effect stop?” Whenever someone hesitates over whether a neighboring module will also change, the container's boundary cues have failed. The boundaries must be adjusted and reinforced until the action's scope is unambiguous.
5. Frequently asked questions
Q1: If common-region cards are so effective, why does modern web design still emphasize proximity and spacing?
Because negative space is a quieter, more refined organizing tool than a border. Borders and backgrounds are powerful, but they are visible pixels that consume attention. Proximity can separate modules with 48px gaps using empty space alone, introducing neither visual noise nor an additional graphic element. A mature interaction structure uses generous whitespace to distinguish large modules, reserving common-region cards for locally complex groups inside them. Their coordinated use creates a strong hierarchy.
Q2: When crossings in a flowchart are unavoidable, how can users tell which lines connect?
Use the classic bridge-jumper, or line-hop, convention. When two orthogonal connectors must cross, do not simply render a four-way intersection: visual continuity can lead the eye to turn onto the wrong route. Instead, draw a small upward semicircular arc in the horizontal line where it passes over the vertical line, like a road bridge. This communicates that the two lines are independent and one passes above the other.
Q3: Why do designers often use a subtle 1px translucent shadow instead of a solid border to define a common region?
Because a diffuse elevation shadow better matches how we perceive the physical three-dimensional world. A rigid black outline creates a hard division on a flat surface. A soft, pale-gray ambient shadow instead makes a card appear to float slightly, as if two millimeters above its background. That perceived difference along the Z-axis naturally defines the region, creating a softer and more refined result without the oppressive effect of heavy lines.
