visual-ux-hooks

• SKILL.mdcore · 5,092 bytes

# Visual, Spatial & Perceptual UX Hooks

Users perceive the spatial geometry of a page or screen in roughly 500 milliseconds (working heuristic, verify with your own data) before they read a single word. If the visual layout triggers **Choice Overload** or looks like a wall of uniform gray text, even the best copy will be skipped.

Use these 4 perceptual psychology principles to hook attention visually and spatially.

---

## 1. The Von Restorff Isolation Budget (Von Restorff 1933)

Hedwig von Restorff proved that when multiple homogeneous items are presented, the single item that differs in color or surrounding whitespace is noticed and remembered at higher rates (`M27`).

- **The 1-in-10 Visual Isolation Rule** states that if 5 elements on a screen are bold, colored, badged, or animated, **zero** elements are isolated. Keep 90% of your interface or document in calm neutral tones with generous whitespace, and spend your entire **Isolation Budget** on the single highest-impact element (e.g., the live interactive input box on a landing page, or the single anomalous row in a benchmark table).
- **Asymmetric Callout Anchors** work best in long-form writing or docs when you place at most one visually distinct block every 350-450 words (a 4-line code diff, a 3-row comparison table, or a single-sentence blockquote with a concrete metric).