Complete the lesson quiz and earn 250 XP.
Extensive eye-tracking research conducted by Nielsen Norman Group demonstrates that web users rarely read text word-for-word; they scan screens rapidly along predictable trajectories:
Dominates text-dense editorial and documentation pages:
Dominates landing pages and marketing screens with low text density:
Human vision consists of foveal vision (sharp, high-acuity central focal area of ~2 degrees) and peripheral vision (wide, low-resolution detection of movement, shape, and contrast):
To guide a user's foveal gaze systematically through a complex workflow, designers establish visual anchors:
Visual entropy occurs when an interface uses arbitrary spacing values (e.g., 7px margin, 13px padding, 21px gutter). The resulting layout feels subtly disjointed and unaligned.
Modern digital product design standardizes all dimensions, padding, margins, and component heights on multiples of 8 pixels (8, 16, 24, 32, 40, 48, 64px):
An 8pt grid automates developer handoff and guarantees mathematical alignment across screens.
Contrast is the primary tool for communicating visual hierarchy. In practice, contrast is applied across multiple simultaneous dimensions:
If every button on a screen is styled as a primary high-contrast button, nothing stands out, and user conversion plummets.
While the baseline goal of UX is to eliminate unnecessary friction, intentional friction is an indispensable safety mechanism for high-risk operations:
If deleting an entire customer database or transferring $50,000 required only a single unconfirmed click, catastrophic user errors would multiply.
Visual hierarchy must gracefully re-orchestrate itself across diverse display viewports:
Designers maintain visual cohesion across breakpoints by preserving typography scales, color tokens, and consistent component padding.