#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