Framework for UX Based M-Learning Using Learning Style and Recommendation System

M-learning plays the key role in the educational industry is increasingly. However, the current use of M-learning is not designed for individual learner style. Consequently, it causes many students not to understand lessons precisely.Not only learning style which determines the course material but also user interface and interaction called user experience (UX). Therefore, m-learning combined learning style and user experience (UX) are also proposed to learners in order to obtain better understanding towards lessons. This study conducts sample group in basic programming subject with pre-test and modeling students' learning style using Felder & Silverman learning style. The results showed that students' have different learning styles. This prototype of User Experience of M-learning (UXML) related to this subject was developed to deliver the appropriate content match to each student's learning style. This courseware serves 4 patterns of derived learning style they are Active, Sensing, Visual andSequential.Hence, the students are able to understand topic easier from recommended course material with mobility features.


Introduction
Nowadays, technology plays an important role in people's life increasingly so the information is disseminated conveniently and people can connect more quickly via media. At the present, they create many types and forms of media in order to conform to services, however, many forms of media cannot serve all user needs. Thus, there should be more emphasized on user interaction with the device's user interface, which is called "User Experience (UX)".
User Experience (UX) combines the design of user interface and usability. It is designed for the appearance and techniques that impact on user satisfaction and impression or perception for the products. Such a designer refers electronic media which focus on user perception. To obtain efficient electronic media, the design of user experience (UX) must be considered in order to attract the users.
The advancement of mobile phone in terms of networking and abilities leads to demand in improvement of user experience (UX) on mobile. Therefore, the user experience (UX) now is needed for the ensemble and be considered in development of mobile applications.
With technology, teachers can also do their jobs easier. Teachers can make their lessons more interactive, therefore enhancing the learning experience for the students. Teachers now can use the Internet, having access to many more resources than they had in the past, and since most of the resources have not been high cost anymore. According to a survey of users' use of smartphones, the number of smartphone users in this region will be more than 1,200 million by 2021, representing more than 4% of growth in each year during 2015-2021 [1]. The interesting point is access rate to mobile broadband service in Thailand, Malaysia and Singapore, will be more than 100% by 2017. There was a development of E-learning into M-learning the field of education. It is shifting traditional instruction forms to mobile devices. Learners can be facilitated by pictures, sound, website, and multimedia sent by such devices and they can study at any time and space. However, learners often spend a lot of time and pay attention to many forms of information. Some teachers provide only lecture but some lead learners to guide learners to learn by themselves. Some focus on the principles and applications while other focus on a memory and understanding. When the learning style does not match to the instruction form, learners will get bored and ignore the class, leading the low score and lack of attention. This is because of different learners' learning style. There should have the survey of learners' learning style in the class in order to create the lessons appropriately. In addition, user experience (UX) designed with appropriate user experience (UX) especially m-learning. This research aims to propose the framework for delivery of course material using learning style combined with user experience design (UX) for m-learning. This will maximize effectiveness and service learner needs. Moreover, when the instruction media attracts to learners, it will also affect their improved school record.

User Experience
The new paradigm of user interface design has focused on user interaction with user interface and device. This is called user experience (UX), either useful but it is also the interested fashion. The importance of sophisticated design is to determine user's experience. The objective of user (UX) will conclude given experience, focusing on getting to know the real user. Users participated in the system, should share their objectives. Different courses of setting the objectives UXlead to different stakeholder aspects; therefore, they aim to set the objectives UX and use it as the decision for the design [2].
Nowadays there is a variety of "User Experience Designs". Tom Page's research is emphasized the importance of patterns and tools consideration in UI (User Interface) Design by analyzing the usage of "Skeuomorphism" and "Flat Design" more widely. For Skeuomorphism, it will use graphic UI which duplicates realistic objects. It is relevant the usage of realistic design for UI together with reactions and add more "Flat Design" which is a very digital UI design according to the principle of smooth, shadow less color and color user in order to support specific user behavior, however it is never been neglected for the depth and overall shadow and help user to be able to use interface appropriately. Depth will help to understand the interface as well as a color palette this can be done in detail and also identify information [3]. Furthermore, Google has designed a format called "Material Design" that was invented as design guidelines. The material design was debuted in Google I / O (Input and Output) in 2014.
Due to Google is an opened company or independence company which any developer can partially take some for further development or it can be compared as an open source company. That is the reason of difficulties in controlling software developer to follow our design guidelines. Google created a metaphor to be design guidelines called "Material Design" and be like as visual language by gathering design patterns and guidelines which contain three elements, Materials Are The Metaphor, Bold, graphic and intentional, and Motionprovide meaning [4]. However, to be consistent with learning style completely, thus there is a participation of multimedia, for instance image, video, sound and game in designing UX.

