Development & Evaluation of E-Learning Module Based on Visual and Global Preferences Using a User-Centered Design Approach

— Students develop various learning styles based on their preferences and learning habits. To serve different learning styles in a class with a number of students using the conventional face-to-face teaching method is not practical; therefore, the idea of personalized e-Learning to accommodate differences in learning style has arisen. Building on this idea, this research intends to provide an alternative interaction design for e-Learning modules by developing content based on user needs using the User-Centered Design methodology. Due to a lack of e-Learning content for visual and global preferences in the Felder-Silverman learning styles, User-Centered Design is chosen as the basis to design the e-Learning module. The result consists of an alternative design and a proposed interface design. The alternative design describes learning objects and navigation of the e-Learning module. The proposed interface design is a prototype of an interactive e-Learning module. After being evaluated, the prototype satisfies the user's expectations in terms of content translation, content navigation, and interactivity throughout the module.


Introduction
In this day and age, we can communicate, obtain information, learn something new and watch entertainment seamlessly. One of the interesting aspects of this change in the educational sector is the opportunity to learn online using e-Learning. Learning over the internet is a new method that is not offered by conventional classrooms, and there is no direct communication and no direct supervision [1]. E-Learning has also been particularly helpful for the educational world during the pandemic, since the conventional class arrangement may not be accessible for some time [2]. E-Learning offers convenience for students in terms of gathering information and constructing knowledge. Students often have different approaches for constructing knowledge, and this can lead to unique learning styles. The diversity of learning styles should be addressed by teachers due to its significant influence on how well students can grasp new knowledge and skills [3]. To serve different learning styles in a class with a number of students using the conventional face-to-face teaching method is not practical. A new effort is needed to maximize online learning strategies so that they can have positive and effective impacts on student academic productivity [4]; therefore, the idea of personalized e-Learning to accommodate differences in learning style has arisen.
One of the aspects crucial to the success of an e-Learning implementation is interaction design [5]. Implementing interaction design provides opportunity for learners to prepare themselves both physically and mentally for participating in learning activities [6]. A recent study conducted by Kolekar, Pai, and Pai [7] developed a Moodle-based elearning system user interface personalization based on the Felder-Silverman learning styles. Another study from El-Bishouty et al. [8] discussed learning object personalization based on the dimensions of the Felder-Silverman learning styles. However, these studies did not include first-hand inquiries into user requirements, characteristics, and preferences, which is an important part of interaction design.
There are four dimensions to Felder-Silverman learning, namely: (1) processing; (2) perception; (3) input; and (4) organization [9]. A study by El-Bishouty et al. [8] resulted in a generally supportive analysis of e-Learning for each of the dimensions of the Felder-Silverman learning styles. In the organization dimension, global learners are out-performed by sequential learners. It has also been shown that students are likely to gain knowledge and learn in different ways or using different teaching resources. In the input dimension, visual learners are out-performed by verbal learners. In an online course, students who received content that matched their multimedia preferences and learning styles scored higher as compared to students whose preferences and styles did not match the format of the content. These findings imply that both visual and global preferences in Felder-Silverman learning styles are not supported enough by e-Learning in general.
In order to create a proper interaction design for an e-Learning module based on visual and global preferences in the Felder-Silverman learning styles, this study proposes an alternative interface design based on comprehensive user research as well as aspects of interaction design, such as Shneiderman's Eight Golden Rules of Interface Design [10], as part of the adopted user-centered design method. The Felder-Silverman Learning Style Model is chosen as the foundation to design the e-Learning module because of its ability to describe various learning styles in the context of e-Learning [11]. Visual and global preferences are chosen as the basis for designing the e-Learning module due to the lack of content implementation in e-Learning in general [8]. As such, these two research questions are considered:

Literature review
This study aims to create a proper interaction design for an e-Learning module based on the visual and global preferences the in Felder-Silverman learning styles. Literature used to support the research include learning style, e-Learning, design methodology, and related works.

