USER INTERFACE AND EXPERIENCE IMPLEMENTATION ANALYSIS ON THE MADRASAH ALIYAH RAUDATUL YATAMA INFORMATION SYSTEM

(1)

Al Ulum: Jurnal Sains dan Teknologi (e-ISSN 2477-4731) Vol. 9, No. 3, 2023 DOI: http://dx.doi.org/10.31602/jst.v9i3.11880

Uniska PPJ-JST

USER INTERFACE AND EXPERIENCE IMPLEMENTATION ANALYSIS ON THE MADRASAH ALIYAH RAUDATUL YATAMA INFORMATION SYSTEM

Muhammad Fajrian Noor • Syarifil Anwar • Sofyar • Afief Dzakie Na’imy

Received: 05 July 2023 | Accepted: 23 September 2023 | Published online: 15 December 2023 UPT Publication and Journal Management Uniska-JST 2023

Abstract

The use of information technology in the field of education aims to make educational organizations or institutions more efficient. One example of information technology in the world of education is building a school information system, one of which is the academic information system for Madrasah Aliyah Raudatul Yatama.

Based on the evaluation results of improving the quality of the Raudatul Yatama Madrasah Aliyah information system, the suggestions for improvement that are the focus are the measurement aspects that direct the user interface to a simpler level but have high usability. Because more than half of the respondents stated that the user interface still needs development both in terms of appearance and usability, Therefore, the developer of the Madrasah Aliyah Raudatul Yatama information system can focus more on the aspects included in these criteria for better system quality.

Keywords

: School Information System ∙ Heuristic Evaluation ∙ User Interface ∙ User Experience.

 Muhammad Fajrian Noor mfajriannoor@unukase.ac.id

Program Studi Teknik Informatika, Universitas NU Kalimantan Selatan, Indonesia

Introduction

At this time information technology is developing rapidly which makes it easier for us to make good use of it in terms of managing, accessing, and utilizing information thoroughly and accurately.

The good impact of advances in information technology is very much in various fields, one of which is in the field of education. Technology in the world of education helps facilitate the learning process (Buana and Sari, 2022). One example of information technology in the world of education is building an academic information system for schools, one of which is the academic information system for Madrasah Aliyah Raudatul Yatama.

Madrasah Aliyah Raudatul Yatama is located at Jl. A. Yani KM 10 Kec. Kertak Hanyar, Kab. Banjar was founded in 1994 and has already graduated hundreds of students. At this time the process of seeking information on Madrasah Aliyah Raudatul Yatama is still carried out by coming directly to the Madrasah.

Based on these problems, an information system is needed to help students find information about Madrasah Aliyah Raudatul Yatama online. The information provided starts from profiles, agendas, news, galleries, announcements, facilities and infrastructure, contacts, and maps. For this reason, researchers used the Heuristic evaluation measurement evaluation method and the web usability evaluation tool (Webuse).

This study focuses on the usability of the Madrasah Aliyah Raudatul Yatama Information System website, which aims to obtain an ORIGINAL ARTICLE

(2)

Al Ulum: Jurnal Sains dan Teknologi (e-ISSN 2477-4731) Vol. 9, No. 3, 2023

Uniska PPJ-JST assessment of each aspect so that it can be further

developed in the future.

Problem analysis is the first step in systems analysis (Adiguna et al., 2018). This step is necessary to find out the problems that occur in the operating system.

The user interface is the way users and programs interact with each other. Everything that appears and is visible on the screen is part of the user interface (Alfiansyah et al., 2022).

Meanwhile, user experience is the response of users of a system or service. To get a user experience that meets user needs properly, several things must be considered, such as whether the product is easy to use, and how easy it is to understand the information available on the appearance of a product (ISO 9241-210, 2019).

Yahyan and Prehanto (2022) said the user interface and user experience are the important aspects of a system. Even though they are 2 different factors, the user interface (UI) and user experience (UX) are designed as one unit that complements and relates to one another.

The user interface (UI) acts as an intermediary between the user and the application system designed to facilitate use in meeting their needs (David, 2022).

Heuristic evaluation is very well used as a design evaluation technique because it is easier to find or determine the usability problems that arise (Krisnayani et al., 2016). Usability is the extent to which a system is easy to understand, easy to use, and makes users use the system again (Tirtadarmana et al., 2018). According to Purnama et al. (2019), there are ten heuristic usability criteria related to website appearance in UI and UX design. The Web Usability Evaluation Tool (Webuse) is a method for identifying good and bad usability problems on various types of websites (Simatupang, et al. 2022).