Mobile Learning
Mobile devices take on a role in the education area and developing E-learning to M-learning is interested widely. Because the freedom mobile technology network with accessible at any time anywhere including the increased portable computers, this provides the opportunity to learn without the space and time limit, representing different learning styles via mobile devices' features, especially the smartphone, ie, the interesting device for learning. Its ability to provide for varying learning styles through various features, its link to communication and its social context make it a very attractive tool for learning. The main characteristics that have been identified with mobile technology are nomadic, ubiquity, context, sensitivity, personalization, and interaction.
It is important that m-learning exists within pedagogy and that designers have an understanding of the contexts that learners exist in. m-learning can cater for various learning styles through varying delivery methods. Learning is knowledge that is transferred through communication and m-learning has the ability to support varying learning styles [5].

User Experience for M-Learning
To facilitate the usage of Mobile-learning for instruction and learners, the design and the development of instruction style must be considered the learners' satisfaction and usability in order to attract the learners. A. Dirinand M.
Nieminen proposed the design of UX based on learners, which is called "User Centered Design" model. According to this model, all participants (learner, instructor, developer, and designer) related to lesson had part in the design, considering emotional factors; user enjoyment, adjustable style, and reliability which is important for the M-learning design. Adjustable factor will enhance UX, instructor and student are able to adjust M-learning on their own. Other characteristic like enjoyment, it also affects the sustainable usage of users on application. Perhaps satisfaction alone may not be enough for this but it is also important to consider enjoyment when using M-learning. [6] 2.4. Learning Style The important point in learning is to learn with understanding. Human has a different level of learning, they need a different style of content depending on their learning style. Different styles of content will enhance their abilities to learn.
Learning style refers to learning methods of individuals depending on their strength point, weak point and preference. Many researches were conducted for determining the learners' learning style, for example, Felder & Silverman Index of Learning Styles which is the method using questions and prediction [7]. According to this method, firstly, learners must complete the questionnaire and then the calculation technique will be used to identify their learning style. The learning style model is created based on available information [8].
Lynda Thomas, Mark Ratcliffe, John Woodbury and Emma Jarman's work referring to the difference of the preference on efficiency of learning style. At the beginning of program's design, students were given learning style and their learning style would be compared by efficiency of basic programming test. They will have different performances among them. It was mentioned that learning style of some students might more suitable for studying programing than the others. Moreover, they tried to do and compare traditional teaching and let them choose by their own, then the results were shown the improved performance by using their current school record to compare [9]. The differences between teaching strategies and students learning styles can affect their performance and reduce their interest in a course. So, it is important for instructors to know their students learning styles and take them into account when designing materials and teaching strategies [10]. Figure. 1. The framework for UX based learning using a learning style and recommendation system This research studied and investigated about UX of M-learning which was suitable for the learners learning style on the Introduction to programming, affecting the learners' better understanding. At the beginning, the learner must do pre-test on the basic programming preparation to obtain the learning evaluation. Next, the survey of the Felder-Silverman Learning Style Model is used. The sample group was the first year student, age between 18 and 20 years old. 160 students divided into 4 groups, there are 40 students in each group. According to Felder-Silverman Learning Style Model, these44 questions are given to the 4 groups of students at the same time. They are divided into 4 groups as follows 1) Active and Reflective Learners 2) Sensing and Intuitive Learners 3) Visual and Verbal and 4) Sequential and Global Learner. Then develop the style of UX of M-learning which is suitable for each learners' learning style on the basic programming preparation after testing with the sample group to obtain learning evaluation.

