OPEN ACCESS
ISSN 2356-5462
http://socj.
id/ijoict/ Intl.
Journal on ICT Vol.
No.
Dec 2023.
doi: doi.
org/10.
21108/ijoict.
UI/UX Design for Student Discussion Applications Based Felder Silverman Learning Style with the Design Thinking Method HNW Syahuda Nahatmasuni1.
Anisa Herdiani2*.
Ati Suci Dian Martha3 School of Computing.
Telkom University 1 Telekomunikasi St.
Terusan Buahbatu.
Bandung.
West Java.
Indonesia 40257 anisaherdiani@telkomuniversity.
Abstract Telkom University is one of the educational institutions that implement asynchronous learning through its Learning Management System (LMS).
Based on preliminary research conducted with 37 respondents, just 13.
5% of the participants LMS using a smartphone, because responsiveness The Discussion Forum is a frequently used feature with high student interaction.
However, this feature has several shortcomings, such as the lack of responsiveness in the mobile web interface and the limited interaction between users and professors.
This research will employ the Design Thinking methodology and adopt the Felder Silverman Learning Style (FSLS).
The evaluation of the prototype design resulted in a System Usability Scale (SUS) testing score of 72.
22 for the LMS Celoe website and 85.
65 for the proposed UI/UX application.
The SUS testing score for the LMS Celoe website falls within Quadrant C, indicating an acceptable level of acceptance with a grade C scale and a rating of "Good.
" On the other hand, the SUS testing score for the proposed UI/UX application falls within Quadrant B, with an acceptable level of acceptance, a grade B scale, and an "Excellent" rating.
Keywords: LMS.
Discussion Forum.
Design Thinking.
Learning Model.
Felder Silverman Learning Style
INTRODUCTION
elkom University, through its Learning Management System (LMS), supports the achievement of learning competencies and benefits in online learning through online discussion forums.
Learning through forums can help solve problems, enhance the understanding of specific realities, foster respect for otherAos opinions, and provide various types of learning variations.
It is known to enhance learning motivation, stimulate students' thinking abilities, and offer flexibility in terms of location, time, and learning style .
According to a preliminary research validation survey conducted with 37 respondents, 86.
5% of the participants accessed Telkom University's LMS discussion forum using a PC, while 13.
5% preferred to access it through a Therefore, a less-responsive LMS interface on smartphones significantly affects user experience (UX).
However, an interactive and well-designed UI/UX can increase user engagement and satisfaction when Received on 06 Jul 2023.
Revised on 14 Jul 2023.
Accepted and Published on 12 Dec 2023 HNW SYAHUDA NAHATMASUNI ET AL.
UI/UX DESIGN FOR STUDENT DISCUSSIONA
utilizing a discussion forum .
In addition to the issue of the less responsive LMS interface, students expressed dissatisfaction with the forum discussion feature.
The features of the LMS discussion forum were limited to each course and class.
Moreover, the LMS forum is confined to formal discussions based on classes and specific course themes.
These limitations restrict students from accessing information and create a narrow and rigid discussion ecosystem.
To overcome the rigidity of the existing discussion forum in E-Learning LMS, previous researchers have attempted to implement and adopt features from social media within E-Learning LMS .
This approach fosters interactive relationships between teachers and students.
Another factor that influences the intensity of the student learning atmosphere is studentsAo learning styles.
Previous researchers have adopted learning styles in elearning .
, and the results have shown that incorporating learning styles into e-learning can facilitate students' reception of learning information.
The challenge lies in accommodating different user learning styles in the application development process and, ensuring that users are effectively facilitated when using the application.
One model of student learning style is the Felder-Silverman Learning Style Model.
Based on the facts and data presented above, the researcher proposes designing a prototype mobile application for student discussion forums using the Design Thinking methodology and adopting a Felder-Silverman Learning Style (FSLS).
II.
LITERATURE REVIEW
The design of application based on Design Thinking is capable of addressing various challenges in problemsolving .
The development of web design using Design Thinking greatly facilitates users in carrying out activities on the web .
Additionally.
UI/UX design can enhance the attractiveness and user satisfaction when using an application, as seen in examples such as the discussion forum in the Plant Trading application .
and the student discussion forum .
Through the design thinking method, user experience testing can identify several issues and design solutions in the form of prototypes for the emerging problems.
Azmi et al.
, 2019 .
and Batmetan, 2018 .
have successfully addressed the identified problems.
RESEARCH METHOD
As mentioned earlier, the prototype application utilizes the Design Thinking methodology and adopts the FSLS learning style.
Design thinking is a human-centered method for problem-solving that aims to bring forth new innovations .
Design thinking is also known as a comprehensive thinking process that focuses on creating solutions by starting with empathy towards specific needs of the intended users, resulting in sustainable innovations based on user needs.
In its implementation, this method consists of five stages: .
Emphatize: Questionnaire.
Emphaty Mapping Diagram Define: User Persona and Affinity Mapping Diagram Ideate: Requirement Analysis and Conceptual Diagram Prototype: Userflow.
Color Component and Style Guildelines.
Wireframe and Mockup Testing: SUS Testing In the testing evaluation, the researcher used SUS testing.
The System Usability Scale (SUS) is one of the most popular usability testing methods.
SUS was first introduced by John Brooke in 1986.
Testing with SUS can generate a usability scale for an application that is effective, reliable, and cost-efficient to use.
In the testing process.
SUS presents 10 questions with 5 answer choices.
Users can respond by selecting a score from 1 to 5.
INTL.
JOURNAL ON ICT VOL.
NO.
DECEMBER 2023
ranging from strongly disagree to strongly agree.
The minimum possible score for SUS is 0, while the maximum score is 100 .
The System Usability Scale has three advantages.
First, the testing process is easily understandable by Second, it can involve a small sample size yet yield maximum results.
Third, it can clearly differentiate between usable and unusable applications.
The System Usability Scale follows a clear calculation procedure for evaluating applications, ensuring that the testing results have accuracy and accountability .
The method adopted in the design of LMS is FSLS learning style.
Adoption of FSLS, student can use LMS by the background student behaviour profile, so by using LMS will make precisely targets its user.
The Felder Silverman Learning Style Model (FSLS) is a learning style created by scientists Felder and Silverman .
The model was initially developed by Felder and Solomon .
, with the Felder Silverman model making modifications to the original model, particularly in terms of the dimensions of student learning.
These dimensions are divided into four categories: the active-reflective dimension .
ow students process informatio.
, the sensing-intuitive dimension .
ow students perceive informatio.
, the visual-verbal dimension .
he type of information input that is easily understood by student.
, and the sequential-global dimension .
ow students achieve understandin.
In the design process, the researcher used Figma.
The stages begin with Empathize, followed by Define.
Ideate.
Prototype, and Testing.
During the Ideate stage, the researcher developed ideas for integrating the FSLS into the application prototype using a Conceptual Diagram.
IV.
RESULTS AND DISCUSSION
As mentioned in the previous section, there are five stages when using Design Thinking methodology .
The following provides an overview of each stage:
Emphatize The researcher distributed questionnaires to 53 respondents using open- and closed-ended questions.
From the questionnaires, 11 main problem points were identified: LMS Celoe .
imited features, lack of response feedback, lack of guidance for users, especially novice users, unresponsive mobile web display, unattractive appearance, and feature limitation.
, and discussion forums .
imited posting features, lack of interaction or response from other users regarding the post by the thread starter, issues with discussion post notifications, inability to view previous discussions, difficulty in finding desired discussion forums, and unattractive/inactive discussion forum.
TABLE 1
MODE FREQUENCY RESULTS OF THE LEARNING STYLE MODEL QUESTIONNAIRE IN THE EMPATHIZE PHASE.
Learning Style Active-Sensing-Visual-Global Active-Intuitive-Visual-Global Reflective-Sensing-Visual-Sequential Active-Sensing-Verbal-Global Reflective-Intuitive-Verbal-Global Reflective-Sensing-Verbal-Global Reflective-Sensing-Visual-Global Reflective-Intuitive-Verbal-Sequential Active-Intuitive-Verbal-Sequential Active-Intuitive-Visual-Sequential Reflective-Intuitive-Visual-Global Active-Sensing-Verbal-Sequential Active-Sensing-Visual-Sequential Reflective-Sensing-Verbal-Sequential Reflective-Intuitive-Visual-Sequential Frequency HNW SYAHUDA NAHATMASUNI ET AL.
UI/UX DESIGN FOR STUDENT DISCUSSIONA
After distributing the feedback questionnaire for the LMS Celoe, the researcher administered a follow-up questionnaire called the Index of Learning Style (ILS), consisting of 44 questions commonly used to identify a student's learning style model.
Of the eight indicators, with four indicators for each result, combinations were calculated, resulting in 70 indicator combinations.
From the data analysis of the ILS questionnaire, only 15 learning style models were identified, as shown in TABLE 1.
Furthermore, the researcher designed an Empathy Map based on the collected feedback to visualize the existing problems.
Fig.
Primary User Persona Define At this stage, a User Persona is created to obtain a definitive understanding of the problems by utilizing an imaginary user profile that aligns with the scope of the issues faced by users in the field.
In designing the User Persona, the researcher developed three personas, including one Primary User Persona and two Secondary User Personas.
The example of User Persona, such as Primary User Persona as shown in Figure 1.
Additionally, the researcher depicts the problems by mapping them using an Affinity Map Diagram as shown in Figures 2 and 3.
Fig.
Part of Affinity Map #1 INTL.
JOURNAL ON ICT VOL.
NO.
DECEMBER 2023
Fig.
Part of Affinity Map #2 Ideate In this stage, the researcher designed the Functional Needs Analysis and the Conceptual Model of FSLS, as Solution to Feature Limitations The application included a chat feature.
This application offers bright or dark themes.
Solution to the Lack of Feedback Responses All user accounts can create new groups or forums, where all academic community members can collaborate within those groups or forums.
Solution to Lack of User Guidance, especially for novice users The application provides a Guided User Tour upon first use.
The application included an FAQ page.
Solution to nonresponsive mobile web design The designed application has the same appearance as native programming, addressing the responsiveness The application provides relevant notifications such as when:
HNW SYAHUDA NAHATMASUNI ET AL.
UI/UX DESIGN FOR STUDENT DISCUSSIONA
Another user comments on the threaded starter's post.
Another user upvotes or downvotes the post of the thread starter.
The other user follows the profile of that user.
There is also a private message.
Another user shares the post of the thread starter.
Fig.
Styles Guidelines and Color Design Component Solution to Unattractive Design The color selection of the prototype application was based on the combinations used in the LMS Web Celoe.
Solution to post-feature limitations The application sends notifications to store files or documents in the cloud if the uploaded file size exceeds a maximum limit.
The application does not impose character limits on the text posts in the discussion forum.
The application includes text editor features such as bold, italic, and underlined.
This application allows users to save on the posts of other users.
The application enables users to attach any type of file or document to their post.
The application included a private chat feature.
This application allows the sharing of third-party applications.
The application supports two languages: English and Indonesian.
The frequency of posts in the discussion forum is displayed.
This application allows the addition of images, icons, stickers, videos, and files to comments on posts.
The application supports zooming in on the images of posts.
The application includes the ability of the thread starter to delete and edit posts.
INTL.
JOURNAL ON ICT VOL.
NO.
DECEMBER 2023
Solution to Difficulties in Finding Desired Discussion Forums The application displays the number of members in each discussion forum in the forum search and profiles.
Solution to Unattractive/Inactive Discussion Forums The creator of the discussion forum automatically becomes a forum admin.
The forum admin can add to or remove other admin roles.
General Features The application displayed a splash screen.
The application includes Office365-connected login authentication (LMS Celoe accoun.
The application displays learning-style model settings before the homepage appears.
The application has a home, post, collection of discussion forums, notification, and followed course menu on the main page .
ottom tab men.
There was a dedicated page for profile settings .
avigation drawer.
The application includes a home page feature.
The application includes a postpage feature.
The application includes a discussion forum page.
The application includes a view forum page feature.
The application includes a profile page and other user profile features.
The application includes notification features.
The application includes a course page feature.
The application includes a view-course page.
The application includes a user profile-setting page feature.
Furthermore, in this stage, the researcher proposed 4 strategy model indicator (Active-Sensing-VisualGlobal.
Active-Sensing-Visual-Sequential.
Active-Intuitive-Visual-Global and Reflector-Intuitive-VisualGloba.
based FSLS .
in this prototype application as follows:
Active:
On the homepage, unanswered posts or threads that have not received comments or reactions are displayed first from all the following discussion forums.
On the view forum page, unanswered posts or threads that have not received comments or reactions are first On the view-course page, the following are displayed: Assignments.
Discussion Forums.
Quizzes, and Pretests.
Reflective:
The latest posts are displayed on the homepage.
The following are displayed on the view-course page: modules, materials, videos, material links, lesson reviews, tutorials, extra resources, and post-tests.
Sensing:
The latest posts are displayed on the home page and view forum page.
Intuitive:
On the home page and view forum page, the latest posts are displayed.
Visual:
On the home page, view forum page, and view course page, visual file attachments are displayed in cardView with thumbnail previews, whereas textual or verbal files are displayed in listView.
HNW SYAHUDA NAHATMASUNI ET AL.
UI/UX DESIGN FOR STUDENT DISCUSSIONA
Verbal:
Similar to Visual, textual or verbal files are displayed in listView, whereas visual files are displayed in cardView.
Wireframe and Mockup of ActSenVisGlo Learning Style .
Wireframe and Mockup of ActSenVisSeq Learning Style .
Wireframe and Mockup of ActInVisGlo Learning Style .
Wireframe and Mockup of RefInVisGlo Learning Style Fig.
Design guidelines, wireframes, and mockups Sequential:
On the homepage and view forum page, the post feed is sorted based on post hashtags or keywords, discussion forums, and post time.
On the view-course page, file attachments are displayed sequentially in text format.
INTL.
JOURNAL ON ICT VOL.
NO.
DECEMBER 2023
Global:
On the homepage and view forum page, the latest post feed and visual attachment materials are displayed in cardView with link previews.
On the view-course page, all attachments are displayed in gallery format.
This proposed strategy is adopting and custom from previous research .
, which implemented in E-Learning.
Prototype In this stage, the researcher designed the user flow, color components as shown in Figure 4, design guidelines, wireframes, and mockups, as shown in Figure 5
TABLE 2
EVALUATING SUS TESTING OF CELOE LMS WEBSITE AND PROPOSED PROTOTYPE
Respondents Sum of SUS Scores for Each Sum of SUS Scores for Respondent (Celoe LMS Each Respondent Websit.
(Proposed Prototyp.
Average of SUS Score Multiply 2.
(Celoe LMS Websit.
Multiply 2.
(Proposed Prototyp.
Testing The next step is to test and evaluate the designed mockup prototype using the SUS testing method.
The researcher utilized the website Useberry to present and provide a guided prototype of the application to the HNW SYAHUDA NAHATMASUNI ET AL.
UI/UX DESIGN FOR STUDENT DISCUSSIONA
respondents, after which Useberry directed them to a survey website using Jotform.
The researcher also evaluate Celoe LMS Website, to obtain user perspective about the LMS include Discussion Forum.
Then will compare with evaluation result of proposed prototype of Celoe.
As following in TABLE 2.
Referring to the justification table of the SUS scores shown in Figure 12.
2, the SUS score for the LMS Celoe website falls into quadrant C, indicating an acceptable level of acceptance with a grade C scale and a rating of On the other hand, the SUS score for the proposed UI/UX application testing falls into quadrant B, indicating an acceptable level of acceptance, with a grade B scale and an excellent rating.
Based on this comparison, there was a difference of 13.
43 in the SUS testing scores between the LMS Celoe website and the proposed application, indicating a difference of one quadrant level.
Fig.
Table of Score SUS Testing Justification CONCLUSION Based on the design and testing results, the following findings have been obtained:
Based on the data analysis of the Emphatize phase questionnaire, 15 learning style models were successfully identified from 70 combinations.
Referring to existing research references, it has been confirmed that there are three highest frequencies of FSLS learning style models mentioned in those references, namely AcSenVisGlo.
AcSenVisSeq, and AcInVisGlo.
In this study, an additional indicator.
RefInVisGlo, was added as a comparison, which aligns with the research references.
Based on the testing results, the evaluation comparison between the Celoe LMS website and the prototype application using SUS testing yielded an average score of 72.
22 for the Celoe LMS website 65 for the proposed prototype application.
Referring to the SUS justification table shown in Figure 9, the Celoe LMS website falls under quadrant C, indicating an acceptable level of acceptance, grade C scale, and a Good rating.
On the other hand, the proposed prototype application falls under quadrant B, indicating an acceptable level of acceptance, grade B scale, and an Excellent rating.
Based on the comparison results, there is a score difference of 13.
43 in the SUS testing between the Celoe LMS website and the prototype application, which corresponds to a difference of 1 quadrant level.
VI.
REFERENCES