Chapter 14: Visualization Options
Highlighting style affects speed and error rate.
The goal is to make the active item unambiguous without creating distraction. Some users benefit from bold, high-contrast cues, while others find excessive animation disruptive.
Visual options
- Borders / outlines
- Color changes
- Scale / zoom
- Animation
- Opacity dimming
Recommendations by need
- Low vision: Thick borders, high contrast, mild animation
- Cognitive load: Simple highlighting, avoid animation
- Advanced users: Minimal highlighting, thin borders
Demo: Border Width
🎮 Compare thin vs thick borders for visibility.
Thin (2px)
Thick (8px)
Demo: Scale
🎮 Notice how a larger scale draws attention.
Demo: Moving Scan Line
🎮 A moving line sweeps through the focused cell at the scan rate.