Asmaul Husna Mobile Application (AHMA): Foundation of the Prototype Design and Development

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.


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(Ismail et al., , 2013Khan & 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 effect 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. 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. 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.

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.

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(Rosmani et al., , 2018b.

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.

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. 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. 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: i. Several of the navigation buttons are dysfunctional. ii.
Some menu items are currently inactive. iii.
Some shadowing is not required. iv.
It is critical to maintaining a proper balance between simplicity and clarity of design.  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.