DEVELOPING AN INCLUSIVE DIGITAL READING APPLICATION FOR USERS WITH DYSLEXIA USING A HUMAN-CENTERED DESIGN APPROACH

Khalisha Fadiya Khansa, Dr. Mardhani Riasetiawan, SE Ak, M.T., Muhammad Oriza Nurfajri, S.Kom., M.IT.

2026 | Skripsi | ILMU KOMPUTER

Penelitian ini memperkenalkan DyslexiaReader, sebuah sistem membaca digital yang ramah bagi penyandang disleksia dan dikembangkan untuk membantu individu dengan disleksia membaca teks digital dengan lebih nyaman dan efektif. Disleksia memengaruhi sekitar 6% hingga 17% populasi dunia dan ditandai dengan kesulitan dalam mendekode kata, memproses bacaan yang panjang, serta mempertahankan fokus saat membaca. Meskipun penggunaan media digital untuk membaca terus meningkat, sebagian besar platform yang tersedia saat ini masih menyediakan opsi kustomisasi tipografi yang terbatas dan belum mampu mengadaptasi materi dari sumber eksternal ke dalam format yang ramah disleksia.

Penelitian ini mengadopsi pendekatan Human-Centered Design (HCD) dan mengimplementasikan sistem pada dua platform yang saling melengkapi, yaitu aplikasi native iOS yang dibangun menggunakan Swift dan SwiftUI serta aplikasi web yang dikembangkan menggunakan React 18 dan Vite 5. Kedua implementasi menerapkan prinsip-prinsip desain yang direkomendasikan oleh British Dyslexia Association (BDA), Dyslexia Scotland, dan Aziz et al. (2013), yang meliputi pengaturan jenis huruf, ukuran huruf, jarak antarhuruf, jarak antarkata, jarak antarbaris, serta warna latar belakang yang dipilih dari palet warna aksesibilitas yang telah tervalidasi. Selain itu, aplikasi iOS mendukung Optical Character Recognition (OCR) berbasis kamera secara real-time, pemindaian dokumen, serta reading ruler yang dapat dipindahkan dengan tiga gaya yang dapat dikonfigurasi. Sementara itu, aplikasi web dilengkapi dengan reading ruleryang mengikuti pergerakan kursor serta fitur penandaan suku kata menggunakan titik.

Proses pengembangan menghasilkan sistem aksesibilitas membaca lintas platform yang berfungsi secara penuh dan dievaluasi menggunakan 28 partisipan dalam tiga kondisi pengujian. DyslexiaReader menyediakan enam fitur aksesibilitas utama, yaitu pengaturan jenis huruf, jarak antarhuruf, jarak antarkata, jarak antarbaris, warna latar belakang, serta reading ruler, yang didukung oleh berbagai metode masukan, termasuk pengetikan teks secara manual, penempelan teks dari clipboard, unggah dokumen PDF, dan pemindaian dokumen menggunakan OCR berbasis kamera. Hasil pengujian pengguna menunjukkan adanya peningkatan kecepatan membaca yang signifikan secara statistik di seluruh kondisi pengujian (F(1, 27) = 6,239; p = 0,019), dengan rata-rata kecepatan membaca meningkat dari 335,61 kata per menit (words per minute/WPM) pada kondisi awal menjadi 352,75 WPM pada prototipe web dan 356,96 WPM pada aplikasi iOS. Sistem ini juga memperoleh skor rata-rata System Usability Scale (SUS) sebesar 79,6 (SD = 7,8), yang termasuk dalam kategori kegunaan "Baik" (Good) dan mendekati kategori "Sangat Baik" (Excellent). Partisipan memberikan penilaian yang sangat tinggi terhadap integrasi fitur (Q5: M = 4,74) dan tingkat kepercayaan diri saat menggunakan sistem (Q9: M = 4,79). Hasil tersebut menunjukkan bahwa DyslexiaReader secara efektif mendukung aksesibilitas membaca sekaligus memiliki tingkat kegunaan yang tinggi pada kedua platform yang dikembangkan.

This study presents DyslexiaReader, a dyslexia-friendly digital reading system developed to help individuals with dyslexia engage with digital text more comfortably and effectively. Dyslexia affects approximately 6% to 17% of the global population and is characterized by difficulties in decoding words, processing long passages, and maintaining reading focus. Despite the growing prevalence of digital reading, most existing platforms offer limited typographic customization and cannot adapt external materials into dyslexia-friendly formats.

This research adopts a Human-Centered Design (HCD) approach and implements the system across two complementary platforms: a native iOS application built with Swift and SwiftUI, and a web application built with React 18 and Vite 5. Both implementations incorporate design principles from the British Dyslexia Association (BDA), Dyslexia Scotland, and Aziz et al. (2013), including adjustable font type, size, letter spacing, word spacing, line spacing, and background color drawn from a validated accessibility palette. The iOS application additionally supports real-time camera-based OCR, document scanning, and a draggable reading ruler with three configurable styles. The web application includes a mouse-following reading ruler and syllable dot highlighting.

The development process resulted in a fully functional cross-platform reading accessibility system evaluated with 28 participants across three conditions. DyslexiaReader delivers six core accessibility features — adjustable font type, letter spacing, word spacing, line spacing, background color, and a reading ruler — alongside input methods including manual text entry, clipboard paste, PDF upload, and camera-based OCR document scanning. User testing demonstrated a statistically significant linear increase in reading speed across conditions (F(1, 27) = 6.239, p = .019), with mean WPM rising from 335.61 at baseline to 352.75 on the web prototype and 356.96 on the iOS application. The system received a mean System Usability Scale (SUS) score of 79.6 (SD = 7.8), placing it in the "Good" usability category and approaching the "Excellent" threshold, with participants rating feature integration (Q5: M = 4.74) and user confidence (Q9: M = 4.79) particularly highly. These results indicate that DyslexiaReader meaningfully supports reading accessibility and demonstrates strong perceived usability across both platforms.

Kata Kunci : dyslexia, digital accessibility, inclusive design, human-centered design, readability, iOS, React, typography, OCR, human-computer interaction (HCI)