Chiew and Salim (2003), divided usability categories in the Webuse method based on usability evaluation criteria, content, organization and readability, navigation and links, user interface design, performance, and effectiveness.

Previous studies related to this research were research by Putra (2014) entitled usability website repository analysis of the ten november Surabaya institute of technology library. Using Nielsen's heuristic evaluation, concluded that of

the 10 indicators, there is an average value of 3.51 which if rounded to a value of 4 means it is included in a high score, meaning that the Surabaya Sepuluh Nopember Institute of Technology Library website is easy to use.

The second study by Cikadiwa et al. (2017) entitled usability analysis using heuristic methods on the mulawarman university student academic portal which in his research used Nielsen's Heuristic evaluation method.

Darmawan (2021) with his research entitled user interface and user experience analysis on the siatma website using the Heuristic evaluation method and system usability scale, using the Heuristic evaluation (HE) and system usability scale (SUS) methods.

The next related research is research by Respati and Sensuse (2021) entitled interface evaluation of the service home application prototype with the heuristic evaluation method.

Then research by Haniva et al. (2023), with the title user experience analysis on the UPT-TIK Website at Singaperbangsa Karawang University using the heuristic evaluation method.

Materials and Methods

Software Requirements

Software is a very important tool in computing because software contains programs whose instructions are used to operate computer systems (Jamaludin et al., 2021). The software used to create this website is as follows Windows 10, Adobe XD, SublimeText 3, Xampp v3.2.4, Adobe Photoshop, Mozilla Firefox

Hardware Requirements

This section describes the hardware used to create/build a web-based information system.

The hardware used to make this system are Processor Intel Core I3-7020 CPU @ 2.30GHz, Hard drive: 239 GB Samsung SSD, Memory: 8 GB, Motherboard: Lenovo LVNB 161216, Monitors: LG 16”, Keyboard: Standard Laptop, Mouse: Standard Laptop.

90

(3)

Uniska PPJ-JST Wireframe Design

On this page, there are several menu that can be accessed such as gallery, agenda, news, and contact us, as in figure 1.

Figure 1. Wireframe Design

Results and Discussion

Problem Analysis

After conducting an interview head of Madrasah Aliyah Raudatul Yatama, that in promotions his school still uses offline media. The offline media in question is promotions that still use banners and word-of-mouth promotions. Thus the decision was made to create an information systems website. The information system website helps teachers make it easier for students to find information available at Madrasah Aliyah Raudatul Yatama.

Interface Development

Based on the results of descriptive statistical analysis and user interface design and evaluation

of usability using the heuristic evaluation method and the results of evaluation of website usability tools, it was determined that of the three variables, it was found that with consideration of ISO 13407 Madrasah Aliyah Raudatul Yatama information systems requires an interface design.

The following is a design that has been made simply using the HTML programming language.

Home page

This page is the main page view when opening the application, as shown in figure 2.

Figure 2. Home Pages

Data Collection With Questionnaires

The questionnaire is a tool used to collect information and experimental results on user interface design and the usability of the Madrasah Aliyah Raudatul Yatama Information System. In general, the questionnaire consists of several statements that express an assessment of the quality and user-friendliness of the user interface design of this web-based information system.

When creating this questionnaire, reference was made to a sample heuristic evaluation and usability evaluation questionnaire with the ISO 13407 standard. The questionnaire was used to determine user satisfaction with the user interface based on experience and use of the information

91

(4)

Uniska PPJ-JST system of Madrasa Aliyah Raudatul Yatama. It

satisfies the UI and UX, and usability goals well.

Heuristic Evaluation Parameter Analysis The percentage of the questionnaire assessment can

be seen in table 1 and table 2. Meanwhile, the display rating scale is shown in table 3.

Table 1. Percentage of Questionnaire Assessment

No. Criteria 1 2 3 4 Average

1

Flexibility and efficiency of use

24 12 0 0 9

2 16 15 0 0 7,75

3 16 15 0 0 7,75

4 12 18 0 0 7,5

5 20 12 0 0 8

6 0 0 10 3 3,25

7 20 12 0 0 8

8 0 0 6 5 2,75

9 12 9 2 2 6,25

10 16 15 0 0 7,75

Total 68

HE Criteria Fully Meets the Criteria

Table 2. Percentage of Advanced Questionnaire Assessment

No. Criteria 1 2 3 4 Average

1