Learning Style
Each student has their own learning style [3]. The learning style of each student is highly influential in determining their learning strategy. Students have different levels of motivation, views, and responses to the learning process and any given classroom environment. A learning process that is not in accordance with a student's learning characteristics will lead to an ineffective and unpleasant learning process. This problem has encouraged researchers in the educational field to examine and formulate various models of learning styles.
Research on learning styles has produced several theories, each put forward with a different perspective on the characteristics of student learning style preferences. Several learning style theories that have been proposed are Kolb's Model, the Myers-Briggs Type Indicator (MBTI) and the Felder-Silverman Model (FSLSM).
This study uses the Felder-Silverman Learning Style Model (FSLSM) as the reference learning style. FSLSM is a four-dimensional model with a dichotomy that describes a person's learning preferences, namely (1) processing (active / reflective), (2) perception (sensory / intuitive), (3) input (visual / verbal), (4) understanding (sequential / global) [9]. It is used to determine participants who prefer a visual and global learning style.

E-learning
E-Learning was developed to support distance learning and the implementation of new learning paradigms, such as student-centered learning [1]. E-Learning contains a content management called Learning Module. Learning Module is a tool that provides course material in a logical, sequential manner, guiding students through content and assessments in the order specified by the instructor. A Learning Module can support a course goal, a course objective, a subject, a concept, or a theme. In this case, a Learning Module can be a boundary to fully support an e-Learning experience.
One e-Learning approach is the student-centered learning approach. Studentcentered learning is useful for defining the flow of e-Learning. The definition of student-centered learning, as stated by Lea et al. [12], is a form of learning that focuses on student activities and their responsibilities in learning. In this case, the student must have preference in learning or learning style preference. To accommodate learning style preference, a study conducted by El-Bishouty et al. [8] discussed the pattern of student preferences for specific learning objects. The research described 11 kinds of learning objects for every preference in the Felder-Silverman learning style.
In this study, Learning Modules and learning style preferences are combined into guidelines in order to create the foundation for the prototype. The importance of e-Learning is to guide learners through content or a sequence of tasks in an organized manner.

User-centered design
User-Centered Design (UCD) is an iterative method for designing a desired interface that meets the users' needs [13]. The paradigm situates the users' needs, desires, and limits as the main focus in every design stage by applying various methods and techniques that are well known for analyzing, designing, and evaluating. UCD helps the development phase meet the users' needs and capability, particularly for novice users.

Related Works
This research is in many ways distinct from (or even an enhancement of) previous studies. Previous studies have also sought to create or emphasize e-Learning using the learning style approach. While their goal may have been similar to that of this study, the difference between this study and previous studies is best illustrated through a comparison.
The table 1 compares how this study and previous research are connected. Most of the studies above used Felder-Silverman learning styles as guidance, with the exception of the research by Delen et al. [14]. Another improvement in this study is the use of UCD as a prototyping method, thus increasing the involvement of the user.

Focus Difference(s)
Delen, Liew, and Willsons [14] Interactive video content development The video learning inspired this research, but both studies used different learning style approaches.
Mahmoudi, Mojtahedi, and Shams [15] Augmented reality content development The research by Mahmoudi inspired futuristic content, but is not personalized to a specific learning style.
Kolekar, Pai, and Manohara Pai [7] Personalized Moodle e-Learning The research by Kolekar inspired personalized learning, but with a different methodology to create the prototype.
El-Bishouty, Aldraiweesh, Alturki, Tortorella, Yang, Chang, Graf, and Kinshuk [8] Propose the form of learning objects according to learning styles The research by El-Bishouty inspired the decision to make learning objects, but does not present a prototype.

Research Methodology
The items in this section relate to the research steps, research participants, and research instruments. The Figure 1 shows the research methodology in detail.

Research Phases
This research was conducted in five stages, namely: literature study, formulation of the problem, designing the research methodology, implementing the interaction design development method, and conclusion writings.

User-Centered Design
The implementation of User-Centered Design (UCD) is adopted to ensure that the design meets user needs. It is proposed by Jokela et al. [13]. UCD includes the strategy of gathering feedback at every stage of the process. This strategy aims to understand how stakeholders run the business in order to create a corresponding design solution. UCD is carried out iteratively and consists of four activities, whose purposes are to: 1. Understand and specify the context of use, construct tasks, and define the functional requirements to support the business model. 2. Specify the user and the internal and external factors to define user flow. 3. Creating the alternative design and the proposed design interface by combining the functional requirements, user flow and usability heuristics. 4. Conduct design evaluation or usability evaluation of existing tasks.
The activities conducted in this study are User Research, Creating the Alternative Design, Developing the Proposed Interface Design, and Evaluation.

