Animation Effectiveness for E-Learning with Progressive Web App Approach: a Narrative Review

  • Authors

    • Hadi Wijaya
    • Rabab Alayham Abbas
    • . .
  • Animation in Learning, E-Learning, Progressive Web App, Narrative Review, ALETRIA,
  • Understanding the content of a subject is the most fundamental thing a student should do to acquire the skills and knowledge. Animation is one way to provide an interesting way of learning. ALETRIA project is the reason to support the students for use animation methods that developed in novel e-learning concept. As a first step, the study of animation and e-learning development became the basis of this narrative literature. Terms of search that used in this paper is animation for learning, engagement and learner’s motivation. E-learning development with Progressive Web Apps (PWAs) were excluded from the search terms. 29 papers were selected for review as they are relevant to the criteria. The combined results of these papers recommend that there is reason to confident that the development of e-learning animations with the PWA approach might be effective to use.


  • References

    1. [1] S. K. Chhetri, "E-learning in neurology education: Principles, opportunities and challenges in combating neurophobia," Journal of Clinical Neuroscience, 44, 80-83, 2017.

      [2] J.-C. Hong, M.-P. Lin, M.-Y. Hwang, K.-H. Tai, and Y.-C. Kuo, "Comparing animated and static modes in educational gameplay on user interest, performance and gameplay anxiety," Computers and Education, 88, 109-118, 2015.

      [3] S. Berney and M. Bétrancourt, "Does animation enhance learning? A meta-analysis," Computers and Education, 101, 150-167, 2016.

      [4] Statista, Mobile internet usage worldwide - Statistics and Facts. 2017,

      [5] J. L. Bele and D. Bele, "User and mobile-friendly learning management system design," Proceedings of the IEEE XXV International Conference on Information, Communication and Automation Technologies, pp. 1-6, 2015.

      [6] R. S. Mishra, "Progressive WEBAPP: Review," International Research Journal of Engineering and Technology, 3, 3032-3038, 2016.

      [7] A. Biørn-Hansen, T.-M. Grønli, and T. A. Majchrzak, "Progressive Web Apps: The possible web-native unifier for mobile development," Proceedings of the 13th International Conference on Web Information Systems and Technologies, pp. 344-351, 2017.

      [8] N. Zheng, S. Tian, and Y. Chen, "Online learning management system," pp. 293-299, 2015.

      [9] S. K. Sharma, J. K. Chandel, and S. M. Govindaluri, "Students acceptance and satisfaction of learning through course websites," Education, Business and Society: Contemporary Middle Eastern Issues, 7(2-3), 152-166, 2013.

      [10] G. University, Systematic literature reviews for education. 2018,

      [11] S. Chauhan, "A meta-analysis of the impact of technology on learning effectiveness of elementary students," Computers and Education, 105, 14-30, 2017.

      [12] N. Fang and Y. Guo, "Interactive computer simulation and animation for improving student learning of particle kinetics," Journal of Computer Assisted Learning, 32, 443-455, 2016.

      [13] J. M. Luzón and E. Letón, "Use of animated text to improve the learning of basic mathematics," Computers and Education, 88, 119-128, 2015.

      [14] B. Park, S. Münzer, T. Seufert, and R. Brünken, "The role of spatial ability when fostering mental animation in multimedia learning: An ATI-study," Computers in Human Behavior, 64, 497-506, 2016.

      [15] R. Ploetzner and R. Lowe, "Simultaneously presented animations facilitate the learning of higher-order relationships," Computers in Human Behavior, 34, 12-22, 2014.

      [16] R. Ploetzner and B. Fillisch, "Not the silver bullet: Learner-generated drawings make it difficult to understand broader spatiotemporal structures in complex animations," Learning and Instruction, 47, 13-24, 2017.

      [17] B. Brucker, A.-C. Ehlis, F. B. Häußinger, A. J. Fallgatter, and P. Gerjets, "Watching corresponding gestures facilitates learning with animations by activating human mirror-neurons: An fNIRS study," Learning and Instruction, 36, 27-37, 2015.

      [18] S. M. Al-Balushi, A. S. Al-Musawi, A. K. Ambusaidi, and F. H. Al-Hajri, "The effectiveness of interacting with scientific animations in chemistry using mobile devices on grade 12 students’ spatial ability and scientific reasoning skills," Journal of Science Education and Technology, 26, 70-81, 2016.

      [19] J.-M. Boucheix and C. Forestier, "Reducing the transience effect of animations does not (always) lead to better performance in children learning a complex hand procedure," Computers in Human Behavior, 69, 358-370, 2017.

      [20] C.-C. Chiou, L.-C. Tien, and L.-T. Lee, "Effects on learning of multimedia animation combined with multidimensional concept maps," Computers and Education, 80, 211-223, 2015.

      [21] N. Fang and M. Tajvidi, "The effects of computer simulation and animation (CSA) on students' cognitive processes: A comparative case study in an undergraduate engineering course," Journal of Computer Assisted Learning, 34, 71-83, 2018.

      [22] A. M. Johnson, G. Ozogul, and M. Reisslein, "Supporting multimedia learning with visual signalling and animated pedagogical agent: moderating effects of prior knowledge," Journal of Computer Assisted Learning, 31, 97-115, 2015.

      [23] A. Karacop and K. Doymus, "Effects of Jigsaw cooperative learning and animation techniques on students’ understanding of chemical bonding and their conceptions of the particulate nature of matter," Journal of Science Education and Technology, 22, 186-203, 2012.

      [24] S. Türkay, "The effects of whiteboard animations on retention and subjective experiences when learning advanced physics topics," Computers and Education, 98, 102-114, 2016.

      [25] H. Wang, C. Saunders, and H. Zheng, "An animated tutoring system for interactive learning of nonlinear data structures," Innovation in Teaching and Learning in Information and Computer Sciences, 12, 39-48, 2015.

      [26] L. S. Post, T. van Gog, F. Paas, and R. A. Zwaan, "Effects of simultaneously observing and making gestures while studying grammar animations on cognitive load and learning," Computers in Human Behavior, 29, 1450-1455, 2013.

      [27] J. Urquiza-Fuentes and J. Ã. Velázquez-Iturbide, "Toward the effective use of educational program animations: The roles of student's engagement and topic complexity," Computers and Education, 67, 178-192, 2013.

      [28] A. Khacharem, B. Zoudji, I. A. E. Spanjers, and S. Kalyuga, "Improving learning from animated soccer scenes: Evidence for the expertise reversal effect," Computers in Human Behavior, 35, 339-349, 2014.

      [29] J. C. Castro-Alonso, P. Ayres, and F. Paas, "Comparing apples and oranges? A critical look at research on learning from statics versus animations," Computers and Education, 102, 234-243, 2016.

      [30] O. O. Adesope and J. C. Nesbit, "Animated and static concept maps enhance learning from spoken narration," Learning and Instruction, 27, 1-10, 2013.

      [31] J. C. Castro-Alonso, P. Ayres, and F. Paas, "Learning from observing hands in static and animated versions of non-manipulative tasks," Learning and Instruction, 34, 11-21, 2014.

      [32] M. Dindar, I. Kabakçı Yurdakul, and F. İnan Dönmez, "Measuring cognitive load in test items: Static graphics versus animated graphics," Journal of Computer Assisted Learning, 31, 148-161, 2015.

      [33] I. Arslan-Ari, "Learning from instructional animations: How does prior knowledge mediate the effect of visual cues?," Journal of Computer Assisted Learning, 34, 140-149, 2018.

      [34] B. B. de Koning, C. M. J. van Hooijdonk, and L. Lagerwerf, "Verbal redundancy in a procedural animation: On-screen labels improve retention but not behavioral performance," Computers and Education, 107, 45-53, 2017.

      [35] N. Lajevardi, N. S. Narang, N. Marcus, and P. Ayres, "Can mimicking gestures facilitate learning from instructional animations and static graphics?," Computers and Education, 110, 64-76, 2017.

      [36] N. Marcus, B. Cleary, A. Wong, and P. Ayres, "Should hand actions be observed when learning hand motor skills from instructional animations?," Computers in Human Behavior, 29, 2172-2178, 2013.

      [37] K. Kularbphettong, P. Kedsiribut, and P. Roonrakwit, "Developing an adaptive web-based intelligent tutoring system using mastery learning technique," Procedia - Social and Behavioral Sciences, 191, 686-691, 2015.

      [38] R. Z. Cabada, M. L. B. Estrada, F. G. Hernández, R. O. Bustillos, and C. A. Reyes-García, "An affective and Web 3.0-based learning environment for a programming language," Telematics and Informatics, 35, 611-628, 2018.

      [39] O. Ercan, K. Bilen, and A. Bulut, "The effect of web-based instruction with educational animation content at sensory organs subject on students’ academic achievement and attitudes," Procedia - Social and Behavioral Sciences, 116, 2430-2436, 2014.

      [40] S. H. R. Wong, "Which platform do our users prefer: Website or mobile app?," Reference Services Review, 40, 103-115, 2012.

      [41] I. Malavolta, "Beyond native apps: Web technologies to the rescue! (keynote)," Proceedings of the ACM 1st International Workshop on Mobile Development, pp. 1-2, 2016.

      [42] I. Malavolta, G. Procaccianti, P. Noorland, and P. Vukmirovic, "Assessing the impact of service workers on the energy efficiency of progressive web apps," Proceedings of the 4th International Conference on Mobile Software Engineering and Systems, pp. 35-45, 2017.

      [43] P. Garaizar, M. A. Vadillo, and D. Lopez-de-Ipina, "Presentation accuracy of the web revisited: Animation methods in the HTML5 era," Plos One, 9, 1-20, 2014.

  • Downloads

  • How to Cite

    Wijaya, H., Alayham Abbas, R., & ., . (2018). Animation Effectiveness for E-Learning with Progressive Web App Approach: a Narrative Review. International Journal of Engineering & Technology, 7(4.11), 112-120.