Aesthetic and minimalist design

16 15 0 0 7,75

2 4 21 2 0 6,75

3 16 15 0 0 7,75

4 12 18 0 0 7,5

5 24 9 0 0 8,25

6 0 0 12 2 3,5

7 12 18 2 0 8

8 0 9 10 1 5

9 0 0 10 3 3,25

10 8 18 0 0 6,5

Total 64,25

HE Criteria Fully Meets the Criteria

From the score calculation total in table 3, it can be calculated the value of the Madrasah Aliyah Raudatul Yatama Information System by adding up the score from each aspect obtained and dividing it by the maximum result value, obtaining a user interface and usability score using the % index formula:

𝑃𝑒𝑟𝑐𝑒𝑛𝑡𝑎𝑔𝑒 = 𝑅𝑒𝑠𝑢𝑙𝑡𝑠 𝑜𝑏𝑡𝑎𝑖𝑛𝑒𝑑

𝑀𝑎𝑥𝑖𝑚𝑢𝑚 𝑅𝑒𝑠𝑢𝑙𝑡𝑠 × 100%

=31 + 28 + 40 + 31 + 40 + 36 + 34 + 38 + 21 + 14

800 𝑥 100%

=313 800 𝑥 100%

= 39,125 (𝑁𝑜𝑟𝑚𝑎𝑙)

By comparing this research with previous studies, all studies use the Heuristic Evaluation method in analyzing UI/ UX with different evaluation

92

(5)

Uniska PPJ-JST objects. However, this study is the only one that

provides an assessment based on the ISO 13407 standard.

Table 3. Display Question Rating Scale

Aspect Question

Scoring Scale Total Percentage 1 2 3 4 5

Causality

Is there a sign when a page change occurs? 0 2 6 1 1 31

Index % = 29,5 50 × 100 Index % = 59 %

(Just normal) Is there a sign when an error changes? 0 2 8 0 0 28

Visible Constraints

Does each menu have the function required by the user?

0 0 1 8 1 40

Index % = 35,5 50 × 100 Index % = 71 %

(Interesting) Is there a new interface that makes it easier for

users to use the Madrasah Aliyah Raudatul Yatama Information System?

0 1 7 2 0 31

Mapping

Does the menu layout suit the user's needs? 0 0 1 8 1 40

Index % = 38 50× 100 Index % = 76 %

(Interesting) Does the overall layout of the Madrasah

Aliyah Raudatul Yatama Information System allow users to take quick actions?

0 0 4 6 0 36

Transfer Effects

Is there an effect when turning the page that clearly shows the action?

0 0 6 4 0 34

Index % = 36 50× 100 Index % = 72 %

(Interesting) Does the Madrasah Aliyah Raudatul Yatama

Information System meet user needs like interactive websites in general?

0 0 2 8 0 38

Population Stereotypes

Can the display change according to user needs? (such as zoom, or color change when

night time)

3 5 1 0 1 21

Index % = 17,5 50 × 100 Index % = 35 %

(Less attractive) Are there some display options that don't work

on the Madrasah Aliyah Raudatul Yatama Information System

6 4 0 0 0 14

Conclusion

Based on the research results obtained, the researcher can draw the conclusions, Using The Heuristic Evaluation Method, based on the calculation results of the questionnaire data with an assessment of the aspects of flexibility and efficiency of use, an overall score of 68 is obtained, which means that the Heuristic Evaluation criteria have a good value or very fulfill the criteria. Likewise the Heuristic Evaluation criteria from the aspect of aesthetic and minimalist design, the value really fulfills the criteria, at 64.25. By using the web usability evaluation tool (WEBUSE) method based on ISO 13407, the initial results obtained were that the percentage of 39.12% was in the Average category. With an assessment of 1 ISO criteria

which results in a Less Attractive category and 1 ISO criteria with the Average category and 3 Interesting criteria. This means that the Madrasah Aliyah Raudatul Yatama Information System requires changes in terms of appearance and its use as a student interactive website.

Compliance with ethical standards Conflict of interest

The authors declare that they have no conflict of interest.

93

(6)

Uniska PPJ-JST

References

Buana, W and Sari, B. N. (2022). Analisis User Interface Meningkatkan Pengalaman Pengguna Menggunakan Usability Testing pada Aplikasi Android Course.

Journal of Computer and Information Technology, 5(2), 91-97.

Adiguna, A. R, Saputra, M. C, and Pradana, F.