User Research
There are two important activities in this study's user research: the learning style survey and the semi-structured exploratory interview. These activities are related to the first and the second activities in UCD.
The learning style survey, which involved 31 survey participants, is used to understand the distribution of Felder-Silverman learning style preferences. The participants are 31 students from the Faculty of Computer Science, Universitas Indonesia. The instrument for this survey is the index of learning style (ILS) questionnaire [9]. Based on the survey results and certain criteria, participants were selected to be interviewed for this study.
Participants who are dominant at visual or global learning according to ILS were randomly selected to be involved in exploratory interviews which revealed user characteristics and requirements. These interviews involved five participants, a number that was proportional to the number of participants with the corresponding learning style identified in the survey [16]. The results were analyzed using a certain coding technique proposed by Neuman [17]. The deliverables of user research consist of personas and user flow, which reflect user characteristics and requirements.

Creating the Alternative Design
The alternative design is the basis for creating the proposed interface design [16]. In this stage, the requirements for the design are listed. The persona and user flow information from user research are the basis for creating two alternative designs: material content object (MCO) and material content navigation (MCN). These designs are presented as a table. Some best practices, such as the Shneiderman's Eight Golden Rules of Interface Design [10], and the Usability Goals [16], were also considered. A mapping of learning object technique as proposed in previous studies by El-Bishouty [8] was also considered when creating the alternative design.

Developing the Proposed Design Interface
One of the recommended tools for designing an e-Learning interface is Figma. Figma has been used in developing interface design. In this stage, the utilization of Figma is important for building the high-fidelity e-Learning prototype. The highfidelity prototype is needed in order to continue to the next stagein the evaluation stage, participants require a prototype in order to experience the design and determine how it feels. The final output of this stage has the capability of simulating the main functions of e-Learning modules.

Evaluation
Evaluation was conducted to test the validity of the proposed alternative design and to obtain recommendations from participants [18]. In this stage, participants are presented with the interface design and complete tasks based on their prior knowledge and habits of using e-Learning. Tasks are divided into a number of scenarios that represent real-life activities. The aim of testing the interface design is to determine whether the prototype is solving the problem or not by using an exploratory interview after each task.

4
Results and discussion

User research and alternative solution design
The survey results indicated that the distribution of learning styles among the students was uneven. Four learning styles, including visual preference, were prevalent. 12 out of 31 participants had a visual and global preference within the Felder-Silverman learning styles, while the rest were verbal and sequential. From the remaining 12 participants, five were randomly chosen for exploratory interviews.
The exploratory interviews illustrated some interesting user characteristics and facts. The various steps having been completed, the results of the interview were processed into a persona. A persona is a user representation based on the data and user interview results [16]. The persona descriptions are fictional, but the information used to create their profile is derived from the observations. Personas are constructed to obtain an overview of users in general.
The persona in this research depicts someone named Barnabas Edward, a student of the Faculty of Computer Science. Barnabas is a synthesis of five respondents with visual and global learning styles. Barnabas has a busy life as a student and does not have a lot of time to study because of extracurricular activities. He is an independent learner who prefers to learn through pictures and videos. He also likes to read the outline of a course before progressing through it sequentially, and he mostly draws a mind map out of the material. His suggestions and pain points become the source of the research to build the alternative solution design for the e-Learning.

Proposed interface design
Interface design includes the alternative solution design and the prototype of the design [20]. The contents of the alternative solution design are a table and a number of summaries and diagrams that can illustrate the selection of what content should exist in the prototype, and can also explain the choice of navigation in an e-Learning. The two alternative designs are material content object (MCO) and material content navigation (MCN). These designs follow learning object rules from previous research [8]. The material content object (MCO) can be summarized in the Table 2. The users need a summary to see how they perform.

Provides a Global Information Map visualization
The users need a mind map to better understand the connections between material.

Provides learning objectives
The users need an infographic to help them understand the structure and the objective of the material.

4.
Provides a discussion forum The users need a forum to discuss matters with other stakeholders, equipped with a structured navigation and feature to pin a thread.

