Interactive Multimedia Learning for Vocational Electronics Education: Development, Validation, and Classroom Implementation

1. Introduction

The rapid acceleration of digital technologies has reshaped pedagogical practices across educational systems worldwide, including Technical and Vocational Education and Training (TVET) [1], [2]. As industries increasingly rely on automation, electronics, and digital technologies, vocational schools must equip learners not only with theoretical foundations but also with the practical competencies needed to meet contemporary workforce demands [3], [4], [5]. However, many TVET classrooms, particularly in developing regions, continue to rely on teacher-centered, textbook-oriented instructional models [6], [7], which often limit students’ active engagement and hinder conceptual understanding in technical subjects [8], [9].

In Indonesia, this challenge remains prominent within vocational electronics programs [10], [11]. Subjects such as Basic Electronics require mastery of abstract, interconnected concepts, including electronic components, coding systems, and fundamental electrical laws. Without interactive and context-rich instructional support, students frequently struggle to visualize component behavior, analyze circuit functions, and apply theoretical principles to practical scenarios. Preliminary observations during the Teaching Field Practice (PLK) at SMK Negeri 5 Padang confirmed that the learning activities were predominantly lecture-based, with minimal student interaction and limited use of digital media. This condition was reflected in semester assessment results, where a substantial proportion of Grade X students failed to meet the minimum competency threshold, indicating gaps in both motivation and conceptual mastery.

Interactive multimedia learning tools have been widely recognized as effective solutions to address such learning gaps. Multimedia elements, such as animations, simulations, visual illustrations, and interactive assessments, have been shown to enhance learner motivation, reduce cognitive load, and support deeper conceptual understanding, particularly in STEM-related fields [12]. Previous studies have demonstrated that interactive learning media can significantly improve student learning outcomes, engagement, and problem-solving skills within engineering and technical subjects [13], [14]. Despite this growing body of evidence, the adoption of interactive multimedia in Indonesian vocational schools remains relatively limited due to constraints in technological expertise, resource availability, and the lack of context-specific digital learning tools.

To respond to these challenges, this study focuses on the design and development of an interactive multimedia application for the Basic Electronics subject using Adobe Animate. This platform enables the integration of vector-based animations, text, audio, and interactive quizzes into a cohesive learning environment accessible across a range of digital devices. Guided by the 4D (Define, Design, Develop, Disseminate) development model [15], [16], the research aims to produce a learning media solution that is pedagogically sound, technologically feasible, and aligned with the competency-based orientation of the Kurikulum Merdeka implemented in Indonesian vocational schools.

Two research questions guide this study:

(1) How does the implementation of Adobe Animate–based interactive multimedia influence student motivation and engagement in Basic Electronics learning?

(2) To what extent is the developed media valid, practical, and effective in enhancing learning outcomes within a vocational electronics engineering context?

By addressing these questions, the study advances digital innovation in vocational education, offering an empirically validated model for integrating interactive multimedia into technical subjects. The findings are expected to strengthen the pedagogical foundation for technology-enhanced learning (TEL) in TVET and provide actionable insights for educators seeking to modernize instructional design in electronics engineering education.

2. Methods

This study employed the 4D development model, consisting of Define, Design, Develop, and Disseminate [16]. The selection of this model aligns with the pedagogical challenges highlighted in the Introduction, particularly the dominance of passive learning, the lack of interactive instructional tools, and the need for competency-oriented digital media in vocational electronics education. The 4D model provides a systematic, iterative structure for producing high-quality instructional media tailored to the learning characteristics of SMK students.

2.1. Research Context and Participants

The study was conducted at SMK Negeri 5 Padang, targeting Grade X students enrolled in the Audio Video Engineering (AVE) program and the Basic Electronics course. To ensure a comprehensive evaluation of the interactive learning media, the participant composition included various stakeholders involved in content validation, media evaluation, and practicality testing. As presented in Table 1, the study engaged two subject-matter experts who examined content accuracy and curricular relevance, two media experts who assessed interface quality and technical performance, and 30 students who served as end users to evaluate practicality, usability, and the overall learning experience. This distribution enabled a multidimensional assessment encompassing pedagogical validity, multimedia quality, and user-centered effectiveness.