(2018). Analisis dan Perancangan Sistem Informasi Manajemen Gudang pada PT.

Mitra Pinasthika Mulia Surabaya. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 2(2), 612-621.

Alfiansyah, M. R., Anita M. and Astriratma, R.

(2022). User Interface dan User Experience Dengan Menggunakan Metode User Centered Design Pada Aplikasi Brimo (Bri Mobile). Seminar Nasional Mahasiswa Ilmu Komputer dan Aplikasinya (SENAMIKA), 1(1), 312318.

ISO 9241-210. (2019). Ergonomics of human- system interaction-Part 210: Human- centred design for interactive system.

International Standard, 2, 1-33.

Yahya, A. I. N and Prehanto, D. E. (2022).

Analisis User Interface dan User Experience Menggunakan Metode Heuristic Evaluation Pada Aplikasi My First Media. Journal of Emerging Information Systems and Business Intelligence, 3(3).

David. (2022). Analisis Pengaruh UI/UX Aplikasi Tokopedia Terhadap Kepuasan Pengguna. Jurnal Ilmu Komputer dan Sistem Informasi.

Krisnayani, P., Arthana, I. K. R., Darmawiguna, I. G. M and Kom, S. (2016). Analisa Usability Pada Website UNDIKSHA Dengan Menggunakan Metode Heuristic Evaluation. KARMAPATI (Kumpulan Artikel Mahasiswa Pendidikan Teknik Informatika), 5(2), 158-167.

Tirtadarmana, A. E. B. Waspada and E. F. Jasjfi.

(2018). Kajian Peranan Desain UX

(Pengalaman Pengguna) – UI (Antar Muka Pengguna) Mobile Application Kategori Transportasi Online terhadap Gaya Hidup Bertransportasi Masyarakat Urban. J. Seni dan Reka Ranc. J. Ilm.

Magister Desain, 1(1), 181207.

Purnama, N. K. I., Pradnyana, M. A and Ketut Agustini. (2019). Usability Testing Menggunakan Metode Heuristic Evaluation Pada Aplikasi E-Musrenbang Bappeda Kabupaten Bandung. Jurnal Pendidikan Teknologi dan Kejuruan, 16(1).

Putra, H. R. C. (2014). Analisis Usability Website Repository Perpustakaan Institut Teknologi Sepuluh Nopember Surabaya (Studi deskriptif tentang usability website repository Perpustakaan Institut Teknologi Sepuluh Nopember Surabaya). Universitas Airlangga.

Surabaya.

Cikadiwa, H. M., Edy, B., Islamiyah. (2017).

Analisis Usability Dengan Menggunakan Metode Heuristik Pada Portal Akademik Mahasiswa Universitas Mulawarman. Prosiding Seminar Nasional Ilmu Komputer dan Teknologi Informasi (SAKTI).

Simatupang, H. W Z, Widowati, S., Riskiana, R.

R and Alitu, A. F. (2022). Evaluasi Usability Website dengan Website Usability Evaluation Tool dan Importance-Performance Analysis.

Jurnal Teknologi Informasi Techno, 21(1), 104-115.

Chiew, T. K and Salim, S. S. (2003). Webuse:

Website Usability Evaluation Tool.

Malaysian Journal of Computer Science, 16(1), 47-57.

Darmawan, Y. C. (2021). Analisa User Interface dan User Experience pada Situs Web SIATMA dengan Metode Heuristic Evaluation dan System Usability Scale.

Tugas Akhir, Program Studi Informatika, Fakultas Teknologi Industri, Universitas

94

(7)

Uniska PPJ-JST Atma Jaya, Yogyakarta.

Respati, G. R. L, and Sensuse, D. I. (2021).

Evaluasi Antarmuka Prototype Aplikasi Beranda Layana dengan Metode Heuristic Evaluation. Jurnal Restikom:

Riset Teknik Informatika dan Komputer, 3(3), 130-139.

Haniva, D. T., Solehudin, A., Yusup, D., Haryadi, E. (2023). Analisa User Experience pada Website UPT-TIK Universitas Singaperbangsa Karawang Menggunakan Metode Heuristic Evaluation. Jurnal Teknologi Informasi, 7(1).

Jamaludin, J, Ginanjar, G, Halimah, E. T, Sudrajat, D. (2021). Penggunaan Sofware Sebagai Sumber dan Media Pembelajaran Sekolah Di Masa Pandemi Covid-19: Studi Literatur. Jurnal Ilmiah Mandalika Education, 7(1).

95