Logo

Evaluasi Aksesibilitas

KD 2.7 – Design for Everyone

01 / 07
Inclusive Design

Evaluasi
Aksesibilitas

Desain yang baik bukan hanya soal estetika, tapi soal dapat digunakan oleh semua orang.

Apa Itu Aksesibilitas?

Praktik desain yang memastikan produk dapat digunakan oleh sebanyak mungkin orang, termasuk mereka dengan keterbatasan fisik, kognitif, atau situasional.

Prinsip: Usable for Everyone

  • Perceivable (Dapat Dipersepsi)
  • Operable (Dapat Dioperasikan)
  • Understandable (Dapat Dipahami)
  • Robust (Kokoh)

Mengapa Penting?

Lansia (60th+)

Tremor tangan & penglihatan menurun.

Butuh: Tombol besar & Teks kontras.

Pengguna Situasional

Di luar ruangan, layar silau matahari.

Butuh: Kontras warna tinggi.

One-Handed User

Menggendong bayi atau pegangan di bus.

Butuh: Area jangkauan (Thumb Zone).

5 Prinsip Utama Aksesibilitas

Penerapan praktis dalam desain UI.

1 Ukuran Tombol Minimal

Jari manusia sekitar 11mm. Tombol harus cukup besar untuk menghindari salah tekan.

Touch Target Status
32px
❌ Too small
44px
✅ iOS Standard
48px
✅ Android Ideal

2 Jarak Antar Elemen

Elemen berdempetan = Risiko salah tekan. Beri ruang "bernapas".

Checklist Evaluasi Desain

Gunakan daftar ini untuk memeriksa kualitas desain Anda.

Physical Check

  • Ukuran tombol min. 44x44 px
  • Jarak antar elemen min. 8-16 px
  • Tombol berbahaya (reset/delete) dijauhkan

Visual Check

  • Kontras teks minimal 4.5:1
  • Tidak mengandalkan warna saja
  • Jelas dalam mode Grayscale (Hitam Putih)

Cognitive Check

  • Navigasi konsisten di tiap halaman
  • Pesan error jelas & solutif
  • Maksimal 3 klik ke konten utama

Gunakan checklist ini sebagai standar "Definition of Done".

Studi Kasus Nyata

Instagram

Masalah Awal

  • Tombol Like (Heart) terlalu kecil.
  • Indikator Story sulit dilihat di cahaya terang.

Solusi Aksesibilitas

  • Area sentuh tombol diperluas (meski ikon tetap).
  • Menambah haptic connection feedback.
  • Meningkatkan kontras ring Story.

Tokopedia

Masalah Awal

  • Halaman produk terlalu padat.
  • Warna diskon merah/hijau saru untuk buta warna.

Solusi Aksesibilitas

  • Menambah label teks "DISKON 50%" (bukan cuma warna).
  • Memperbesar font harga.
  • Ikonografi lebih jelas.

Tugas Individu

Evaluasi & Revisi Desain Sendiri

Langkah Pengerjaan

  1. 1 Pilih Desain

    Gunakan desain Figma dari tugas sebelumnya atau screenshot aplikasi favoritmu.

  2. 2 Audit Masalah

    Cari tombol kecil, teks buram, atau navigasi aneh.

  3. 3 Lakukan Revisi

    Perbaiki di Figma. Buat perbandingan Before vs After.

Contoh output Dokumentasi:

MASALAH #1: Ukuran Tombol
Before: Tombol "Beli" 30px (Kecil)
After: Diperbesar jadi 48px
Dampak: Mudah ditekan jari jempol.
MASALAH #2: Kontras
Before: Teks abu-abu di background putih
After: Teks dipergelap (Hitam)

Kriteria Penilaian

Ketajaman Analisis Masalah 25%
Kualitas Revisi Desain 30%
Dokumentasi Before-After 15%

"Good design is accessible design."

Aksesibilitas adalah standar minimum, bukan fitur tambahan.
Teruslah mendesain dengan empati.

Kembali ke Menu Utama