Participant Group	Role in Study	Number
Subject-matter experts	Evaluated content accuracy and relevance	2
Media experts	Assessed multimedia design and technical quality	2
Students (Grade X, AVE)	Tested practicality and usability	30
Total		34

2.2. Development Model

2.2.1. Define Phase

The Define phase aimed to identify instructional needs and contextual challenges that must inform the media design. The analysis included curriculum review, student characteristics, material structure, and learning objectives.

1) Curriculum Analysis

A curriculum review was conducted for the Grade X Electronics Engineering program, which applies the Merdeka Curriculum. Classroom observations and interviews with electronics teachers revealed predominant reliance on conventional resources, textbooks, and static PowerPoint slides, resulting in limited student engagement. The ninth competency element, Active and Passive Electronic Components, lacked interactive and visual support, indicating the need for multimedia-based instructional enhancements.

2) Analysis of Student Characteristics

Student characteristics were examined to ensure media relevance and usability. Learners aged 16–17 generally exhibit emerging formal operational thinking according to Piaget’s developmental theory, yet with varying levels of abstraction and focus [17]. Observations identified tendencies toward distraction during conventional instruction, which were mitigated when visual and interactive resources were introduced. These insights informed the decision to incorporate animations, interactive elements, and navigable learning segments using Adobe Animate.

3) Material Analysis

A detailed analysis of the instructional content for Active and Passive Electronic Components was conducted. The study identified concept clusters, prerequisite knowledge, and potential sources of student misconceptions [18], [19]. This informed the structuring of media components, segmenting the material into conceptual explanations, animated demonstrations, and application exercises.

4) Analysis of Learning Objectives

The learning objectives specified in the Merdeka Curriculum were reviewed to ensure alignment with multimedia design. The objectives emphasize conceptual understanding, component identification, and analytical reasoning. These were mapped to multimedia features, including animations of component functions, embedded problem-solving tasks, and interactive quizzes for self-assessment [20], [21].

2.2.2. Design Phase

The Design phase focused on constructing the blueprint for multimedia development, including media selection, interface layout, and navigation flow.

1) Media Selection

Adobe Animate was selected for its ability to integrate vector-based animations, text, audio, and interactivity into a single environment. The software enables cross-platform export and supports the design of instructional sequences aligned with multimedia learning principles [20]. Its flexibility makes it suitable for delivering electronics concepts that require visualization of component behavior and circuit dynamics [19].

2) Preliminary Design

A storyboard and flowchart were created to outline the structure and navigation of the multimedia application. The storyboard consisted of 10 primary segments, including introductory pages, conceptual explanations, animated demonstrations of Ohm’s and Kirchhoff’s laws, and graded interactive quizzes. Navigation buttons were incorporated to support non-linear movement between sections, allowing learners to revisit content as needed. In addition, the flowchart, illustrated in Figure 2, mapped the sequence logic and decision points in the quiz module, including the adaptive feedback pathways. This structure aligns with recommendations in recent hypermedia design research, which emphasize precise sequencing and interactive branching to enhance learner engagement [18], [21].

2.2.3. Develop Phase

The development phase encompassed the production of the interactive multimedia based on the approved storyboard. Media and subject-matter experts validated the resulting prototype. Validators consisted of two university lecturers and two vocational teachers specializing in electronic engineering. Expert judgment focused on content accuracy, pedagogical appropriateness, technical quality, interface usability, and overall coherence. Revisions were made based on validator feedback to enhance clarity, instructional alignment, and functionality.

2.2.4. Disseminate Phase

The Disseminate phase included limited-scale implementation and evaluation of media practicality.

1) Data Collection Techniques

Data were collected using Likert-scale questionnaires [22] distributed to media experts, subject-matter experts, and Grade X students. The questionnaires measured perceptions of validity, usability, clarity, and practicality. The Likert scale was selected for its suitability in capturing subjective judgments and attitudinal responses.

2) Validity Analysis

