---
title: "Law of Uniform Connectedness"
source: "/reference/law-of-uniform-connectedness"
description: "Visible connections make elements feel more strongly related than elements that merely share space."
---
# Law of Uniform Connectedness

Visible connections make elements feel more strongly related than elements that merely share space.



### Principle

Visible connections make elements feel more strongly related than elements that merely share space.

### Why it matters

Lines, paths, stems, nested connectors, timelines, tree branches, and direct visual links communicate relationship and sequence. They are especially useful when spatial proximity cannot fully explain ownership. A connection can also mislead: one line between items may imply hierarchy, causality, or progression that the data model does not support.

### Deeper design interpretation

A line, branch, stem, path, connector, or shared contour is interpreted as an explicit relationship. It communicates more strongly than proximity because the interface appears to say, “these things are directly connected.” This makes connectedness useful for dependency graphs, timelines, steppers, nested discussions, and hierarchy views where adjacency alone is insufficient.

The same strength creates risk. A connector can imply sequence, ownership, causality, completion, or hierarchy even when the underlying system does not support that interpretation. Once the visual connection is drawn, users often trust it more than accompanying copy.

Layr should evaluate connections as data claims. Every connector needs a defensible semantic meaning, and that meaning should remain stable across viewport changes and state transitions.

### What the agent should reason about

Determine the relationship type represented by the connection and compare it with the underlying data model when available. Look at endpoints, direction, style, and state. A dashed line, solid line, and highlighted line should not represent different meanings accidentally.

If the relationship cannot be recovered from geometry alone, consider labels, legends, or structural markup rather than merely strengthening the line visually.

### Common failure patterns

- A vertical line through independent sections implies sequence.
- Responsive wrapping causes a connector to point at the wrong label.
- Completed and pending steps use the same path style.
- Connection styles proliferate without a legend.
- Critical hierarchy is communicated only through faint lines that disappear in dark mode or low contrast.

### Audit questions

- What exact semantic claim does the connector make?
- Does the connection survive scrolling, wrapping, zoom, and responsive reflow?
- Can users distinguish sequence, ownership, and dependency when those meanings differ?
- Is the connector redundant noise or necessary structure?

### Example agent finding

> **High — The dependency graph visually implies a dependency that does not exist.** The connector from Service A terminates on the container for both Service B and Service C, while the data model lists only B as a dependency. Attach the edge directly to B so the diagram does not overstate operational coupling.

### Agent directive

> Treat explicit visual connections as semantic claims. Verify that every connector represents a real relationship and that important relationships remain understandable when connectors wrap, scroll, or reflow.

### Apply this when

- Timelines, trees, org charts, node editors, steppers, dependency diagrams, nested comments, file explorers, and grouped fields with connecting affordances.

### Observable signals

- A connector crosses unrelated items or terminates ambiguously.
- Responsive reflow disconnects labels from their line or step.
- A timeline line implies completion across steps that are actually independent.
- Multiple connection styles are used without a legend or consistent meaning.
- A critical relationship is expressed only through a faint decorative line.

### Recommended actions

- Align connector geometry with the underlying data relationship.
- Use consistent line styles for equivalent relationship types.
- Add labels or structural markup when connection meaning cannot be inferred safely from geometry alone.
- Ensure the relationship survives zoom, scrolling, and responsive states.

### Do not over-apply

Do not add connectors to every group. Explicit connections are powerful and can create noise. Use them when the relationship itself matters.

### Example

**Weak:** A vertical line passes through three account settings sections and makes them appear sequential even though users can edit them independently.

**Stronger:** A connector is reserved for the actual multi-step verification flow, while independent settings rely on headings and spacing.

### Evaluation notes

- **Default severity:** Medium; high in dependency or workflow views where a false relationship changes decisions.
- **Typical confidence:** High when the relation model is available; medium from screenshots alone.
- **Primary evidence:** Rendered connectors, DOM/data relationships, step state, responsive behavior.
- **Related rules:** Law of Common Region, Law of Proximity, Law of Similarity, Mental Model

### References

