**Asmaul Husna Mobile Application (AHMA):**

**Foundation of the Prototype Design and Development**

**Arifah Fasha Rosmani<sup>1</sup>\*, Ariffin Abdul Mutalib<sup>2</sup>, Siti Mahfuzah Sarif<sup>3</sup>**

<sup>1</sup> Faculty of Computer and Mathematical Sciences, UiTM Cawangan Perlis, Kampus Arau, Perlis, Malaysia

<sup>1,2,3</sup> School of Multimedia Technology and Communication, Universiti Utara Malaysia, Sintok, Kedah, Malaysia

Corresponding author: \* arifah840@uitm.edu.my

Received Date: \*date

Accepted Date: \*date

Published Date: \*date

**HIGHLIGHTS**

  - AHMA is a prototype mobile application constructed on an interaction model for heutagogic learning to improve students’ knowledge, perceived awareness, and perceived motivation of the learning material.

  - The app assists users in focusing their attention on the most appropriate resources, resulting in improved learning performance and a significant reduction in cognitive load.

  - AHMA significantly improved the learning experience and user interaction in a mobile learning environment, according to pre-and post-testing and heuristic evaluation results.

ABSTRACT

*Asmaul Husna Mobile Application (AHMA) is a prototype mobile application based on an interaction model intended for use in heutagogy with undergraduates. This app was created and designed to increase students’ knowledge, perceived awareness, and perceived motivation for the learning material. When learners are assisted with signalling or cueing to focus their attention on the most appropriate resources, they demonstrate improved learning performance and significantly reduced cognitive load. The signalling principle’s effectiveness in enhancing learning outcomes by emphasising correspondences between text and images has been increasingly confirmed by empirical research. AHMA’s heutagogic design encourages students to explore, connect, and reflect through their self-learning process. By promoting aspects of the learning experience that are conducive to lecture or self-paced learning. This project involved a four-phase methodology which includes planning, design, development, and evaluation. According to the pre-and post-testing and heuristic evaluation results, AHMA significantly improved the learning experience and user interaction in a mobile learning environment.*

*Keywords: mobile learning, heutagogy, cognitive load, signalling principle*

# INTRODUCTION

Malaysia’s population has been rising significantly through the decades. In 2020, the Malaysian population was estimated at 32.0 million, with 29.7 million citizens and 3.0 million non-citizens (Department of Statistics Malaysia, 2020). According to the Population Distribution and Basic Demographic Characteristic Report 2010, Islam was the most commonly professed religion in Malaysia, with 61.3 per cent. As a multi-racial country, other religions adopted were Buddhism (19.8 per cent), Christianity (9.2 per cent) and Hinduism (6.3 per cent) (Department of Statistics Malaysia, 2015).

Thus, informal learning in Islam for Muslims, particularly children, is integral to Islamic growth. However, the platform for getting informal learning in the Islamic environment is rarely encountered (Sarlan et al., 2016). Besides, most reading and memorising Islamic content guides are limited to specific online sources and static books (Rosmani et al., 2014; Saidin et al., 2015). Therefore, a successful way to make them more appealing and exciting is to engage users with immersive mobile apps that can encounter discrepancies between conventional reading and mobile technology that outweigh all technologies in the world.

Islamic applications are frequently focused on scriptures; they relate to the Quran and are connected with writings from previous religious figures, and they are created as a method to assist Muslims in everyday spiritual practice as well as to access and study the Qur’an over time. (Campbell & Campbell, 2014; Elobaid et al., 2014). Compared to entertainment and gaming apps, the reach of Islamic content on smartphones is much greater than expected. There are no analyses of the requirements, use, material, interface style, or research on user knowledge and Islamic mobile content usage available and rarely observed (Ismail et al., 2014, 2013; Khan & Shambour, 2017). As a result, Islamic content that is seldom used can incorporate multimedia elements to attract customers as an entertainment app. As shown by their mobile phone use patterns, Muslim users are interested in entertainment apps incorporating multimedia elements. (Ismail et al., 2014). Additionally, Islamic-themed mobile apps are still scarce in Malaysia and other Muslim countries and should be explored. (Kamarudin & Salam, 2012; Nawi & Hamzah, 2013).