Validator ratings were analyzed using percentage scores derived from the formula (1):

$\mathrm{Percentage}=\frac{\mathrm{Score}\mathrm{Obtained}}{\mathrm{Maximum}\mathrm{Score}}\text{× 100\%}$ (1)

Scores were classified into four validity categories: Very Valid (81–100%), Valid (61–80%), Less Valid (41–60%), and Invalid (≤40%). The analysis provided a quantitative basis for determining the feasibility of the multimedia product.

3) Practicality Analysis

Practicality testing was conducted with Grade X Electronics Engineering students using the same percentage formula. Practicality was categorized as Very Practical (81–100%), Practical (61–80%), Moderately Practical (41–60%), and Less Practical (≤40%). The results served to determine user acceptance and operational feasibility of the multimedia in classroom settings.

3. Results

This section presents the outcomes of the development process and evaluation procedures conducted through expert validation and student practicality testing. Before detailing the validation results, an overview of the final application interface is provided to illustrate the structure, appearance, and interactive features of the developed media.

3.1. Application Interface Overview

The interactive learning media, developed in Adobe Animate, features a structured, visually engaging interface designed to support self-paced exploration of Basic Electronics materials. The interface integrates animations, layered illustrations, interactive buttons, and quizzes to enhance students’ conceptual understanding. The following subsections describe the key components of the application interface.

The learning experience begins with the Start Page, as shown in Figure 3(a). This interface includes a personalized entry field where users input their names before selecting the START button. The entered name is subsequently displayed on the main menu as a customized greeting. To facilitate smooth navigation, the application provides a Button User Guide, illustrated in Figure 3(b). A pedagogical agent (avatar) explains the functions of key control buttons, including Next, Back, Home, and Exit. This feature supports user readiness and minimizes navigational difficulties.

After logging in, users are directed to the Main Menu, shown in Figure 4(a). This menu acts as the central hub, presenting the user’s name (e.g., “Halo, Lira…”) and providing access to five main features: Learning Outcomes & Objectives, Teaching Module, Material, Quiz, and Profile.

The educational content is structured hierarchically. Figure 4(b) displays the Competency Menu L OUT & L OBJ, where users can review the specific Learning Outcomes and Learning Objectives to understand the goals of the lesson. Furthermore, the application provides a separation between the teaching guide and the learning materials.

As shown in Figure 5(a), users may choose between Modul Ajar (Teaching Module) for guided instruction or Bahan Ajar (Teaching Materials) for direct access to content. The Material Interface, displayed in Figure 5(b), organizes content into three categories: Passive Electronic Components, Active Electronic Components, and Basic Electronics Law. Each category is represented with intuitive icons to support visual identification.

3.2. Expert Validation Results

Expert validation involved two subject-matter experts and two media experts who assessed the interactive learning media based on accuracy, relevance, clarity, interface design, navigation, and technical functionality. Data were analyzed using the percentage formula described in the methodology.

3.2.1. Content Expert Validation

The two content experts evaluated alignment with the curriculum, conceptual accuracy, clarity of explanations, and suitability for Grade X learners. The average validation score reached 92.5%, categorizing the media as “Very Valid.” High scores were primarily associated with the accuracy of component descriptions and the clarity of animated explanations.

3.2.2. Media Expert Validation

Media experts assessed layout consistency, color balance, typography, ease of navigation, animation fluidity, and interactivity. As shown in Table 2, the evaluation produced an average score of 89.3%, which is categorized as “Very Valid.” Minor suggestions for improvement included optimizing button placement and enhancing contrast on several slides, and these revisions were incorporated into the final version of the product.

Validator Group	Percentage Score	Validity Category
Content experts (n = 2)	92.5%	Very Valid
Media experts (n = 2)	89.3%	Very Valid
Overall Mean	90.9%	Very Valid

The combined results indicate that the media met the validity requirements for use in Basic Electronics instruction.

3.3. Student Practicality Test Results

