User Interface Designs of an Educational Mobile Application: A Study of Qiraat Teaching and Learning

(is paper reports a summative evaluation conducted for the educational mobile application called “Qiraat Sab’ah.”(e prototype was developed using the Rapid Application Development (RAD) and User Experience (UX) methodologies. (e prototype was improved further based on the formative evaluation feedback gathered from students, lecturers, and the public who wish to learn Qiraat through the mobile application. (e summative evaluation was focused on the value and usability of the application if it is being used in a real environment. A total of 50 participants were involved in this evaluation. (e result shows that most of the participants provide positive feedback on usability. One of the major highlights from the participants is that the application can be used as a supplementary teaching and learning tool for people who wish to learn Qiraat anytime and anywhere. However, further areas of expansion are needed such as including all chapters (surahs) in the Quran and tajweed indicators to the verses before it can be used for real.


Introduction
All Muslims are compulsory to learn and recite (Qiraat) the Quran as the mankind guidance that is revealed by Allah s.w.t. Qiraat is a Quranic accent with its recitation style and variation of seven modes (also known as Qiraat Sab'ah) [1]. Al-Quran is written in the Arabic language. To read the Quran, a basic knowledge of Arabic is required. Some of the Quran reciters think that reading it is similar to reading the Arabic text, but it is not [2]. e different recitation of both types is because of the tajweed rules in Qiraat and not for Arabic texts. For example, in tajweed, they provide a type of nasalisation (called "ghunnah ‫.)"ةنغ‬ is makes the learning of Qiraat challenging [2][3][4].
Traditionally, learning Qiraat using a book (Kitab) guided by a qualified teacher has been the practice [2,4] until today. However, this practice may raise a problem in terms of the time given to learn Qiraat in a week. Consider a Qiraat class in a university that consists of 200 students with a lecturer. e class is conducted for four hours a week for 14 weeks (i.e., two hours of lectures and two hours of tutorial). is is very challenging for both students and the lecturer to learn and teach the Qiraat in a limited period. Furthermore, some students may also experience difficulties in terms of time and geographical boundaries due to long distance from hostel to class [5]. Due to these issues, it has motivated many researchers to utilize mobile devices as an enabler to allow teaching and learning such as [1,6] anytime and anywhere. is has shown a positive impact on addressing the issues mentioned above. e utilization of mobile devices allows self-paced learning. Students are free to choose what they want to study, when to study, and the duration of the study [7]. Some students need a relatively long time to receive the knowledge learned. erefore, self-paced learning allows students to control the material they consume as well as the time they need to learn new knowledge [8]. e effectiveness of self-paced learning has been shown in [7,9]. Some advantages of using self-paced learning include improving memory performance [7], better learning environments for older adults [10], flexibility [8], and improvements in students' academic performance [11]. is research was driven by the initial design in [12,13]. Formative evaluation has been conducted to improve the design of the application [1]. is initial evaluation result also provides an indicator that this application is worth to be developed for real and to be used by potential users who wish to learn Qiraat anytime and anywhere. In this prototype version, more functionalities were improved such as navigation between the Imam pages and highlighting different narrator pages based on the text header.
As we know, the Quran has revealed seven different ways to recite and it has been approved based on the prophet Muhammad Figure 1 shows the seven imams and their students (also known as rawis or reciters). Each Imam has two rawis, hence different types of recitation.
e Qiraat knowledge is not to add confusion about the procedures of Holy Quran recitation, but it is to illustrate how wide the Grace of Allah s.w.t. is in giving the people of the Prophet Muhammad P.B.U.H options in Holy Quran recitation. An example of a different recitation from Qiraat Sab'ah can be seen from the verse Al-Fatehah in the text "alsirat ‫".طارصلا‬ Some readers of Qiraat recite this verse by reading the first consonant, i.e., Imam Qunbul as sin ‫)س(‬ and Imam Hamzah as zai ‫)ز(‬ instead of sod ‫,)ص(‬ while the other readers who are the majority recite the first consonant as a sod ‫)ص(‬ [14]. Relevant tools and techniques for a mobile learning system have been surveyed. e survey was very much focused on the characteristics of the tool. e multimedia learning system (MMLS) [15] is a teaching and learning portal that is deployed via the web. e content is accessible anytime and anywhere as long as Internet connection is available. Each student is authenticated to access the system. MMLS can be considered as repositories for teaching materials having a virtual teacher within a virtual classroom. Lecturers can publish their academic materials for students as well as generate students' performance reports via the web-based environment. However, mobile devices have limited content space.
Global Open Access Learning System (GOALS) [16] is an online learning management system that allows lecturers and students to communicate via this platform. Lecturers can freely upload their teaching materials in various formats as well as conduct forums with the students. is platform is similar to MMLS where it provides content that is accessible anytime and anywhere as long as Internet connection is available. It also provides limited access to the public to search for academic content by using the search engine feature. In this research, we intend to provide the Qiraat application available freely anytime and anywhere offline.
Smart Quran [17] is the first Al Quran application in Malaysia that has been certified by the Al-Quran Printing Control and Licensing Board, Ministry of Home Affairs Malaysia (KDN) under the Printing of the Quranic Text Act 1986 (Act 326). is application is free for all users (both Android and iOS) and consists of Mushaf Madinah with two translations in English and Malay. e interesting features of this application are the history and verse bookmark that helps the user to easily pick up where he/she has left. is application also offers day and night reading modes for user convenience. ere are four reciter audios available to be downloaded depending on the user's selection. Bookmarking and history features are potential that can be adopted in this research later. At this stage, we focus on the content and audio preparation for seven of Qiraat prototypes.
Quranic and Masnoon Duas Application [18] is a collection of supplications archived from the Quran and Sunnah with Arabic and English translations. e main feature consists of the following: (1) repeat feature playback setting; (2) bookmarks and share options; and (3) adjusted font size. e bookmark and sharing option features are interesting to be further explored for our full version of the Qiraat application.
iPhone Islam Mushaf [19] applied the smartbook concept in the application. is application is available on the iOS platform only. is application provides unique copies of Quran writing in a different style of calligraphy. is application is suitable for reciting Quran although it has limited functionality. A feature that is available in other applications, i.e., bookmarking, is also present. Within this research, the recitation style and variation of seven Imams are being emphasized in this prototype to allow the teaching and learning of Qiraat.
iQuran Lite [20] is available on the iOS platform only. One of the compelling features is the use of a colour code for tajweed (pronunciation) with verse-by-verse translation and recitation. In this research, the colour code of the text is adapted to highlight the different recitation styles between Imams. Quran Flash [21] is an online application for reading the Quran on the browser. Available functions include audio listening, interpretation, translation, transliteration, textual copying, and bookmarking. For this research, the development of Qiraat for seven Imams is required because the application is targeted for teaching and learning of Qiraat in the universities that offer Qiraat subjects.
EzHifz is a Quran memorization mobile application that has been designed with multimedia contents to support multiple sensory with seven memorizing techniques [6]. e memorizing techniques were combined with the VARK learning style. e application is a potential to overcome the user's differences in the context of the VARK (Visual, Auditory, Reading, and Kinesthetic) learning style, which may reinforce memory retention. is application focused on memorizing the Quran. However, this research is focused on the reciter/learner who should follow the pronunciation rules of the seven Imams in reciting the Quran.
To summarize, both teachers and learners require a medium (i.e., tool) to interact with each other in facilitating teaching and learning [22]. is research aims to enable and promote ubiquitous teaching and learning of Qiraat anytime and anywhere using mobile devices. Good mobile application design can potentially contribute to efficient teaching and learning. Nevertheless, this tool is not meant to substitute Qiraat teachers. It can potentially facilitate a better understanding of learning Qiraat. Additionally, it has a potential participation impact over lifelong Qiraat learning.

Methods and Materials
is research applied a hybrid methodology which includes rapid application development (RAD) [23,24] and user experience (UX) [25,26]. During the design and build stage, it passed through the UX process. It checks how the users feel about the application and their perception of the value of the application.
Requirement elicitation and analysis were conducted by using two demonstrators' application [27,28]. ese demonstrators were analyzed, and the list of requirements was obtained. During the design stage, users were walking through a low-fidelity prototype [29] to get their feedback before the actual application is being developed. e actual application design and development will be further explained in the Results and Discussion section. e purpose of the evaluation was to assess the usability and the value of the mobile application among students, lecturers, and the public in the teaching and learning of Qiraat. With participants expected from a varied educational background, the main idea was to provide a consistent, yet realistic environment for the evaluation. A pilot study was conducted with 5 participants (i.e., USIM students that were also involved in the actual evaluation) before the actual evaluation was implemented. is is to identify any issues that may arise which could impede the collection of meaningful data. e questionnaire has been improved based on how the participants understood and interpreted the evaluation. e process of evaluation began with the organization of meeting time for the participants to attend the evaluation session. Due to the number of participants as well as the location among them, the evaluation was conducted in three (3) sessions which are for students, lecturers, and the public depending on the availability and location of the participants. A total of 50 participants participated in the evaluation. ey have been selected randomly in this evaluation. ey are the students and lecturers from the Faculty of Quranic and Sunnah Studies, Universiti Sains Islam Malaysia (USIM) and other students from different universities, as well as the public. e details of the participants are in Table 1.
In each session, participants were provided with a ".apk" file to install into the device. An instruction was given to the participants to use the functionality of the application (see Appendix A). e application was left in the participants' devices for a month to allow them to freely use the application for Qiraat learning. During the walkthrough, a questionnaire that consists of 25 items was given to capture their feedback (see Appendix B). A digital recorder was used to capture verbal feedback from the participants.
is method of evaluation has also been adapted in [30,31]. e data collected from the questionnaire and verbal feedback were analyzed. e feedback was analyzed to answer the three research questions. e questionnaire was prepared using a 5-point Likert scale: 1-not relevant; 2-not useful; 3-no opinion; 4-useful; and 5-very useful, to answer the research question one. en, the participants expressed their agreement (Yes) or disagreement (No) to answer research questions two and three. is will be explained in the Results and Discussion section.
Materials for Qiraat Sab'ah development include software and hardware. Adobe Photoshop CC is used for application design purposes. Ionic framework is used for the development to allow a cross-platform mobile application such as Android and iOS. Real Player supports audio in multiple formats such as MP3, MP4, WMA, and WAV. is software can stream chunks of audio to support the teaching and learning of Qiraat. e hardware was in the form of PCS, laptop, and smartphones.

Application Design and Development.
is section will discuss the design of the Qiraat Sab'ah (Q7) mobile application.
e design was iterative to conform to users' feedback. e prototype that has been developed consists of two surahs, i.e., Surah Al-Fatehah and Surah Al-Baqarah. It is available for all Imams. It is an offline application that can be deployed on Android or iOS platforms. e goal of the design is to support the self-paced learning of Qiraat anytime and anywhere. Potentially, this could address the time limitation and geographical boundaries between the teacher and students. In addition to that, it potentially could allow a better understanding and encourage users to learn Qiraat. Advances in Human-Computer Interaction Figure 2 shows the home screen when the application is launched. Users may swipe to the left to proceed to the landing page as shown in Figure 3. e landing page in Figure 3 shows the list of surahs options for the user to choose (i.e., Surah Al-Fatehah and Surah Al-Baqarah). ere are 114 surahs in the Quran. All surahs will be included on this page for the actual deployment of the application. Figure 4 shows the menu options. ere are four options available to the users, i.e., Surah, Imam, Help, and Exit options. ey are described in the following.
Surah Option. Selecting this option will display the list of surahs available in the application (see Figure 3). If a user selects Surah AlBaqarah Warsh, the next screen shall display as in Figure 5. Figure 5 shows the Surah AlBaqarah Warsh page for Imam Nafi. e button icon (with a green arrow) is a shortcut for the user to easily navigate sequentially to the next/reverse surah. e highlighted text in yellow colour shows the emphasized Qiraat rules for rawi/reciter. It will be shown for each sentence if there is any. Using the colour coding format potentially can allow the user to instantaneously differentiate the Qiraat rules between the reciters. While reciting each sentence following the Qiraat rules, the audio will be played accordingly. is is to allow the user to focus and learn on the Qiraat rules while reciting the Quran. A user can freely scroll up and down to view more contents and Qiraat rules for the chosen surah. Beneath the page, three icons are provided to allow navigation between the reciters. e two icons located on the left and right are used to quickly change the reciter within the same Imam. For example, in Figure 5, a user can change the reciter from Rawi Warsh to Rawi Qolun by selecting the Rawi Qolun icon. Figure 6 shows the Surah AlBaqarah Qolun page for Imam Nafi which has been selected. e middle icon is used to change the Imam. For example, if the user would like to switch to a different Imam, just select this icon and a pop-up will display as shown in Figure 7. e user can scroll up and down to select the desired reciter from different Imams.
Imam Option. Selecting the Imam option in Figure 4 will direct the user to the list of seven Imams (see Figure 8). A user can freely select any Imam listed.
Once selected, the application will display a sample of references on the recitation rules for the chosen Imam and reciter as shown in Figure 9. e user can freely scroll up and down to learn about the recitation rules, examples, etc.

Help Option.
is option describes the application (see Figure 10). Contact is also provided for users to comment about the application.
Exit Option. Selecting this option will leave the user in the application.   Advances in Human-Computer Interaction

Implementation.
e application has been iteratively improved. e improvement done was based on the feedback from the formative evaluation. e improvement that was made includes using a colour code to emphasize different Qiraat rules, references to Imam recitation rules, and the function of changing the Imam. ese have been shown in Section 3.1. Instructions for using the functionality of the application are provided in Appendix A. ese instructions act as a guide for the user to start using the application. It is not mandatory to follow the step-by-step instructions. ey are free to use the application without following the sequence of instructions.

Research Question One.
Does the content provide easiness in teaching and learning Qiraat? e majority of the participants agreed that the content of the application was useful/very useful to them (see Table 2). Most of the participants also agreed that the application allows them to do self-study on Qiraat at their own pace.
Some of the verbal feedback received as follows: " e content and highlight of rasm will help the users to recite the Qiraat, however it can't help me to correct the wrong pronunciation made" "advanced contents should be included or otherwise it is not relevant for senior students" Furthermore, one participant has highlighted that the content of this application may be suitable for a beginner user who wishes to learn Qiraat for the first time. It was also noted that the contents of the application should be considered expanded for advanced users.

Research Question Two. Does the design facilitate the teaching and learning of Qiraat?
Nearly unanimous support was shown for the application design that facilitates the teaching and learning of

Advances in Human-Computer Interaction
Qiraat (see Table 3). Although most of the participants were impressed with the application, however, there are few issues related to the design of the application. e following are some comments from the verbal feedback: ". . .audio can be followed to recite Qiraat, however, I cannot read because of the font size and my eyes got a problem. Usually, I follow word by word from the teacher" ". . .font size should be bigger and the colour for this application could be lighter." "Add more colour to attract those people who like visual learning". "Lack of colourful features but interesting icons".
"Add more colour for each imam to differentiate them". "Less experienced users in the application may slow down the learning process. An introduction tutorial for the first time user is needed".

Research Question ree. Do the perceived benefits motivate the user to use the application?
It was clear that the application was well received with noticeable benefits from the participants (see Table 4). From the verbal feedback and comments in the questionnaire, further positive responses were given on the motivation of using the application. ey are as follows: ". . .enabling Muslims, especially the young generation, to enhance and improvise their Quran recitations".
"[this mobile application is] helping students or people that cannot attend Qiraat classes".   Advances in Human-Computer Interaction "Please commercialize this application soonest as possible because I want to explore more on it".
Extension of the application was also suggested: "Very good for beginners. Put in two modules. First for beginners. e second module for experts that offers choices of translation, Tajweed and Tafsir (Interpretation)".

Discussion.
It was found that the value of this application was appreciated due to the highlighted text to emphasize the Qiraat rules, references to Imams, and the ability of the application to show the different rules between reciters. e application can guide the user while reciting the Qiraat (i.e., the highlighted text), thus minimizing the errors during recitation. ese enable the users to do self-study at their own pace compared to the traditional learning of Qiraat (i.e., using a book). It was also noted for the easiness of the application. e basis of designing this application is to allow the user to learn Qiraat anytime and anywhere.
However, the presence of a teacher is still required to use this application. Addressing the participant's comments on the issue of the pronunciation of Qiraat rules and updating the content to 30 juz' of the Quran may provide higher usability acceptance (in terms of content) when the application is implemented in real. However, this will need to be evaluated when the application is ready.
In terms of the design, it was found that the application is intuitive and convenient to use, providing acceptable audio, navigation, and tracking for Imams and reciter pages as well as exchanges between written (rasm) forms of Qiraat. Providing this function enables users to understand how the recitation should be performed. However, three main issues were raised. Firstly, the visual impact of using different screen sizes that may relate to the comment on the selection of font types and sizes. Secondly, extending the use of colours with other features like the background colour to differentiate and help users to navigate the application.
irdly, consideration of creating a user manual/introduction tutorial for the user reference. It was noted on the issues raised. Since they are coming from different backgrounds (35 participants know while 15 participants do not know Qiraat) and ages, some of them had found it difficult to use the application for the first time. e comments on using different screen sizes as well as font types and size selection reinforce the potential  Advances in Human-Computer Interaction benefits to investigate these features further. ese considerations may provide the visual impact of the application design on varying mobile device screen sizes. e right use of multimedia elements will need further investigation so that it could attract new users to use the application. Having an instruction manual may save time for users who come from different backgrounds and ages in exploring and using the features provided.
Confirmation of the value of the application has been obtained. Participants agreed that the application is able to motivate practice and learning and improve their pronunciation and understanding of Qiraat. e most appealing highlight is that the application can be used as a supplementary teaching and learning tool for people who wish to learn Qiraat. However, further areas for expansion are also identified such as providing more content and features that may encourage more users in teaching and learning Qiraat in a wider community. e content of the application also should be reviewed to include beginner and advance learners.  Advances in Human-Computer Interaction    Table 3: Statement on research question two.

Statement
Yes No (a) e design of this application is convenient to use for learning Qiraat through a mobile application. 48 2 (b) e pronunciation provided in the application will help you to learn how to recite the Qiraat properly. 46 4 (c) e audio can be followed based on the Qiraat rules. 48 2 (d) e rawi's button located at the bottom of the application helps you to keep track of the location in this application. 46 4 (e) e title of Imam located at the top right corner helps you to track which Imam is reciting the Qiraat.
45 5 (f ) e description available (i.e.Imam description and rules) in the application helps you to understand how to recite according to Imam as well as the rules associated with it. 44 6 (g) e exchange of rasm (written) form of Qiraat for example (َ ‫ط‬ َ ‫صر‬ ِ ) for Imam Asim and (َ ‫ط‬ َ ‫سر‬ ِ ) for ImamQunbul will help you to understand how the recitation should be performed. 47 3 (h) e word highlighted in yellow colour helps you to learn different QiraatImam rules. 47 3 (i) is application is intuitive and user-friendly. 40 10 Advances in Human-Computer Interaction

Conclusion
is paper's main contribution is the design of the educational mobile application called "Qiraat Sab'ah." e design includes using a colour code to emphasize different Qiraat rules, a function that is mostly liked by the users. Besides, references to Imam recitation rules as well as the function of changing the Imam were also appreciated. Consequently, this application makes it considerably easier for the user who wishes to learn Qiraat anywhere and anytime. e prototype of the application was built, and a summative evaluation was undertaken with potential users who wish to learn Qiraat. It showed that the application has the potential to motivate new users to learn about Qiraat, making them understand better and improvise their Quran recitations. e application has also the potential to act as a supplementary tool for teaching and learning of Qiraat. e number of participants who took part in this study was limited, and the majority of them are university students as they are easy to engage. Although the wider range of participants could have produced a more significant result. However, these results are important as an initial step forward before the application can be generally used by interested users. For the application prototype, it consumes a bigger device's storage space to accommodate the seven Imams audio preinstalled in the application. However, as mentioned earlier, the main concern of this study is to promote ubiquitous teaching and learning of Qiraat; thus, getting feedback on the usability and value of the application was given priority in this study. e utilization of the device's storage space is subject to further research that will be considered in the future. e next step is to investigate further the comments given by the potential users before the ready version of this application can be distributed to the users. is includes improvement in the usage of multimedia elements and the contents of the application.
Data Availability e data generated or analyzed during this study are included within this article.

Conflicts of Interest
e authors declare that they have no conflicts of interest.