Structure-Aware Rendering: How Code Reveal Shapes Programmers' Visual Attention

2026-09-21

AI Summary

研究通过引入结构化渲染方法，按语法层次逐步展示代码，以改善程序员的阅读和理解方式，并通过眼动实验验证了该方法的有效性。

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.

Problem

• code rendering
• programmers' reading behavior
• visual attention

Innovation

• structured rendering
• visual attention
• code reading behavior
• syntactic hierarchy