Mobile devices emphasise the Internet’s reputation and availability and have altered how people access information. As a result, it is critical to use this rapidly evolving technology to transmit the Quran’s teachings, providing users with Islamic guidance, teaching and studying Islamic education, and primarily serving the religion (Elobaid et al., 2014; Huraimel et al., 2007; Nawi & Hamzah, 2013; Osman & Mohamed, 2016).

Therefore, the signalling principle is chosen for this particular project as it is very significant in Asmaul Husna, especially in e-learning and multimedia presentations. Additionally, the chosen principle successfully facilitated Asmaul Husna’s learning and memorisation via courseware and games. (Rosmani et al., 2017; Rosmani & Zakaria, 2018). Based on the research, decent results were obtained using Signalling Principles, such as the students’ engagement, excitement, and attractiveness in using the learning materials and learning the content.

With their cognition-centred approaches, theories like the Cognitive Theory of Multimedia Learning (CTML) serve as the theoretical basis of the signalling eﬀect or cueing in learners’ limited cognitive resources (Schneider et al., 2018; Yung & Paas, 2015). The idea is on emphasising what is essential in the material presented (Mayer, 2016). It was expected that visual signalling techniques would alleviate the unnecessary load associated with the CTML’s selection phase, thus freeing cognitive resources for more essential processes such as information organisation and integration (Johnson et al., 2015). According to Van Gog (2014) and based on CTML, the combination of attention-guiding cues can significantly increase the effectiveness of educational materials (Schneider et al., 2018) and make learning more favourable, depending on student characteristics, teaching materials, and experimental procedures (Richter et al., 2016).

Cueing can help lower subjective cognitive load, facilitate signal transmission, improve retention and transfer performance, and the more mental capacity, the more effectively multimedia learning is retained and transmitted (Xie et al., 2017; Yang, 2016) regardless of learners’ cognitive styles.

Asmaul Husna is the significant attribute and beautiful name of Allah, *asma* is the plural form of the word *ism*, which means name, and *husna* means good or beautiful. Therefore, the combination of Asmaul Husna means the most beautiful name of Allah. Asmaul Husna learning is selected as the context of this research as knowledge and awareness on Asmaul Husna is still deemed lightly by the Muslim society, as stated by Rosmani and Zakaria (2018). It is also based on the results of the preliminary investigation that have been conducted in the previous study (Rosmani et al., 2018a). The public is unaware that Asmaul Husna contains beautiful meanings that can be used in everyday life either as a supplication or dhikr (Ab Rahman, 2016; Al-Qurtubi, 2017; Nik Mat, 2016; Wan Mohd, 2015). It has been supported by the verse, “And to Allah belong the best names, so invoke Him by them. And leave \[the company of\] those who practice deviation concerning His names. They will be recompensed for what they have been doing” (Quran 7:180). A hadith narrated by Abu Huraira mentioned, “Allah has ninety-nine Names, one hundred minus one, and whoever believes in their meanings and acts accordingly, will enter Paradise” (The hadith, n.d.)

# METHODOLOGY

The prototype design consists of four phases: planning, design, development, and evaluation, based on the Alessi and Trollip Design Model. At the same time, the Constructivist Learning Environment (CLEs) is utilised as an environmental design strategy. The design model is adapted in this research’s design and development phase, as depicted in Figure 1.

**Figure1**: Design and Development Methodology

Alessi and Trollip Instructional Design Model govern this study’s design and development phase. The model envelopes three attributes and three phases encompassing issues to be addressed and actions are taken, whereas the characteristics are standard, ongoing evaluation, and project management. Whereby the three stages involved are planning, design, and development. It serves as a guideline in designing and developing the mobile application in this research. This model is selected because it is considered flexible and fashioned according to needs, working style, philosophy, and environment. (Alessi & Trollip, 2001).

