## Analisis Dan Perancangan Antarmuka Situs Portal Belajar Bagi Penyandang Dyschromatopsia
Philip Andrew Sumolang 1 , Rosa Delima *2 , Sri Suwarno 3
1,2,3 Informatika, Universitas Kristen Duta Wacana Jl. dr. Wahidin Sudirohusodo No. 5-25, Yogyakarta
*2 rosadelima@staff.ukdw.ac.id
*) Corresponding author

## Abstract
Currently, many learning websites have been developed to assist people in self-learning from home. However, the developed learning websites are not yet user-friendly for individuals with dyschromatopsia . This is due to the design process not considering using colors that are easily distinguishable for users with dyschromatopsia. Based on the issues, a learning portal website interface that is friendly to individuals with dyschromatopsia is needed. In the design of this application, the method used is User-Centered Design (UCD). Through the UCD method, the needs of users with dyschromatopsia become the main focus of the research. Testing is conducted through usability testing using the Overall Relative Efficiency, Completion Rate, and the System Usability Scale (SUS) questionnaire to measure user satisfaction. The test results show an Overall Relative Efficiency value ranging from 72.675% to 92.130%, Completion Rate testing yields an effectiveness value range of 82% to 96%, and SUS testing yields a score of 81.25. In addition, the author also conducted testing for color-blind accessibility, which resulted in the finding that the contrast ratio of all the pages on the CourseHack website meets the minimum contrast ratio standards.
Keyword : User Centered Design, Interface for dyschromatopsia, Color Blindness, Usability Testing, SUS

## Abstrak
Saat ini cukup banyak situs pembelajaran telah dikembangkan untuk membantu masyarakat belajar secara mandiri dari rumah. Namun situs pembelajaran yang telah dikembangkan belum ramah terhadap pengguna buta warna parsial ( dyschromatopsia ). Hal ini disebabkan dalam proses perancangan belum memperhatikan penggunaan warna yang mudah dilihat bagi pengguna dyschromatopsia . Berdasarkan permasalahan yang terjadi maka diperlukan perancangan antarmuka situs portal belajar yang memiliki desain antarmuka yang ramah bagi penyandang dyschromatopsia . Dalam perancangan aplikasi ini metode yang digunakan yaitu User Centerd Design (UCD). Melalui metode ini, kebutuhan dari pengguna dyschromatopsia menjadi fokus utama penelitian. Pengujian dilakukan melalui usability testing menggunakan Overall Relative Efficiency, Completion Rate , dan menggunakan kuesioner System Usability Scale (SUS) untuk mengukur kepuasan pengguna. Hasil uji menunjukan nilai Overall Relative Efficiency sebesar 72,675% sampai 92,130%, pengujian Completion Rate mendapatkan jangkauan nilai efektifitas sebesar 82% sampai 96%, dan pengujian menggunakan SUS mendapatkan nilai sebesar 81,25. Selain itu penulis juga melakukan pengujian terhadap aksesibilitas buta warna parsial yang mendapatkan hasil bahwa kontras rasio seluruh halaman dalam website CourseHack telah memenuhi standar rasio kontras minimum.
Kata Kunci : User Centered Design , Antarmuka untuk dyschromatopsia , Buta Warna Parsial, Uji Usabilitas, SUS

## I. Pendahuluan
Pendidikan merupakan usaha sadar dan terencana untuk mewujudkan suasana belajar dan proses pembelajaran agar peserta didik secara aktif mengembangkan potensi dirinya untuk memiliki kekuatan spiritual keagamaan, pengendalian diri, kepribadian, kecerdasan, akhlak mulia, serta keterampilan yang diperlukan dirinya, masyarakat, bangsa dan negara [1]. Pada saat ini portal pendidikan sangat dipengaruhi oleh pesatnya perkembangan teknologi. Akibatnya telah banyak beredar situs pembelajaran daring yang membantu para siswa, mahasiswa maupun karyawan untuk belajar mandiri di rumah.
Namun kenyataannya di Indonesia, aksesibilitas suatu situs masih menjadi hal yang dipermasalahkan karena situs seperti berita kredibel, halaman utama universitas, kementerian dan pemerintahan masih menunjukkan bahwa situs tersebut masih tidak ramah terhadap disabilitas. Permasalahan yang selalu muncul yaitu text alternative , info and relationships , keyboard , three flashes or below threshold , bypass blok , link purpose , label or instruction , use of colour , contrast (enhanced) , dan contrast (minimum) [2]. Saat ini situs pembelajaran yang telah ada belum ramah terhadap pengguna buta warna parsial dalam arti belum memperhatikan penggunaan warna yang mudah dilihat bagi pengguna dengan keterbatasan dalam melihat warna. Buta warna parsial atau yang dikenal dengan istilah dyschromatopsia merupakan suatu kondisi ketika seseorang sulit untuk membedakan beberapa warna seperti orang lain. Mutasi dalam gen OPN1LW, OPN1MW, dan OPN1SW adalah penyebab dyschromatopsia . Kondisi ini juga dapat disebabkan dari keturunan dengan pola X-linked atau dapat diperoleh sesudah lahir [3].
Pada observasi yang dilakukan penulis pada situs pembelajaran Quizizz menggunakan alat evaluasi otomatis bernama WAVE ( Web Accessibility Evaluation Tools ), terdapat tujuh kontras error pada halaman utama dan tiga kontras error pada halaman kuis. Selain itu penulis juga melakukan pengujian terhadap situs BuildWithAngga, kemudian didapatkan hasil yang menunjukkan bahwa situs tersebut memiliki dua belas kontras error . Kemudian untuk menambah data penelitian, penulis menambah satu situs pembelajaran lain untuk dilakukan observasi yaitu situs Dicoding. Pada halaman utama situs ini terdapat lima kontras error sedangkan pada halaman materi terdapat tiga kontras error . Penilaian kategori FAIL (kontras error ) berdasarkan nilai WCAG ( Web Content Accessibility Guidelines ) untuk rasio kontras aksesibilitas umum. Kategori FAIL menunjukkan pemilihan warna latar belakang dan warna teks yang dipilih tidak ramah bagi pengguna dyschromatopsia .
Berdasarkan permasalahan tersebut dilakukan penelitian mengenai perancangan desain antarmuka situs portal belajar yang ramah bagi penyandang dyschromatopsia dengan penggunaan warna yang aksesibel. Metode yang digunakan dalam perancangan yaitu User Centered Design (UCD) [4] dan metode evaluasi menggunakan System Usability Scale (SUS) [5]. Pemilihan metode UCD didasarkan pada kebutuhan untuk melibatkan pengguna secara aktif untuk melakukan perancangan sistem. Dalam penelitian ini sangat dibutuhkan keterlibatan aktif responden yang merupakan penyandang buta warna parsial untuk bisa menilai apakah antarmuka sistem nyaman digunakan oleh mereka. Sementara itu evaluasi menggunakan pendekatan SUS dilakukan karena kuesioner ini cocok digunakan untuk mengukur tingkat kebergunaan sistem yang didasarkan pada perspektif pengguna.

