Neural Sync Active
Visual Perception
Registry Synced
Visual Perception
219 words
1 min read
Reading compass
Now · 🎯 Learning Objectives
Visual Perception
🎯 Learning Objectives
- Understand how the human visual system processes information
- Identify preattentive attributes (color, size, orientation, shape)
- Apply Gestalt principles to visualization design
- Design visualizations that leverage, not fight, visual perception
1.1 Intuition: Seeing Is Not Neutral
Before we design charts, we need to understand how people see. The visual system processes some information automatically (preattentively) and other information only with focused attention.
🔑 Key Insight: Good visualizations work with the visual system, making patterns immediately apparent. Bad visualizations fight it, requiring conscious effort.
1.2 Preattentive Attributes
Preattentive processing happens in < 200 milliseconds — before conscious attention. Attributes processed preattentively:
| Attribute | Example | Best For |
|---|---|---|
| Color hue | Red vs. Blue | Categorization |
| Color intensity | Bright vs. Dim | Gradients, magnitudes |
| Size | Large vs. Small | Quantitative values |
| Orientation | Vertical vs. Horizontal | Highlighting differences |
| Shape | Circle vs. Square | Categorization |
| Motion | Flashing vs. Static | Drawing attention |
| Spatial position | Left vs. Right | Grouping |
1.3 Gestalt Principles
| Principle | Description | Visualization Example |
|---|---|---|
| Proximity | Objects close together are perceived as a group | Scatter plot clusters |
| Similarity | Similar objects are grouped | Same-color bars in a chart |
| Continuity | Smooth lines are perceived as continuous | Line charts |
| Closure | We fill in missing information | Partially covered trends |
| Figure-ground | We distinguish foreground from background | Highlighting a data series |
1.4 Design Implications
- Use preattentive attributes to highlight what matters
- Limit to 1-2 attributes at a time (overloading confuses)
- Group related items visually (proximity + similarity)
- Ensure clear figure-ground separation Join Discord NextChart Types