Development of Course Materials Based on Learning Style and User Experience
The prototype of adaptive mobile website courseware has been developed. It was based on learning style and UX. This developed courseware were kept into the course material repository. The distinctive point on all four Learning Styles will be retrieved and match with the repository. Each learning style UX and course material has been labeled. For example, if the student who is in "visual" group, the courseware will retrieve the course material matched to this group. The surveyed data from students were gathered from questionnaire. After that, the learning style of each student were calculated based on the Felder-Silverman Learning Style Model. The results were student's learning style and recorded in the class repository. This can be seen the results of classification of the learning style in Table 1. The results were shown that 68 students were in Learning Style as Visual group, which accounted for 42.5%, this was the highest group for basic programming preparation. While Learning Style as Verbal group had the lowest score. There was no student in Verbal group of learning style according to this experimental group. The details of 4 groups of experimental group presented in Table 2.

Figure. 2. A comparative of Learning style
After the analysis of all students' learning style, there were different learning styles in each group; thus, researcher designed and developed UX on M-learning and divided into 4 groups; 1) Active and Reflective Learners, 2) Sensing and intuitive Learner, 3) Visual and Global and 4) Sequential and Global Learner. The highest learning style in each group will be chosen for developing UX on M-learning, resulting in Visual, Sensing, Active And Sequential. Then, the results from this stage would be brought to the next stage for developing UXML course material.
Other finding is related to rare groups of learning styles. From the findings there are Sequential and Global Learning Style that has the least amount of outcome (result). These two Learning Styles are related with sequence of theirs (students) understanding. Due to the sample group is focusing on freshmen year students whom never write a program. So that their thought process is not practice to think in a logic way yet.

Recommended UXML Based on User's Learning Style
The prototype of each UXML were developed based on different user's learning style. Each style was retrieved from the classroom's repository and shown in student's mobile device. The first pattern of UXML is in a form of VDO media by calling its layout design that "skeuomorphism" in order to create realism for learning.

Figure. 3. UXML for Visual Learner
This pattern is appropriate for "Visual Learner" due to this learner group is able to learn well by watching images or VDO media. The second pattern of UXML is in the form of question and answer with the principle of programming in each topic for learning and having tests in each lesson for knowledge review This pattern uses layout called "Flat Design" in order to become consistent in information reading, as this type is contained a load of information.

Figure. 4. UXML for Sensing Learner
This UX pattern is appropriate for "Sensing Learner" because this learner group likes principles and has capability to memorize and understand information well. The third pattern of UXML is in the form of games supporting in a part of timer system which will stimulate learners have more excitement in doing and solving exercises and also has a score system to evaluate user competencies. In this form, there is a kind of layout usage called skeuomorphism to create better learning atmosphere.

Figure. 5. UXML for Active Learner
This UX pattern is appropriate for "Activist Learner" which is a group of experiment and real execution. The fourth pattern of UXML is in a diagram which is sequential procedure programming by chosen menu. It allows learners to gradually learn in order and also explains in each order for all part understanding by using layout design called Google Material for create smoothness, modern and no boredom in lessons.

Figure. 6. UX M-Learning for Sequential Learner
This UX pattern is appropriate for Sequential Learner due to this learner group would prefer sequential lesson learning in detail.

Conclusion
The traditional M-learning is not considered EUX and the learning style of learners. Despite these factors seem to be important towards course material construction. The problem of ignored factors causes learners not to achieve in lessons. Therefore, to address the problem, UXmobile learning (UXML) was developed. In the experiment, the results showed the analyzing the learning style of first year university students in Basic Programming subject by using Felder & Silverman Model and developed XML based on learning style. The adaptive m-learning courseware corresponding developed UX and learning style are shown in this study.