**PLANNING**

The first phase in developing AHMA is the planning phase. This phase consists of three main activities, namely: (a) define the scope, (b) recognise learners’ characteristics, and (c) determine and collect resources.

**DESIGNING**

The second phase in the multimedia app development is the design phase; in this phase, the idea is translated into the first draft form. The activities involved in this phase are (i) develop content ideas, (ii) create storyboards as depicted in Figure 2, (iii) prepare scripts and (iv) prepare prototypes.

|  |  |  |  |
|  |  |  |  |
|  |  |  |  |

***Figure 2**: Storyboard*

Paper prototyping technique was carried out before the development of the prototype. It ensures the mobile apps’ flow and navigation and acquires and fulfils users’ needs (Camburn et al., 2017; Hershman et al., 2018; Kang et al., 2019; Lauber et al., 2014; Nielsen, 2012; Thornton, 2019). Nielsen and Landaue (1993) suggest identifying around 85% of all usability problems with just five users. Therefore, this process was conducted in two parts: for experts and users. Three experts have been chosen to perform this activity: two PhD holders from local universities and a mobile developer, as shown in Table 1. They are the content and computer science experts who have evaluated both the content and flow or navigation. The experts are shown the paper mobile apps, divided into sections and given some time to explore.

**Table 1**: List of Experts for AHMA

<table>
<thead>
<tr class="header">
<th><strong>No.</strong></th>
<th><strong>Gender</strong></th>
<th><strong>Education</strong></th>
<th><strong>Fields of Expertise</strong></th>
<th><p><strong>Experience</strong></p>
<p><strong>(Year)</strong></p></th>
<th><strong>Affiliations</strong></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1.</td>
<td>Female</td>
<td>PhD.</td>
<td>Social Science</td>
<td>10</td>
<td>Universiti Utara Malaysia</td>
</tr>
<tr class="even">
<td>2.</td>
<td>Female</td>
<td>PhD.</td>
<td>Computer and Communication</td>
<td>25</td>
<td>Universiti Malaysia Perlis</td>
</tr>
<tr class="odd">
<td>3.</td>
<td>Male</td>
<td>BSc. IT</td>
<td>Software Development</td>
<td>6</td>
<td>RPA Solution</td>
</tr>
</tbody>
</table>

After this process, a group of students from a local college have been randomly selected to undergo the prototyping process, as shown in Figure 3. They are given some time to explore the paper apps, and each of the sections is created to ensure they can navigate smoothly and adequately. Feedback from experts and students is considered, and appropriate acts have been done to accommodate their feedback.

![A group of people sitting around a table playing a board game Description automatically generated with medium confidence](611dd255bff22_media/media/image5.jpeg)

**Figure 3**: Paper Prototyping

***Macro and Micro Strategy in the Design of AHMA***

Micro strategies define effective learning content for learners, it embraces the Principles of Multimedia Design (Mayer, 2008) and Nielsen’s Design Guideline (Loranger et al., 2014), and the design strategies are encapsulated in Constructivist Learning Environment (Jonassen, 1999). Figure 4 represents the macro and micro strategies for the design of AHMA.

![](611dd255bff22_media/media/image6.png)

***Figure 4**: Macro and Micro Strategy in the Design of AHMA-SP*

**DEVELOPMENT**

There are six steps in the development process altogether, (i) preparing text, (ii) creating graphics, (iii) produce video and audio, (iv) assembling all the pieces, (v) conducting an alpha test, (vi) revising, and (vii) conducting the beta test. Figure 5 illustrates the AHMA prototype, and the development is based on an interaction model developed in the previous project, namely the NSPIxD model (Rosmani et al., 2020, 2018b).

![](611dd255bff22_media/media/image7.png)

**Figure 5**: AHMA Screenshots