## Tinjauan Literatur
Penulis melakukan studi literatur terhadap beberapa penelitian serupa yang telah dilakukan oleh peneliti lain sebagai referensi pada penelitian ini. Penelitian yang pertama yaitu perancangan desain aplikasi video streaming untuk pengguna buta warna telah dilakukan oleh [6]. Pada penelitian tersebut terdapat beberapa saran penerapan desain yang dapat dilakukan seperti teks yang mudah dipengaruhi oleh kombinasi dari pemilihan warna teks dan warna latar belakang teks tersebut. Selain itu, jika ingin menampilkan teks pada suatu gambar, maka sebaiknya gambar tersebut diberikan efek blur berwarna gelap terlebih dahulu. Kemudian jika ada suatu aksi yang membutuhkan pengguna untuk memilih suatu warna, maka perlu ditambahkan deskripsi warna tersebut agar membantu pengguna buta warna mengetahui warna tersebut. Terakhir saran yang diberikan yaitu penggunaan warna yang memiliki kontras tinggi dapat meningkatkan aksesibilitas penyandang buta warna dalam melihat informasi.
Penelitian ini menggunakan metode UCD untuk pengembangan sistem. Menurut ISO 9241- 210:2010, UCD merupakan teknik perancangan dan implementasi suatu sistem dengan cara melibatkan pengguna dalam seluruh proses pengerjaan dengan tujuan dapat menyesuaikan sistem dengan kebutuhan pengguna [7]. Metode UCD banyak digunakan sebagai pendekatan untuk pengembangan berbagai jenis sistem, diantaranya: Pengembangan dashboard keuangan [8], pengembangan website Desa Jambuwuluk [9], pengembangan dashboard jemaat gereja [10]. Metode UCD juga banyak digunakan untuk pengembangan sistem pembelajaran yaitu aplikasi
pembelajaran Bahasa Jepang [11], pembuatan Sistem Informasi Perangkat Mengajar Guru [12], pengembangan Learning Management System (LMS) pada Institut Teknologi Telkom Purwokerto [13], merancang user interface LMS pada website Torche Education [14], dan pengembangan augmented reality untuk mendukung siswa dalam belajar bangunan bersejarah di Jawa Barat [15]. Metode ini juga sering digunakan untuk mengembangan antarmuka sistem bagi penyandang diabilitas diantaranya perancangan Sistem Pembelajaran Bahasa Ekspresif untuk terapis wicara bagi penyandang Sindrom Asperger [16] dan pengembangan aplikasi monitoring anak berkebutuhan khusus di Sekolah Luar Biasa [17],
Pengujian tingkat kepuasan pengguna dapat dilakukan menggunakan kuesioner. Beberapa kuesioner yang digunakan untuk menilai kepuasan pengguna, diantaranya metode User Experience Questionnaire (UEQ) yang digunakan oleh [18] untuk mengevalusi sistem informasi akademik mahasiswa. Penelitian yang dilakukan [19] untuk mengevaluasi antarmuka Sistem Informasi Musyawarah Masjid menggunakan metode Single Ease Question . Penelitian mengenai usability testing menggunakan metode System Usability Scale (SUS) yang dilakukan oleh [20] pada salah satu e-commerce terkenal di Indonesia. Pengambilan data penelitian berasal dari kuesioner yang telah disebar kepada 30 orang responden yang pernah menggunakan e-commerce tersebut. Hasil penelitian menunjukan bahwa website e-commerce tersebut memperoleh skor SUS 67,083 sehingga kategori usabilitas yang didapatkan yaitu OK. SUS merupakan kuesioner yang sering digunakan untuk mengukur kepuasan pengguna. Kuesioner ini diperkenalkan oleh John Brooke dengan sepuluh pertanyaan evaluasi [21]. Kuesioner SUS sering digunakan pada evaluasi berbagai sistem diantaranya: sistem dashboard informasi gereja tangguh bencana [22], Agriculture e-commerce website [23], dan pengujian untuk sistem e-learning pada moodle [24].

