Case study
Learning to Code Using AI: Generative User Interfaces
A design exploration of generative programming lessons, pairing focused code examples with contextual explanations and progressively revealed guidance.
Interface Design Exploration · AI-Assisted Programming Education
I explored how a generative interface could make programming lessons feel simpler. Learning a new concept is already demanding; the interface should make the next useful explanation easy to find.
Guidance Beside the Code
The designs place examples, explanations, and follow-up questions together. A course outline provides orientation, while highlighted code directs attention to the part being discussed.
- Focus: Explain a specific concept or line of code.
- Context: Keep guidance beside the example it refers to.
- Progression: Reveal the next step as the learner moves through the lesson.
An exploration of contextual guidance: explanations sit beside the relevant code instead of in a separate lesson view.
A More Focused Learning Flow
A second design reduces the interface to a vertical sequence of prompts, code, and feedback. It explores how the lesson might unfold around the learner's current task, with surrounding material kept visually quiet.
These are interface explorations for AI-assisted learning. The work focuses on how explanations appear, how attention moves through code, and how the learner progresses.
The more minimal direction concentrates attention on the current exercise and its explanation.