**TESTING**

The testing phase in this project involved the pre-test and post-test for the target users and a heuristic evaluation for experts.

**Pre-Test and Post-Test**

This project utilised a quasi-experimental design with 89 participants from local public universities to assess students’ knowledge, perceived awareness, and perceived motivation of the learning material. The users are provided with a pre-test. After a week, they are given the time to explore the app and finally answer the 17 post-test questions, which assesses their knowledge and perceived awareness and the 36 questions of the Instructional Materials Motivation Survey (IMMS) (Toh, 2005) to assess their perceived motivation towards the learning materials. The testing findings in Figure 6 indicate a considerable shift in the knowledge score, which improved significantly before using AHMA and the results for perceived awareness among students for a specific context. Additionally, a considerable impact can be detected in the students’ motivation score for using AHMA. Thus, they are driven to learn through AHMA as opposed to more traditional approaches.

| ![](611dd255bff22_media/media/image13.png) |  | ![](611dd255bff22_media/media/image14.png) |
| ------------------------------------------ |  | ------------------------------------------ |
| ![](611dd255bff22_media/media/image16.png) |  |                                            |

**Figure 6: Knowledge, Perceived Awareness and Perceived Motivation Test Results**

**Heuristic Evaluation**

According to Nielsen (1994a), a heuristic assessment only requires at least three individual evaluators. Three experts carried out these experiments to ensure that the proposed model is being used and applied. It is introduced for the prototype to operate efficiently and receive feedback and guidance to develop the prototype. The experts involved are listed in Table 2.

**Table 2**: List of Experts for Heuristic Evaluation

| **No.** | **Gender** | **Education** | **Fields of Expertise** | **Experience (Year)** | **Affiliations**               |
| ------- | ---------- | ------------- | ----------------------- | --------------------- | ------------------------------ |
| 1\.     | Male       | PhD.          | Software Engineering    | 14                    | Universiti Teknologi MARA      |
| 2\.     | Male       | PhD.          | Interaction Design      | 14                    | Universiti Kebangsaan Malaysia |
| 3\.     | Male       | PhD.          | Instructional Design    | 21                    | Universiti Sains Malaysia      |

The questions in this questionnaire were adapted from Nielsen (1994b), listed in Table 3. This survey employs a Likert scale ranging from strongly disagree to strongly agree on a scale of 1 to 5.

**Table 3**: Heuristic Evaluation Questionnaire

| **VISIBILITY OF SYSTEM STATUS**          |                                                                                      |
| ---------------------------------------- | ------------------------------------------------------------------------------------ |
| 1                                        | It is clear what information is available at the current location.                   |
| 2                                        | The current information matches what you expect to find.                             |
| 3                                        | It is clear where you can go from the current location.                              |
| 4                                        | It is always clear what is happening from each action you perform.                   |
| **NAVIGATION, USER CONTROL AND FREEDOM** |                                                                                      |
| 5                                        | It is always easy to return to the Main Menu                                         |
| 6                                        | It is easy to access all significant portions of the application from the Main Menu. |
| 7                                        | Graphic links are also available as text links                                       |
| 8                                        | It is easy to cancel or exit from operations.                                        |
| **CONSISTENCY AND STANDARDS**            |                                                                                      |
| 9                                        | Standard menus are used throughout the application.                                  |
| 10                                       | Standard buttons are used throughout the application.                                |
| 11                                       | Standard fonts are used throughout the application.                                  |
| **AESTHETIC AND MINIMALIST DESIGN**      |                                                                                      |
| 12                                       | The application’s structure is straightforward without unnecessary complications.    |
| 13                                       | There are no instances of extraneous information.                                    |
| 14                                       | There are no instances of misplaced information.                                     |
| 15                                       | Colour choices allow for easy readability.                                           |
| 16                                       | The application is aesthetically pleasing.                                           |
| 17                                       | No unnecessary technologies are used.                                                |