The practicality test involved 30 Grade X Audio Video Engineering students who used the interactive learning media during classroom sessions. They evaluated four key aspects: ease of use, clarity of instructions, visual and multimedia appeal, and interactivity. As presented in Table 3, the overall practicality score reached 91.7%, placing the product in the “Very Practical” category.

Students reported that animations and structured visual sequences facilitated better comprehension of electronic concepts. They also highlighted the intuitive navigation system, which enabled them to explore the content independently without requiring continuous teacher assistance.

Aspect Evaluated	Percentage Score
Ease of use	93.0%
Visual and multimedia appeal	90.5%
Clarity of instructions	92.0%
Interactivity and engagement	91.0%
Overall Practicality	91.7%

The results indicate that the developed multimedia application is practically robust, highly accessible for students, and well-suited for integration into Basic Electronics learning activities.

4. Discussion

The purpose of this study was to design, develop, and evaluate an interactive learning media for Basic Electronics using the 4D development framework [15], [16]. The discussion integrates findings from expert validation and student practical testing, while considering the theoretical foundations of multimedia learning [12], [20], vocational education requirements [1]–[5], and empirical evidence from previous research on technology-enhanced learning [13], [14], [18], [19].

The high validity scores obtained from both content experts (92.5%) and media experts (89.3%) indicate that the learning media align well with curricular expectations and adhere to multimedia design principles. These results are consistent with prior studies demonstrating that structured digital materials improve content accuracy and instructional coherence when developed under systematic design models (e.g., 4D or ADDIE) [15], [16]. The strong content evaluation reflects precise alignment with the Merdeka Curriculum’s competency-based approach, suggesting that the integration of animations and layered illustrations helped clarify abstract concepts, such as electronic laws and component functions [18].

From a media perspective, the favorable assessment of interface quality, navigation flow, and visual composition reinforces the relevance of Mayer’s Cognitive Theory of Multimedia Learning, which emphasizes managing cognitive load through coherent layout and meaningful visual cues [12], [20]. The minor comments related to button placement and color contrast highlight the typical iterative refinement process expected in multimedia development and fall within acceptable design improvement cycles. Thus, the validation outcomes align with the broader literature, which shows that multimedia learning tools must balance content precision and interface usability to support learners in technical domains effectively [12], [20], [21].

The high practicality score (91.7%) suggests that students perceived the media as easy to use, engaging, and supportive of their understanding. This aligns with studies in vocational education showing that interactive, visually enriched media reduce misconceptions in electronics learning, particularly among learners aged 16–17, who benefit from contextualized visual representations [18], [19]. Student responses emphasizing improved clarity and navigation effectiveness underscore the importance of designing media that supports self-paced learning, an instructional need also highlighted in the Merdeka Curriculum [3].

Moreover, the positive perceptions of interactivity and visual appeal confirm earlier findings that animation-based materials can sustain attention, reduce abstraction, and enhance comprehension of technical processes [12], [20]. The integration of quizzes within the learning flow also aligns with research demonstrating the benefits of embedded assessment for reinforcing conceptual mastery in technical subjects [18], [19].

The results indicate that the developed media addresses the instructional challenges identified during the Define phase, particularly the low student achievement rates attributed to traditional lecture-based instruction. The interactive features and structured sequencing of materials directly address the recognized need for more engaging, student-centered learning resources. Similarly, the organization of content into Passive Components, Active Components, and Basic Electronics Laws reflects the hierarchical structuring recommended for competency-based electronics instruction [18], [19].

The strong performance in both expert validation and practicality testing suggests that the 4D development model effectively ensured systematic alignment between learning objectives, content structure, interface design, and learner characteristics. This is consistent with prior research affirming the suitability of the 4D framework for creating digital instructional tools in vocational and technical education contexts [15], [16].

The findings provide several pedagogical implications for classroom practice. First, integrating animated concept explanations can serve as a supplementary resource to support differentiated instruction, allowing learners with diverse readiness levels to revisit complex material at their own pace [12], [20]. Second, the personalized interface, enabled by student name input, illustrates how digital media can foster learner identity and engagement [18].