## II. Metodologi Penelitian
Metode User Centered Design (UCD) dipilih oleh penulis karena UCD merupakan teknik perancangan dan implementasi suatu sistem dengan cara melibatkan pengguna dalam seluruh proses pengerjaan. Hal ini dilakukan agar pengguna dapat menyesuaikan sistem dengan kebutuhan mereka. Melalui pelibatan pengguna dalam proses pengembangan sistem akan berdampak pada pemenuhan kebutuhan dari pengguna dalam kasus ini penyandang dyschromatopsia . Terdapat lima tahapan proses UCD yaitu: 1) Perancanaan proses yang berfokus kepada pengguna, 2) Menentukan konteks pengguna, 3) Menentukan kebutuhan pengguan, 4) Solusi desain, dan 5) Evaluasi desain terhadap kebutuhan pengguna [25].
Pada Gambar 1 terlihat tahapan penelitian menggunakan metode UCD. Pada tahap pertama yaitu perancanaan proses yang berfokus kepada pengguna. Pada proses ini, dilakukan diskusi dengan semua partisipan yang akan terlibat selama proses penelitian. Diskusi dilakukan untuk menjelaskan tahapan proses yang akan dilakukan selanjutnya dan meminta komitmen responden agar dapat terlibat dari awal hingga akhir proyek saat mereka dibutuhkan karena seluruh proses perancangan pembangunan proyek akan berfokus kepada pengguna.
Gambar 1. Tahapan UCD: ISO 9241-210:2010
Pada tahap kedua yaitu menentukan konteks pengguna. Pada proses ini, penulis mengidentifikasi pengguna yang menggunakan situs pembelajaran ini. Dalam penelitian ini calon pengguna adalah orang-orang disabilitas
dalam penglihatan terhadap warna (buta warna parsial) dan mereka pernah menggunakan situs pembelajaran daring. Domisili calon pengguna dapat berasal dari seluruh Indonesia, karena penelitian dapat dilakukan secara daring melalui aplikasi zoom atau google meet . Penulis menggunakan metode in depth interview untuk mendapatkan informasi dari pengguna. Jumlah responden yang dilibatkan dalam perancangan yaitu berjumlah lima orang pengguna yang merupakan penyandang buta warna parsial. Pemilihan lima responden yang digunakan untuk dilibatkan dalam penelitian ini bersumber pada penelitian [26] dan [27] yang menjelaskan bahwa pengujian aplikasi dapat mengidentifikasi 75-99% dari semua masalah kegunaan hanya dengan lima orang responden. Berdasarkan wawancara yang dilakukan dapat diidentifikasi persona pengguna. User persona adalah suatu metode pendekatan terhadap target pengguna selama tahap pengembangan sampai suatu aplikasi telah siap untuk digunakan [28]. Dalam user persona terdapat rangkuman informasi dari kumpulan pengguna seperti biodata, kebiasaan, harapan dan frustasi yang dihadapi. User persona dapat menjadi referensi untuk memahami kebutuhan dan keinginan pengguna terhadap aplikasi yang dibangun. Berdasarkan dari data yang diperoleh maka didefinisikan satu pengguna dengan karakteristik yang mewakili salah satu jenis responden. Gambar 2 merupakan persona pengguna untuk pengguna dengan pria dengan nama samaran Dicky.
Gambar 2. User Persona Dicky
Pada tahap ketiga yaitu menentukan kebutuhan pengguna. Pada proses ini, dilakukan identifikasi kebutuhan pengguna untuk dapat diterapkan ke dalam aplikasi yang dibangun. Pada wawancara digali informasi kebutuhan serta fitur yang diinginkan kepada lima orang responden penelitian. Berdasarkan hasil wawancara bersama calon pengguna dan pembuatan user persona , maka didapatkan rangkuman dari kebutuhan yang diharapkan yaitu: 1) responden mengharapkan materi pembelajaran dapat diunduh, 2) pada video pembelajaran Bahasa Inggris terdapat terjemahan, 3) adanya kuis pembelajaran, 4) mencantumkan nama penulis/mentor dari suatu kelas materi, 5) pemilihan warna diusahakan agar menjauhi warna yang menjadi kelemahan penyandang dyschromatopsia (merah/hijau dan biru/kuning), 6) ukuran huruf dapat mengikuti standar website serupa.
Tahap keempat yaitu solusi desain. Pada proses ini, dilakukan perancangan antarmuka dari website yang dibangun. Perancangan antarmuka ini bertujuan untuk memberi gambaran mengenai website tersebut melalui desain prototype yang menyerupai website asli menggunakan aplikasi Figma. Pada tahap kelima dilakukan evaluasi desain terhadap kebutuhan pengguna. Pada proses ini, setelah desain telah berhasil dibuat maka dilakukan uji coba pada lima orang responden. Proses pengujian ini dilakukan dengan cara memberikan akses kepada calon pengguna untuk mencoba secara langsung aplikasi tersebut. Metode evaluasi yang digunakan yaitu Single Ease Question (SEQ) untuk mengukur kemudahan yang dialami pengguna ketika telah menyelesaikan task .

