Loading…
Loading…
Connected elements are perceived as a single group.
stellae.design
Elements that are visually connected by lines, colors, frames, or other uniform visual properties are perceived as more related than elements that are not connected. Connection is a stronger grouping cue than proximity or similarity alone.
Elements that are visually connected through uniform visual properties — such as connecting lines, shared color regions, enclosing borders, or consistent texture — are perceived as being more related than elements without such connections. Identified by Stephen Palmer and Irvin Rock in 1994, this principle is one of the most powerful grouping cues and can override proximity and similarity.
Step wizard with connected progress indicators
Steps linked by lines showing clear sequence and progress
Steps as disconnected numbered circles
No visual connection between steps, sequence less obvious
Uniform connectedness provides an explicit visual relationship signal that is stronger than the implicit signals of proximity and similarity. While proximity suggests 'these might be related because they are near each other,' a connecting line or shared visual property states unambiguously 'these are related.' In complex interfaces where multiple grouping principles compete, uniform connectedness provides the clearest way to establish relationships without ambiguity.
E-commerce checkout flows commonly display numbered circles connected by a horizontal line, with completed steps filled and upcoming steps outlined. The connecting line unambiguously communicates sequence — step 1 leads to step 2 leads to step 3. Without the connecting line, the numbered circles could be interpreted as unrelated options rather than sequential stages.
Effective tab components use a visual connection between the active tab and its content panel — typically by removing the border between the tab and the panel, creating a continuous shared surface. This connection makes it instantly clear which content belongs to which tab. When this connection is absent, users may not realize the tab controls the content below it.
Some forms place labels in a separate column from their inputs with significant whitespace between them, relying solely on horizontal alignment to communicate the relationship. When the form is long or the viewport changes, this alignment breaks down and users cannot determine which label goes with which input. Adding a subtle connecting line, shared background row, or tighter proximity would resolve the ambiguity through uniform connectedness.
Git visualization tools like GitKraken and GitHub's network graph use colored lines to connect commits on the same branch. The connecting lines transform a list of commits into a clear story of parallel development, merges, and forks. Without these connecting lines, the same information presented as a flat list would lose all structural meaning about branch relationships.
• The most common error is over-connecting elements with too many visual links, creating a tangled visual map where the connections themselves become noise. Another mistake is using connecting lines or shared visual properties inconsistently, where some related items are connected and others are not, creating a false signal that unconnected items are unrelated. Weak connections (very light lines, barely different background shades) that do not register on all displays effectively provide no grouping signal while adding visual clutter.
| Check | Good Pattern | How to Test |
|---|---|---|
| Sequential relationships are visually connected | Steps in processes, nodes in flows, and items in timelines are connected by visible lines or continuous visual elements that communicate sequence | Remove all text labels from a process visualization and check whether the visual connections alone communicate the correct sequence and relationships |
| Navigation-content relationships are explicit | The active navigation item is visually connected to its content area through shared color, continuous background, or a connecting visual element | Click each navigation item and verify that the visual connection between the selected item and the displayed content is immediate and unambiguous |
| Connections are sufficiently visible | Connecting lines and shared visual properties have enough contrast and weight to be visible on all target display types and in all lighting conditions | View the interface on a low-contrast monitor and in bright ambient light — if connections disappear, increase line weight or contrast |
| Connection density is managed | The number of visual connections on a screen is low enough that each one communicates a meaningful, distinguishable relationship | Count all visible connections (lines, shared backgrounds, visual bridges) on a screen — if there are more than seven to ten, evaluate which can be removed or shown on demand |
In freely explorable interfaces like mind maps, infinite canvases, or creative tools, rigid visual connections between all related elements can constrain the feeling of open exploration. These contexts benefit from softer relationship indicators (hover-revealed connections, optional linking) that users can summon when needed without being visually constrained by permanent connections.
Was this article helpful?