All the expert reviews were successful in bringing the following recommendations to AHMA:

1.  Several of the navigation buttons are dysfunctional.

2.  Some menu items are currently inactive.

3.  Some shadowing is not required.

4.  It is critical to maintaining a proper balance between simplicity and clarity of design.

<span class="chart">\[CHART\]</span>

**Figure 7**: Heuristic Evaluation Result

Figure 7 depicts the summary of the results. The visibility of system status describes how well the system status is conveyed. Users must be provided with relevant information to track what is happening as expeditiously as possible (Harley, 2018). This item’s score is 4.75, which shows that the experts strongly agree with the system status’s clarity. Navigation, user control and freedom is when in many cases, users make mistakes or come to a change of mind, which means it’s essential to provide an option to allow them to return to their previous state or undo their last action (Rosala, 2020). The score for this item is 4.17, which reveals that the experts concur with the application navigation. Consistency and standards are the most valuable principle of any product, brand, or identity. A system or product should never present a confusing mix of words, actions, looks, or scenarios to derive the same meaning (Krause, 2021). The experts give this item a score of 4.89, indicating that they strongly agree with AHMA-SP’s consistency. Appealing designs can create memorable consumer experiences that define a brand. However, only the core aspects of an interface should be included. In the end, the truth will always prevail in clarity over style (Fessenden, 2021). This earned a score of 4.50, indicating that the mobile application is simple and appropriate.

**CONCLUSION**

A team of developers conducts the prototyping method in a four-phase development process. As a result, the AHMA is delivered. The prototype contains the planned components and elements that experts have already accepted. They were included in the AHMA content framework, describing how to use each component and feature. The entire content is based on the signalling principles, which emphasise knowledge, perceived awareness, and perceived motivation of the learning materials. They are demonstrated with a series of screen samples. The content experts in this research have agreed that the Asmaul Husna mobile app (AHMA) development is very significant for the Muslim community and mentioned that the mobile app is very convenient as it can be carried anywhere and access anytime. The developed app from this research should also contribute to the foundation of the design and development of future Islamic mobile applications.

**ACKNOWLEDGMENTS**

**  
**This research is funded under Fundamental Research Grant Scheme (FRGS), Ministry of Higher Education (MOHE) under the s/o code 14189.

**REFERENCES**

