Structure-Aware Rendering: How Code Reveal Shapes Programmers'Visual Attention
TL;DR
The findings show that rendering alters visual attention and reading behavior: dynamic rendering induces fewer but longer fixations and more sustained focus, while structured rendering further guides attention toward semantically meaningful units and supports high-level understanding.
Abstract
AI coding interfaces present generated code either all at once or token-by-token. These rendering strategies reflect model generation rather than how programmers actually read code: selectively, non-linearly, and guided by the structure. We argue that code rendering is a first-class interaction primitive that shapes how programmers read and understand code. To explore this design space, we introduce structured rendering, a technique that reveals code in semantically meaningful chunks derived from its syntactic hierarchy, exposing high-level structure before low-level details. To isolate rendering effects on visual attention, we conducted an eye-tracking study with 53 participants comparing static, character-based, and structured rendering. Our findings show that rendering alters visual attention and reading behavior: dynamic rendering induces fewer but longer fixations and more sustained focus, while structured rendering further guides attention toward semantically meaningful units and supports high-level understanding. We release the anonymized dataset with an interactive demo (https://codegaze.vercel.app/) to support future research.
