Unit
- Visual pathway: Light enters the eye through the cornea and lens, hitting the retina where photoreceptor cells (rods and cones) convert light into electrical signals. These signals travel via the optic nerve to the visual cortex in the brain, where pattern recognition begins.
- Foveal vs. peripheral vision: The fovea, a small central pit in the retina, is packed with cones for high-acuity color vision. Peripheral vision has more rods, sensitive to movement and low light but poor at detail. Data visualizations rely on foveal vision for reading labels and peripheral vision for grasping overall patterns.
- Bottom-up vs. top-down processing: Bottom-up processing is driven by sensory input (bright colors, motion), while top-down processing uses expectations and context. Effective visualizations align both: use pre-attentive features to guide attention bottom-up, and clear titles to support top-down interpretation.
- Parallel processing: The brain processes multiple visual features simultaneously, such as color, orientation, size, and motion. This allows viewers to detect patterns quickly. Designers should encode data using separable features (e.g., position and size) rather than integral ones (e.g., color and saturation) to avoid confusion.
- Change blindness: People often fail to notice large changes in a visual scene if their attention is focused elsewhere. In animated or interactive visualizations, use smooth transitions and explicit cues to highlight data updates or state changes.
- Saccades and fixations: Eyes move in rapid jumps called saccades, pausing at fixations for 200-300 milliseconds. Eye-tracking studies show that viewers scan visualizations in a loose Z or F pattern. Place key insights in the top-left area where fixations are longest.
- Color vision: Cones are sensitive to short (blue), medium (green), and long (red) wavelengths. The opponent-process theory explains why we see color pairs (red-green, blue-yellow). Avoid using red-green contrasts alone due to color blindness prevalence.
- Gestalt principles influence: The brain automatically groups elements by proximity, similarity, closure, and continuity. Leveraging these principles reduces cognitive effort and helps viewers perceive structures like clusters and trends without conscious analysis.
- Visual hierarchy: Size, contrast, and placement create a hierarchy that guides the viewer's eye to the most important information first. Larger elements and high contrast attract attention. Designers should assign the strongest visual weight to the most critical data points, using size, color intensity, or position to establish a clear order of importance.
- Working memory constraints: Humans can hold only about four chunks of information in working memory at once. Visualizations that present too many distinct categories, colors, or layers overwhelm cognitive capacity. Simplify by grouping related items, using consistent encoding, and providing interactive filters to let viewers explore details on demand.
- Attentional blink: When the brain processes a first target, it briefly misses a second target appearing within 200-500 milliseconds. In sequential visualizations or animations, avoid presenting critical information in rapid succession. Space out key points or use sustained highlights to ensure each is noticed.
Design Principle
Principle: Pre-Attentive Processing
Definition: Pre-attentive processing refers to the brain's ability to detect certain visual properties (color, orientation, size, motion) in under 200 milliseconds without focused attention. These features pop out and can be perceived in parallel across the entire visual field.
Application: In a scatter plot showing sales across regions, encode the highest-revenue region with a bright red circle and all others with gray. The red circle will be detected pre-attentively, drawing immediate attention. Limit pre-attentive highlights to one or two features per chart to avoid visual clutter and maintain the pop-out effect.
Quick Revision
- The visual pathway from retina to cortex processes light into patterns.
- Foveal vision reads details; peripheral vision detects overall patterns.
- Bottom-up and top-down processing both inform visualization design.
- Use separable features for encoding multiple data dimensions.
- Smooth transitions help overcome change blindness in animations.
- Place primary insights in the top-left scanning area.
- Avoid red-green contrasts to accommodate color blindness.
- Gestalt principles reduce cognitive load and enable fast grouping.