IJGD: International Journal of Graphic Design Vol.
No.
2 November 2023 e-ISSN: 2987-9434.
p-ISSN : 2988-0343.
Hal 14-22 UI/UX Design of E-Learning Applications AL MUNADI SMA Case Study With A User Centered Design Approach Joko Bintarto Visual Communication Design Study Program.
Faculty of Arts and Design Universitas Potensi Utama Email : jbintarto@gmail.
Abstract.
Technology the more develop every the day .
Source Power Humans (HR) are required For follow development technology .
Sector education is a must too follow development technology .
Because education is Foundation main in management knowledge And knowledge .
Manual learning and _ _ structured become reject measuring change in world education .
So from That need a breakthrough new in field technology education namely with e- Learning design that can be done encourage teachers and student can Study And understand technology with walk side by side .
For an e- Learning is required User Interface (UI) And User Experience (UX) so that a e- Learning display becomes more interesting And become Power pull alone i.
Keywords: UI/UX Design.
User Centered Design, e-learning INTRODUCTION School And education is the most important foundation in cycle life man .
Education No only aim For build A place Study but also build source Power literate human _ And competent Recently This government in field education triggers _ movement "Freedom to Learn ".
Freedom to Learn development technology influence in all sector , including in _ sector education .
Freedom to Learn is a program policy from Ministry Education And Culture Republic of Indonesia ( Kemendikbud RI) with objective form source Power advanced humans , source _ Power man superior , ethical , moral , controlling field science And technology .
e-Learning is abbreviation from electronic learning , namely the learning process who use electronic media specifically internet as system the learning .
e - Learning is base And consequence from development technology information And communication .
Bullen and Janes .
defines e-Learning as learning that happened when internet technology is used For facilitate , deliver , and enable the learning process with distance which is far away .
Every element in the education sector must have technological skills, designing this e-Learning application encourages all aspects in the education sector to be able to contribute.
It is hoped that the attractive appearance and ease of carrying out operations will attract students and teachers in using this application.
User Experience (UX) is the process of designing a product through a product user approach with good UX design that will create a pleasant experience for users when using the product.
Users find it easy and comfortable when using the product.
Meanwhile, this UX component Received September 28, 2023.
Accepted Oktober 27, 2023.
Published November 30, 2023 * Joko Bintarto , jbintarto@gmail.
e-ISSN: 2987-9434.
p-ISSN : 2988-0343.
Hal 14-22 includes the features provided in the product, design structure, product usage navigation, visual design aspects, and all aspects of interaction with users.
User Interface is part of UX in the form of a visual design display of a system.
These displays allow users to connect and interact with a product.
Apart from functioning as a connector, the User Interface also functions to beautify the appearance so that it can increase user satisfaction.
However, not only does it have to be beautiful, the User Interface also has to be easy to use.
Table 1.
Difference between User Interface and User Experience User Interface User Experience (UI) (UX) Make appearance more products Give comfort when Objective wearing product .
Focused on nice Focused on user comfort Focus Animation , typography , color , usability , navigation , design Element button , and others other .
, features , interaction design , and others other .
Design Design based on user research Based on concept product Difference User Centered Design is a design process repeated where the designer focus on user And need them in every design process phase .
At UCD, the team design involve users throughout the design process through various study And technique design , for create very product _ useful And easy accessed .
Figure 1.
User Center Design Phase Source: https://w.
interaction-design.
UI/UX Design of E-Learning Applications AL MUNADI SMA Case Study With A User Centered Design Approach Understand context of use : This is stage First , where to focus on understanding needs , preferences , and behavior user .
By collecting data through various method like interviews , surveys , and observation .
Specity user requirements : Based on findings research , you determine requirements Ai problem And constraint what do you want finish for user Design Solutions : On stage this , make solution based on need .
You make picture frame , mockup , and compliant prototype _ need And problem user .
Evaluate against requirements : Stage This involve testing designed solution _ with user Actually For identify problem utility and areas of improvement .
Various method testing , like testing usability .
A/B testing , and evaluation heuristics , can used .
RESEARCH METHODS
The methodology used _ in E-learning UI/UX Design .
There are 4 ( four ) steps taken _ as following :
Analysis Design Evaluation Implementation Process after analysis that is design , evaluation And implementation completely done in a way After results design get evaluation from user , process implementation done based on evaluation previously , results implementation Then will return evaluated , before enter come back to the design process repeat , this process done until find best UI/UX design in accordance expectation user .
that process more easy understood from the flowchart like on figure 2 .
Analysis Design Evaluation Figure 2.
UI/UX design Source: Personal Documents IJGD- Vol.
No.
2 November 2023 Implementation e-ISSN: 2987-9434.
p-ISSN : 2988-0343.
Hal 14-22
RESULTS AND DISCUSSION
Analysis The analysis process is carried out when the entire design process is first started, this process is very important to get an initial picture in accordance with user expectations.
The analysis stages include user personas which aim to understand user needs for e-learning Figure 3.
User persona "Teacher" Source: Personal documents Figure 4.
User persona "Student" Source: Personal documents Design The Design Process is creating idea solutions that are in accordance with the results of user The design stages include wireframe , mock-up , color palette and typography UI/UX Design of E-Learning Applications AL MUNADI SMA Case Study With A User Centered Design Approach .
Figure 4.
Desktop Wireframe .
SmartPhone Wireframe Source: Personal documents IJGD- Vol.
No.
2 November 2023 e-ISSN: 2987-9434.
p-ISSN : 2988-0343.
Hal 14-22 .
Figure 5.
Desktop Mockup .
SmartPhone Mockup Source: Personal documents Color Palette and Typography Color is an identity, by choosing color in the design the user becomes more comfortable and can interact easily.
The meaning of color in a design concept:
The color blue gives the impression of stability, spaciousness, coolness, coolness and From a health perspective, blue is believed to be able to overcome anxiety, increase concentration, reduce migraine symptoms, high blood pressure and insomnia UI/UX Design of E-Learning Applications AL MUNADI SMA Case Study With A User Centered Design Approach The gray color shows A seriousness and responsibility and is the color of identity s level of school education.
Figure 6.
Color Palette Source: Personal documents Typography in general is a technique for arranging letters and text in a visual creation so that it is legible and interesting to look at.
These arts are closely related by selecting the type of letter or what is known as a font.
Typography will determine the aesthetics of a graphic design.
Therefore, special abilities are needed to can compose typography that is visually attractive and well received by readers.
Figure 7.
Roboto font Source: Personal documents Evaluation Evaluation is the process of creating a prototype on a website page like the following image .
IJGD- Vol.
No.
2 November 2023 e-ISSN: 2987-9434.
p-ISSN : 2988-0343.
Hal 14-22 .
Figure 8.
Al Munadi High School e-learning prototype Source: Personal documents The evaluation process is carried out randomly on several students who will later be in contact and interact directly with the e-learning website.
Method Fields study Usability Testing Table 2.
Design Evaluation Method Explanation Observation process use system which is conducted in a way straight in field , the goal is For obtain description for development and also evaluate design previous , incl For obtain difficulties of use .
Method For simulate use system use a prototype , user requested do task certain For simulate use systemwithout explain method as well as step generally , session recorded And analyzed based on certain parameters .
Implementation Implementation will take a relatively long time, according to the number of page designs that must be implemented.
While the implementation process is still ongoing, there is no harm in carrying out an internal evaluation process which is carried out on each page that has been The internal evaluation process in question is a process carried out by fellow teams or fellow UI/UX designers, to look for discrepancies between the implementation and the design plans that have been created, or look for other implementation errors.
The results of implementing a UI/UX design are sometimes in accordance with the design, many factors influence it, starting from the design process, responsive display on other devices such as smartphones and tablet computers, to when it is implemented in a web browser.
UI/UX Design of E-Learning Applications AL MUNADI SMA Case Study With A User Centered Design Approach Figure 9.
E-learning display on different devices Source: Personal documents CONCLUSION Based on the description above, it can be concluded that the use of the UCD method in this case is able to give the user a good impression of the SMA Al Munadi e-learning website, apart from that the user's response when asked to carry out a simulation of the evaluation process for the latest version of the UI/UX design can also be carried out.
well, the complaints given were only about several typo parts in the writing.
BIBLIOGRAPHY