Skip to content

Multi-representational program visualization tool with synchronized code, memory, and metaphor views

Design · All designs
Evidence · 1 claim (1 for) · 1 study (1 associational), q2 · 0 of 1 report an effect size · 1 claim rests on one study

Description

A web-based visualization probe designed for the study, drawing on MER/DeFT and concreteness fading. The article states the authors "designed a visualization tool with multiple views that draws on MER/DeFT and concreteness fading to address limitations of existing program visualization tools." Its interface presents three synchronized panes — Code View with the active line highlighted, Memory View aligned with Python Tutor's representation, and Metaphor View using analogy-based depictions (house for scope, magician's table for while loops, relay race for linked lists) — with brushing and linking across views and step controls. It was refined across three formative feedback cycles with instructors, a visualization researcher, and nine teaching assistants.

Design Implications

Context

Requirements

  • Formative refinement for conceptual fidelity, usability, and alignment with common student misconceptions; synchronized execution across views

Constraints

  • The CS2 configuration steps through execution at function level rather than line by line, which participants criticized as undermining the tool's purpose

Target Learners

  • undergraduate students who have completed CS1 and CS2

Learning Goals

  • tracing, explaining, and extending code across scope, while loops, and linked lists

Claims

Examples

-

Key Sources

  • Naaz Sibia, Jessica Wen, Amber Richardson, Yashika Jain, Khushi Malik, Bogdan Simion, Carolina Nobre, Angela Zavaleta Bernuy, Andrew Petersen, and Michael Liut. 2026. Code as Anchor, Memory and Metaphor as Support: Learner Experiences with Multi-View Visualizations. ICER 2026 Vol. 1. https://doi.org/10.1145/3765964.3811662
Page metadata
Field Value
type design
id mr-triage-synchronized-code-memory-metaphor-tool
title Multi-representational program visualization tool with synchronized code, memory, and metaphor views
description A web-based visualization probe designed for the study, drawing on MER/DeFT and concreteness fading.
status review
generated by process:settle-candidates on 2026-10-10
trust unverified — no one has confirmed this page's content
sources 1 — naaz-sibia-jessica-wen-amber

Frontmatter is the page's machine-readable record — see the Schema & Guide.