## III. Hasil dan Pembahasan

## Perancangan Sistem
Langkah awal sebelum melakukan perancangan desain antarmuka sebuah aplikasi adalah pembuatan design sistem. Design Sistem merupakan kumpulan dari beberapa komponen yaitu typography , color palette , dan button yang membentuk antarmuka sistem yang menjadi identitas suatu aplikasi. Komponen pertama yaitu
Volume 15/No.2/November/2023
typography . Pemilihan typography yang digunakan oleh penulis adalah jenis fon t sans-serif. Jika dilakukan pembandingkan penggunaan font serif dan sans-serif dalam membaca suatu teks elektronik, ditemukan bahwa pengguna dapat membaca lebih cepat dan akurat pada penggunaan font sans-serif dibanding font serif [29]. Berdasarkan data tersebut maka digunakan dua jenis font sans-serif yaitu Maven Pro dan Open Sans . Dalam penerapannya Maven Pro digunakan untuk keperluan heading dan Open Sans digunakan untuk kebutuhan body (Gambar 3a).
Komponen kedua yaitu color palette . Pemilihan warna yang digunakan terdiri dari dua warna utama yaitu biru tua dan orange yang dapat dilihat pada Gambar 3b, sedangkan untuk warna latar belakang yaitu warna putih. Pemilihan tersebut berdasarkan penelitian [4], yang mengungkapkan sejumlah kombinasi warna telah diuji coba untuk mendapatkan kombinasi warna terbaik dan terburuk yang dapat dilihat pada Gambar 4a. Kemudian untuk pemilihan warna orange didasarkan pada penelitian [30] yang menyatakan bahwa warna orange merupakan warna kedua yang tidak menyebabkan ambigu terhadap orang buta warna parsial (Gambar 4b).
Gambar 3. Penggunaan Typography (a) dan Penggunaan Color Palette (b)
Gambar 4. Kombinasi Warna Terbaik (a) dan Kumpulan Warna yang Tidak Menimbulkan Rasa Ambigu (b)

## Perancangan Wireframe
Setelah pembuatan desain sistem, maka dilanjutkan ke tahap pembuatan wireframe . Halaman pertama dalam pembuatan wireframe yaitu halaman home . Halaman ini merupakan halaman yang pertama kali muncul ketika pengguna mengunjungi website CourseHack (Gambar 5a). Pada bagian header dari halaman ini terdapat logo website di sebelah kiri dan navigation bar terdapat di sebelah kanan. Kemudian pada bagian body terdapat teks headline utama dari website yang disertai dengan keterangan tambahan dan adanya action button untuk memulai pembelajaran. Pada bagian sisi kanan dari teks headline terdapat gambar ilustrasi untuk menambah nilai estetik dari tampilan antarmuka. Kemudian pada bagian bawah terdapat tiga card artikel materi yang direkomendasikan kepada pengguna.
Halaman kedua yaitu halaman tentang kami. Halaman ini berisi mengenai segala informasi yang berkaitan dengan website CourseHack (Gambar 5b). Pada bagian body halaman ini terdapat gambar ilustrasi kemudian
pada bagian bawah terdapat dua kolom teks. Bagian kiri yaitu berisi visi website beserta penjelasan singkatnya, sedangkan pada bagian kanan yaitu berisi misi website beserta penjelasan singkatnya.
Halaman ketiga yaitu halaman kursus. Halaman ini berisi dari kumpulan semua artikel materi yang tersedia di dalam website CourseHack (Gambar 5c). Pada bagian atas dari halaman ini terdapat suatu teks headline disertai dengan penjelasan singkat. Kemudian pada bagian bawah dari teks tersebut terdapat kumpulan card artikel materi yang terbagi menjadi tiga kolom layout .
Halaman keempat yaitu halaman detail artikel. Halaman ini berisi informasi dari artikel materi yang telah dipilih oleh pengguna secara lengkap (Gambar 5d). Informasi yang ditampilkan pada bagian atas halaman ini meliputi judul artikel disertai dengan penjelasan singkat dan gambar artikel di bagian kiri. Kemudian pada bagain bawah terdapat materi pembelajaran yang terbagi menjadi tiga kolom layout . Pada bagian ini juga terdapat nama, foto, dan deskripsi singkat mengenai mentor.
Halaman kelima yaitu halaman pertanyaan. Halaman ini berisi materi pembelajaran berdasarkan pilihan pengguna pada halaman detail materi (Gambar 5e). Pada bagian atas kiri dari halaman ini terdapat video pembelajaran dan kuis pembelajaran di sebelah kanan. Pada bagian bawah terdapat deskripsi singkat dari materi pembelajaran.
Gambar 5 Wireframe Halaman Home (a); Wireframe Halaman Tentang Kami (b); Wireframe Halaman Kursus (c); Wireframe Halaman Detail Artikel (d); dan Wireframe Halaman Detail Artikel (e)