Provides notification features
The users need a forum notification feature for quick access, and a self-development feature in the form of a text reminder.

Provides a presentation player
The users prefer a presentation player with the description and uploader name, as well as a navigation box that contains a list of presentations on each piece of material.

Provides interactive material
The users prefer a video player, fun fact questions, and an interactive timeline.

Provides evaluation content
There are four types of interactive exercises recommended by Ginda [21]: question with drag-and-drop answers, puzzle questions, multiple choice questions, and video questions.
The prototype of the design is an embodiment of user needs first created as a sketch. The sketch includes all the materials from MCO and MCN to ensure user needs are met. In this step, the MCO also determines the form of the component, from the structure of the page to the shape of the button.
The MCN is an inter-page navigation support and is related to organization (sequential / global) in the Felder-Silverman learning style model. Students with a global learning style require facilitation from a page navigation system that provides an outline of the material. The MCN is inferred through mapping frequent answers from the interview response reference code combined with supporting theories such as Learning style theory [9] and UCD [13].
The next step was to create the clickable prototype using Figma, thus beginning the prototyping stage. During the prototyping stage, Shneiderman's Eight Golden Rules of Interface Design and a list of prototype components were used as guidelines. The component list is useful for reproducing any elements while maintaining consistency.
After the component of the page is created, the content on each page can be created with guidance from the MCO and MCN. The first page that was created was the statistics page, where students reflect on their study and adjust their learning for the future. The first content item is learning statistics, which displays the percentage of student learning progress and can be clicked to display the chapters in the course. Next, the assessment component that details how the lecturers' assessment is carried out is presented in the form of a bar chart. Third, the page displays a mind map for learning activities that makes it easier for students to understand the big picture of the material and improve critical thinking skills [22].

Fig. 2. The Statistics Page
The second page is the chapter page, which contains learning objects. After knowing the material, users can learn it through the sources in this module. In addition to presentations, there is also an interactive player. The Interactive page has three content items: an interactive video [21], fun fact questions, and an interactive timeline.
Interactive video is content made by user recommendations that can be traced through reference codes.

Design evaluation
The design evaluation is conducted using the exploratory interview method to provide insight into how the participants felt about the design. Exploratory interview sessions consist of doing real life tasks for e-Learning and answering questions about pain points and recommendations. The purpose of these sessions is to see how partic-ipants with visual and global preferences react to the design. The participants are chosen from the prior user research, i.e., five people with visual and global preferences in the Felder-Silverman learning style. The same participants are chosen in order to maintain consistent feedback.
In the evaluation step, users are presented with the interface design based on their needs, and they complete tasks based on their habits of using e-Learning. Tasks are divided into a number of scenarios that represent real-life activity. All participants receive the same scenario: a total of eight scenarios that have been summarized below.
1. Understand the home page and module flow. 2. Understand the learning objectives. 3. Understand the learning subject. 4. Attempt an interactive learning content. 5. Complete a self-test to measure the understanding of the subject. 6. Understand how forums work. 7. Use the forum to share and ask questions. 8. Access the history page to recall the course.
After interviewing the users, it is important to create clusters of insights. The first insight is recommendation, which contains any advice for future design. The second discovery is pain points, which contains the user experience of each page in the design.

Conclusion
After the interaction design is developed, the next stage is to evaluate the design. Design evaluations were carried out by exploratory interviews. Various learners who had reactions to the proposed alternative interface design were consulted. Most of the participants viewed the proposed interface design in a positive light, while many articulated that the colorful design was engaging, not boring. However, an issue that remains in the proposed design is the gap between user expectation and the design, particularly in the interactive exercises section and discussion forum section.
Several recommendations are found when evaluating the interaction design, particularly the interactive exercises section. The development of the interactive exercise section is slightly difficult because there are few existing examples related to the development of interactive questions. For future research, the insight from this study could be useful for developing a more interactive e-Learning.
Currently, this research has only involved respondents from the Faculty of Computer Science Universitas Indonesia. In further research, it is recommended to consider a larger scope of participants, larger numbers of participants and a more updated literature review. The research in this study was evaluated quantitatively; for future studies, it is recommended to use the System Usability Scale with a considerable number of participants.