Structured code reveal guides programmers to understand code better
Structure-Aware Rendering: How Code Reveal Shapes Programmers' Visual Attention
Human-Computer Interaction
Summary
People read and understand code in a selective and non-linear way, often focusing on meaningful chunks rather than just line-by-line text. The authors introduce a new way to show code gradually by revealing its logical parts first, making it easier to grasp the overall meaning before seeing every detail. They ran a study tracking where programmers look on the screen and found this method helps them focus more on important parts and understand the code structure better. They also provide the resulting data and a demo for others to explore.
What this means in practice
- •For software developers: Improve code reading interfaces to present generated code in meaningful chunks that help programmers understand structure first.
- •For user interface designers: Design programming tools’ code display to guide visual attention toward semantic units, enhancing high-level code comprehension.
Authors
Xiaotian Su, Jan Brasser, David Robert Reich, Lena A. Jäger, April Yi Wang
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.