Eye + Legs
Seeing is directional attention. The eye can focus or scan, fixate or saccade, but it cannot see everything simultaneously. Visual interfaces exploit this limitation and capability: contrast guides attention, hierarchy structures scanning, animation captures fixation. What users see depends on what design makes visible and what attracts their limited visual attention. The interface is not what exists on screen but what users actually perceive. Invisible elements might as well not exist. Visible but unnoticed elements waste screen space. Design is making the right things seeable at the right moments.
Seeing is selective. The visual field contains more information than conscious attention can process. The eye sees peripherally but processes centrally. Users look at screens but see only what attention highlights. Design must account for this selectivity.
High-contrast elements attract attention. Bright colors against muted backgrounds. Large text among small. Moving elements in static fields. These grab attention involuntarily. But attention-grabbing is zero-sum—highlighting everything highlights nothing. Strategic contrast guides attention to important elements while leaving less-critical content visible but unemphasized.
The designer controls what's seeable but cannot control what's seen. Users bring their own attention patterns, scanning habits, and cultural reading directions. The design can influence but not command visual attention. Making something visible is necessary but insufficient for it being seen.
Eyes don't scan randomly but follow patterns: F-pattern for text-heavy pages, Z-pattern for balanced layouts, gutenberg diagram prioritizing top-left. These patterns are learned from reading cultures, not innate, but they're consistent enough to inform layout decisions.
Placing critical information where eyes naturally scan increases visibility. Top-left for Western readers gets seen first. Bottom-right gets seen late or not at all. The layout can work with scanning patterns (placing primary content in high-attention zones) or fight them (placing critical content where eyes don't naturally go).
But patterns are tendencies, not laws. Strong visual elements can override scanning defaults. A bright button in bottom-right can capture attention despite being in low-scan zone. The hierarchy should use scanning patterns as baseline, not constraint.
Seeing depends on contrast between figure (content) and ground (background). Clear figure-ground relationships make content seeable. Ambiguous relationships create visual confusion where neither content nor background dominates.
Sufficient contrast between figure and ground is accessibility requirement—minimum 4.5:1 ratio for normal text, 3:1 for large text. But contrast alone doesn't guarantee seeable content. The contrast must be consistent, the boundaries clear, the relationship unambiguous.
Some designs deliberately blur figure-ground relationships for aesthetic effect. Subtle gradients, low-contrast color schemes, overlapping elements. These can create sophisticated visual effects but sacrifice seeability. The trade-off should be conscious: aesthetic over clarity, or clarity over aesthetic.
Movement attracts visual attention involuntarily. The animated element in static interface captures attention regardless of user intent. This makes animation powerful but dangerous—powerful for directing attention, dangerous for creating distraction.
Purposeful animation guides attention: transition animations show state changes, loading indicators communicate progress, micro-interactions confirm actions. These make system state seeable through motion.
Gratuitous animation distracts from content. The decorative animation that runs continuously. The transition that's flashy but meaningless. The effect that draws attention away from information. Motion should serve seeability, not undermine it.
Hierarchy makes complex information seeable by establishing importance relationships. Large headlines over small body text. Bold weights over regular. Primary actions over secondary. The size, weight, and contrast differences create scannable structure.
Without hierarchy, everything competes equally for attention. The wall of uniform text is hard to scan. The interface where all buttons are equal size and color provides no guidance. Hierarchy reduces cognitive load by pre-organizing information visually.
But hierarchy requires restraint. Too many hierarchy levels create confusion—is this third-level or fourth-level text? Excessive contrast makes everything seem important. The effective hierarchy uses few levels (typically 3-5) with clear visual differences between them.
Color makes elements distinguishable. Red error messages, green success states, blue links—color carries semantic meaning. But color vision varies among users. Pure color-coding creates seeability problems for color-blind users.
Accessible design doesn't rely solely on color to convey meaning. Icons supplement color-coded states. Patterns differentiate chart elements. Position indicates status. The color enhances seeability but doesn't solely determine it.
Color also has cultural associations that affect perception. Red means stop in some cultures, celebration in others. The designer should either leverage cultural color meanings or override them explicitly through context and education.
Reading is sequential processing of text. Scanning is rapid assessment for relevant information. Most screen interaction is scanning, not reading. Users scan to decide if content merits reading.
Making content scannable differs from making it readable. Scannable content has clear structure, predictable patterns, visual anchors. Readable content has appropriate line length, comfortable leading, suitable contrast. Both matter but serve different user needs.
The design should support both: clear structure for scanning, good typography for reading. Headlines and section breaks aid scanning. Paragraph spacing and line height aid reading. Users scan to find relevant sections, then switch to reading mode for content consumption.
Much content is invisibly present—on screen but unseen. Content below the fold. Text in collapsed sections. Information hidden in tooltips. These are seeable if accessed but actually unseen during typical use.
Analytics reveal what's truly seen versus what's merely visible. Heat maps show where attention concentrates. Scroll depth shows what content is actually reached. The invisible content might be working (users find it when needed) or wasted (users never discover it exists).
Progressive disclosure balances comprehensive information with immediate seeability. Primary information is immediately visible. Secondary information is accessible but initially hidden. Tertiary information requires deliberate seeking. The layering matches content importance to visibility.
What's seen depends on context. The same element appears different against different backgrounds. The size perception changes based on surrounding elements. The legibility varies with lighting conditions.
Designing for seeability requires considering context: screen brightness, ambient light, viewing distance, device size. The color scheme that works in dim indoor lighting fails in bright outdoor light. The text size appropriate for desktop is too small for mobile at arm's length.
Responsive design should respond to perceptual context, not just screen dimensions. Dark mode for low-light conditions. Larger touch targets for mobile. Higher contrast for outdoor viewing. The design adapts to support seeability across varying contexts.
User attention is finite resource. Every element competes for limited attention. The design that respects attention economy uses visual weight proportional to importance. Critical elements justify strong visual treatment. Minor elements get minimal treatment.
Attention overload creates banner blindness—users learn to ignore visually aggressive elements. The popup ad, the flashing banner, the auto-playing video—all trained users to look away. Excessive visual prominence backfires by triggering learned avoidance.
Sustainable attention use means making important things seeable without exhausting attention on noise. The quiet interface that highlights selectively maintains user engagement. The loud interface that highlights everything trains users to ignore visual cues.