- [Laws of UX — Law of Uniform Connectedness](https://lawsofux.com/law-of-uniform-connectedness/)

## Related rules

- [Law of Common Region](/__layr/pages/reference/law-of-common-region.md)
- [Law of Proximity](/__layr/pages/reference/law-of-proximity.md)
- [Law of Similarity](/__layr/pages/reference/law-of-similarity.md)
- [Mental Model](/__layr/pages/reference/mental-model.md)

## Agent guidance

Review criteria, the finding contract a report must use, and worked examples.

Established principle; Layr interpretation and agent guidance. Category: Perception & Visual Hierarchy.

## Retrieve
- Canonical page: https://layr.design/reference/law-of-uniform-connectedness
- Markdown for agents: https://layr.design/__layr/pages/reference/law-of-uniform-connectedness.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon

## Rule object
```yaml
rule:
  id: "law-of-uniform-connectedness"
  title: "Law of Uniform Connectedness"
  category: "Perception & Visual Hierarchy"
  origin: established
  canonical_url: "https://layr.design/reference/law-of-uniform-connectedness"
  principle: "Visible connections make elements feel more strongly related than elements that merely share space."
  directive: "Treat explicit visual connections as semantic claims. Verify that every connector represents a real relationship and that important relationships remain understandable when connectors wrap, scroll, or reflow."
  applies_when:
    - "Timelines, trees, org charts, node editors, steppers, dependency diagrams, nested comments, file explorers, and grouped fields with connecting affordances."
  observable_signals:
    - "A connector crosses unrelated items or terminates ambiguously."
    - "Responsive reflow disconnects labels from their line or step."
    - "A timeline line implies completion across steps that are actually independent."
    - "Multiple connection styles are used without a legend or consistent meaning."
    - "A critical relationship is expressed only through a faint decorative line."
  audit_questions:
    - "What exact semantic claim does the connector make?"
    - "Does the connection survive scrolling, wrapping, zoom, and responsive reflow?"
    - "Can users distinguish sequence, ownership, and dependency when those meanings differ?"
    - "Is the connector redundant noise or necessary structure?"
  recommended_actions:
    - "Align connector geometry with the underlying data relationship."
    - "Use consistent line styles for equivalent relationship types."
    - "Add labels or structural markup when connection meaning cannot be inferred safely from geometry alone."
    - "Ensure the relationship survives zoom, scrolling, and responsive states."
  avoid_when:
    - "Do not add connectors to every group. Explicit connections are powerful and can create noise. Use them when the relationship itself matters."
  common_failure_patterns:
    - "A vertical line through independent sections implies sequence."
    - "Responsive wrapping causes a connector to point at the wrong label."
    - "Completed and pending steps use the same path style."
    - "Connection styles proliferate without a legend."
    - "Critical hierarchy is communicated only through faint lines that disappear in dark mode or low contrast."
  evidence_types:
    - "Rendered connectors"
    - "DOM/data relationships"
    - "step state"
    - "responsive behavior"
  default_severity: "Medium; high in dependency or workflow views where a false relationship changes decisions."
  typical_confidence: "High when the relation model is available; medium from screenshots alone."
  related_rules:
    - { id: "law-of-common-region", title: "Law of Common Region", url: "https://layr.design/reference/law-of-common-region" }
    - { id: "law-of-proximity", title: "Law of Proximity", url: "https://layr.design/reference/law-of-proximity" }
    - { id: "law-of-similarity", title: "Law of Similarity", url: "https://layr.design/reference/law-of-similarity" }
    - { id: "mental-model", title: "Mental Model", url: "https://layr.design/reference/mental-model" }
```

## What to reason about
Determine the relationship type represented by the connection and compare it with the underlying data model when available. Look at endpoints, direction, style, and state. A dashed line, solid line, and highlighted line should not represent different meanings accidentally. If the relationship cannot be recovered from geometry alone, consider labels, legends, or structural markup rather than merely strengthening the line visually.

## Routing
Route a review here when the evidence is primarily visual: grouping, emphasis, state differentiation, alignment, salience, relationship, or scan hierarchy. Pair these rules with accessibility checks when color, contrast, focus, or motion affects perception.

## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.

## Finding contract — emit exactly this shape
```yaml
finding:
  rule_id: string
  location: string
  evidence:
    - observable fact
  impact: string
  severity: low | medium | high | critical
  confidence: low | medium | high
  recommendation:
    change: string
    rationale: string
    preserve:
      - existing design-system behavior
      - valid product constraints
```

## Example finding for this rule
High — The dependency graph visually implies a dependency that does not exist. The connector from Service A terminates on the container for both Service B and Service C, while the data model lists only B as a dependency. Attach the edge directly to B so the diagram does not overstate operational coupling.

## Code reference

The same principle as markup. Compare the structure, not the class names.

```html
<!-- weak -->
<div class="example-ui example-ui-weak">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Settings</span>
    <span class="scene-chrome-view">Account</span>
  </div>
  <div class="scene-body">
    <div class="scene-panel">
      <span class="scene-panel-title">Account settings</span>
      <div class="scene-track scene-track-uniform">
        <div class="scene-track-item scene-track-plain">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Profile</span>
          <span class="scene-meta">Edit</span>
        </div>
        <div class="scene-track-item scene-track-plain">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Notifications</span>
          <span class="scene-meta">Edit</span>
        </div>
        <div class="scene-track-item scene-track-plain">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Billing</span>
          <span class="scene-meta">Edit</span>
        </div>
      </div>
    </div>
    <div class="scene-panel scene-panel-quiet">
      <span class="scene-panel-title">Verify your account</span>
      <div class="scene-track scene-track-uniform">
        <div class="scene-track-item scene-track-plain">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Confirm email</span>
          <span class="scene-meta">Done</span>
        </div>
        <div class="scene-track-item scene-track-plain">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Enter the code</span>
          <span class="scene-meta">Now</span>
        </div>
        <div class="scene-track-item scene-track-plain">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Add a backup method</span>
          <span class="scene-meta">Next</span>
        </div>
      </div>
    </div>
    <span class="scene-note">Same path for independent settings and a real sequence · connection means nothing</span>
  </div>
</div>
```

```html
<!-- stronger -->
<div class="example-ui example-ui-strong">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Settings</span>
    <span class="scene-chrome-view">Account</span>
  </div>
  <div class="scene-body">
    <div class="scene-panel">
      <span class="scene-panel-title">Account settings</span>
      <div class="scene-row">
        <span>Profile</span>
        <span class="scene-action">Edit</span>
      </div>
      <div class="scene-row">
        <span>Notifications</span>
        <span class="scene-action">Edit</span>
      </div>
      <div class="scene-row">
        <span>Billing</span>
        <span class="scene-action">Edit</span>
      </div>
    </div>
    <div class="scene-panel scene-panel-quiet">
      <span class="scene-panel-title">Verify your account</span>
      <div class="scene-track">
        <div class="scene-track-item scene-track-done">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Email confirmed</span>
          <span class="scene-meta">Done</span>
        </div>
        <div class="scene-track-item scene-track-active">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Enter the code</span>
          <span class="scene-meta">Now</span>
        </div>
        <div class="scene-track-item scene-track-pending">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Add a backup method</span>
          <span class="scene-meta">Next</span>
        </div>
      </div>
      <span class="scene-note">Connector reserved for the one real sequence</span>
    </div>
  </div>
</div>
```

```css
/* declarations these studies depend on */
.example-ui { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 17rem; overflow: hidden; border: var(--border-thin) solid var(--color-border-strong); background: var(--color-background); color: var(--color-text); font-size: var(--text-xs); line-height: var(--leading-snug); }
.example-ui .scene-chrome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface); }
.example-ui .scene-chrome-app { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.example-ui .scene-chrome-view { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-body { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.example-ui .scene-body:has(> .scene-panel:only-child) { align-content: stretch; }
.example-ui .scene-panel { display: grid; align-content: start; justify-items: start; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); }
.example-ui .scene-panel-quiet { border-color: var(--color-border-subtle); background: var(--color-surface); }
.example-ui .scene-panel-title { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-heading); }
.example-ui .scene-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); width: 100%; min-width: 0; padding-block: var(--space-1); }
.example-ui .scene-panel > .scene-row + .scene-row { border-top: var(--border-thin) solid var(--color-border-subtle); }
.example-ui .scene-meta { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-note { width: 100%; padding-top: var(--space-2); border-top: var(--border-thin) solid var(--color-border-subtle); color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.example-ui .scene-action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-8); padding-inline: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface-raised); color: var(--color-text); font-size: var(--text-xs); font-weight: 550; white-space: nowrap; }
.example-ui .scene-track { display: grid; gap: 0; width: 100%; }
.example-ui .scene-track-item { display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding-block: var(--space-2); }
.example-ui .scene-track-node { position: relative; justify-self: center; width: 9px; height: 9px; border: var(--border-thin) solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface-raised); }
.example-ui .scene-track-item + .scene-track-item .scene-track-node::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0; height: var(--space-4); border-left: var(--border-thin) solid var(--color-border-strong); }
.example-ui .scene-track-done .scene-track-node { border-color: var(--color-action); background: var(--color-action); }
.example-ui .scene-track-active .scene-track-node { border-width: 3px; border-color: var(--color-action); }
.example-ui .scene-track-pending .scene-track-node::before { border-left-style: dashed; }
.example-ui .scene-track-label { min-width: 0; overflow-wrap: anywhere; }
.example-ui .scene-track-pending .scene-track-label { color: var(--color-text-tertiary); }
.example-ui .scene-track-plain .scene-track-label { color: var(--color-text); }
.example-ui .scene-track-uniform .scene-track-node { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
.example-ui { min-height: 15rem; }

/* resolved values */
:root {
  --border-thin: 1px;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --leading-snug: 1.35;
  --radius-xs: 2px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-8: 2rem;
  --text-2xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --tracking-heading: -0.025em;
  --tracking-label: 0.06em;
}
```

## Weak vs stronger
- Weak: A vertical line passes through three account settings sections and makes them appear sequential even though users can edit them independently.
- Stronger: A connector is reserved for the actual multi-step verification flow, while independent settings rely on headings and spacing.

## Reporting rules
- Report only what the interface shows as observable evidence; phrase psychological or motivational effects as possible consequences.
- Returning no finding is a valid result when evidence is insufficient.