REPOSITOR, Vol. 6, No. 2, Mei 2024, Pp. 173-180 ISSN E-ISSN 173 Merancang untuk Kesenangan Belajar: Desain UI/UX Berbasis HCD pada Aplikasi Iqra' : 2714-7975 : 2716-1382 Bagus Prasetya* Teknik Informatika/Universitas Muhammadiyah Malang Abstrak Dengan kemajuan teknologi komputer, pengajaran dan pembelajaran Al-Quran dapat menjadi menyenangkan, menarik, dan menyenangkan. Tujuan dari penelitian ini adalah untuk merancang user experience aplikasi multimedia interaktif (Iqra') yang mengajarkan anak-anak membaca Al-Quran dengan efektif dan efisien. Prinsip Teknologi Persuasif dan Prinsip Desain Multimedia digunakan dalam merancang dan mengembangkan aplikasi multimedia interaktif ini. Penelitian ini menerapkan metode HCD (Human Centered Design). Terdapat 3 tahapan dalam pendekatan HCD, yaitu, inspiration, ideation, dan implementation. Pada tahapan awal, melibatkan proses pengumpulan data dengan observasi dan wawancara terhadap kebutuhan pengguna. Kemudian, melakukan brainstorming terhadap masalah pengguna dan membuat desain prototipe untuk mendapatkan evaluasi dari pengguna dari sisi User Interface. Kata Kunci: Teknologi Komputer, Pengajaran dan Pembelajaran Al-Quran, User Experience, Aplikasi Multimedia Interaktif (Iqra'), Human Centered Design Abstract With the advancement of computer technology, teaching and learning the Quran can be fun, interesting, and enjoyable. The purpose of this research is to design an interactive multimedia application user experience (Iqra') that teaches children to read the Quran effectively and efficiently. Persuasive Technology Principles and Multimedia Design Principles are used in designing and developing this interactive multimedia application. This research applies the HCD (Human Centered Design) method. There are 3 stages in the HCD approach, namely, inspiration, ideation, and implementation. In the initial stage, it involves the process of collecting data by observing and interviewing user needs. Then, brainstorming user problems and creating a prototype design to get evaluation from users in terms of User Interface. Keywords: Computer Technology, Al-Quran Teaching and Learning, User Experience, Interactive Multimedia Application (Iqra'), Human Centered Design 1. Pendahuluan Iqra' merupakan kata pertama yang diturunkan dalam Al-Quran kepada Nabi Muhammad SAW. Kata Iqra' diartikan sebagai "bacalah" [1]. Dalam konteks pembelajaran Al-Quran, diperkenalkan berbagai teknik, salah satunya adalah Teknik Iqra'. Penggunaan teknik ini terbukti efektif dalam meningkatkan kemampuan membaca dan menulis Al-Quran, terutama di kalangan anak-anak [2]. Perancangan user experience telah menjadi fokus utama dalam era modern, di mana kualitas user experience dianggap mendukung tingkat keberhasilan Pembangunan aplikasi mobile [3]. Menurut definisi ISO 9241-210, user experience mencakup persepsi dan tanggapan seseorang terhadap suatu produk dan sistem yang melibatkan pengguna [4]. Prinsip utama dalam merancang user experience adalah mencapai nilai kenyamanan dan kepuasan pengguna. Untuk menciptakan pengalaman pengguna yang berkualitas tinggi, berbagai layanan dapat diterapkan, termasuk teknik pemasaran dan desain antarmuka. Desain sebuah sistem merujuk pada interaksi antara pengguna dengan pengguna lain melalui perintah, penginputan data, dan penggunaan konten, yang dikenal sebagai user interface [5]. Antarmuka pengguna user interface memiliki peran krusial dalam sistem aplikasi, karena hampir seluruh operasi aplikasi melibatkan antarmuka pengguna. Kualitas sebuah sistem dapat dipengaruhi secara signifikan oleh kualitas antarmuka pengguna. Sebuah antarmuka yang buruk dapat berdampak negatif pada produktivitas sistem.
ISSN: 2714-7975; E-ISSN: 2716-1382 Oleh kare itu, penelitian ini fokus pada pengembangan antarmuka pengguna user experience Iqra' untuk memfasilitasi pembelajaran huruf Arab anak-anak. Tujuannya adalah merancang user experience menarik dan persuasif untuk memotivasi anak-anak belajar huruf Arab dengan intensif [6]. Diharapkan Iqra' tidak hanya mempermudah pemahaman huruf Arab, tetapi juga menginspirasi mereka belajar membaca dan menghafal Al-Quran dengan semangat dan dedikasi. 174 2. Metode Penelitian Tahapan pada Gambar 1 merupakan perancangan aplikasi Iqra' menggunakan pendekatan Human-Centered Design. Metode ini bertujuan untuk menyelesaikan masalah dengan berfokus pada manusia guna mencapai solusi inovatif yang lebih terkait dengan kebutuhan pengguna [7][8]. Human-Centered Design melibatkan tiga tahapan, yaitu: Gambar 1. Tahapan Metode Human Centerd Design 2.1 Inspiration Inspiration merupakan elemen kunci dalam metodologi Human-Centered Design, karena pada tahap Inspiration kita dapat menemukan masalah yang dihadapi, memahami tujuan yang ingin dicapai oleh pengguna, dan mengidentifikasi kendala yang mungkin mereka hadapi. Proses Inspiration sangat penting karena menghasilkan spesifikasi kebutuhan pengguna yang spesifik, yang diperlukan untuk menemukan solusi terbaik. Tujuan dari tahap ini adalah memahami situasi, baik dari perspektif pengembang maupun pengguna, sehingga kita dapat mengidentifikasi masalah-masalah yang dihadapi oleh pengguna dan menggunakan informasi tersebut sebagai dasar untuk observasi lebih lanjut. Beberapa metode yang digunakan dalam tahap Inspiration melibatkan melakukan kuesioner dan merencanakan langkah-langkah untuk memahami masalah pengguna. Adapun beberapa proses analisis yang dilakukan dalam perancangan user interface Iqra', yaitu: 1. Analisis Pengguna merupakan proses di mana pengembang memahami tujuan pengguna dalam mendapatkan informasi serta mengidentifikasi masalah-masalah yang mereka hadapi. Untuk mendapatkan hasil yang lebih spesifik, pengembang melakukan riset menggunakan beberapa metode, termasuk observasi dan kuesioner. Dalam hal ini, responden mengisi kuesioner sebanyak 20 informan, dengan mayoritas berumur 6-12. Kuesioner tersebut terdiri dari 9 pertanyaan, yang mencakup aspek umum penggunaan internet oleh pengguna di media sosial, serta fokus pada perancangan user interface Iqra'. Tabel 1. Daftar Pertanyaan Saat Membuat Kuisoner No Variable 1 Perangkat apa yang sering kamu gunakan untuk melakukan belajar huruf hijaiyah secara online? Pengguna Iqra' apa yang sering kamu mainkan? Seberapa sering kamu belajar melalui aplikasi online dalam 4 bulan terakhir? Apakah kamu tertarik untuk belajar Iqra' yang menyenangkan? Sebutkan pemainan apa yang anda sukai? 2 3 4 5 Stakeholder Pengguna/ User REPOSITOR, Vol. 6, No. 2, Mei 2024: 173-180
REPOSITOR 6 7 ISSN: 2714-7975; E-ISSN: 2716-1382 Apa yang kamu tidak sukai dari tampilan aplikasi Iqra'? Fitur/permainan apa yang menurut kamu perlu ditambahkan? 175 8 Hal apa menurut kamu yang perlu di tingkatkan? Bagaimana menurut kamu tampilan Iqra'? 9 2.2 Ideation Pada tahap ideation, kreativitas menjadi sangat penting tanpa perlu mempertimbangkan batasan dari pengguna dan Captology yang menjadi tolak ukur dalam proses perancangan. Pengembang melakukan brainstorming untuk mendapatkan solusi terbaik. Seorang desainer akan merealisasikan ide dan gagasan yang telah dipelajari pada tahap Inspiration, kemudian mengidentifikasi menjadi solusi-solusi terbaik, dan merancang prototipe. Beberapa hasil yang dapat digunakan oleh pengembang untuk analisis perancangan proses belajar dan desain meliputi: 1. Captology: Studi tentang komputer sebagai teknologi persuasif [9]. Hal ini mencakup desain, penelitian, dan analisis aplikasi komputasi interaktif yang dibuat untuk tujuan mengubah sikap atau perilaku orang. Pada tahun 2004, [2] menyarankan lebih dari 40 prinsip Teknologi Persuasif yang dapat digunakan untuk mengubah sikap orang dalam domain komersial dan non-komersial. 2. Analisis Desain Prototype: Pengembang akan memulai dengan mengidentifikasi masalah dari pengguna yang telah dipelajari pada tahap Inspiration. Selanjutnya, mereka memulai pengujian protoype untuk mendapatkan umpan balik dari pengguna. Observasi terhadap interaksi pengguna dengan prototype dilakukan, dan pengembang menerima masukan dan kritik untuk terus meningkatkan desainnya [10]. 2.3 Implementation Pada tahap Implementation, pengembang akan mendapatkan validasi dari pengguna untuk tahap akhir dan desain yang tepat guna menghasilkan aplikasi Iqra' yang dapat diterapkan di dunia nyata. Setelah pembaruan diimplementasikan, pengembang tetap memonitor masukan yang diberikan oleh pengguna sebagai umpan balik. Hal ini dilakukan untuk terus memperbaiki dan mengoptimalkan solusi yang telah dihasilkan, serta memastikan bahwa aplikasi Iqra' dapat memenuhi kebutuhan dan harapan pengguna dengan lebih baik. Proses observasi terhadap respons pengguna menjadi kunci dalam peningkatan berkelanjutan selama tahap implementasi 3. Hasil Penelitian dan Pembahasan Dari analisis yang telah dilakukan untuk merancang sebuah aplikasi melalui pendekatan Human Centered Design, ditemukan beberapa hasil, yaitu: 3.1 Inspiration Pada fase inspiration, pengembang mendekatkan diri kepada pengguna untuk memahami masalah-masalah yang dihadapi. Hasil dari observasi permasalahan pengguna terhadap platform website yang terkait dengan konsep Captology dan tampilan antarmuka, seperti pada Tabel 2 berikut: Tabel 2. Umpan Balik Pengguna Dari Kuisioner No 1 Sebagai anak-anak saya menginginkan metode bembalajaran yang menarik sehingga saya bisa belajar dengan semangat Umpan Balik Pengguna 2 Sebagai anak-anak saya mengingikan desain user interface yang simple sehingga saya bisa memahami dengan mudah 3 Sebagai saya menginginkan level/tingkatan sehingga saya bisa melihat kemampuan saya anak-anak Merancang untuk Kesenangan Belajar... Bagus Prasetya
176 ISSN: 2714-7975; E-ISSN: 2716-1382 4 Sebagai anak-anak saya menginginkan quiz belajar melafatkan sehingga saya bisa fasih dalam melafatkan huruh Arab Beberapa Pada hasil tahap awal, penulis menggunakan teknik observasi dan kuesioner kepada pengguna. Penyebaran kuesioner online dilakukan melalui google forms kepada sejumlah 20 responden, dengan 60% perempuan, 40% laki-laki, dan rata-rata usia antara 6-12 tahun. Mayoritas pengguna menunjukkan minat dalam belajar huruf hijaiyah melalui aplikasi Iqra'. Responden memberikan banyak umpan balik terhadap tampilan aplikasi Iqra', dan beberapa di antaranya telah diamati dan difilter pada Gambar 2. Gambar 2. Presentasi Pengguna Tertarik Iqra' 3.2 Ideation Pada fase ideation proyek Iqra', pengembang merangkum gagasan-gagasan menjadi kerangka dasar untuk menggambarkan elemen-esensial dalam Captology. Dengan garis besar, setiap elemen mengalir secara teratur dari satu bagian ke bagian berikutnya, menciptakan suatu visualisasi yang memudahkan pemahaman. Dalam Captology, validasi hasil dari sesi brainstorming dapat dilakukan melalui representasi visual, memungkinkan pengembang untuk memiliki pemahaman yang seragam terkait elemen-elemen yang terkait dalam konsep yang dinginkan. Perancangan desain aplikasi Iqra' protoype user interface/user experience melakukan analisis secara mendalam dengan mengetahui masalah-masalah yang dihadapi oleh pengguna. Hasil dari proses analisis dapat digambarkan kedalam bentuk prototype. Hasil prototype berguna untuk mendapatkan respon atau umpan balik dari pengguna terhadap interaksi dengan sistem. Hasil dari proses analisis akan menjadi acuan pengembang untuk menjadikan solusi-solusi terbaik yang dioptimalkan menjadi sebuah apliaksi mobile. Dalam proses perancangan desain prototype, digunakan framework "Figma". Pada tampilan awal, terdapat halaman utama dengan beberapa fitur yang terletak di bagian home page, seperti menu modul pengenalan huruf Arab, modul membaca huruf Arab, dan modul kuis. Teks dan gambar pada tampilan layar muncul bersamaan. Desain prototype ini memanfaatkan grafik sederhana, ditambahkan animasi yang menarik dan kata-kata yang akrab sebagai tombol- tombolnya. Saat ditekan, setiap tombol akan menghasilkan suara yang memberikan informasi kepada pengguna tentang fungsi masing-masing tombol. Suara-suara tersebut bertujuan membantu anak-anak yang belum lancar membaca. Berikut adalah hasil dari proses perancangan prototype untuk aplikasi Iqra'. Gambar 3. Modul Pengenalan Aksara Arab REPOSITOR, Vol. 6, No. 2, Mei 2024: 173-180
REPOSITOR 177 Gambar 3 bertujuan untuk familiarisasi anak-anak dengan 29 karakter Arab, mulai dari ﺍ hingga ﻱ. Pada halaman ini, konsep Desain Multimedia diterapkan, di mana suara dan gambar digunakan secara bersamaan. Pengguna dapat dengan mudah mendengarkan ulang karakter- karakter ini dengan menekan huruf Arabnya lagi. Halaman ini menyajikan karakter Arab beserta cara pengucapannya. Prinsip Self Monitoring juga diaplikasikan di sini, memungkinkan pengguna untuk memilih tombol sesuai kebutuhan mereka. ISSN: 2714-7975; E-ISSN: 2716-1382 Gambar 4 menggambarkan antarmuka halaman aktivitas kuis dalam aplikasi Iqra'. Pertanyaan kuis disusun berdasarkan aktivitas sebelumnya anak-anak, dengan tujuan untuk memperkuat pemahaman mereka terhadap pelafalan huruf Arab. Emotikon ditampilkan setelah menjawab pertanyaan untuk menunjukkan kebenaran atau kesalahan jawaban. Modul Kuis ini terdiri dari beberapa pertanyaan pilihan ganda. Prinsip Self Monitoring diterapkan di sini, dengan memberikan pengguna kemampuan untuk menjawab pertanyaan dan langsung melihat hasilnya, menghilangkan kebosanan dan membantu mereka mencapai tujuan atau hasil yang ditentukan. Gambar 4. Modul Kuis Selanjutnya, Prinsip Pujian diterapkan, di mana ekspresi wajah tersenyum dan pujian digunakan untuk memberikan apresiasi kepada anak-anak setiap kali mereka menjawab dengan benar. Gambar 5 menunjukkan respons terhadap jawaban yang benar maupun salah dalam aplikasi Iqra'. Gambar 5. Respon Untuk Jawaban Benar dan Salah Gambar 6 memperlihatkan antarmuka halaman Membaca Huruf Arab dalam aplikasi Iqra'. Terdapat lima halaman yang dirancang khusus untuk kegiatan membaca, diadopsi dari materi- materi teks Iqra'. Konsistensi dalam penggunaan warna dan penataan karakter Arab menjadi faktor kunci untuk mencegah kebingungan saat anak-anak menjelajahi aplikasi. Prinsip Kualitas Merancang untuk Kesenangan Belajar... Bagus Prasetya
ISSN: 2714-7975; E-ISSN: 2716-1382 178 Informasi diterapkan pada setiap halaman dengan tujuan memastikan bahwa aplikasi memberikan informasi yang terkini, relevan, dan terkoordinasi. Gambar 6. Modul Membaca Huruf Arab 3.3 Implementation Setelah melalui fase ideation, pada tahap terakhir ini sistem sebenarnya diwujudkan dalam bentuk sebuah aplikasi mobile. Saat proses implementasi berjalan, pengembang memutuskan untuk mempertimbangkan umpan balik pengguna pada poin ke-4 dari segi user interface. Gambar 7. Modul Melafalkan Huruf Arab Setelah menerima evaluasi dari pengguna selama tahap implementation, pengembang telah memperbarui aplikasi Iqra' dengan menambahkan kuis baru pada modul kuis. Kini, kuis tersebut difokuskan untuk melatih pengguna dalam melafalkan huruf Arab. 4. Kesimpulan Kesimpulan Penelitian ini mengaplikasikan pendekatan Human Centered Design dengan fokus pada karakteristik dan psikologi pengguna. Pendekatan ini terbukti sangat efektif dalam merancang antarmuka pengguna user interface/user experience aplikasi Iqra'. Dengan mengumpulkan tanggapan dari 20 pengguna, penelitian berhasil memenuhi kebutuhan pengguna dan mengoptimalkan hasil perancangan aplikasi Iqra'. Referensi [1] S. Deskriptif, T. Kegiatan, B. Dan, M. Baca, and A. Tk, "Studi deskriptif tentang kegiatan bercerita dan minat baca anak tk sakinah malang," 2011. [2] A. F. Rosmani and N. A. Wahab, "I-IQRA': Designing and constructing a persuasive multimedia application to learn Arabic characters," 2011 IEEE Colloq. Humanit. Sci. Eng. CHUSER 2011, no. Chuser, pp. 98-101, 2011, doi: 10.1109/CHUSER.2011.6163884. [3] S. Tominaga, T. Doi, T. Yamaoka, Y. Misyashita, and M. Toriumi, Structure of fUN factors in the interaction with products, vol. 6776 LNCS. 2011. doi: 10.1007/978-3-642-21753-1_16. [4] A. M. Fajar, Penerapan metode user centered design (ucd) pada web AIS UIN Jakarta 9241-210. Available: dengan MALIK FAJAR-FST.pdf standar ISO 2021. [Online]. [5] D.-E. Kim, Si-Jung;Cho, "Technology Trends for UX/UI of Smart Contents," Int. J. Rev. Korea Contents Assoc., vol. 14, no. 1, pp. 29-33, 2016. REPOSITOR, Vol. 6, No. 2, Mei 2024: 173-180
REPOSITOR 179 [6] A. F. Rosmani, N. A. Wahab, and N. Ibrahim, "Evaluating IQRA' multimedia learning application," BEIAC 2012 - 2012 IEEE Business, Eng. Ind. Appl. Colloq., pp. 324-327, 2012, doi: 10.1109/BEIAC.2012.6226076. ISSN: 2714-7975; E-ISSN: 2716-1382 [7] D. E. C. Na and C. Hipertensiva, No 主観的健康感を中心とした在宅高齢者における 健康関 連指標に関する共分散構造分析Title. [8] A. R. Setiadi and H. Setiaji, "Perancangan UI/UX menggunakan pendekatan HCD (Human- Centered design) pada website Thriftdoor," Automata, vol. 1, no. 2, pp. 228-233, 2020. [9] B. J. Fogg, "Captology: The Study of Computers as Persuasive Technologies," Conf. Hum. Factors Comput. Syst. - Proc., p. 385, 1998, doi: 10.1145/286498.286852. [10] J. N. Kearns and F. D. Fincham, "A prototype analysis of forgiveness," Personal. Soc. Psychol. Bull., vol. 30, no. 7, pp. 838-855, 2004, doi: 10.1177/0146167204264237. Merancang untuk Kesenangan Belajar... Bagus Prasetya
180 REPOSITOR, Vol. 6, No. 2, Mei 2024: 173-180 ISSN: 2714-7975; E-ISSN: 2716-1382