## Perancangan Desain Iterasi Pertama
Pada tahap desain pertama ini penulis membuat rancangan antarmuka yang terdiri dari halaman home , tentang kami, materi, detail materi, dan pertanyaan berdasarkan hasil dari wireframe yang telah dibuat. Halaman pertama yaitu halaman home . Pada halaman ini terdapat navigation bar yang terhubung ke halaman lain seperti halaman tentang kami dan halaman materi untuk membantuk pengguna dalam bernavigasi (Gambar 6a). Kemudian terdapat juga fitur pencarian pada bagian navigation bar yang dapat membantu pengguna untuk menemukan artikel materi yang diinginkan. Pada halaman home ini juga terdapat button mulai belajar yang dapat membantu user untuk menemukan secara langsung rekomendasi artikel yang telah tersedia. Pada bagian bawah halaman home terdapat pendapat dari testimoni pengguna serta footer .
Halaman kedua yaitu halaman tentang kami. Pada halaman ini user akan disambut dengan visi dan misi yang ingin dicapai oleh CourseHack (Gambar 6b). Seluruh visi dan misi tersebut bertujuan untuk membuat suatu website pembelajaran yang ramah bagi seluruh pengguna termasuk pengguna buta warna parsial. Halaman ini juga berisi informasi terkait biodata penulis yang dijelaskan secara singkat. Pada bagian bawah halaman ini juga terdapat foto seluruh tim dari CourseHack serta kontak media sosial dari penulis.
Gambar 6. Desain Pertama Halaman Home (a); Halaman Tentang Kami (b); Halaman Kursus (c); Halaman Detail Artikel (d); dan Halaman Pertanyaan
Volume 15/No.2/November/2023
Halaman ketiga yaitu halaman kursus. Pada halaman ini materi berisi kumpulan artikel pembelajaran yang telah disediakan untuk pengguna dapat mempelajari berdasarkan kesukaan dari masing-masing minat pengguna (Gambar 6c). Pada bagian atas halaman ini terdapat sebuah button pilih materi yang dapat mengarahkan pengguna untuk langsung menemukan kumpulan artikel.
Pada halaman keempat yaitu halaman detail artikel. Pada halaman ini berisi segala informasi tambahan mengenai suatu artikel dengan tujuan pengguna dapat mengerti pembahasan dari materi tersebut (Gambar 6d). Pada bagian atas halaman ini terdapat judul artikel, deskripsi judul, gambar artikel serta button untuk mulai belajar. Setelah penjelasan mengenai artikel, dibagian bawah terdapat konten mengenai nama mentor, pekerjaan mentor serta deskripsi singkat mentor tersebut. Halaman detail artikel ini juga menyertakan sub-artikel yang ditandai dengan angka sebanyak jumlah dari subartikel tersebut. Bagian bawah dari halaman ini terdapat rekomendasi artikel lain jika pengguna telah bosan untuk mempelajari artikel sebelumnya.
Halaman kelima yaitu halaman pertanyaan. Pada halaman ini berisi materi pembelajaran berdasarkan artikel yang telah dipilih oleh pengguna (Gambar 6e). Pada halaman ini terdapat video pembelajaran yang telah diambil dari Youtube, kemudian terdapat juga judul dari subartikel, deskripsi serta nama mentor. Halaman ini juga memiliki fitur untuk mengunduh materi pembelajaran dalam bentuk file .pdf dan kuis pembelajaran.

## Evaluasi Desain Iterasi Pertama
Setelah proses pembuatan desain, maka dapat dilanjutkan pada proses evaluasi. Tahap evaluasi desain iterasi pertama ini dilakukan kepada responden yang sama ketika melakukan tahap wawancara kebutuhan pengguna. Tahap ini melibatkan lima orang responden. Evaluasi desain iterasi pertama dilakukan dengan metode In Depth Interview dan Usability Testing . Pengujian usabilitas menggunakan Single Ease Question (SEQ). SEQ merupakan metode pengujian untuk menentukan tingkatan kemudahan pengguna saat melakukan tugas yang diberikan [31]. Pengujian dilakukan pada delapan task yaitu 1) sign up ; 2) log in ; 3) cari kelas HTML; 4) Observasi halaman detail kelas; 5) join kelas dan ikut materi kedua; 6) download materi; 7) kembali ke halaman detail kelas; dan 8) coba fitur komentar.
Berdasarkan pengujian tersebut didapatkah data kuantitatif berupa skor SEQ dengan nilai rata-rata 5.9. Skor 5,9 bermakna aplikasi cukup mudah digunakan [32]. Pengujian ini juga menghasilkan saran perubahan berikut: 1) merubah posisi letak fitur search serta memperbesar ukurannya sehingga menjadi nyaman untuk digunakan, 2) tampilan pada halaman home telah menarik, namun responden mengharapkan alternatif desain lain jika memungkinkan, 3) menambahkan keterangan pada tombol mulai belajar menjadi mulai belajar materi pertama sehingga dapat memperjelas maksud dari button tersebut, 4) menambahkan deskripsi singkat mengenai latar belakang atau universitas mentor dibawah nama mentor sehingga dapat meningkatkan keyakinan pengguna terhadap mentor yang memberikan materi, 5) perlu adanya ikon tambahan pada kata exit di halaman pertanyaan.

