In the early years of systems and computer science programs, programming is the pillar of computational thinking and solution design because it requires abstracting, modeling, and automating processes with logical rigor—for example, linking syntax and semantics, tracing program state [variables and conditions], mastering control flow [conditionals and loops], understanding scope and typing, and understanding debugging and error reading [1]. Learning these skills, together with others such as translating problems into algorithms, understanding that the computer follows literal instructions, and reconciling a new syntax with the logic of flow, can be challenging [2].

In this sense, variables, control structures, functions/methods, input/output, and initial debugging form the foundation of computing education, and the way these topics are taught [activities, assessments, and resources] shapes what students will be able to learn later [1]. Thus, seeing execution and tracing how variables change at each step is especially useful for understanding control transitions and, at the same time, for facilitating problem solving [3].

Students often form incomplete mental models of these concepts [what values variables hold and when they change], which leads to typical errors in conditionals and loops. In addition, feedback in some cases tends to arrive as cryptic compiler messages, increasing frustration [2]. Hence, the need to use support that makes the flow and the step-by-step execution of what they are solving visible. For this reason, it is important to employ scaffolds and visualizations that make execution visible and help build correct mental models from the first years of the program [3][4].

A mental model is understood as the internal, functional representation that the student constructs of the “machine” that executes a program, that is, how the instructions are evaluated, how control flows, and how the variables change. A correct mental model is consistent with the semantics of the language and makes it possible to predict and explain the state of the program step by step in new cases. In contrast, an incomplete or incorrect mental model contains gaps or faulty rules. In this sense, students learn better when their models are explicitly aligned with a clear structure and when recurrent misconceptions are corrected [4][5].

Building on this foundation, we propose an Information Visualization project to observe what happens during a program’s execution—that is, which instructions run, which path the flow takes, how variables change, and how to turn those execution data into useful information and, ultimately, knowledge [6][7]. Visualization requires representing and presenting data in diverse forms to leverage visual perception and generate knowledge, and sets as a goal the design of an educational tool that incorporates these principles to improve the learning of structured programming [8].

In practical terms, visualizing execution serves several functions that help teach students more effectively: explain [tell the “story” of the code step by step], simplify [remove distractors and make the essentials evident], compare [contrast execution paths or parameter effects], and explore [try alternatives and see consequences instantly]. Empirical evidence indicates that visualizations and step-by-step traces have been associated with better understanding of basic programming concepts and with the construction of more stable mental models, especially in early stages. Moreover, interactive tools facilitate this, which helps explain why “seeing” the flow and state speeds the move from data to understanding [3][6][7].

Among the studies reporting how visualization helps improve learning is the work [9], which, in astrophysics, implemented an interactive interface based on qualitative reasoning to represent complex phenomena; the aim was for users to observe relationships and behaviors that are difficult to infer from formulas or text alone. In a different domain [10] implemented the visualization of an affective behavior through mythological narrative, exploring how a cognitive-affective model can be represented in a comprehensible way, placing the observer before internal processes that usually remain hidden.

On the other hand, research has examined how the design of visual elements and icons can strengthen the connection with people less familiar with technology [for example, older adults], thus functioning as a bridge between abstract concepts and concrete actions [11]. In parallel, information-visualization systems have been developed to present institutional academic data clearly to detect patterns and potential issues: a web system to analyze performance in Teaching-Learning Units and a project to present academic statistics with admissions criteria are examples of how graphical representation helps to understand complex datasets and make informed decisions [12][13].

Closer to our objective, the work on virtual microworlds by Laureano-Cruces et al. [14] proposes visualizing abstract concepts of structured programming through scenarios inspired by everyday life and intended to be integrated into intelligent tutoring systems. This line is particularly relevant because it suggests that narrowing a pedagogical domain [objects, properties, and events] and dynamically representing control flow can help novice students build more stable mental models. This project situates itself in that tradition and extends it with an implementation focused on control structures [sequence, decision, and loops], incorporating a simulation interface that allows parameters to be configured and, step by step, shows which branch executes, how many iterations occur, and how the state changes—with the explicit aim of supporting early understanding in structured programming.

Building on this background, we propose a microworld implemented as a simulation interface that operationalizes these ideas into tasks students can manipulate. This microworld serves as support for first-year students in computer systems engineering, computer science, or related fields. Unlike prior work, here we explicitly bound the domain [objects, properties, and events] to control structures and aligned the visualization with clear instructional actions [set parameters, predict behavior, observe step-by-step execution, and verify the result].

This microworld integrates a “field” in which objects, properties, and events are clearly defined; this field is deliberately limited to the functioning of control structures [sequence, simple and multiple selection, and loops], so that students interact only with the conceptual elements that matter for learning control flow and program state [14]. Finally, the “objects” act as a bridge between theory and execution, since they display behavior visibly and respond to the program’s decisions and loops; thus, as the flow advances, the object moves and “shows” the consequence of the condition or the counter.

