Design and Evaluation of Interactive Matrix-Based Algorithm Visualizations in Introductory Programming: A Student Perception Study

Algorithm development and its implementation by novice programmers in their first or second year of programming education can be difficult to teach because they often involve two-dimensional data structures, such as matrices. The use of these data structures requires both the ability to use nested iterations and the ability to coordinate row and column indices correctly. While algorithm visualization is commonly suggested as a method for externalizing intermediate program states and enhancing the understanding of algorithms, empirical studies have primarily focused on one-dimensional structures, such as sorting vectors using various algorithms. This study investigates the pedagogical potential of theory-informed, interactive, matrix-based algorithm visualizations implemented with the MatrixVis JavaScript library, a reusable web-based framework that provides step-by-step execution, visual highlighting of matrix operations, and synchronized source code display. The visualizations were demonstrated during introductory programming lectures and evaluated using a structured questionnaire (N = 48). Students evaluated the visualizations positively. The perceived usefulness of animations for understanding algorithms received a mean rating of M = 4.56, while the clarity of the visual presentation (M = 4.58), step-by-step execution (M = 4.54), and synchronized code highlighting (M = 4.69) were rated as particularly supportive. Visualizations of aggregation algorithms were perceived as the clearest (M = 4.58), whereas visualizations of structural transformations were slightly more difficult to follow (M = 4.08). These findings suggest that theoretically grounded, interactive visualizations of algorithms on matrices can provide meaningful pedagogical support in introductory programming education.