Table of Contents
▼- Apa Itu Cognitive Inclusion dan Kenapa Penting untuk Developer
- 5 Temuan Riset yang Mengubah Cara Kita Mendesain UI
- Pola UI yang Membebani Kognitif Pengguna (dan Cara Memperbaikinya)
- Cara Memasukkan Cognitive Inclusion ke dalam Design System
- Tools dan Checklist untuk Testing Kognitif di Proyek Nyata
- Cognitive Inclusion Bukan Proyek Tersendiri — Ini Cara Berpikir
Bayangkan seorang pengguna membuka aplikasi layanan publik Indonesia di tengah tekanan waktu, koneksi internet lambat, dan sambil mengurus anak.
Kondisi seperti ini bukan pengecualian — ini realita mayoritas pengguna kita.
Riset kognitif menunjukkan bahwa pengguna dengan disabilitas kognitif sering menjadi "detektor dini" masalah UX yang justru berdampak pada semua orang. Ketika sebuah antarmuka terlalu membebani memori kerja, membingungkan pola navigasi, atau menggunakan bahasa yang ambigu — pengguna dengan ADHD, disleksia, atau kecemasan kognitif akan merasakannya lebih dulu.
Tapi mereka bukan satu-satunya yang terdampak.
Inilah inti dari cognitive inclusion: mendesain UX yang meringankan beban kognitif untuk semua orang, bukan hanya kelompok tertentu.
Apa Itu Cognitive Inclusion dan Kenapa Penting untuk Developer
Cognitive inclusion adalah pendekatan desain yang memastikan antarmuka dapat digunakan oleh orang-orang dengan beragam kemampuan kognitif.
Ini mencakup pengguna dengan disleksia, ADHD, autisme, kecemasan, gangguan memori, hingga pengguna yang sekadar sedang kelelahan atau multitasking.
Di Indonesia, konteks ini sangat relevan karena beberapa alasan:
- Literasi digital masih sangat bervariasi antar wilayah
- Banyak pengguna mengakses layanan dari perangkat entry-level dengan layar kecil
- Aplikasi pemerintah dan layanan publik wajib menjangkau semua lapisan masyarakat
Sayangnya, banyak tim development di Indonesia masih menganggap aksesibilitas kognitif sebagai "nice to have" — bukan kebutuhan utama.
Padahal, World Health Organization memperkirakan lebih dari 1 miliar orang di dunia hidup dengan disabilitas, dan sebagian besar di antaranya adalah disabilitas yang tidak terlihat, termasuk disabilitas kognitif.
Ketika kita mendesain untuk mereka, kita sebenarnya sedang mendesain untuk kondisi manusiawi yang dialami semua orang: kelelahan, stres, gangguan perhatian, dan keterbatasan memori jangka pendek.
5 Temuan Riset yang Mengubah Cara Kita Mendesain UI
1. Cognitive Load Bisa Diukur — dan Sering Terlalu Tinggi
Penelitian dari Nielsen Norman Group menunjukkan bahwa memori kerja manusia hanya mampu menampung 4 ±1 item secara bersamaan.
Banyak form pendaftaran di aplikasi Indonesia meminta 10–15 field sekaligus tanpa pengelompokan yang jelas. Ini bukan hanya melelahkan — ini secara klinis membebani memori kerja pengguna.
Solusinya bukan mengurangi informasi yang dikumpulkan, tapi mengelompokkannya secara bertahap dengan progressive disclosure.
2. Inkonsistensi Pattern Merusak Model Mental Pengguna
Pengguna dengan disabilitas kognitif sangat bergantung pada konsistensi pola UI untuk membangun model mental yang stabil.
Ketika tombol "Lanjut" di satu halaman berwarna biru tapi di halaman lain berwarna abu-abu, atau ketika ikon berbeda tapi fungsinya sama — pengguna tidak bisa membangun ekspektasi yang andal.
Ini menyebabkan kebingungan yang tidak terdeteksi dalam usability testing biasa, karena pengguna "neurotipikal" sering bisa mengkompensasi inkonsistensi secara otomatis.
3. Error Message yang Buruk Memicu Kecemasan
Sebuah studi dari Microsoft Research menemukan bahwa pesan kesalahan yang tidak jelas secara signifikan meningkatkan tingkat kecemasan pengguna dengan disabilitas kognitif.
Pesan seperti "Error 422: Unprocessable Entity" atau "Terjadi kesalahan" tanpa panduan tindak lanjut bisa menyebabkan pengguna meninggalkan aplikasi sepenuhnya.
Angka drop-off di form panjang aplikasi Indonesia rata-rata mencapai 60–70% — dan error message yang buruk adalah salah satu kontributornya.
4. Waktu Baca yang Tidak Dipertimbangkan
Pengguna dengan disleksia membutuhkan waktu 25–30% lebih lama untuk memproses teks dengan line spacing dan font yang buruk.
Di Indonesia, banyak aplikasi masih menggunakan font size 12px untuk body text di mobile, dengan line-height yang terlalu rapat.
Perubahan sederhana pada tipografi bisa secara dramatis meningkatkan task completion rate — bukan hanya untuk pengguna dengan disleksia, tapi untuk semua pengguna yang membaca di bawah sinar matahari atau dalam kondisi tidak ideal.
5. Pengguna dengan ADHD Mengungkap Masalah Navigasi Tersembunyi
Sesi usability testing dengan partisipan ADHD sering mengungkap masalah navigasi yang tidak terdeteksi pada testing biasa.
Mereka cenderung mengeklik elemen UI yang terlihat interaktif tapi sebenarnya tidak, menunjukkan affordance gap yang tidak disadari desainer.
Di aplikasi e-commerce Indonesia, ini sering muncul sebagai elemen dekoratif yang bentuknya mirip tombol — menyebabkan frustrasi yang menurunkan konversi.
Pola UI yang Membebani Kognitif Pengguna (dan Cara Memperbaikinya)
Masalah 1: Form Panjang Tanpa Struktur
Pola buruk: Satu halaman dengan 12 field input tanpa pengelompokan.
Dampak: Pengguna tidak tahu sudah sejauh mana progress mereka, dan tidak bisa memperkirakan berapa lama lagi.
Solusi:
- Gunakan multi-step form dengan progress indicator yang jelas
- Kelompokkan field terkait dengan heading dan visual separator
- Tampilkan estimasi waktu pengisian ("Butuh sekitar 3 menit")
<!-- Contoh struktur multi-step form yang aksesibel -->
<div role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="4" aria-label="Langkah 2 dari 4">
<span class="step active">Data Diri</span>
<span class="step active">Alamat</span>
<span class="step">Dokumen</span>
<span class="step">Konfirmasi</span>
</div>
Masalah 2: Bahasa Teknis dan Ambigu
Pola buruk: "Autentikasi dua faktor gagal divalidasi."
Solusi: "Kode verifikasi yang kamu masukkan salah. Coba lagi atau minta kode baru."
Gunakan plain language — kalimat aktif, kata sehari-hari, dan selalu sertakan tindakan yang harus diambil pengguna.
Masalah 3: Informasi Penting Tersembunyi di Hierarki Visual yang Datar
Ketika semua elemen memiliki bobot visual yang sama, pengguna dengan kesulitan fokus tidak tahu mana yang harus diperhatikan pertama.
Solusi:
- Terapkan hierarki visual yang tegas: satu elemen dominan per halaman
- Gunakan whitespace secara strategis untuk "memberi napas" pada konten
- Tandai informasi kritis dengan visual cue yang konsisten (bukan hanya warna)
Masalah 4: Notifikasi yang Menginterupsi Tanpa Kontrol
Notifikasi yang muncul tiba-tiba sangat mengganggu pengguna dengan ADHD dan kecemasan.
Solusi:
- Berikan kontrol penuh kepada pengguna atas jenis dan frekuensi notifikasi
- Gunakan non-intrusive notification pattern (toast notification yang tidak menghalangi konten utama)
- Hindari animasi yang berkedip atau bergerak otomatis di area perifer layar
Cara Memasukkan Cognitive Inclusion ke dalam Design System
Banyak tim berpikir cognitive inclusion adalah tanggung jawab UX researcher saja.
Padahal, cara paling efektif adalah menanamkannya langsung ke dalam design system — sehingga setiap developer yang menggunakan komponen sudah otomatis menerapkan prinsip ini.
Langkah 1: Dokumentasikan Cognitive Load Budget per Komponen
Setiap komponen dalam design system harus memiliki catatan tentang berapa banyak "beban kognitif" yang ditambahkannya.
Misalnya, modal dialog memiliki beban kognitif tinggi (memutus konteks), sementara inline validation memiliki beban rendah (memberi feedback tanpa interruption).
Langkah 2: Buat Variasi Komponen yang Eksplisit
Daripada menyerahkan keputusan tipografi dan spacing ke masing-masing developer, sediakan variasi yang sudah dirancang untuk keterbacaan optimal:
/* Contoh token tipografi untuk keterbacaan kognitif */
:root {
--font-size-body: 1rem; /* minimum 16px */
--line-height-body: 1.6; /* lebih longgar dari default */
--letter-spacing-body: 0.02em;
--paragraph-spacing: 1.5em; /* jarak antar paragraf */
--max-line-length: 70ch; /* batas lebar kolom teks */
}
.body-text {
font-size: var(--font-size-body);
line-height: var(--line-height-body);
letter-spacing: var(--letter-spacing-body);
max-width: var(--max-line-length);
}
Langkah 3: Standardisasi Error State
Buat template error message yang wajib digunakan seluruh tim:
- Apa yang salah (spesifik, bukan "terjadi kesalahan")
- Kenapa ini terjadi (opsional, tapi membantu)
- Apa yang harus dilakukan (selalu ada)
Langkah 4: Masukkan Cognitive Inclusion ke dalam PR Review Checklist
Tambahkan pertanyaan ini ke dalam code review:
- Apakah error message memberikan panduan tindak lanjut?
- Apakah komponen baru konsisten dengan pola yang sudah ada?
- Apakah ada animasi yang tidak bisa dinonaktifkan?
- Apakah hierarki visual halaman jelas?
Tools dan Checklist untuk Testing Kognitif di Proyek Nyata
Tools yang Bisa Digunakan Sekarang
1. Hemingway App (hemingwayapp.com) Analisis keterbacaan teks. Tujukan skor Grade 8 atau lebih rendah untuk konten antarmuka.
2. Accessible Colors (accessible-colors.com) Cek kontras warna tidak hanya untuk visual, tapi pastikan kontrasnya cukup tinggi untuk pengguna dengan sensitivitas kognitif terhadap silau.
3. WAVE Browser Extension Deteksi masalah struktur heading, label form, dan accessibility attributes yang memengaruhi screen reader dan navigasi kognitif.
4. Cognitive Accessibility Guidance dari W3C (WCAG 2.2 + COGA) W3C memiliki guideline khusus untuk cognitive accessibility yang sering diabaikan — ini dokumen referensi yang wajib dibookmark.
Checklist Cognitive Inclusion untuk Sprint Review
Gunakan checklist ini sebelum setiap rilis fitur baru:
Bahasa dan Konten:
- Semua label form menggunakan kata sehari-hari, bukan istilah teknis
- Error message menyertakan instruksi tindak lanjut
- Tidak ada kalimat yang lebih dari 20 kata dalam instruksi UI
- Semua singkatan dijelaskan saat pertama kali muncul
Visual dan Layout:
- Hierarki visual jelas dengan satu elemen dominan per halaman
- Kontras teks minimal 4.5:1 (bukan hanya 3:1)
- Whitespace cukup antara elemen interaktif (minimal 8px)
- Tidak ada elemen dekoratif yang terlihat seperti tombol
Interaksi dan Navigasi:
- Konsistensi pola navigasi di seluruh halaman
- Progress indicator tersedia di semua multi-step flow
- Animasi memiliki opsi untuk dinonaktifkan (
prefers-reduced-motion) - Timeout session memberikan peringatan dan opsi perpanjangan
Testing:
- Sudah diuji dengan pengguna yang memiliki beragam kemampuan kognitif
- Sudah dicoba dalam kondisi "pengguna lelah" (malam hari, setelah banyak tugas)
- Task completion rate dicatat untuk setiap flow utama
/* Implementasi prefers-reduced-motion yang wajib ada */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Cognitive Inclusion Bukan Proyek Tersendiri — Ini Cara Berpikir
Kesalahan terbesar yang sering dilakukan tim adalah memperlakukan cognitive inclusion sebagai sprint khusus atau audit satu kali.
Padahal ini adalah pola pikir yang harus melekat di setiap keputusan desain dan development.
Mulailah dari hal kecil: perbaiki satu error message hari ini. Tambahkan progress indicator di form terpanjang kamu. Audit satu halaman landing page dengan Hemingway App.
Perubahan kecil yang konsisten akan menghasilkan aplikasi yang lebih mudah digunakan oleh semua orang — bukan hanya pengguna dengan disabilitas kognitif, tapi juga pengguna yang lelah, terburu-buru, atau baru pertama kali menggunakan layanan digital.
Di Indonesia, di mana digital inclusion sedang menjadi agenda nasional, cognitive inclusion adalah investasi yang langsung berdampak pada adoption rate dan kepercayaan pengguna terhadap produk digital kita.
Kesulitan dengan tugas programming atau butuh bantuan coding? KerjaKode siap membantu menyelesaikan tugas IT dan teknik informatika Anda. Dapatkan bantuan profesional di jasa tugas IT KerjaKode.