## Perancangan Desain Iterasi Kedua
Desain iterasi kedua merupakan hasil perancangan desain yang dibuat berdasarkan hasil evaluasi yang telah diperoleh bersama pengguna ketika melakukan evalusi desain iterasi pertama. Berdasarkan hasil evaluasi tersebut didapatkan bahwa, penulis perlu melakukan revisi terhadap desain yang telah dibuat meningkatkan kemudahan dan kepuasan pengguna terhadap sistem yang telah dibuat. Perubahan desain yang pertama yaitu perubahan penggunaan bahasa Inggris menjadi bahasa Indonesia dan menghilangkan text input email (Gambar 7a). Perubahan desain kedua yaitu desain hover yang sebelumnya menggunakan perubahan warna pada bagian isi diganti menjadi perubahan warna shadow agar tampilan menjadi lebih sederhana dan menarik (Gambar 7b). Perubahan desain ketiga yaitu perubahan layout detail artikel (Gambar 7c). Penggunaan kombinasi gambar dan teks dapat mengurangi kemampuan seorang penyandang buta warna parsial dapat melihat informasi yang di tampilkan [6].
Gambar 7. Perubahan Desain Home (a); Perubahan Desain Hover Card Artikel (b); Perubahan Desain Layout Detail Artikel (c)
Perubahan desain keempat yaitu perbaikan antarmuka untuk tombol join this class (Gambar 8a). Menurut pendapat dari responden ketika dilakukan evaluasi, keterangan pada button kurang jelas. Perubahan desain kelima yaitu menambahkan deskripsi tambahan mengenai informasi dari mentor yang memberikan materi pada suatu artikel pembelajaran (Gambar 8b). Hal ini bertujuan untuk menambahkan kepercayaan diri user untuk mengambil artikel tersebut. Perubahan desain keenam yaitu penambahan ikon exit (Gambar 8c). Berdasarkan pendapat dari user , hyperlink exit perlu memiliki ikon sama seperti hyperlink materi sebelumnya dan materi selanjutnya
Gambar 8. Perubahan Desain Tombol Join This Class (a); Perubahan Desain Deskripsi Mentor (b); Perubahan Desain Hyperlink Exit

## Evaluasi Desain Iterasi Kedua
Pada evaluasi desain iterasi kedua penulis melakukan dengan cara yang sama pada saat evaluasi iterasi pertama yaitu dengan dengan cara In Depth Interview dan usability testing . Pengujian usabilitas menggunakan Single Ease Question (SEQ) yang terdiri dari delapan task yang telah didefinisikan sebelumnya. Evaluasi iterasi kedua ini bertujuan untuk menunjukkan revisi desain yang telah dibuat berdasarkan masukan yang diberikan oleh responden pada saat evaluasi iterasi pertama. Setelah melakukan evaluasi maka didapatkan hasil yang menunjukkan bahwa responden telah merasa puas dengan revisi desain yang telah dibuat dan seluruh kebutuhan pengguna telah terpenuhi. Hal ini dapat dibuktikan dengan meningkatnya nilai skor SEQ yang memiliki nilai rata-rata 6,8. Nilai ini meningkatan dari pengujian sebelumnya. Nilai 6,8 bermakna sistem berada pada kategori mudah digunakan [32]. Hasil ini memberikan sinyal bahwa pengembangan dapat dilanjutkan ke tahap implementasi, pengembangan sistem ke bentuk yang sebenarnya

## Pengujian Sistem
Tahap implementasi sistem merupakan tahapan mengubah prototype desain menjadi sebuah sistem aplikasi website melalui pengkodean. Pembuatan website CourseHack menggunakan bahasa pemrograman javascript dengan library react JS. Tampilan website dikembangkan menggunakan framework CSS yaitu tailwind CSS.
Tahap akhir penelitian ini adalah melakukan uji usabilitas terhadap aplikasi. Digunakan tiga metriks usabilitas yaitu efisiensi, efektivitas dan kepuasan pengguna [33]. Pengujian pertama yaitu pengujian efisiensi melalui overall relative efficiency yang memperoleh jangkauan nilai 72,675% hingga 92,130%. Pengujian kedua yaitu pengujian efektivitas melalui completion rate yang memperoleh range nilai 82% hingga 96%. Pengujian ketiga yaitu pengujian kepuasaan pengguna melalui system usability scale (SUS) yang memperoleh nilai 81,25
sehingga mendapatkan kategori acceptable pada acceptability ranges dengan nilai B pada grade scale dan mendapatkan kategori excellent pada adjective rating .

## Pengujian Aksesibilitas Penyandang
Dyschromatopsia
Penulis juga melakukan pengujian aksesibilitas penyandang dyschromatopsia melalui pengecekan nilai kontras rasio minimal pada setiap halaman website . Penulis menggunakan alat evaluasi otomatis bernama WAVE ( Web Accesibility Evalution Tool ). Hasil pengujian WAVE menunjukkan bahwa seluruh tampilan antarmuka pada website CourseHack telah memenuhi nilai kontras rasio (Gambar 9).
Gambar 9. Pengujian Kontras Rasio Salah Satu Halaman Menggunakan WAVE

## IV. Kesimpulan
Pada penelitian ini berhasil dikembangkan sebuah desain antarmuka pengguna situs portal belajar yang ramah bagi penyandang buta warna parsial ( dyschromatopsia ). hasil pengujian yang telah dilakukan didapatkan hasil memuaskan dan baik. Hasil uji terhadap sistem menunjukan nilai efisiensi 72,675% hingga 92,130%, nilai efektivitas 82% hingga 96%, dan nilai SUS memperoleh nilai 81,25 sehingga mendapatkan kategori acceptable dengan nilai B pada grade scale dan mendapatkan kategori excellent .

