---
title: "Perception & Visual Hierarchy"
source: "/reference/perception-visual-hierarchy"
description: "Rules for making visual relationships, priority, state, and interaction meaning legible before the user has to read every detail."
---
# Perception & Visual Hierarchy

Rules for making visual relationships, priority, state, and interaction meaning legible before the user has to read every detail.

> Rules for making visual relationships, priority, state, and interaction meaning legible before the user has to read every detail.

Interfaces are first encountered as visual structures. People notice grouping, contrast, alignment, repetition, boundaries, motion, and relative emphasis before they build a complete semantic understanding of the page.

This category gives Layr a way to inspect whether the rendered interface communicates the same relationships that the product and DOM actually contain. It focuses on visible evidence: what appears grouped, what attracts attention, what looks interactive, what appears selected, and what feels more important than its neighbors.

The objective is not to make every product minimal or visually dramatic. The objective is to make visual signals truthful. A dense operations dashboard can satisfy these rules. A beautiful landing page can violate them if its hierarchy misrepresents priority or hides state.

## Principles in this category

- [Aesthetic-Usability Effect](/__layr/pages/reference/aesthetic-usability-effect.md) — People often approach a polished interface with more patience and a stronger initial expectation that it will be easy to use.
- [Law of Common Region](/__layr/pages/reference/law-of-common-region.md) — Elements enclosed by the same visible boundary are usually interpreted as belonging together.
- [Law of Proximity](/__layr/pages/reference/law-of-proximity.md) — Items placed near one another are commonly read as a group, even when no border connects them.
- [Law of Prägnanz](/__layr/pages/reference/law-of-pragnanz.md) — When a visual structure is ambiguous, people tend to resolve it into the simplest coherent interpretation available.
- [Law of Similarity](/__layr/pages/reference/law-of-similarity.md) — Elements that look alike are likely to be interpreted as sharing a role, state, or category.
- [Law of Uniform Connectedness](/__layr/pages/reference/law-of-uniform-connectedness.md) — Visible connections make elements feel more strongly related than elements that merely share space.
- [Selective Attention](/__layr/pages/reference/selective-attention.md) — People allocate attention toward a limited subset of what is visible, usually guided by their current goal, expectations, and salient cues.
- [Von Restorff Effect](/__layr/pages/reference/von-restorff-effect.md) — A distinctive item within a group is more likely to attract attention and be remembered than neighboring items that look alike.

## Category model

Layr should read visual structure as a language. Spacing communicates grouping. Similarity communicates shared meaning. Boundaries communicate ownership. Connection communicates relationship. Contrast communicates priority. Motion communicates change or urgency. When these signals agree, users can understand a screen quickly. When they conflict, users must slow down and resolve the contradiction through reading or trial and error.

The category is strongest when the agent can compare what the interface *looks like it means* with what the product *actually means*. That comparison turns a subjective design review into an evidence-based one. A border is not simply attractive or unattractive; it either communicates the correct scope or it does not. A badge is not merely bright; its salience either matches the importance of the state or it does not.

### Agent evidence hierarchy

Prefer evidence in this order when available:

1. Rendered geometry and computed styles.
2. Component semantics, variants, and tokens.
3. DOM hierarchy and accessible names/roles.
4. State transitions and event handlers.
5. Product/task context.
6. Aesthetic judgment only when the previous evidence explains why appearance affects comprehension.

This hierarchy helps Layr avoid turning personal taste into findings.

## Category review questions

- Can a user identify the page's primary structure before reading every label?
- Do spacing, boundaries, connection, and similarity reflect real semantic relationships?
- Does the strongest visual emphasis belong to the most important current information or action?
- Are interactive, selected, disabled, warning, and informational states visually distinguishable?
- Does the hierarchy survive responsive reflow, loading, error, and empty states?

## How agents should use this file

Treat these rules as review criteria, not as automatic violations. A finding is valid only when the interface provides observable evidence that the principle applies and that the current implementation creates a meaningful usability, comprehension, accessibility, or interaction cost.

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

```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
```

A clean interface can legitimately produce zero findings.

## Agent routing hints

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.