- Email: [email protected]
Design and Development of MLERWS: A User-Centered Mobile Application for English Reading and Writing Skills
ScienceDirect ScienceDirect
Procedia Computer Science 00 (2019) 000–000 Procedia Computer Science 00 (2019) 000–000
Available online at www.sciencedirect.com
www.elsevier.com/locate/procedia www.elsevier.com/locate/procedia
ScienceDirect Procedia Computer Science 161 (2019) 1002–1010
The Fifth Information Systems International Conference 2019 The Fifth Information Systems International Conference 2019
Design and Development of MLERWS: A User-Centered Mobile Design and Development of MLERWS: A User-Centered Mobile Application for English Reading and Writing Skills Application for English Reading and Writing Skills a a
Charisa F. Llemaa,a,*, Cenie M. Vilela-Malabananbb Charisa F. Llema *, Cenie M. Vilela-Malabanan
Mindanao State University – Tawi-Tawi College of Technology and Oceanography, Bongao, Tawi-Tawi 7500, Philippines b Mindanao State– University Iligan Institute of Technology, Iligan City,Bongao, Lanao 9200, Philippines Mindanao State University Tawi-Tawi –College of Technology and Oceanography, Tawi-Tawi 7500, Philippines b Mindanao State University – Iligan Institute of Technology, Iligan City, Lanao 9200, Philippines
Abstract Abstract This study aimed to design and develop a mobile learning application for the subject English Reading and Writing Skills of senior This aimed to design Sheet and develop mobile learning forevolutionary the subject English Reading Writing of senior high study school. Five-Design (FDS) amethodology andapplication a modified prototyping wasand utilized in Skills designing and high school.that Five-Design (FDS) methodology and application. a modified evolutionary prototyping was utilized in designing and developing resulted to Sheet a user-centered mobile learning The said application underwent three iterations with user developing resulted to a user-centered mobile learning application. The said application iterations with user evaluation tothat ensure its functionalities and usability. The application contains translations fromunderwent English tothree Tausug (the local dialect evaluation functionalities and usability. The and application contains to Furthermore, Tausug (the local dialect in Bongao)totoensure guide its students while studying skimming scanning lessonstranslations along withfrom otherEnglish features. MLERWS in Bongao) to guide students while studying skimming and scanning other to features. Furthermore, (Mobile Learning application for English Reading and Writing Skills) lessons utilized along offlinewith database make the mobile appMLERWS usable for (Mobile application forconnectivity. English Reading and Writing Skills) utilized offline database to make the mobile app usable for students Learning with or without internet students with or without internet connectivity. © 2019 The Authors. Published by Elsevier B.V. © 2019 The Authors. Published by Elsevier B.V. © 2019 The Authors. by Elsevier B.V. This is an open accessPublished article under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) This is an open access article under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) This is an open access article under CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) Peer-review under responsibility of the scientific committee The Fifth Information Systems International Conference 2019 Peer-review under responsibility of the scientific committee ofofThe Fifth Information Systems International Conference 2019. Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019 Keywords: Mobile Computing; Mobile Learning; Five – Design Sheet; User – Center; Evolutionary Prototyping Keywords: Mobile Computing; Mobile Learning; Five – Design Sheet; User – Center; Evolutionary Prototyping
1. Introduction 1. Introduction Because of the affordances of the mobile device, it is used intensively in education. It increases the effectiveness Because of the affordances ofAlso, the mobile device, it is used intensively in education. It increases of the learning environment [1]. evidences show that learning through mobile devices reducesthe theeffectiveness formality of of learning environment [1]. Also, evidences show that learning through mobile devices thethe learning experience and helps engage averse-learners and raise their self-confidence [2]. reduces the formality of the learning experience and helps engage averse-learners and raise their self-confidence [2].
* Corresponding author. Tel.: +63-91-731-078-43. address:author. [email protected] * E-mail Corresponding Tel.: +63-91-731-078-43. E-mail address: [email protected] 1877-0509 © 2019 The Authors. Published by Elsevier B.V. This is an open access under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) 1877-0509 © 2019 Thearticle Authors. Published by Elsevier B.V. Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019 This is an open access article under CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019
1877-0509 © 2019 The Authors. Published by Elsevier B.V. This is an open access article under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019. 10.1016/j.procs.2019.11.210
2
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1003
Mobile learning emerges as a new learning approach that uses mobile devices to support the process of learning. Previous studies [3, 4, 5, 6] showed significant benefits of mobile learning in the education context. The study of Briz-ponce et al. [4], which investigated the effectiveness of mobile learning application in medical education found out that a mobile learning-application enhanced student knowledge of the subject matter. However, they assert that it still necessary to overcome the barriers and the challenges of mobile learning in education context as a pedagogical method. This is supported by two studies [7, 8] which argue that a mobile learning system should fit in the learning environment and learners alike. Therefore, users and stakeholders’ involvement should be taken into consideration when designing and developing a mobile learning application. This study designed and developed MLERWS, a mobile learning application based on the user-centered approach to ensure the appropriateness of the mobile learning application for the user. A user-centered approach is a philosophy and method that focuses on involving users in the design and development of a computerized system [9]. It advocates the involvement of stakeholders (in this case teachers and students) at all stages of the design process as well as to use the iterative prototyping with user feedback to refine the design of the application [10]. 2. Review of related literature This study reviewed literature on design and development methodology that fits the user-centered approach. 2.1 Design methodologies Storyboarding is a design methodology commonly used in system and software application design. It was used by numerous researchers [11, 12, 13, 14, 15] on mobile application design phase. Storyboard also termed “presentation scenario” by Jakob Nielsen are sequences of images that show the relationship between user actions or input and system output [16]. In mobile application, a storyboard is a visual representation of the appearance and flow of the application [15]. Quesenbery and Brooks [17] presented the benefits of using storyboard in software design in their book “Storytelling for user experience”. The style of the designer’s rendition influences the perception of the narrative being describe in storyboarding, with the effect of skewed perception of the intended message [18]. In addition, storyboard alone is not a complete tool for system design [19]. Another methodology used for application design is Wireframing. Wireframes are simple representations of the skeletal structure of a computer system or mobile application, very often compared to a building’s blueprints [20]. It is used to articulate the conceptual design idea by sketching the initial ideas on the paper [21]. Several studies [5, 22, 23] have benefited from the wireframe design method. However, wireframes are only used to lay out hierarchy, structures and relationship between elements of the program or application [24]. Recently, a new design methodology was introduced, which follows a user-centered approach in designing. It is a low fidelity design that can be useful for planning or considering alternative solution [25]. The authors were inspired by the product design approach and presented a new approach to designing which they call Five-Design Sheet (FDS) Methodology [26]. According to Roberts, et al. [27] the FDS methodology provides clear stages and simple approach to ideate visualization design solutions and critically analyze their worth in discussion with the client. The developer creates five design sheets through ongoing interaction with the client. The steps and flow of the Five-Design Sheet methodology are as follows: (1) brainstorming sheet; (2, 3, 4) initial design sheets; and (5) realization sheet. 2.2 Development methodologies Application prototyping is a development methodology that follows the concept of user-centered approach. There are two types of application prototyping namely throwaway/rapid prototyping and evolutionary prototyping. Throwaway/rapid prototyping uses little effort with minimum requirement analysis to build a prototype. A small part of the system is developed and will be given to the end user to try out and evaluate. However, the developer may be pressured by the users to deliver it as a final system, and all the working hours of putting together the throwaway prototypes are lost because the prototype will not be part of the final system [28].
1004
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
3
In evolutionary prototyping, the previous prototype will be use as a basis for the next prototype iteration, and the prototype will eventually become the final product [29]. Many researchers have considered the use of evolutionary prototyping. For example, in the study [30] which applied the model of evolutionary prototyping and utilized longitudinal case study elicited the traceability system requirement at the level of agribusiness. They concluded that evolutionary prototype model, integrated with longitudinal case study, could effectively obtain the traceability requirements dynamically even if requirements changed substantially during implementation at the firm level. Another study [31], which aimed to solve the problem on web-based learning courses, applied the evolutionary prototyping model in proposing three versions of stream-based lecturing system and concluded that the third version full-screen capture mode is the best solution for delivering teacher’s online lecture. 3. Methodology Collaborative method in achieving accurate content was recommended by a content strategist [32]; a channel strategist [30] and used by previous researchers [33]. For this research, an accurate content design for MLERWS was achieved through a collaborative work between the researchers, the subject matter experts (SMEs), and a linguist. The topic chosen by the SMEs for the content of MLERWS are Skimming and Scanning, which were selected from English Reading and Writing Skills subject of senior high school. Topics were collected from the printed materials of the SMEs and was organized by the researchers and then checked by the SMEs for final revisions. Some terminologies were translated from English into the native dialect (Tausug) for a better understanding and learning. The SMEs and the researchers identified the terminologies for translations. Then the native speakers of Tausug were asked to complete the translation, and have it checked by the linguist. Finally, the linguist checked, verified, and handed over the final copy of the translation to the researchers. 3.1 Application design participants The selection of participants for the design phase was done through purposive sampling. The participants were two subject matter experts and ten senior high students from the English reading and writing skills classes. 3.2 Application design process To attain the design of MLERWS, four consecutive collaborative meetings with the twelve participants were conducted. In the first meeting, the researchers introduced the research study and the detailed purpose of the collaboration. Brainstorming of ideas was done through paper sketching. The sketched ideas (sheet 1) were presented to the participants for filtration. The filtered sketch was again presented and discussed with the participants to attain the categorized design. After refining the brainstormed ideas of MLERWS, questions regarding the advantage and disadvantage of the design were entertained. Finally, the idea design was ready for the second phase of FDS. Another meeting was set for the presentation and deliberation of the three initial alternative designs (sheet 2, 3, 4). The second phase of the design was the presentation of the three different designs outputted from the initial brainstormed design. Three completely different designs were presented to the participants and a deliberation followed. The final design (sheet 5) of the MLERWS was then presented to the participants for approval. 3.3 Application development Fig. 1 shows the model of a modified evolutionary prototyping that was followed for the development of MLERWS. The initial prototype was based on the output design from FDS. The development of MLERWS followed an iterative process of refining to meet user satisfaction and produce the final application.
Fig. 1. Modified evolutionary prototyping model.
4
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1005
3.4 Iterative evaluation participants For each evaluation process, at least forty student/users evaluated the prototype. English reading and writing skills teachers were also asked to participate in the evaluation process. Purposive sampling was used in selecting the teachers and the rest of the participants for the iterative evaluation. The SMEs who participated in the design phase were the same teachers who participated in the iterative evaluation process of MLERWS. The students/users were selected according to their availability during the iterative evaluation. However, they were not identified beforehand to avoid bias in the selection. Forty students/users from different colleges and institutions participated in the first iterative evaluation of MLERWS. Another set of forty students/users from other colleges and institutions participated in the second iterative evaluation. Finally, twenty-five percent of the first set of evaluators and seventy-five percent of the second set of evaluators participated the third and final iterative evaluation. 3.5 Iterative Evaluation Process Before the evaluation proper in each iterative evaluation of MLERWS, participants were asked to install MLERWS to their mobile devices and were given instructions and written goals to follow while using the application. After which, participants answered two sets of questionnaires, the Application Usability Scale (AUS) with comment and feedback section (Fig. 2.a) that originated from John Brook’s SUS [34] and the MLERWS User Interface Design Evaluation Questionnaire (UIDEQ) in Fig. 2.b prepared by the researchers. After every iterative evaluation, MLEWRS was redeveloped to prepare it for the next evaluation.
a Application Usability Testing Name (Optional): ______________________________ Instruction: Rate each question from 1 (Strongly disagree) to 5 (Strongly agree). Mark Strongly Strongly check (/) the box of your choice. Disagree
1. I think that I would like to use this application frequently.
1 Strongly Disagree
Agree
2
3
4
Strongly Agree
2. I found the application unnecessarily complex. 3. I thought the application was easy to use.
Strongly Disagree
Strongly Agree
Strongly
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
4. I think that I would need the support of a technical Disagree l person to be able to use this application. 5. I found the various functions in this application were well integrated. 6. I thought there was too much inconsistency in this application. 7. I would imagine that most people would learn to use this system very quickly. 8. I found the application very difficult to use. 9. I felt very confident using the application. 10.
I think this application is very useful.
Comment/ Suggestion: __________________________________________________ __________________________________________________ __________________________________________________ __________________________________________________
b MLERWS User Interface Design Evaluation Questionnaire Goal: To learn and understand skimming and scanning and to practice through games and quizzes. Direction: check yes if you are agree with the statement and no if you are not agree. Participant Name (Optional): __________________ Participant Number: ___________ Accessibility 1. Installation load‐time is reasonable 2. Adequate text‐to‐background contrast 3. Font size/spacing is easy to read Identity 1. Home-view can immediately identify the use or service of the application 2. Clear path to contact information Navigation 1. Number of buttons/image buttons are reasonable 2. Buttons/image buttons are consistent & easy to Identify 3. Buttons on the lesson are easy to navigate 4. Buttons on the headings/toolbars are easy to navigate 5. Dashboard content/buttons are easy to identify and navigate Content 1. Toolbars/heading are clear & descriptive 2. Styles & colors are consistent 3. Games and quizzes are clear
Date: ________________ Gender: ______________ Yes □ Yes □ Yes □
No □ No □ No □
Yes □
No □
Yes □
No □
Yes □ Yes □
No □ No □
Yes □ Yes □
No □ No □
Yes □
No □
Yes □ Yes □ Yes □
No □ No □ No □
Other suggestion: ______________________________________________________________ ______________________________________________________________ ______________________________________________________________ ______________________________________________________________
Fig. 2. (a)Application Usability Scale; (b) MLERWS User Interface Design Evaluation Questionnaire.
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1006
5
4. Results and findings Results and findings of this study are presented in the following subsections. 4.1 MLERWS content The content design for MLERWS includes lesson, activity, and translation that were produced through collaboration with two SMEs and a linguist. 4.2 Five-design sheet output design The designs presented in the FDS process were major interfaces and the designs of MLERWS, such as the home view, menus, and the buttons. The whole process produced six design sheets, which include two designs for sheet 1, three different design sheets for sheet 2, 3, 4 or the alternative design outcomes, and one design for sheet 5 that contains the final design of MLERWS. 4.2.1 Sheet number 1 Sheet number 1 is presented in two different papers with clear graphical representation of the designs. The first paper contains the consolidated idea sheet (Fig. 3.a) collected from the participants. Participants sketched different designs, such as the home view, presentation of the lesson, look of the menu, buttons, and possible color combinations for the MLERWS. The idea design was filtered and categorized. Then, the last representation of the first design sheet contains the refined sketches (Fig. 3.b) from the previous design. Changing of designs and formations are done in this phase. New design that contains dashboard on Home view and new design in Lesson were inserted while removing other designs. The result of this phase was the input for the second, third and fourth design sheet.
a Color: Blue, White, Yellow
Color: Light Gray, Black, Apple green
Sky blue
Font Style: Arial Colored Puzzle
1. The design is something like cool and nice Searching 2. style in the translation/dictionary 3. Have some trivia and word puzzle in the game
1.Color: Yellow / Sky blue 2.Topic : Bold 3.Fonts : Blade
b Home View/Menu
- Basic style it should let the user
Color: Blue 1. By stages and levels (in the quiz) 2. Design a drop of water - change the design 3. The map contains the entire topic. 4. After reading the lesson inside the of the app. map, the reader will start exploring the lesson. - A system for the practice Quiz. Color: Red, Gray, Light blue Font style: Times new roman (Bold) Shapes: circles, cones Content suggestion: styles, decorations, Emoji reactions, image buttons
Lesson
Color: Red
Practice Test/Quiz
IDEA
Fig. 3. (a) Sheet number 1 (idea); (b) Sheet number 1 (combine and refine).
Image Buttons
COMBINE AND REFINE
6
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1007
4.2.2 Sheet number 2, 3, 4 Sheet number 2, 3, 4 contains the three alternative and potential design outcomes from which the participants choose. The three sheets contain the same elements but different designs. Second design sheet (Fig. 4.a) contains a simple buttoned menu on its home view, a book-like lesson interface with home button, a colored puzzle for the activity menu (practice test or quiz), and an interface for the word splash activity. The operations in each interface design is defined in the right corner of the sheet. The advantage of this design is the harmony in the position of the buttons. However, the disadvantage of the design is the difficulty of accessing the activities; a user cannot access the Activities phase unless he or she go through the Lesson.
b
a
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 3
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 2
Layout
\
First screen: Start button – when start button is clicked, the lesson (second screen) will be displayed. Activity menu will be displayed. Translation button – when translation button is clicked, list of translations from English to Tausug will be displayed. Exit button – when exit button is clicked, the app will close/exit. Second screen: - swipe the book like design to proceed to the next page. Third screen: Puzzle like buttons – if any of the puzzle like button is clicked, the corresponding activity will load. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check, then the next question is displayed. Back button – when back button is clicked, the activity menu (third screen) will be displayed. Home button (in three screens) – when home like image button is clicked, the home view (first screen) will be displayed. Operation
The advantage of this design is the harmony of the Fig. 4. (a) Sheet number 2 (Alternative position of buttons. However, it would be difficult for the users to access the activities for they have to pass through lesson.
Focus
Discussion
design); (b) Sheet
First screen: Lesson button – when start button is click, the lesson (second screen) will be displayed. Activities button – when activities button is click, the activities menu (third screen) will be displayed. Translation button – when translation button is click, list of translations from English to Tausug will be displayed. Exit button – when exit button is click, the app will close/exit. Dashboard – when dashboard ( ) is clicked, list of choices will be displayed. Second screen: Main menu button – when main menu button is click, the Layout home view (first screen) will be displayed. Next button – when next button is click, the next page of the lesson is displayed and so on. Trivia – when bulb like button is click, trivia/ information/ examples will be displayed. Third screen: Buttons (Activities) – if any of the button is click, the corresponding activity will load. Main menu button – when main menu button is click, the home view (first screen) will be displayed. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check. Prev button – when back button is click, the previous question will be displayed. number 3 (Alternative Next button – design) when next button is clicked, the next question is displayed. Focus
Operation
The advantage of this design is the visibility of the buttons for the main function of the application and secondary menu (dashboard) in the home view. However, the next buttons, main menu button, and the previous button on the second and fourth screen makes the design unsuitable for Discussion smartphones.
Fig. 4. (a) Sheet number 2 (Alternative design); (b) Sheet number 3 (Alternative design).
Sheet 3 (Fig. 4.b) presents both button menu and dashboard in the home view containing both lesson and activity along with other buttons, which cut the difficulty of users in the first design. However, the lesson interface and the word splash activity are operated using the NEXT button and the activity menu utilized ordinary buttons making the design plain and uninteresting for the millennials. Sheet 4 (Fig. 5.a) shows a simple home view with button menu, a lesson interface that can be swiped, a plain and simple buttoned activity menu, and word splash activity interface with close buttons in all interface designs. The advantage of the design is the easily swiped lesson that will maximize the usage of the smartphone. However, the design of the other three interfaces (Lesson, Activities, Word Splash) are too simple and the close button are sometimes misused.
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1008
7
b
a
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 5
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 4
Layout
First screen: Lesson button – when start button is click, the lesson (second screen) will be display. Activities button – when activities button is click, the activities menu (third screen) will be display. Translation button – when translation button is click, list of translations from English to Tausug will be display. Second screen: - Swipe the screen from right to left and vice versa to proceed to the next or previous page. Third screen: Buttons (Activities) – if any of the button is click, the corresponding activity will load. Main menu button – when main menu button is click, the home view (first screen) will be display. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check, then the next question is displayed. Home button (in three screens) – when home like image button is clicked, the home view (first screen) will be displayed. X like close button – closing the app anywhere in the app
Layout
First screen: Lesson button – when start button is click, the lesson (second screen) will be display. Activities button – when activities button is click, the activities menu (third screen) will be display. Translation button – when translation button is click, list of translations from English to Tausug will be display. Dashboard – when dashboard ( ) is clicked, list of choices will be displayed. Second screen: - Swipe the screen from right to left or vice versa to proceed to the next page. Third screen: Puzzle like buttons – if any of the puzzle like button is click, the corresponding activity will load. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check. Back button – when back button is click, the activity menu (third screen) will be display. Home button (in three screens) – when home like image button is click, the home view (first screen) will be display.
Operations Operation The advantage of this design is the clarity of the buttons, easily swiped so the user can access easily. However, the X button is not advisable for it lead to confusion to the user on when to use it and its functionality. Discussion
Focus
Focus
Dependencies: Android Platform (Java and xml) 1. SQLite database 2. PostgreSQL database 3. Heroku Cloud Platform Development time: 1. 2 months Requirements for using: 2. Android Mobile Device 3. May or may not have internet connection
Details
Fig. 5. (a) Sheet number 4 (Alternative design); (b) Sheet number 5 (Final design).
4.2.3 Sheet number 5 After the presentation of the three alternative designs, the participants selected the final interface design of MLERWS shown in Fig. 5.b. The final design was a consolidated interface designs from the three alternative designs presented and some designs were change after the final deliberation. 4.3 Iterative evaluation result The initial prototype of MLERWS was develop based on the final design sheet out of the design phase. Each version of MLERWS prototype was tested for usability. Scores in three different usability evaluation were collected. For the first iterative evaluation phase, most of user evaluated MLERWS highly. The total usability score accumulated by MLERWS during the first iteration is 70.167 that is equivalent to a “GOOD” adjective rating based on the System Usability Scale rate. Comparing to the first iterative evaluation in the study of Bangor et al. [35] resulted to a SUS score of 62 “POOR”, MLERWS scored considerably higher with 70.167 (GOOD). On the second usability evaluation, a usability score of 75.333 “GOOD” was attained, which was higher than the previous evaluation result. Finally, the mean score of the third prototype is 76.083 that was a bit higher compared to the second iterative evaluation score and falls on “GOOD” interpretation. 4.4 MLERWS interface MLERWS application was tested and run properly on android-based mobile devices with at most 7 inches screen size. Fig. 6.a, 6.b, and 6.c shows some interface of MLERWS that were developed through evolutionary prototyping, which underwent three iterations.
8
Charisaname F. Llema et al. /Computer Procedia Science Computer 161 (2019) 1002–1010 Author / Procedia 00Science (2019) 000–000
a
b
1009
c
Fig. 6. (a) Home view; (b) Activity menu; (c) Lesson Menu
5. Summary and conclusion MLERWS was designed following a user-centered approach utilizing a new design methodology in Information Technology field, the Five-Design Sheet (FDS) methodology and a modified evolutionary prototyping. The app underwent three (3) iteration. The first iterative evaluation was participated by forty (40) university students and another set of forty (40) students evaluated MLERWS for the second iteration. The final iterative evaluation was participated by ten (10) students from the first set of evaluators and thirty (30) from the second set of students. An android version of MLERWS mobile app was designed and developed to facilitate learning of senior high school. The app contains translations from English to Tausug (local dialect of Bongao) to guide students while studying skimming and scanning lessons. Furthermore, MLERWS utilized offline database to make the mobile app usable in the context of the study. References [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]
Göksu, İ., and B. Atici. (2013) “Need for Mobile Learning: Technologies and Opportunities.” Procedia - Social and Behavioral Sciences 103: 685–694. Kadirire, J. (2017) “Instant Messaging for Creating Interactive and Collaborative MLERWSing Environments.” The International Review of Research in Open and Distributed Learning 8 (2): 1–9. Available from: http://www.irrodl.org/index.php/irrodl/article/view/344/874. Basal, A., S. Yilmaz, A. Tanriverdi, and L. Sari. (2016) “Effectiveness of Mobile Applications in Vocabulary Teaching.” Contemporary Educational Technology 7 (1): 47–59. Briz-ponce, L., J. A. Juanes-méndez, F. J. García-peñalvo, and A. Pereira. (2016) “Effects of Mobile Learning in Medical Education : A Counterfactual evaluation.” Journal of Medical Systems. McCurdie, T., S. Taneva, M. Casselman, , M. Yeung, C. McDaniel, W. Ho, and J. Cafazzo. (2012) “mHealth Consumer Apps: The Case For User-Centered Design.” Biomedical instrumentation & technology 46 (s2): 49-56. Nee Chee, K., N. Yahaya, and N. Hasniza Ibrahim. (2017) “Effectiveness of Mobile Learning Application in Improving Reading Skills in Chinese Language and Towards Post-Attitudes.” Int. J. Mobile Learning and Organisation 11 (3): 210–225. Casarini, M. (2015) 8 Adaptive MLERWSing Application Development, based on UCD and the mLUX Framework. Sharples, M., D. Corlett, and O. Westmancott. (2002) “The Design and Implementation of a Mobile-Learning Resource.” Personal and Ubiquitous Computing 6 (3): 220-234. Giardi, A. (2016) “User-Centered Design in a Mobile Learning Course.” 1 (2): 65–78. Rogers, Y., H. Sharp, and J. Preece. (2002) “Interaction Design: Beyond Human Computer Interaction.” Available from: https://doi.org/10.1108/10650741311306291. Diah, N. M., K. M. Ehsan, and M. Ismail. (2010) “Discover Mathematics on Mobile Devices Using Gaming Approach.” Procedia - Social and Behavioral Sciences 8: 670–677. Jumaat, N. F., and Z. Tasir. (2013) “Integrating Project Based Learning Environment into the Design and Development of Mobile Apps for Learning 2D-Animation.” Procedia - Social and Behavioral Sciences 103: 526–533. Nordin, N., M. A. Embi, and M.M. Yunus. (2010) “Mobile Learning Framework for Lifelong Learning.” Procedia - Social and Behavioral Sciences 7 (2): 130–138.
1010
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
9
[14] Perry, B. (2015) “Gamifying French Language Learning: A Case Study Examining a Quest-based, Augmented Reality Mobile Learningtool.” Procedia - Social and Behavioral Sciences 174: 2308–2315. [15] Yahaya, N. S., and S. N. A. Salam. (2014) “Mobile Learning Application for Children: Belajar Bersama Dino.” Procedia - Social and Behavioral Sciences 155 (8): 398–404. [16] Maguire, M. (2001) “Methods to Support Human-Centred Design.” International Journal of Human-Computer Studies 55 (4): 587-634. [17] Quesenbery, W., and K. Brooks. (2010) Storytelling for User Experience: Crafting Stories for Better Design, Rosenfeld Media. [18] Van der Lelie, C. (2006) “The value of storyboards in the product design process.” Personal and Ubiquitous Computing 10 (2–3): 159– 162. [19] Branham, S. M., S. Wahid, D. S. Mccrickard, and V. Tech. (2007) “Channeling Creativity : Using Storyboards and Claims to Encourage Collaborative Design.” Human-Computer Interaction: 1–4. [20] Robles, J. (2013) “The role of Warframing in Mobile App Design.” Available form: https://chaione.com/blog/the-role-of-wireframing-inmobile-app-design/. [Accessed November 4, 2017]. [21] Wong, C. Y., C. W. Khong, and K. Chu. (2012) “Interface Design Practice and Education Towards Mobile Apps Development.” Procedia - Social and Behavioral Sciences 51, 698–702. [22] Yang, Q., J. Zimmerman, A. Steinfeld, and A. Tomasic. (2016) “Planning Adaptive Mobile Experience s When Wireframing.” Proceedings of the 2016 ACM Conference on Designing Interactive Systems: 565–576. [23] Zhang, X., S. Lv, M. Xu, and W. Mu. (2010) “Applying Evolutionary Prototyping Model for Eliciting System Requirement of Meat Traceability at Agribusiness Level.” Food Control 21 (11): 1556–1562. [24] Canbazoglu, E., Y. B. Salman, M. E. Yildirim, B. Merdenyan, and I. F Ince. (2016) “Developing a Mobile Application to Better Inform Patients and Enable Effective Consultation in Implant Dentistry.” Computational and Structural Biotechnology Journal 14: 252–261. [25] Roberts, J. C., C. Headleand, and P.D. Ritsos. (2016) “Sketching Designs Using the Five Design-Sheet Methodology.” IEEE Transactions on Visualization and Computer Graphics 22 (1): 419-428. [26] Roberts, J. C. (2011) “The Five Design-Sheet (FdS) Approach for Sketching Information Visualization Designs.” Eurographics. Available from: http://diglib.eg.org/EG/DL/conf/EG2011/education/029-036.pdf.abstract.pdf. [27] Roberts, J., C. Headleand, and P. Ritsos. (2011) “The Five Design Sheet Methodology.” Eurographics 2011-Education Papers. pp. 27–41. Available from: http://fds.design/wp-content/uploads/2015/06/The-Five-Design-Sheet-Methodology.pdf. [28] Beaudouin-lafon, M., and W.E. Mackay. (2000) “Chapter 52 Prototyping Tools and Techniques”, in Prototype Development and Tools. pp. 1–41. [29] Xiaoshuan, Z., F. Zetian, C. Wengui, T. Dong, and Z. Jian. (2009) “Applying Evolutionary Prototyping Model in Developing FIDSS: an Intelligent Decision Support System for Fish Disease/Health Management.” Expert Systems with Applications 36 (2 PART 2). pp. 3901– 3913. [30] Bailey, L. (2016) “Tips on Collaborating With a Subject Matter Expert (SME).” UoT. Available from: https://upsideoftalent.com/blog/tipson-collaborating-with-a-subject-matter-expert-sme. [Accessed November 29, 2017]. [31] Chen, N., and S. Huang. (2002) “Applying Evolutionary Prototyping Model in Developing Stream-based Lecturing Systems.” 4 (4): 62– 75. [32] De Vries, E. (2017) “How to Collaborate with a Subject Matter Expert. GatherContent.” Available from: https://gathercontent.com/blog/how-to-collaborate-with-a-subject-matter-expert. [Accessed November 29, 2017]. [33] Abdul Razak, R. (2013) “Shared Knowledge Among Graphic Designers, Instructional Designers and Subject Matter Experts in Designing Multimediabased Instructional Media.” Turkish Online Journal of Educational Technology 12 (3): 157–168. [34] Brooke, J. (1996) “SUS: A “Quick And Dirty” Usability Scale”, In P.W.Jordan, B. Thomas, B.A. Weerdmeester, and I.L. McClelland (Eds.) Usability Evaluation in Industry, London, Taylor and Francis. pp. 189-194. [35] Bangor, Aaron, Philip T. Kortum, and James T. Miller. (2008) “An Empirical Evaluation of the System Usability Scale.” Intl. Journal of Human–Computer Interaction 24 (6): 574-594.
Procedia Computer Science 00 (2019) 000–000 Procedia Computer Science 00 (2019) 000–000
Available online at www.sciencedirect.com
www.elsevier.com/locate/procedia www.elsevier.com/locate/procedia
ScienceDirect Procedia Computer Science 161 (2019) 1002–1010
The Fifth Information Systems International Conference 2019 The Fifth Information Systems International Conference 2019
Design and Development of MLERWS: A User-Centered Mobile Design and Development of MLERWS: A User-Centered Mobile Application for English Reading and Writing Skills Application for English Reading and Writing Skills a a
Charisa F. Llemaa,a,*, Cenie M. Vilela-Malabananbb Charisa F. Llema *, Cenie M. Vilela-Malabanan
Mindanao State University – Tawi-Tawi College of Technology and Oceanography, Bongao, Tawi-Tawi 7500, Philippines b Mindanao State– University Iligan Institute of Technology, Iligan City,Bongao, Lanao 9200, Philippines Mindanao State University Tawi-Tawi –College of Technology and Oceanography, Tawi-Tawi 7500, Philippines b Mindanao State University – Iligan Institute of Technology, Iligan City, Lanao 9200, Philippines
Abstract Abstract This study aimed to design and develop a mobile learning application for the subject English Reading and Writing Skills of senior This aimed to design Sheet and develop mobile learning forevolutionary the subject English Reading Writing of senior high study school. Five-Design (FDS) amethodology andapplication a modified prototyping wasand utilized in Skills designing and high school.that Five-Design (FDS) methodology and application. a modified evolutionary prototyping was utilized in designing and developing resulted to Sheet a user-centered mobile learning The said application underwent three iterations with user developing resulted to a user-centered mobile learning application. The said application iterations with user evaluation tothat ensure its functionalities and usability. The application contains translations fromunderwent English tothree Tausug (the local dialect evaluation functionalities and usability. The and application contains to Furthermore, Tausug (the local dialect in Bongao)totoensure guide its students while studying skimming scanning lessonstranslations along withfrom otherEnglish features. MLERWS in Bongao) to guide students while studying skimming and scanning other to features. Furthermore, (Mobile Learning application for English Reading and Writing Skills) lessons utilized along offlinewith database make the mobile appMLERWS usable for (Mobile application forconnectivity. English Reading and Writing Skills) utilized offline database to make the mobile app usable for students Learning with or without internet students with or without internet connectivity. © 2019 The Authors. Published by Elsevier B.V. © 2019 The Authors. Published by Elsevier B.V. © 2019 The Authors. by Elsevier B.V. This is an open accessPublished article under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) This is an open access article under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) This is an open access article under CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) Peer-review under responsibility of the scientific committee The Fifth Information Systems International Conference 2019 Peer-review under responsibility of the scientific committee ofofThe Fifth Information Systems International Conference 2019. Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019 Keywords: Mobile Computing; Mobile Learning; Five – Design Sheet; User – Center; Evolutionary Prototyping Keywords: Mobile Computing; Mobile Learning; Five – Design Sheet; User – Center; Evolutionary Prototyping
1. Introduction 1. Introduction Because of the affordances of the mobile device, it is used intensively in education. It increases the effectiveness Because of the affordances ofAlso, the mobile device, it is used intensively in education. It increases of the learning environment [1]. evidences show that learning through mobile devices reducesthe theeffectiveness formality of of learning environment [1]. Also, evidences show that learning through mobile devices thethe learning experience and helps engage averse-learners and raise their self-confidence [2]. reduces the formality of the learning experience and helps engage averse-learners and raise their self-confidence [2].
* Corresponding author. Tel.: +63-91-731-078-43. address:author. [email protected] * E-mail Corresponding Tel.: +63-91-731-078-43. E-mail address: [email protected] 1877-0509 © 2019 The Authors. Published by Elsevier B.V. This is an open access under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) 1877-0509 © 2019 Thearticle Authors. Published by Elsevier B.V. Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019 This is an open access article under CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019
1877-0509 © 2019 The Authors. Published by Elsevier B.V. This is an open access article under the CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/) Peer-review under responsibility of the scientific committee of The Fifth Information Systems International Conference 2019. 10.1016/j.procs.2019.11.210
2
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1003
Mobile learning emerges as a new learning approach that uses mobile devices to support the process of learning. Previous studies [3, 4, 5, 6] showed significant benefits of mobile learning in the education context. The study of Briz-ponce et al. [4], which investigated the effectiveness of mobile learning application in medical education found out that a mobile learning-application enhanced student knowledge of the subject matter. However, they assert that it still necessary to overcome the barriers and the challenges of mobile learning in education context as a pedagogical method. This is supported by two studies [7, 8] which argue that a mobile learning system should fit in the learning environment and learners alike. Therefore, users and stakeholders’ involvement should be taken into consideration when designing and developing a mobile learning application. This study designed and developed MLERWS, a mobile learning application based on the user-centered approach to ensure the appropriateness of the mobile learning application for the user. A user-centered approach is a philosophy and method that focuses on involving users in the design and development of a computerized system [9]. It advocates the involvement of stakeholders (in this case teachers and students) at all stages of the design process as well as to use the iterative prototyping with user feedback to refine the design of the application [10]. 2. Review of related literature This study reviewed literature on design and development methodology that fits the user-centered approach. 2.1 Design methodologies Storyboarding is a design methodology commonly used in system and software application design. It was used by numerous researchers [11, 12, 13, 14, 15] on mobile application design phase. Storyboard also termed “presentation scenario” by Jakob Nielsen are sequences of images that show the relationship between user actions or input and system output [16]. In mobile application, a storyboard is a visual representation of the appearance and flow of the application [15]. Quesenbery and Brooks [17] presented the benefits of using storyboard in software design in their book “Storytelling for user experience”. The style of the designer’s rendition influences the perception of the narrative being describe in storyboarding, with the effect of skewed perception of the intended message [18]. In addition, storyboard alone is not a complete tool for system design [19]. Another methodology used for application design is Wireframing. Wireframes are simple representations of the skeletal structure of a computer system or mobile application, very often compared to a building’s blueprints [20]. It is used to articulate the conceptual design idea by sketching the initial ideas on the paper [21]. Several studies [5, 22, 23] have benefited from the wireframe design method. However, wireframes are only used to lay out hierarchy, structures and relationship between elements of the program or application [24]. Recently, a new design methodology was introduced, which follows a user-centered approach in designing. It is a low fidelity design that can be useful for planning or considering alternative solution [25]. The authors were inspired by the product design approach and presented a new approach to designing which they call Five-Design Sheet (FDS) Methodology [26]. According to Roberts, et al. [27] the FDS methodology provides clear stages and simple approach to ideate visualization design solutions and critically analyze their worth in discussion with the client. The developer creates five design sheets through ongoing interaction with the client. The steps and flow of the Five-Design Sheet methodology are as follows: (1) brainstorming sheet; (2, 3, 4) initial design sheets; and (5) realization sheet. 2.2 Development methodologies Application prototyping is a development methodology that follows the concept of user-centered approach. There are two types of application prototyping namely throwaway/rapid prototyping and evolutionary prototyping. Throwaway/rapid prototyping uses little effort with minimum requirement analysis to build a prototype. A small part of the system is developed and will be given to the end user to try out and evaluate. However, the developer may be pressured by the users to deliver it as a final system, and all the working hours of putting together the throwaway prototypes are lost because the prototype will not be part of the final system [28].
1004
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
3
In evolutionary prototyping, the previous prototype will be use as a basis for the next prototype iteration, and the prototype will eventually become the final product [29]. Many researchers have considered the use of evolutionary prototyping. For example, in the study [30] which applied the model of evolutionary prototyping and utilized longitudinal case study elicited the traceability system requirement at the level of agribusiness. They concluded that evolutionary prototype model, integrated with longitudinal case study, could effectively obtain the traceability requirements dynamically even if requirements changed substantially during implementation at the firm level. Another study [31], which aimed to solve the problem on web-based learning courses, applied the evolutionary prototyping model in proposing three versions of stream-based lecturing system and concluded that the third version full-screen capture mode is the best solution for delivering teacher’s online lecture. 3. Methodology Collaborative method in achieving accurate content was recommended by a content strategist [32]; a channel strategist [30] and used by previous researchers [33]. For this research, an accurate content design for MLERWS was achieved through a collaborative work between the researchers, the subject matter experts (SMEs), and a linguist. The topic chosen by the SMEs for the content of MLERWS are Skimming and Scanning, which were selected from English Reading and Writing Skills subject of senior high school. Topics were collected from the printed materials of the SMEs and was organized by the researchers and then checked by the SMEs for final revisions. Some terminologies were translated from English into the native dialect (Tausug) for a better understanding and learning. The SMEs and the researchers identified the terminologies for translations. Then the native speakers of Tausug were asked to complete the translation, and have it checked by the linguist. Finally, the linguist checked, verified, and handed over the final copy of the translation to the researchers. 3.1 Application design participants The selection of participants for the design phase was done through purposive sampling. The participants were two subject matter experts and ten senior high students from the English reading and writing skills classes. 3.2 Application design process To attain the design of MLERWS, four consecutive collaborative meetings with the twelve participants were conducted. In the first meeting, the researchers introduced the research study and the detailed purpose of the collaboration. Brainstorming of ideas was done through paper sketching. The sketched ideas (sheet 1) were presented to the participants for filtration. The filtered sketch was again presented and discussed with the participants to attain the categorized design. After refining the brainstormed ideas of MLERWS, questions regarding the advantage and disadvantage of the design were entertained. Finally, the idea design was ready for the second phase of FDS. Another meeting was set for the presentation and deliberation of the three initial alternative designs (sheet 2, 3, 4). The second phase of the design was the presentation of the three different designs outputted from the initial brainstormed design. Three completely different designs were presented to the participants and a deliberation followed. The final design (sheet 5) of the MLERWS was then presented to the participants for approval. 3.3 Application development Fig. 1 shows the model of a modified evolutionary prototyping that was followed for the development of MLERWS. The initial prototype was based on the output design from FDS. The development of MLERWS followed an iterative process of refining to meet user satisfaction and produce the final application.
Fig. 1. Modified evolutionary prototyping model.
4
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1005
3.4 Iterative evaluation participants For each evaluation process, at least forty student/users evaluated the prototype. English reading and writing skills teachers were also asked to participate in the evaluation process. Purposive sampling was used in selecting the teachers and the rest of the participants for the iterative evaluation. The SMEs who participated in the design phase were the same teachers who participated in the iterative evaluation process of MLERWS. The students/users were selected according to their availability during the iterative evaluation. However, they were not identified beforehand to avoid bias in the selection. Forty students/users from different colleges and institutions participated in the first iterative evaluation of MLERWS. Another set of forty students/users from other colleges and institutions participated in the second iterative evaluation. Finally, twenty-five percent of the first set of evaluators and seventy-five percent of the second set of evaluators participated the third and final iterative evaluation. 3.5 Iterative Evaluation Process Before the evaluation proper in each iterative evaluation of MLERWS, participants were asked to install MLERWS to their mobile devices and were given instructions and written goals to follow while using the application. After which, participants answered two sets of questionnaires, the Application Usability Scale (AUS) with comment and feedback section (Fig. 2.a) that originated from John Brook’s SUS [34] and the MLERWS User Interface Design Evaluation Questionnaire (UIDEQ) in Fig. 2.b prepared by the researchers. After every iterative evaluation, MLEWRS was redeveloped to prepare it for the next evaluation.
a Application Usability Testing Name (Optional): ______________________________ Instruction: Rate each question from 1 (Strongly disagree) to 5 (Strongly agree). Mark Strongly Strongly check (/) the box of your choice. Disagree
1. I think that I would like to use this application frequently.
1 Strongly Disagree
Agree
2
3
4
Strongly Agree
2. I found the application unnecessarily complex. 3. I thought the application was easy to use.
Strongly Disagree
Strongly Agree
Strongly
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
Strongly Disagree
Strongly Agree
4. I think that I would need the support of a technical Disagree l person to be able to use this application. 5. I found the various functions in this application were well integrated. 6. I thought there was too much inconsistency in this application. 7. I would imagine that most people would learn to use this system very quickly. 8. I found the application very difficult to use. 9. I felt very confident using the application. 10.
I think this application is very useful.
Comment/ Suggestion: __________________________________________________ __________________________________________________ __________________________________________________ __________________________________________________
b MLERWS User Interface Design Evaluation Questionnaire Goal: To learn and understand skimming and scanning and to practice through games and quizzes. Direction: check yes if you are agree with the statement and no if you are not agree. Participant Name (Optional): __________________ Participant Number: ___________ Accessibility 1. Installation load‐time is reasonable 2. Adequate text‐to‐background contrast 3. Font size/spacing is easy to read Identity 1. Home-view can immediately identify the use or service of the application 2. Clear path to contact information Navigation 1. Number of buttons/image buttons are reasonable 2. Buttons/image buttons are consistent & easy to Identify 3. Buttons on the lesson are easy to navigate 4. Buttons on the headings/toolbars are easy to navigate 5. Dashboard content/buttons are easy to identify and navigate Content 1. Toolbars/heading are clear & descriptive 2. Styles & colors are consistent 3. Games and quizzes are clear
Date: ________________ Gender: ______________ Yes □ Yes □ Yes □
No □ No □ No □
Yes □
No □
Yes □
No □
Yes □ Yes □
No □ No □
Yes □ Yes □
No □ No □
Yes □
No □
Yes □ Yes □ Yes □
No □ No □ No □
Other suggestion: ______________________________________________________________ ______________________________________________________________ ______________________________________________________________ ______________________________________________________________
Fig. 2. (a)Application Usability Scale; (b) MLERWS User Interface Design Evaluation Questionnaire.
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1006
5
4. Results and findings Results and findings of this study are presented in the following subsections. 4.1 MLERWS content The content design for MLERWS includes lesson, activity, and translation that were produced through collaboration with two SMEs and a linguist. 4.2 Five-design sheet output design The designs presented in the FDS process were major interfaces and the designs of MLERWS, such as the home view, menus, and the buttons. The whole process produced six design sheets, which include two designs for sheet 1, three different design sheets for sheet 2, 3, 4 or the alternative design outcomes, and one design for sheet 5 that contains the final design of MLERWS. 4.2.1 Sheet number 1 Sheet number 1 is presented in two different papers with clear graphical representation of the designs. The first paper contains the consolidated idea sheet (Fig. 3.a) collected from the participants. Participants sketched different designs, such as the home view, presentation of the lesson, look of the menu, buttons, and possible color combinations for the MLERWS. The idea design was filtered and categorized. Then, the last representation of the first design sheet contains the refined sketches (Fig. 3.b) from the previous design. Changing of designs and formations are done in this phase. New design that contains dashboard on Home view and new design in Lesson were inserted while removing other designs. The result of this phase was the input for the second, third and fourth design sheet.
a Color: Blue, White, Yellow
Color: Light Gray, Black, Apple green
Sky blue
Font Style: Arial Colored Puzzle
1. The design is something like cool and nice Searching 2. style in the translation/dictionary 3. Have some trivia and word puzzle in the game
1.Color: Yellow / Sky blue 2.Topic : Bold 3.Fonts : Blade
b Home View/Menu
- Basic style it should let the user
Color: Blue 1. By stages and levels (in the quiz) 2. Design a drop of water - change the design 3. The map contains the entire topic. 4. After reading the lesson inside the of the app. map, the reader will start exploring the lesson. - A system for the practice Quiz. Color: Red, Gray, Light blue Font style: Times new roman (Bold) Shapes: circles, cones Content suggestion: styles, decorations, Emoji reactions, image buttons
Lesson
Color: Red
Practice Test/Quiz
IDEA
Fig. 3. (a) Sheet number 1 (idea); (b) Sheet number 1 (combine and refine).
Image Buttons
COMBINE AND REFINE
6
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1007
4.2.2 Sheet number 2, 3, 4 Sheet number 2, 3, 4 contains the three alternative and potential design outcomes from which the participants choose. The three sheets contain the same elements but different designs. Second design sheet (Fig. 4.a) contains a simple buttoned menu on its home view, a book-like lesson interface with home button, a colored puzzle for the activity menu (practice test or quiz), and an interface for the word splash activity. The operations in each interface design is defined in the right corner of the sheet. The advantage of this design is the harmony in the position of the buttons. However, the disadvantage of the design is the difficulty of accessing the activities; a user cannot access the Activities phase unless he or she go through the Lesson.
b
a
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 3
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 2
Layout
\
First screen: Start button – when start button is clicked, the lesson (second screen) will be displayed. Activity menu will be displayed. Translation button – when translation button is clicked, list of translations from English to Tausug will be displayed. Exit button – when exit button is clicked, the app will close/exit. Second screen: - swipe the book like design to proceed to the next page. Third screen: Puzzle like buttons – if any of the puzzle like button is clicked, the corresponding activity will load. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check, then the next question is displayed. Back button – when back button is clicked, the activity menu (third screen) will be displayed. Home button (in three screens) – when home like image button is clicked, the home view (first screen) will be displayed. Operation
The advantage of this design is the harmony of the Fig. 4. (a) Sheet number 2 (Alternative position of buttons. However, it would be difficult for the users to access the activities for they have to pass through lesson.
Focus
Discussion
design); (b) Sheet
First screen: Lesson button – when start button is click, the lesson (second screen) will be displayed. Activities button – when activities button is click, the activities menu (third screen) will be displayed. Translation button – when translation button is click, list of translations from English to Tausug will be displayed. Exit button – when exit button is click, the app will close/exit. Dashboard – when dashboard ( ) is clicked, list of choices will be displayed. Second screen: Main menu button – when main menu button is click, the Layout home view (first screen) will be displayed. Next button – when next button is click, the next page of the lesson is displayed and so on. Trivia – when bulb like button is click, trivia/ information/ examples will be displayed. Third screen: Buttons (Activities) – if any of the button is click, the corresponding activity will load. Main menu button – when main menu button is click, the home view (first screen) will be displayed. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check. Prev button – when back button is click, the previous question will be displayed. number 3 (Alternative Next button – design) when next button is clicked, the next question is displayed. Focus
Operation
The advantage of this design is the visibility of the buttons for the main function of the application and secondary menu (dashboard) in the home view. However, the next buttons, main menu button, and the previous button on the second and fourth screen makes the design unsuitable for Discussion smartphones.
Fig. 4. (a) Sheet number 2 (Alternative design); (b) Sheet number 3 (Alternative design).
Sheet 3 (Fig. 4.b) presents both button menu and dashboard in the home view containing both lesson and activity along with other buttons, which cut the difficulty of users in the first design. However, the lesson interface and the word splash activity are operated using the NEXT button and the activity menu utilized ordinary buttons making the design plain and uninteresting for the millennials. Sheet 4 (Fig. 5.a) shows a simple home view with button menu, a lesson interface that can be swiped, a plain and simple buttoned activity menu, and word splash activity interface with close buttons in all interface designs. The advantage of the design is the easily swiped lesson that will maximize the usage of the smartphone. However, the design of the other three interfaces (Lesson, Activities, Word Splash) are too simple and the close button are sometimes misused.
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
1008
7
b
a
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 5
TITLE: M - LEARN AUTHOR: CHARISA F. LLEMA DATE: APRIL 15, 2018 SHEET NUMBER: 4
Layout
First screen: Lesson button – when start button is click, the lesson (second screen) will be display. Activities button – when activities button is click, the activities menu (third screen) will be display. Translation button – when translation button is click, list of translations from English to Tausug will be display. Second screen: - Swipe the screen from right to left and vice versa to proceed to the next or previous page. Third screen: Buttons (Activities) – if any of the button is click, the corresponding activity will load. Main menu button – when main menu button is click, the home view (first screen) will be display. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check, then the next question is displayed. Home button (in three screens) – when home like image button is clicked, the home view (first screen) will be displayed. X like close button – closing the app anywhere in the app
Layout
First screen: Lesson button – when start button is click, the lesson (second screen) will be display. Activities button – when activities button is click, the activities menu (third screen) will be display. Translation button – when translation button is click, list of translations from English to Tausug will be display. Dashboard – when dashboard ( ) is clicked, list of choices will be displayed. Second screen: - Swipe the screen from right to left or vice versa to proceed to the next page. Third screen: Puzzle like buttons – if any of the puzzle like button is click, the corresponding activity will load. Fourth screen: Submit button – when the submit button is clicked, the answer will be submitted and check. Back button – when back button is click, the activity menu (third screen) will be display. Home button (in three screens) – when home like image button is click, the home view (first screen) will be display.
Operations Operation The advantage of this design is the clarity of the buttons, easily swiped so the user can access easily. However, the X button is not advisable for it lead to confusion to the user on when to use it and its functionality. Discussion
Focus
Focus
Dependencies: Android Platform (Java and xml) 1. SQLite database 2. PostgreSQL database 3. Heroku Cloud Platform Development time: 1. 2 months Requirements for using: 2. Android Mobile Device 3. May or may not have internet connection
Details
Fig. 5. (a) Sheet number 4 (Alternative design); (b) Sheet number 5 (Final design).
4.2.3 Sheet number 5 After the presentation of the three alternative designs, the participants selected the final interface design of MLERWS shown in Fig. 5.b. The final design was a consolidated interface designs from the three alternative designs presented and some designs were change after the final deliberation. 4.3 Iterative evaluation result The initial prototype of MLERWS was develop based on the final design sheet out of the design phase. Each version of MLERWS prototype was tested for usability. Scores in three different usability evaluation were collected. For the first iterative evaluation phase, most of user evaluated MLERWS highly. The total usability score accumulated by MLERWS during the first iteration is 70.167 that is equivalent to a “GOOD” adjective rating based on the System Usability Scale rate. Comparing to the first iterative evaluation in the study of Bangor et al. [35] resulted to a SUS score of 62 “POOR”, MLERWS scored considerably higher with 70.167 (GOOD). On the second usability evaluation, a usability score of 75.333 “GOOD” was attained, which was higher than the previous evaluation result. Finally, the mean score of the third prototype is 76.083 that was a bit higher compared to the second iterative evaluation score and falls on “GOOD” interpretation. 4.4 MLERWS interface MLERWS application was tested and run properly on android-based mobile devices with at most 7 inches screen size. Fig. 6.a, 6.b, and 6.c shows some interface of MLERWS that were developed through evolutionary prototyping, which underwent three iterations.
8
Charisaname F. Llema et al. /Computer Procedia Science Computer 161 (2019) 1002–1010 Author / Procedia 00Science (2019) 000–000
a
b
1009
c
Fig. 6. (a) Home view; (b) Activity menu; (c) Lesson Menu
5. Summary and conclusion MLERWS was designed following a user-centered approach utilizing a new design methodology in Information Technology field, the Five-Design Sheet (FDS) methodology and a modified evolutionary prototyping. The app underwent three (3) iteration. The first iterative evaluation was participated by forty (40) university students and another set of forty (40) students evaluated MLERWS for the second iteration. The final iterative evaluation was participated by ten (10) students from the first set of evaluators and thirty (30) from the second set of students. An android version of MLERWS mobile app was designed and developed to facilitate learning of senior high school. The app contains translations from English to Tausug (local dialect of Bongao) to guide students while studying skimming and scanning lessons. Furthermore, MLERWS utilized offline database to make the mobile app usable in the context of the study. References [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]
Göksu, İ., and B. Atici. (2013) “Need for Mobile Learning: Technologies and Opportunities.” Procedia - Social and Behavioral Sciences 103: 685–694. Kadirire, J. (2017) “Instant Messaging for Creating Interactive and Collaborative MLERWSing Environments.” The International Review of Research in Open and Distributed Learning 8 (2): 1–9. Available from: http://www.irrodl.org/index.php/irrodl/article/view/344/874. Basal, A., S. Yilmaz, A. Tanriverdi, and L. Sari. (2016) “Effectiveness of Mobile Applications in Vocabulary Teaching.” Contemporary Educational Technology 7 (1): 47–59. Briz-ponce, L., J. A. Juanes-méndez, F. J. García-peñalvo, and A. Pereira. (2016) “Effects of Mobile Learning in Medical Education : A Counterfactual evaluation.” Journal of Medical Systems. McCurdie, T., S. Taneva, M. Casselman, , M. Yeung, C. McDaniel, W. Ho, and J. Cafazzo. (2012) “mHealth Consumer Apps: The Case For User-Centered Design.” Biomedical instrumentation & technology 46 (s2): 49-56. Nee Chee, K., N. Yahaya, and N. Hasniza Ibrahim. (2017) “Effectiveness of Mobile Learning Application in Improving Reading Skills in Chinese Language and Towards Post-Attitudes.” Int. J. Mobile Learning and Organisation 11 (3): 210–225. Casarini, M. (2015) 8 Adaptive MLERWSing Application Development, based on UCD and the mLUX Framework. Sharples, M., D. Corlett, and O. Westmancott. (2002) “The Design and Implementation of a Mobile-Learning Resource.” Personal and Ubiquitous Computing 6 (3): 220-234. Giardi, A. (2016) “User-Centered Design in a Mobile Learning Course.” 1 (2): 65–78. Rogers, Y., H. Sharp, and J. Preece. (2002) “Interaction Design: Beyond Human Computer Interaction.” Available from: https://doi.org/10.1108/10650741311306291. Diah, N. M., K. M. Ehsan, and M. Ismail. (2010) “Discover Mathematics on Mobile Devices Using Gaming Approach.” Procedia - Social and Behavioral Sciences 8: 670–677. Jumaat, N. F., and Z. Tasir. (2013) “Integrating Project Based Learning Environment into the Design and Development of Mobile Apps for Learning 2D-Animation.” Procedia - Social and Behavioral Sciences 103: 526–533. Nordin, N., M. A. Embi, and M.M. Yunus. (2010) “Mobile Learning Framework for Lifelong Learning.” Procedia - Social and Behavioral Sciences 7 (2): 130–138.
1010
Charisa F. Llema et al. / Procedia Computer Science 161 (2019) 1002–1010 Author name / Procedia Computer Science 00 (2019) 000–000
9
[14] Perry, B. (2015) “Gamifying French Language Learning: A Case Study Examining a Quest-based, Augmented Reality Mobile Learningtool.” Procedia - Social and Behavioral Sciences 174: 2308–2315. [15] Yahaya, N. S., and S. N. A. Salam. (2014) “Mobile Learning Application for Children: Belajar Bersama Dino.” Procedia - Social and Behavioral Sciences 155 (8): 398–404. [16] Maguire, M. (2001) “Methods to Support Human-Centred Design.” International Journal of Human-Computer Studies 55 (4): 587-634. [17] Quesenbery, W., and K. Brooks. (2010) Storytelling for User Experience: Crafting Stories for Better Design, Rosenfeld Media. [18] Van der Lelie, C. (2006) “The value of storyboards in the product design process.” Personal and Ubiquitous Computing 10 (2–3): 159– 162. [19] Branham, S. M., S. Wahid, D. S. Mccrickard, and V. Tech. (2007) “Channeling Creativity : Using Storyboards and Claims to Encourage Collaborative Design.” Human-Computer Interaction: 1–4. [20] Robles, J. (2013) “The role of Warframing in Mobile App Design.” Available form: https://chaione.com/blog/the-role-of-wireframing-inmobile-app-design/. [Accessed November 4, 2017]. [21] Wong, C. Y., C. W. Khong, and K. Chu. (2012) “Interface Design Practice and Education Towards Mobile Apps Development.” Procedia - Social and Behavioral Sciences 51, 698–702. [22] Yang, Q., J. Zimmerman, A. Steinfeld, and A. Tomasic. (2016) “Planning Adaptive Mobile Experience s When Wireframing.” Proceedings of the 2016 ACM Conference on Designing Interactive Systems: 565–576. [23] Zhang, X., S. Lv, M. Xu, and W. Mu. (2010) “Applying Evolutionary Prototyping Model for Eliciting System Requirement of Meat Traceability at Agribusiness Level.” Food Control 21 (11): 1556–1562. [24] Canbazoglu, E., Y. B. Salman, M. E. Yildirim, B. Merdenyan, and I. F Ince. (2016) “Developing a Mobile Application to Better Inform Patients and Enable Effective Consultation in Implant Dentistry.” Computational and Structural Biotechnology Journal 14: 252–261. [25] Roberts, J. C., C. Headleand, and P.D. Ritsos. (2016) “Sketching Designs Using the Five Design-Sheet Methodology.” IEEE Transactions on Visualization and Computer Graphics 22 (1): 419-428. [26] Roberts, J. C. (2011) “The Five Design-Sheet (FdS) Approach for Sketching Information Visualization Designs.” Eurographics. Available from: http://diglib.eg.org/EG/DL/conf/EG2011/education/029-036.pdf.abstract.pdf. [27] Roberts, J., C. Headleand, and P. Ritsos. (2011) “The Five Design Sheet Methodology.” Eurographics 2011-Education Papers. pp. 27–41. Available from: http://fds.design/wp-content/uploads/2015/06/The-Five-Design-Sheet-Methodology.pdf. [28] Beaudouin-lafon, M., and W.E. Mackay. (2000) “Chapter 52 Prototyping Tools and Techniques”, in Prototype Development and Tools. pp. 1–41. [29] Xiaoshuan, Z., F. Zetian, C. Wengui, T. Dong, and Z. Jian. (2009) “Applying Evolutionary Prototyping Model in Developing FIDSS: an Intelligent Decision Support System for Fish Disease/Health Management.” Expert Systems with Applications 36 (2 PART 2). pp. 3901– 3913. [30] Bailey, L. (2016) “Tips on Collaborating With a Subject Matter Expert (SME).” UoT. Available from: https://upsideoftalent.com/blog/tipson-collaborating-with-a-subject-matter-expert-sme. [Accessed November 29, 2017]. [31] Chen, N., and S. Huang. (2002) “Applying Evolutionary Prototyping Model in Developing Stream-based Lecturing Systems.” 4 (4): 62– 75. [32] De Vries, E. (2017) “How to Collaborate with a Subject Matter Expert. GatherContent.” Available from: https://gathercontent.com/blog/how-to-collaborate-with-a-subject-matter-expert. [Accessed November 29, 2017]. [33] Abdul Razak, R. (2013) “Shared Knowledge Among Graphic Designers, Instructional Designers and Subject Matter Experts in Designing Multimediabased Instructional Media.” Turkish Online Journal of Educational Technology 12 (3): 157–168. [34] Brooke, J. (1996) “SUS: A “Quick And Dirty” Usability Scale”, In P.W.Jordan, B. Thomas, B.A. Weerdmeester, and I.L. McClelland (Eds.) Usability Evaluation in Industry, London, Taylor and Francis. pp. 189-194. [35] Bangor, Aaron, Philip T. Kortum, and James T. Miller. (2008) “An Empirical Evaluation of the System Usability Scale.” Intl. Journal of Human–Computer Interaction 24 (6): 574-594.