Computer Science Education and EdTech
This research, conducted by a group of four students, aims to enhance novice programmers' understanding of programming concepts by visualizing notional machines. Existing visualizations have faced challenges in design trade-offs. The group developed and evaluated three designs, discussing goals, low-fidelity prototypes, and trade-offs. The goal is to create more accessible and effective visual representations of notional machines for novice programmers.
01
Design goals
Based on extensive background research on existing program visualization tools, such as Jeliot, Labster, BlueJ, Online Python tutor, and JGrasp, we identified key design goals for a potential tool catering to novice programmers. We focused on addressing the limitations observed in these tools and grouped our design goals into four categories. Firstly, we aimed to minimize information overload by presenting a manageable amount of information to learners at once. Secondly, we emphasized simplicity and familiarity in the user interface, utilizing high-level abstractions to enhance understanding. Thirdly, we aimed to maintain the frame of reference by displaying relevant code alongside visualizations. Lastly, we prioritized providing distinct visuals for individual components, ensuring clarity in animations and scalability of the designs.
02
Prototype
We designed three low-fidelity prototypes to visualize notional machines for novice programmers. Each prototype represents a different design approach, such as symbolic representation, program flow representation, and source code animation. In this presentation, we focus on the symbolic representation prototype, describing its features and trade-offs. All prototypes use the same source code, allowing for comparison and evaluation of the designs.
03
Result
Based on the key elements we identified, we conducted a comparison of each prototype to determine which one best facilitated student understanding of the notional machine.