## Daftar Pustaka
[1] Pemerintah Republik Indonesia, “UU No. 20 Tahun 2003 Tentang Sistem Pendidikan Nasional.” 2003. doi: 10.24967/ekombis.v2i1.48.
[2] M. A. Frandini, I. Aknuranda, and R. I. Rokhmawati, “Analisis Tingkat Aksesibilitas Halaman Utama Situs Web Perguruan Tinggi Di Indonesia Berdasarkan WCAG 2.0,” Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 2, no. 3, pp. 1045–1053, 2018.
[3] M. Purwoko, “Prevalensi Buta Warna pada Mahasiswa Universitas Muhammadiyah Palembang,” J. Kedokt. Brawijaya , vol. 30, no. 2, pp. 159–162, 2018, doi: 10.21776/ub.jkb.2018.030.02.15.
[4] H. B. Santoso, P. O. H. Putra, and F. F. H. S. Febrian, “Development & Evaluation of E-Learning Module Based on Visual and Global Preferences Using a User-Centered Design Approach,” Int. J. Emerg. Technol. Learn. , vol. 16, no. 15, pp. 139–151, 2021, doi: 10.3991/ijet.v16i15.24163.
[5] A. Abdurrahman and M. Ulfa, “Analisis Usability Sistem Komputerisasi Haji Terpadu Palembang Menggunakan Metode System Usability Scale (SUS),” J. Pengemb. Sist. Inf. dan Inform. , vol. 2, no. 3, pp. 125–137, 2021, doi: 10.47747/jpsii.v2i3.553.
[6] E. S. Soegoto, M. A. Fadhlurrahman, and Y. A. Hermawan, “Video streaming application design for color blind users,” in Journal of Physics: Conference Series , 2019, vol. 1402, no. 6. doi: 10.1088/1742-6596/1402/6/066083.
[7] ISO 9241-210, “Human-centred design for interactive systems,” International Organization for Standardization . 2010.
[8] E. Prayoga and R. Delima, “Perancangan dan Implementasi Dashboard Keuangan Persekutuan Joy Indonesia dengan Metode User Centered Design,” JUTEI , vol. 6, no. 2, pp. 95–102, 2022.
[9] D. I. Sambo, K. A. Nugraha, and R. Delima, “Pembuatan Antarmuka Website Desa Jambuwuluk Menggunakan Metode User Centered Design,” J. Terap. Teknol. Inf. , vol. 7, no. 2, pp. 79–88, 2023, doi: 10.21460/jutei.2023.72.266.
[10] R. Delima, V. Novianti, A. W. Mahastama, and A. K. Astuti, “Building a Congregations Dashboard Using
the User Centered Design Method,” in Proceedings - ICT 2023 - 29th International Conference on Telecommunications: Next-Generation Telecommunications for Digital Inclusion and Universal Access , 2023, pp. 1–6. doi: 10.1109/ICT60153.2023.10374041.
[11] S. Widjaja, Mukhsin, D. Oktarina, and G. Tendra, “Aplikasi Pembelajaran Bahasa Jepang Dengan Metode User Centered Design (UCD),” JSR Jar. Sist. Inf. Robot. , vol. 6, no. 2, pp. 176–189, 2022, doi: 10.58486/jsr.v6i2.175.
[12] R. Gunawan, A. M. Joharudin, Y. Yudiana, and D. Awalludin, “Analisis Dan Implementasi Metode User Centered Design (UCD) Pada Pembuatan Sistem Informasi Perangkat Mengajar Guru Berbasis Mobile,” in Prosiding Seminar Nasional Inovasi dan Adopsi Teknologi (INOTEK) , 2023, pp. 12–25. doi: 10.35969/inotek.v3i1.296.
[13] C. Kartiko, A. C. Wardhana, and D. P. Rakhmadani, “Pengembangan Mobile Learning Management System Dengan User Centered Design (UCD) Menggunakan Flutter Framework,” J. Media Inform. Budidarma , vol. 6, no. 2, pp. 960–968, 2022, doi: 10.30865/mib.v6i2.3524.
[14] M. S. Victoria and A. D. Indriyanti, “Penerapan Metode User Centered Design ( UCD ) dalam Merancang User Interface Learning Management System Website Torche Education,” J. Emerg. Inf. Syst. Bus. Intell. , vol. 04, no. 03, pp. 157–167, 2023.
[15] S. Rofiah, D. Sukma, and I. Maryani, “User Centered Design pada Augmented Reality untuk Mendukung Siswa dalam Pembelajaran Bangunan Bersejarah di jawa Barat,” Evolusi J. Sains dan Manaj. , vol. 7, no. 2, pp. 66–72, 2019.
[16] Z. Mukhtar, A. Herdiani, and E. R. Kaburuan, “Analisis Implementasi Metode Ucd Dalam Perancangan Sistem Pembelajaran Bahasa Ekspresif Untuk Digunakan Terapis Wicara Terhadap Penyandang Sindrom Asperger,” e-Proceeding Eng. , vol. 6, no. 2, pp. 8488–8497, 2019, [Online]. Available: https://openlibrarypublications.telkomuniversity.ac.id/index.php/engineering/article/download/9815/9676
[17] R. Adhitama, A. C. Wardhana, G. R. Pasfica, and Y. A. H. Pasaribu, “Pengembangan Aplikasi Monitoring Anak Berkebutuhan Khusus di Sekolah Luar Biasa Menggunakan Metode User Centered Design (UCD),” J. Comput. Syst. Informatics , vol. 4, no. 1, pp. 155–161, 2022, doi: 10.47065/josyc.v4i1.2602.
[18] S. R. Henim and R. P. Sari, “Evaluasi User Experience Sistem Informasi Akademik Mahasiswa pada Perguruan Tinggi Menggunakan User Experience Questionnaire,” J. Komput. Terap. , vol. 6, no. 1, pp. 69–78, 2020, doi: 10.35143/jkt.v6i1.3582.
[19] F. I. Romadhanti and I. Aknuranda, “Evaluasi dan Perbaikan Desain Antarmuka Pengguna Sistem Informasi Musyawarah Masjid menggunakan Goal-Directed Design (GDD) (Studi Kasus : Masjid Ibnu Sina Jl.Veteran Malang),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 4, no. 10, pp. 3313–3321, 2020, [Online]. Available: https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/7919/3733
[20] F. G. Sembodo, G. F. Fitriana, and N. A. Prasetyo, “Evaluasi Usability Website Shopee Menggunakan System Usability Scale (SUS),” J. Appl. Informatics Comput. , vol. 5, no. 2, pp. 146–150, 2021, doi: 10.30871/jaic.v5i2.3293.
[21] J. Brooke, “SUS: A ‘Quick and Dirty’ Usability Scale,” Usability Eval. Ind. , no. November 1995, pp. 207–212, 1995, doi: 10.1201/9781498710411-35.
[22] E. Santosa, K. A. Nugraha, and A. Filiana, “Pengembangan Dashboard Informasi Gereja Tangguh Bencana dengan Metode User Centered Design,” J. Tek. Inform. dan Sist. Inf. , vol. 8, no. 3, pp. 522–536, 2022, doi: 10.28932/jutisi.v8i3.5119.
[23] J. Purwadi, R. Delima, A. Wibowo, N. I. R. Toding, and H. B. Santoso, “System Usability Scale for Usability Testing of Agriculture E-Commerce Website,” Res. World , vol. 10, no. 4, pp. 43–57, 2019.
[24] R. Andriani and A. Sa’di, “E-Learning Moodle Usability Evaluation Using the SUS Questionnaire in Higher Education,” Sist. J. Sist. Inf. , vol. 11, no. 2, pp. 506–514, 2022, doi: 10.32520/stmsi.v11i2.1838.
[25] M. I. Gunawan, R. I. Rokhmawati, and N. H. Wardani, “Evaluasi dan Perbaikan Antarmuka Pengguna Menggunakan Pendekatan User Centered Design (UCD) dan Card Sorting (Studi Kasus: Website Awake Project Malang),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 3, no. 5, pp. 4835–4845, 2019, [Online]. Available: http://j-ptiik.ub.ac.id
[26] J. Nielsen and T. K. Landauer, “Mathematical model of the finding of usability problems,” in Conference on Human Factors in Computing Systems - Proceedings , 1993, pp. 206–213. doi: 10.1145/169059.169166.
[27] A. Cazañas, A. De San Miguel, and E. Parra, “Estimating Sample Size for Usability Testing,” Enfoque UTE , vol. 8, no. 1, pp. 172–185, 2017, doi: 10.29019/enfoqueute.v8n1.126.
[28] W. A. Kusuma, M. A. Gifary, R. W. Prasetya, and A. F. A. Syahbana, “Emotion Card Dalam User Persona Untuk Meningkatkan Persepsi Pengguna Dalam Penggalian Kebutuhan Perangkat Lunak,” Inser. Inf. Syst. Emerg. Technol. J. , vol. 1, no. 1, pp. 41–50, 2020.
[29] B. Dogusoy, F. Cicek, and K. Cagiltay, “How serif and sans serif typefaces influence reading on screen: An
eye tracking study,” Lect. Notes Comput. Sci. (including Subser. Lect. Notes Artif. Intell. Lect. Notes Bioinformatics) , vol. 9747, no. 1996, pp. 578–586, 2016, doi: 10.1007/978-3-319-40355-7_55.
[30] M. Okabe and K. Ito, “Color Universal Design (CUD): How to Make Figures and Presentations That are Friendly to Colorblind People,” Barrier-free presentation , 2002. https://jfly.uni-koeln.de/color/
[31] J. Sauro and J. R. Lewis, Quantifying the user experience: practical statistics for user research 2nd Edition . 2016. [Online]. Available: https://dl.acm.org/doi/pdf/10.1145/2413038.2413056?casa_token=eJqR7mWbspIAAAAA:0BnizGhclY13 8Ux7Hyq2hD6C6bXKvzDNVqDPG0aCfDgvjHOIzzGvdHxvw58ASuMbcALm4xxE3Bcg
[32] D. A. Anggara, W. Harianto, and A. Aziz, “Prototipe Desain User Interface Aplikasi Ibu Siaga Menggunakan Lean UX,” Kurawal - J. Teknol. Inf. dan Ind. , vol. 4, no. 1, pp. 58–74, 2021, doi: 10.33479/kurawal.v4i1.403.
[33] ISO, “Ergonomics of human-system interaction - Part 11 : Usability: Definitions and concepts,” Ergonomics of human-system interaction - Part 11 : Usability: Definitions and concepts . ISO, Jun. 21, 2018. [Online]. Available: https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-2:v1:en