On this basis, the microworld presented covers the following control structures: Sequential—shows the ordered execution of actions “one after another,” as the object travels across the map from bottom to top and visually activates each instruction when it is executed, making the order and the top-to-bottom flow of the code [start-end] evident; Simple selection—the student sets the logical condition [true/false] and the object takes the corresponding branch, with the option to adjust parameters and actions associated with each case, turning “if/else” into a step-by-step observable experience; Multiple selection [when there are more than two options]—the focus is on the selector [the value of an enumerated type], where the student defines that value and the case-specific actions, including the default path when there is no match; the branching and the fallback to the default become visible in the object’s trajectory.

Unlike algorithm visualizers that show complete executions or data structures, and block-based environments that replace syntax with graphical pieces, this microworld intentionally narrows the domain to CS1 control structures [sequence, selection, and loops] and makes them observable and manipulable without textual programming, so that students can adjust to didactic parameters [condition, selector, counter] and observe step-by-step transitions through simple metaphors that externalize the state.

For loops, three behaviors are distinguished. In an arithmetic progression, the finite nature of the loop is emphasized: an N and a mode are set [increment/decrement with a constant step], and the object traces a cyclic movement [clockwise or counterclockwise, depending on the mode] that marks each iteration upon returning to the starting point. In the while-repetition structure, entry to the loop depends on evaluating a logical condition at the beginning of each pass; the object pauses to “ask” whether to continue or stop, so the student clearly sees when the condition allows continuation and when it does not. Finally, in repeat-until, at least one iteration is guaranteed before evaluation, keeping parameters and movement similar to the “while” but with the decision at the end of the cycle, which allows both repetition patterns to be contrasted in practice. In all cases, the object serves as a bridge between logic and execution: its movement, color changes, and evaluation pauses translate the abstract flow into clear signals about state and control transitions that students can follow at a glance.

Finally, this tool is grounded in Vygotsky’s pedagogical theory, in which the tool functions as a scaffold between the student’s prior learning and new concepts. Scaffolding is understood as the set of temporary supports offered within the Zone of Proximal Development [ZPD] so that the student can carry out tasks they are not yet able to solve independently and that, with appropriate guidance, are progressively internalized [15]. In design terms, our tool incorporates classical scaffolding principles by making the control flow and state visible as a sequence for predicting, observing, and explaining, and by allowing supports to fade as the student learns.

Accordingly, the central purpose is to design an educational tool to improve the learning experience in structured programming by making visible what is usually abstract during a program’s execution. This tool is based on visualization to transform execution data into information and knowledge, and thereby facilitate the learning of basic structures [sequence, decision, loops] in introductory courses.

The microworld developed in this article demonstrates that it is possible to visually represent traditionally abstract concepts in structured programming, provided that elements and techniques that stimulate user perception are combined (simple shapes/colors, object trajectories, recognizable actions). This strategy not only makes the semantics of control structures visible but also enables real-time exploration and verification practices.

The modular architecture, grid-based array, and timed rendering loop constitute a “technical scaffold” that enables step-by-step observation of execution and student manipulation of parameters. These decisions translate code logic into clear, reproducible visual cues, fostering early understanding and confidence when entering the world of structured programming.

From a pedagogical perspective, information visualization acts as a mediator between perception and reasoning, as it reduces the inferences students must make and offers a concrete basis for thinking. When visual elements maintain a stable correspondence among shape, color, position, and movement, the semantic anchoring of abstract concepts is strengthened. Likewise, integrating common actions such as walking, running, and hitting adds a layer of meaning close to everyday experience, making it easier to remember rules and supporting the construction of mental models.

Another point worth highlighting is that Java—a high-level language applied to didactic, low-complexity scenarios—together with the combination of timers, a clear class model, and a well-defined internal structure, is sufficient to achieve a smooth and formative visual experience.

As a future line of work, it is advisable to apply the project to a group of students in order to obtain empirical support for its functionality; this would increase its reliability and validity as a scaffolding tool for novice programming students. Likewise, it is important to consider that this tool addresses a specific set of structures (sequence, simple/multiple selection, and loops) without nesting or combined cases, and it does not cover other key aspects of execution (e.g., memory, scope, method calls/recursion, error handling, or concurrency), so it cannot be generalized to other contexts.

On the other hand, the selected visual metaphors and actions (walking, running, hitting), together with the 15 × 15 grid and the timed rendering, prioritize clarity over realism; however, they may not be universal across different cultural contexts nor fully accessible (e.g., color blindness, screen readers). Finally, this tool, in accordance with learning styles, can be integrated as part of an Intelligent Tutoring System, supporting the teaching-learning process.

This work represents the research conducted by Orlando Martín Pérez-Hernández to obtain a Bachelor’s degree in Computer Engineering from Universidad Autónoma Metropolitana-Azcapotzalco. It is also part of the divisional project, “Design of Intelligent Interfaces for Simulating the Behavior of Living or Animate Organisms,” from the same University.