Ab Rahman, M. A. (2016). Manifestasi dan Penghayatan Asmaul Husna dalam Siri Pengkarya dan Karya Sastera. *International Seminar on Generating Knowledge Through Research*, 231–242.Al-Qurtubi, I. S. (2017). *The Magnificence of Asmaul Husna*. Pustaka Ibnu Kathir.Alessi, S. M., & Trollip, S. R. (2001). *Multimedia for Learning: Methods and Development* (Third). Allyn and Bacon.Camburn, B., Viswanathan, V., Linsey, J., Anderson, D., Jensen, D., Crawford, R., Otto, K., & Wood, K. (2017). Design prototyping methods: State of the art in strategies, techniques, and guidelines. *Design Science*, *3*(Schrage 1993), 1–33.Campbell, H., & Campbell, H. A. (2014). There’s a Religious App for That\! A Framework for Studying Religious Mobile Applications. *Mobile, Media & Communication*, *2*(2), 154–172. Department of Statistics Malaysia. (2015). *Population Distribution and Basic Demographic Characteristic Report 2010*.Department of Statistics Malaysia. (2020). Current Population Estimates, Malaysia, 2020. In *Department of Statistics Malaysia* (Issue July).Elobaid, M., Hameed, K., & Yahia Eldow, M. E. (2014). Toward Designing and Modeling of Quran Learning Applications for Android Devices. *Life Science Journal*, *11*(1), 160–171.Fessenden, T. (2021). *Aesthetic and Minimalist Design (Usability Heuristic \#8)*. Nielsen Norman Group.Harley, A. (2018). *Visibility of System Status (Usability Heuristic \#1)*. Nielsen Norman Group.Hershman, A., Nazare, J., Qi, J., Saveski, M., Roy, D., & Resnick, M. (2018). Light it up: Using paper circuitry to enhance low-fidelity paper prototypes for children. *IDC 2018 - Proceedings of the 2018 ACM Conference on Interaction Design and Children*, 365–372.Huraimel, A., Zemerly, M. J., & Al-Hammadi, A. (2007). Islamic Zakah Application for Mobile Devices. *The 3rd International Conference on Information Technology*. Ismail, I., Ismail, M., & Abd Razak, F. H. (2013). Measuring Users’ Awareness and Usage Towards Mobile Islamic Content (MIC) Using Rasch Model. *Kolokium Siswazah Sains Komputer Dan Matematik Peringkat Kebangsaan 2013 (SISKOM 2013)*, *September*.Ismail, I., Ismail, M., Hanis, F., & Razak, A. (2014). Studies on the Extensive Use of Multimedia Elements and User Preferences for Islamic Knowledge Dissemination. *International Journal of Advances in Soft Computing and Its Application*, *6*(1), 1–22.Johnson, A. M., Ozogul, G., & Reisslein, M. (2015). Supporting Multimedia Learning with Visual Signalling and Animated Pedagogical Agent: Moderating Effects of Prior Knowledge. *Journal of Computer Assisted Learning*, *31*(2), 97–115.Jonassen, D. (1999). Designing Constructivist Learning Environments. In *Instructional-Design Theories and Models, Volume II*.Kamarudin, N., & Salam, S. (2012). Tajweed Understanding among Malaysian Muslims (A Preliminary Findings). *International Conference on Mobile Learning, Applications and Services*, *2012*, 1–4.Kang, S., Norooz, L., Bonsignore, E., Byrne, V., Clegg, T., & Froehlich, J. E. (2019). Prototyp AR: Prototyping and simulating complex systems with papercraft and augmented reality. *Proceedings of the 18th ACM International Conference on Interaction Design and Children, IDC 2019*, 253–266.Khan, E. A., & Shambour, M. K. Y. (2017). An Analytical Study of Mobile Applications for Hajj and Umrah Services. *Applied Computing and Informatics*.Krause, R. (2021). *Maintain Consistency and Adhere to Standards (Usability Heuristic \#4)*. Nielsen Norman Group.Lauber, F., Böttcher, C., & Butz, A. (2014). PapAR: Paper prototyping for augmented reality. *AutomotiveUI 2014 - 6th International Conference on Automotive User Interfaces and Interactive Vehicular Applications, in Cooperation with ACM SIGCHI - Adjunct Proceedings*, 189–194. Loranger, H., McCloskey, M., & Nielsen, J. (2014). *College Students (Ages 18-24) on the Web 2nd Edition*. Mayer, R. E. (2008). Applying the science of learning: evidence-based principles for the design of multimedia instruction. *The American Psychologist*, *63*(8), 760–769.Nawi, A., & Hamzah, M. I. (2013). Tahap Penerimaan Penggunaan Telefon Bimbit Sebagai M-Pembelajaran dalam Pendidikan Islam. *Journal of Islamic and Arabic Education*, *5*(1), 1–10.Nielsen, J. (1994a). *Usability Inspection Methods* (R. L. Mack (ed.); 1st Editio). John Wiley & Sons.Nielsen, J. (2012). *Usability 101: Introduction to Usability*. Nielsen Norman Group.Nielsen, J. (1994b). Enhancing the explanatory power of usability heuristics. *Conference on Human Factors in Computing Systems - Proceedings*, 152–158.Nielsen, J., & Landauer, T. K. (1993). A mathematical model of the finding of usability problems. *Conference on Human Factors in Computing Systems*, 206–213.Nik Mat, N. A. A. (2016). *Asmaul Husna: The Beautiful Names of Allah*. Kemilau Publika.Osman, N. F., & Mohamed, H. H. (2016). Islamic Pregnancy Mobile Learning Application. *2016 IEEE Conference on E-Learning, e-Management and e-Services (IC3e)*, 150–155.Richter, J., Scheiter, K., & Eitel, A. (2016). Signaling text-picture relations in multimedia learning: A comprehensive meta-analysis. *Educational Research Review*, *17*, 19–36.Rosala, M. (2020). *User Control and Freedom (Usability Heuristic \#3)*. Nielsen Norman Group.Rosmani, A. F., Abdul Mutalib, A., & Sarif, S. M. (2018a). A Preliminary Investigation towards Development of Islamic Mobile Application. *Opción*, *34*(16), 896–913.Rosmani, A. F., Abdul Mutalib, A., & Sarif, S. M. (2020). Hybridising Signalling Principle and Nielsen’s Design Guidelines: Utilising Mobile Application to Impart Asmaul Husna for University Students. *Creative Humanities International Conference (CHiC 2020)*, 92–104.Rosmani, A. F., Abdul Mutalib, A., & Sarif, S. M. (2018b). Proposed Design and Development of Mobile Learning Environment for Higher Education 4.0. *2nd International Conference on Applied Science, Engineering, Business & Information Technology*, 517–524.Rosmani, A. F., Ahmad, H., Mazlan, U. H., Zainuddin, N. A., & Ibrahim, A. (2014). I-Wirid: Construction of digital wirid via mobile platform. *I4CT 2014 - 1st International Conference on Computer, Communications, and Control Technology*, *I4ct*, 348–352. Rosmani, A. F., JM. Gining, R. A., & Angwar, A. (2017). Article 5 Asma Ul Husna Interactive Courseware: Adaptation of Multimedia Learning Principles. *Journal of Computing Research and Innovation (JCRINN)*, *2*(3), 26–32.Rosmani, A. F., & Zakaria, M. H. (2018). Asmaul Husna Learning through Gamifications and Adaptation of Signalling Principle. *Journal of Physics: Conference Series*, *1019*(012080), 1–7.The Hadith, Sahih Bukhari, Book 8, Volume 75, Hadith 419.Saidin, A. Z., Mohamed, K. S., Adzmi, Z. H., & Azhar, N. W. (2015). Q-ibadah mobile application: A usability pilot testing. *Jurnal Teknologi*, *77*(29), 49–54.Sarlan, A., Hashim, A. S., Ahmad, R., Ahmad, W. F. W., Mahamad, S., Basri, S., & Astrini, S. (2016). An interactive Islamic mobile application for children - “Hidup Cara Rasullullah.” *2016 3rd International Conference on Computer and Information Sciences, ICCOINS 2016 - Proceedings*, 579–584. Schneider, S., Beege, M., Nebel, S., & Rey, G. D. (2018). A meta-analysis of how signaling affects learning with media. *Educational Research Review*, *23*(August 2017), 1–24. Thornton, P. (2019). *Paper prototyping: A primer*. Www.Patrickthornton.Com.Toh, S. C. (2005). *Skala Motivasi Bahan Pengajaran* (pp. 1–5).Wan Mohd, W. M. (2015). *Penyucian Hati dengan 99 Asmaul Husna*. SMK Publications & Distributors.Xie, H., Wang, F., Hao, Y., Chen, J., An, J., Wang, Y., & Liu, H. (2017). The More Total Cognitive Load is Reduced by Cues, the Better Retention and Transfer of Multimedia Learning: A Meta-Analysis and Two Meta-Regression Analyses. *PLoS ONE*, *12*(8).Yang, H. Y. (2016). The Effects of Attention Cueing on Visualizers’ Multimedia Learning. *Educational Technology and Society*, *19*(1), 249–262.Yung, H. I., & Paas, F. (2015). Effects of Cueing by a Pedagogical Agent in an Instructional Animation: A Cognitive Load Approach. *Educational Technology and Society*, *18*(3), 153–160.