From a technological perspective, Adobe Animate demonstrates the feasibility of producing professional, interactive learning media with readily accessible tools. The modular structure of the application also enables the integration of additional topics into the Basic Electronics curriculum without altering the core interface framework. These insights contribute to the growing body of literature advocating for dynamic, scalable media solutions in vocational education [14], [18], [19].

Although the media demonstrated high levels of validity and practicality, several limitations should be considered. The evaluation involved a relatively small sample (n = 30) and was limited to a single school context, which may limit the generalizability of the findings [10], [11]. Additionally, the study focused on perceptual measures (validity and practicality) rather than direct learning outcomes; thus, the media’s effectiveness in improving achievement or long-term retention was not assessed. Technical testing was limited to functional evaluation and did not include stress testing across different devices or network conditions, potentially affecting usability in broader classroom implementations.

Future work may extend the evaluation by incorporating experimental or quasi-experimental designs to measure the media’s impact on learning performance. Further research could also examine how students interact with different types of animations or quizzes to identify which multimedia features most significantly influence learning outcomes. Scaling the deployment to multiple schools or vocational programs would help validate the media’s usability across diverse contexts. Additionally, integrating adaptive feedback mechanisms or gamified assessment elements could further enhance student engagement and personalization.

5. Conclusion

This study developed an interactive learning media for Basic Electronics using the 4D model and demonstrated that the final product met high standards of validity and practicality, as evidenced by expert evaluations and student responses. The strong validation results indicate that the media aligns well with curriculum requirements and effectively integrates multimedia principles to support conceptual understanding of active and passive electronic components. Student responses further confirmed that the application is easy to use, visually engaging, and pedagogically supportive, highlighting its potential to enhance classroom learning experiences.

The findings suggest that interactive multimedia can meaningfully address the instructional limitations observed in traditional lecture-based practices, particularly in vocational education settings where learners benefit from visualization and hands-on exploration. While the study was limited to a single institutional context, the development framework and design approach demonstrate strong potential for broader application and adaptation to other technical subjects.

Future research should explore the media’s impact on learning outcomes, knowledge transfer, and long-term retention, and evaluate its performance across diverse learning environments and delivery platforms. Continued refinement and expansion of the media may further strengthen its contribution to technology-enhanced learning and support ongoing efforts to modernize instructional practices within vocational education.

Declarations

Author Contributions

Lira Rahma Marzalius: Conceptualization, Methodology, Software, Investigation, Data Curation, Writing – Original Draft, Writing – Review & Editing. Ilmiyati Rahmy Jasril: Validation, Formal Analysis, Supervision, Writing – Review & Editing. All authors have read and approved the final version of this manuscript.

Acknowledgments

The authors extend their sincere appreciation to all parties who have supported and contributed to the development of this research. Special thanks are directed to the Faculty of Engineering, Universitas Negeri Padang, for providing the facilities and resources that enabled the successful implementation of this study.

Ethical Approval

This research was conducted in accordance with the institution's ethical standards and guidelines. Before data collection and user testing, ethical clearance was obtained from the Research Ethics Committee of Universitas Negeri Padang (UNP), Indonesia. The research involved no physical or psychological harm, and all participants were provided with clear information regarding the objectives, procedures, and their rights, including the right to withdraw at any time without penalty.

Informed Consent

Informed Consent was obtained from all participants, including expert validators and student respondents, before their involvement in the study. All data were collected anonymously and maintained in strict confidence to ensure privacy and integrity. The development and testing of the interactive learning media adhered to ethical standards concerning digital content, user interaction, and educational interventions.

Funding

This research did not receive any external funding or financial support. All expenses related to developing and testing the educational media application were personally funded.

Competing Interests

The author affirms that this research does not involve any conflicts of interest. All data and information used in this study are valid and accountable.

Generative AI and AI-Assisted Technologies Statement

While preparing this manuscript, the author(s) used ChatGPT and Quillbot to enhance its readability, language, and overall structure. Following these tools, the author(s) performed a comprehensive review and editing process to ensure the content's accuracy, integrity, and quality. The author(s) accept full responsibility for the content and conclusions presented in this publication.