Jurnal KHARISMA Tech | ISSN:1907-2317 | e-ISSN: 2810-0344 https://jurnal.
id/kharismatech published by: Pusat Penelitian STMIK KHARISMA Makassar Volume: 20 no.
02 Ae Oktober 2025- hlm.
PERANCANGAN UI/UX PADA APLIKASI LINGUALY MENGGUNAKAN
MOBILE-FIRST DESIGN DENGAN METODE GOAL-DIRECTED DESIGN
Oleh:
Ridwan Dwiyanto Syam1.
Syaiful Rahman2*.
Syamsul Bahri3
1, 2, 3
Teknik Informatika.
STMIK KHARISMA Makassar e-mail: 1ridwandwiyanto_21@kharisma.
id, 2syaifulrahman@kharisma.
syamsul@kharisma.
Abstrak: Penelitian ini bertujuan untuk merancang user interface dan user experience yang optimal untuk aplikasi belajar bahasa dengan pendekatan Mobile-First Design dengan metode Goal-Directed Design, yang berfokus pada tujuan pengguna.
Analisis kebutuhan pengguna dilakukan melalui kuesioner, survei, dan observasi untuk mengembangkan skenario penggunaan.
Desain UI difokuskan pada kejelasan, navigasi intuitif, dan tata letak yang sederhana, serta daya tarik visual.
Pada tahap UX, prinsip-prinsip desain responsif dan pengujian pengalaman pengguna diterapkan untuk memastikan bahwa aplikasi dapat diakses dengan baik di berbagai perangkat.
Setelah perbaikan aplikasi Lingualy, evaluasi dengan menggunakan System Usability Scale (SUS) menghasilkan skor rata-rata 74.
masuk dalam kategori AuAcceptableAy, dengan predikat AuCAy dan penilaian AuGoodAy.
Penelitian ini menyimpulkan bahwa desain UI/UX yang berpusat pada pengguna membuat belajar bahasa lebih efektif dan menyenangkan, serta memungkinkan kemahiran tanpa batasan waktu dan Kata kunci: Antarmuka Pengguna.
Pengalaman Pengguna.
Mobile-First Design.
GoalDirected Design.
System Usability Scale Abstract: This research aims to design an optimal user interface and user experience for language learning applications with the Mobile-First Design approach with the Goal-Directed Design method, which focuses on user goals.
User needs analysis was conducted through questionnaires, surveys, and observations to develop usage scenarios.
UI design focused on clarity, intuitive navigation, and simple layout, as well as visual appeal.
At the UX stage, responsive design principles and user experience testing were applied to ensure that the app could be accessed properly on various devices.
After the improvement of the Lingualy application, an evaluation using the System Usability Scale (SUS) resulted in an average score of 74.
8, falling into the category of AuAcceptableAy, with a predicate of AuCAy and a rating of AuGoodAy.
This research concludes that user-centered UI/UX design makes language learning more effective and enjoyable, and enables proficiency without the limitations of time and Keywords: User interface.
User Experience.
Mobile-First Design.
Goal-Directed Design.
System Usability Scale
PENDAHULUAN
Dalam era digital saat ini, peranan situs web menjadi sangat penting dalam mendukung berbagai aktivitas manusia, termasuk dalam bidang pendidikan .
, .
Pemahaman mendalam tentang evaluasi dan peningkatan performa aplikasi merupakan suatu keharusan.
Corresponding author : Syaiful Rahman .
yaifulrahman@kharisma.
Diterima : September, 2024 Disetujui : Oktober, 2024 Dipublikasikan : Oktober, 2025 Jurnal Ilmu Komputer KHARISMA TECH Terutama, ketika dihadapkan dengan situasi di mana aplikasi yang dikembangkan masih kurang efektif, tindakan perbaikan dan optimasi menjadi langkah yang krusial.
Peneliti perlu melakukan analisis lebih lanjut terhadap performa aplikasi Lingualy.
Mengidentifikasi titik lemah dan melacak kendala-kendala yang membatasi efektivitas aplikasi adalah langkah pertama yang penting.
Lingualy, sebagai platform pembelajaran bahasa online yang dapat membantu orangorang yang ingin belajar bahasa dengan cara yang menyenangkan dan efektif.
Untuk saat ini aplikasi Lingualy menyediakan beberapa pilihan bahasa, mulai dari bahasa Inggris.
Jepang, dan Spanyol.
Metode pembelajaran bermain yang membuat pengguna merasa seperti bermain game, yang membuat proses belajar menjadi lebih menyenangkan dan menarik.
Penggunaan Lingualy tidak hanya gratis namun juga efisien, menjadikannya alternatif utama Lingualy memungkinkan pengguna untuk memperoleh kemahiran bahasa yang diharapkan tanpa keterbatasan waktu dan dapat digunakan di mana saja.
Maka dari itu membutuhkan perancangan model website yang memperhatikan kebutuhan pengguna, terutama dalam hal aksesibilitas melalui perangkat mobile .
Aplikasi Lingualy masih memiliki sejumlah kekurangan seperti desain yang kurang menarik, belum dapat diakses melalui website, dan fitur-fitur yang masih terbatas.
Sehingga hal ini berdampak pada kurangnya minat pengguna Berdasarkan menyelesaikan masalah tersebut terkait perancangan model aplikasi website dengan merancang belajar bahasa berbasis android .
yang dapat di akses dalam bentuk website atau aplikasi, yang diberi nama Lingualy .
, .
Meskipun sudah banyak layanan atau aplikasi belajar bahasa, akan tetapi aplikasi belajar bahasa yang dirancang pada penelitian berbasis android ini yang memiliki keunggulan dimana pengguna dapat mengakses dalam bentuk website maupun dalam bentuk aplikasi dan juga dapat diakses melalui perangkat mobile .
, .
, .
Mobile-First Design dengan metode Goal-Directed Design menjadi pendekatan yang relevan untuk memastikan pengalaman pengguna yang optimal, mengingat tren penggunaan perangkat mobile yang semakin meningkat apalagi generasi sekarang yang sudah banyak menggunakan perangkat mobile.
Pendekatan ini juga meningkatkan kecepatan pemuatan halaman, desain yang sesuai dengan pengguna, yang sangat penting bagi pengguna mobile.
Dalam konteks pengembangan berkelanjutan dan pemeliharaan situs web, penerapan desain Mobile-First yang dikombinasikan dengan metode Goal-Directed Design terbukti efektif dalam mengurangi kompleksitas secara signifikan sejak tahap awal.
Hal ini memberikan kepastian bahwa situs tersebut akan memiliki responsivitas tinggi dan beroperasi secara optimal di berbagai dimensi layar.
Berdasarkan alasan tersebut, fokus penelitian ini ditujukan untuk menyusun sebuah model website yang diberi nama Lingualy, yang dikembangkan melalui penggunaan metode Mobile-First Design dan Goal-Directed Design .
, .
Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri
Jurnal Ilmu Komputer KHARISMA TECH
METODE PENELITIAN
Dalam penelitian ini, langkah-langkah detail diuraikan pada Gambar 1.
Gambar 1 Tahapan Penelitian Berikut beberapa tahapan-tahapan pada penilitian ini, yang diuraikan sebagai berikut:
1 Studi Literatur Penelitian AuPerancangan UI/UX Pada Aplikasi Lingualy Menggunakan Mobile-First Design Dengan Metode Goal-Directed DesignAy.
Proses telaah literatur mencakup analisis terhadap berbagai sumber, seperti kajian AuAdaptasi Model SDLC Iteratif Terhadap Pendekatan Mobile-First Untuk Pengembangan Antarmuka Web ResponsiveAy .
AuPenerapan Mobile-First Design pada Antarmuka Website Profil Sekolah dengan Pemanfaatan Human-Centered Design (Kasus: SMPN 21 Malan.
Ay .
AuDesain Tampilan Aplikasi Sistem Pelayanan Masyarakat Desa Dengan Metode Goal-Directed DesignAy .
AuPengembangan Antarmuka Dan Pengalaman Pengguna Aplikasi Ujian Online Menggunakan Metode Goal-Directed DesignAy .
, serta AuEvaluasi Usability Pada Sistem Informasi Pasar Kerja Menggunakan System Usability Scale (SUS)Ay .
Melalui standar System Usability Scale (SUS), dilakukan pengukuran atas tingkat kepatuhan terhadap kebutuhan dan kepuasan pengguna.
2 Research Dalam tahap research, peneliti mengaplikasikan metodologi survei dengan cara mendistribusikan kuesioner kepada dua puluh responden.
Hal ini bertujuan untuk mengamati Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri Jurnal Ilmu Komputer KHARISMA TECH sampel yang berkaitan dengan proses perancangan situs web Lingualy dari responden 3 Modelling Setelah selesai dari tahap research, peneliti akan melakukan proses modelling yaitu membuat rancangan hasil yang di ambil dari tahapan research untuk membuat bentuk persona yang dapat memuat informasi user persona.
4 Requirement Pada tahap ini, peneliti akan mengidentifikasi dan merancang gambaran umum dengan tujuan dapat memenuhi kebutuhan desain user interface yang diinginkan dengan menggunakan informasi yang telah diperoleh dari tahap-tahap sebelumnya.
5 Framework Definition Tahap ini mencakup pembangunan dari sketsa yang merupakan hasil pengolahan riset, pemodelan, serta kebutuhan yang telah dikumpulkan.
Proses ini meliputi penyusunan wireframe atau rendah-kesetiaan serta arsitektur informasi yang merancang penataan informasi serta interaksi pengguna dengan sistem.
6 Refinement Pada tahap ini, rancangan yang telah dikembangkan sebelumnya kini diolah lebih detail.
Proses ini melibatkan pembuatan mockup visual beresolusi tinggi serta prototipe yang Selain itu, dilakukan pula serangkaian pengujian kegunaan untuk mengonfirmasi bahwa desain tersebut tidak hanya sesuai dengan kriteria yang ditetapkan, tetapi juga meningkatkan kualitas pengalaman pengguna secara keseluruhan.
7 Development Support Dalam metode Goal-Directed Design, tahap akhir melibatkan proses pengembangan antarmuka pengguna yang direncanakan.
Tahap ini diawali dengan evaluasi antarmuka pengguna yang mencakup beberapa langkah, termasuk pengujian prototipe, penerapan System Usability Scale (SUS) untuk menilai prototipe, dan analisis terhadap hasil-hasil yang diperoleh dari pengujian tersebut.
8 Kesimpulan Pada tahap penyusunan kesimpulan, hasil evaluasi dari tahap-tahap sebelumnya akan digunakan sebagai dasar untuk menyusun kesimpulan penelitian.
Selain itu, kesimpulan ini juga dapat memuat saran-saran untuk pengembangan atau perbaikan lebih lanjut yang mungkin diperlukan.
Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri
Jurnal Ilmu Komputer KHARISMA TECH
HASIL DAN PEMBAHASAN
1 Research Dalam tahap ini, pengumpulan data kuantitatif dilakukan melalui observasi oleh peneliti guna memperoleh wawasan mendalam tentang aplikasi Lingualy.
Selain itu, data kuantitatif juga dihimpun melalui penerapan kuesioner System Usability Scale (SUS) untuk menilai tingkat kegunaan aplikasi Lingualy.
Kuesioner System Usability Scale (SUS) Kuesioner SUS yang mengandung sepuluh pernyataan telah didistribusikan kepada dua puluh responden.
Setiap responden diminta untuk menilai pernyataan yang tertera dalam kuesioner tersebut menggunakan skala likert lima poin.
Skala tersebut memungkinkan responden untuk menyatakan tingkat persetujuan atau penolakan mereka, yang bergerak dari angka 1 yang berarti Ausangat tidak setujuAy hingga 5 yang menunjukkan Ausangat setujuAy.
Untuk penyebaran kuesioner, platform google form dipilih sebagai metode pengumpulan data.
Pada Tabel 1 menyajikan pernyataan-pernyataan yang digunakan pada Kuesioner System Usability Scale (SUS).
Tabel 1 Pernyataan Kuesioner System Usability Scale (SUS) No.
Pernyataan Kuesioner System Usability Scale (SUS) Aplikasi ini membantu saya dengan baik dalam mencapai tujuan belajar bahasa saya Saya merasa aplikasi ini terlalu rumit untuk digunakan Antarmuka aplikasi ini mudah dipahami dan digunakan Saya sering merasa kesulitan dalam menemukan fitur yang saya butuhkan di aplikasi Aplikasi ini membuat proses belajar bahasa menjadi lebih efisien Saya merasa desain yang kurang menarik dalam aplikasi ini Saya merasa nyaman menggunakan aplikasi ini untuk belajar bahasa Saya merasa kurang nyaman saat menggunakan aplikasi ini Saya merasa aplikasi ini sangat mendukung kebutuhan belajar bahasa saya Saya merasa aplikasi ini tidak memberikan panduan yang cukup jelas Setelah mengumpulkan data sampel dari responden, ada beberapa aturan untuk menghitung skor kuesioner SUS yaitu:
Untuk pernyataan yang bernomor ganjil, skor dihitung dengan mengurangi nilai yang diberikan oleh responden dengan angka 1.
Pernyataan yang bernomor genap dihitung dengan mengurangi angka 5 dengan nilai yang diberikan oleh responden.
Skor SUS diperoleh melalui penjumlahan skor semua pernyataan yang selanjutnya akan dikalikan dengan faktor 2,5 .
Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri Jurnal Ilmu Komputer KHARISMA TECH Persamaan di bawah ini menunjukkan penilaian SUS di atas untuk memperjelas proses perhitungannya .
, .
Skor R = ((P1 Ae .
Ae P.
(P3 Ae .
Ae P.
(P5 Ae .
Ae P.
(P7 Ae .
Ae P.
(P9 Ae .
Ae P.
) * 2,5 Ket:
Skor R : Skor yang diperoleh dari tiap responden P1 Ae P10 : Nilai likert tiap pernyataan dari tiap responden Dalam mengukur skor System Usability Scale (SUS), rumus yang digunakan adalah:
Ket:
: Skor rata-rata : Jumlah skor SUS : Jumlah responden Metode ini diterapkan dengan cara mengkalkulasi rata-rata skor dari semua Hal ini dilakukan dengan mengumpulkan total skor yang didapat kemudian dibagi dengan jumlah responden yang ada.
Kebijakan ini hanya berlaku untuk satu responden perhitungan awal dan kemudian diaplikasikan secara seragam untuk responden berikutnya.
Dalam pengukuran hasil penilaian yang dilakukan menggunakan System Usability Scale (SUS), terdapat tiga dimensi yang dipertimbangkan:
Tingkatan penerimaan yang diukur melalui tingkat Acceptability, memiliki tiga kategori, yaitu tidak diterima, marginal .
aik rendah maupun tingg.
, dan diterima.
Penerapan tingkat penerimaan ini bertujuan untuk mengukur kualitas penerimaan pengguna terhadap suatu aplikasi.
Tingkat grade scales mencakup klasifikasi dari A hingga F, yang bertujuan untuk mengklasifikasikan aplikasi berdasarkan kualitasnya.
Penilaian tingkatan yang menggunakan Adjective Ratings dilakukan melalui lima kategori, mulai dari worst imaginable, poor, ok, good, hingga best imaginable.
Tingkatan ini bertujuan untuk memberikan penilaian terhadap aplikasi yang Data survei yang menggunakan System Usability Scale (SUS) untuk menilai User interface (UI) dari aplikasi yang telah dirancang sebelumnya menunjukkan hasil sebagai Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri Jurnal Ilmu Komputer KHARISMA TECH Tabel 2 Hasil Data Kuesioner System Usability Scale (SUS) No.
Pengguna Q10
P10
P11
P12
P13
P14
P15
P16
P17
P18
P19
P20
Pada Tabel 2 menyajikan hasil data dari Kuesioner System Usability Scale (SUS).
Langkah berikutnya adalah proses pengolahan dan perhitungan hasil data kuesioner yang didasarkan pada aturan System Usability Scale (SUS).
Hasil perhitungan SUS yang diperoleh untuk User interface (UI) dari aplikasi yang telah ada sebelumnya ditampilkan sebagai Tabel 3 Hasil Data Dari Perhitungan System Usability Scale (SUS) Dikali No.
Pengguna Q10 Jumlah Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri
Jurnal Ilmu Komputer KHARISMA TECH
P10
P11
P12
P13
P14
P15
P16
P17
P18
P19
P20
Total Rata-rata Pada Tabel 3 menyajikan perhitungan dari hasil data Kuesioner menggunakan System Usability Scale (SUS).
Hasil akhir dari tes yang menggunakan kuesioner System Usability Scale (SUS) menunjukkan skor rata-rata sebesar 48.
Skor ini termasuk dalam kategori AuNot AcceptableAy menurut Rentang Penerimaan (Acceptability Range.
, diberi peringkat AuFAy dalam Skala Nilai (Grade Scale.
, dan mendapat predikat AuPoorAy berdasarkan Penilaian Deskriptif (Adjective Rating.
Hasil ini menandakan bahwa desain User interface (UI) dari aplikasi Lingualy memiliki beberapa kelemahan yang signifikan.
2 Modelling Dalam tahap ini, pembentukan user persona dilakukan dengan menggunakan data yang diperoleh dari kuesioner.
User persona, sebuah dokumen yang mengilustrasikan representasi dari pengguna aplikasi Lingualy, mencakup informasi mengenai karakteristik demografis, aspirasi, kebutuhan, tantangan, serta motivasi yang mereka miliki.
Uraian tersebut dapat di lihat dalam Tabel 4.
Tabel 4 User persona Demografi Tujuan Usia: 24 Tahun Jenis Kelamin: Laki-laki Mendapatkan informasi mengenai desain Pekerjaan: Mahasiswa aplikasi Lingualy Perangkat: Android Permasalahan Yang Dihadapi A Tampilan yang kurang menarik A Masih adanya fitur yang masih dalam tahap pengembangan Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri Jurnal Ilmu Komputer KHARISMA TECH Kebutuhan A Membutuhkan desain yang lebih menarik A Mengganti atau menambahkan fitur yang masih dalam tahap pengembangan 3 Requirement Dalam tahap ini, keperluan dan tujuan dari user persona diidentifikasi secara mendetail.
Kebutuhan fungsional pengguna disusun dalam bentuk tabel, yang akan memberikan gambaran yang lebih jelas tentang apa yang diperlukan oleh pengguna.
Kebutuhan Fungsionalitas Kebutuhan fungsional dijelaskan sebagai rincian dari fungsi yang diberikan oleh tiap fitur dan menu yang ada dalam aplikasi, sebagaimana dicatat dalam Tabel 5.
Tabel 5 Kebutuhan Fungsionalitas No.
Kebutuhan Fitur home Fitur invite friends Fitur chat Fitur rank Deskripsi Digunakan untuk memilih bahasa apa yang ingin Digunakan untuk mengundang teman agar dapat bermain bersama-sama Digunakan untuk dapat berbincang bersama teman yang lainnya Digunakan untuk melihat peringkat-peringkat pengguna 4 Framework Definition Dalam tahap ini, pengembangan antarmuka pengguna untuk aplikasi Lingualy diwujudkan melalui wireframe atau prototipe berkesetiaan rendah.
Tahapan ini mengambil dasar dari langkah-langkah awal yang bertujuan untuk mengidentifikasi kebutuhan pengguna terhadap aplikasi Lingualy.
Gambar 2 berikut ini disajikan hasil rancangan yang telah Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri Jurnal Ilmu Komputer KHARISMA TECH Gambar 2 Low-Fidelity Prototype Lingualy 5 Refinement Dalam tahap ini, dilakukan penghalusan terhadap antarmuka pengguna dari rancangan Proses penyempurnaan ini dilaksanakan melalui pembuatan desain prototipe yang sangat mendekati sistem yang direncanakan, yang dikenal sebagai prototipe berkesetiaan tinggi.
Prototipe ini akan berperan sebagai elemen utama dalam pengujian final desain antarmuka untuk aplikasi Lingualy yang dapat di liat pada Gambar 3.
Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri Jurnal Ilmu Komputer KHARISMA TECH Gambar 3 High-Fidelity Prototype Lingualy 6 Development Support Pada tahapan ini, antarmuka pengguna yang telah dirancang menjalani proses Tujuan evaluasi tersebut adalah untuk mengukur interaksi pengguna dengan antarmuka pengguna, menilai seberapa jauh kebutuhan pengguna dipenuhi oleh desain tersebut, serta menilai tingkat kepuasan pengguna terhadap tampilan antarmuka yang Dalam konteks evaluasi ini, kuesioner System Usability Scale (SUS) kembali diberikan kepada dua puluh responden.
Hasil asli dari kuesioner System Usability Scale (SUS) terkait dengan antarmuka pengguna yang telah dikembangkan akan disajikan dalam Tabel 6 berikut:
Tabel 6 Hasil Data Evaluasi Akhir Kuesioner System Usability Scale (SUS) No.
Pengguna Q10 Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri
Jurnal Ilmu Komputer KHARISMA TECH
P10
P11
P12
P13
P14
P15
P16
P17
P18
P19
P20
Langkah berikutnya adalah pemrosesan dan perhitungan data dari kuesioner dengan menggunakan metode System Usability Scale (SUS).
Hasil perhitungan SUS yang diterapkan pada Antarmuka Pengguna (UI) yang baru akan disajikan dalam Tabel 7 berikut:
Tabel 7 Hasil Data Dari Perhitungan Evaluasi Akhir System Usability Scale (SUS) Dikali No.
Pengguna Q10
Jumlah P10
P11
P12
P13
P14
P15
P16
P17
Ridwan Dwiyanto Syam.
Syaiful Rahman.
Syamsul Bahri
Jurnal Ilmu Komputer KHARISMA TECH
P18
P19
P20
Total Rata-rata Penilaian terhadap rancangan antarmuka pengguna baru telah dilakukan melalui penerapan kuesioner System Usability Scale (SUS) yang menghasilkan skor rata-rata Skor ini termasuk dalam kategori AuAcceptableAy menurut Acceptability Ranges, berada pada peringkat AuCAy sesuai dengan Grade Scales, dan diberikan predikat AuGoodAy berdasarkan Adjective Ratings.
Berhasilnya rancangan ini dalam memenuhi standar rata-rata SUS, yang ditetapkan pada nilai 68, menandakan bahwa antarmuka pengguna yang telah dikembangkan diterima dengan baik oleh pengguna.
KESIMPULAN
Berdasarkan analisis yang dilakukan terhadap antarmuka pengguna dari aplikasi Lingualy dan evaluasi pengalaman pengguna, kesimpulan yang dapat diambil adalah bahwa rancangan antarmuka pengguna awal Lingualy menerima penilaian yang tidak memuaskan dari System Usability Scale (SUS), menghasilkan skor rata-rata 48.
Dalam kisaran penerimaan, rancangan ini dikelompokkan dalam kategori AuNot AcceptableAy, dengan skor Grade Scales yang berada pada tingkatan AuFAy, dan penilaian adjektif yang menunjukkan bahwa rancangan tersebut berada dalam kategori AuPoorAy, menandakan ketidakmenarikan desain antarmuka pengguna aplikasi Lingualy.
Oleh karena itu, diperlukan perancangan ulang desain pada beberapa bagian aplikasi Lingualy, seperti tampilan halaman utama, halaman peringkat.
Setelah dilakukan perbaikan pada antarmuka pengguna, penilaian akhir dengan menggunakan System Usability Scale (SUS) menghasilkan skor rata-rata sebesar Hasil evaluasi ini masuk dalam kisaran AuAcceptableAy menurut Acceptability Ranges, mencapai tingkat AuCAy pada Grade Scales, dan mendapatkan penilaian AuGoodAy dalam Adjective Ratings.
Oleh karena itu, terbukti bahwa desain antarmuka pengguna telah mencapai skor rata-rata standar dari System Usability Scale (SUS) yang adalah 68, dan dengan demikian, desain tersebut dianggap berhasil serta telah diterima dengan baik oleh para pengguna.
DAFTAR PUSTAKA