Belajar UI Designer - Usability Dasar

#Pendahuluan

Setelah di episode 13 desain siap diserahkan, pada episode ini kita mundur sejenak dari membuat untuk belajar menilai: apakah desain yang kita buat benar-benar mudah dipakai? Inilah usability — dan di sinilah UI designer yang baik mulai memandang karyanya sendiri secara kritis.

Mengapa UI designer perlu menguasai usability? Karena tampilan yang indah tidak otomatis mudah dipakai. Tombol yang kontrasnya bagus tapi labelnya ambigu, form yang rapi tapi tidak memberi feedback saat error — semua itu adalah kegagalan usability yang menyamar sebagai desain selesai. Kemampuan mengevaluasi membuat kalian tidak hanya menghasilkan karya bagus, tapi karya yang berfungsi.

#Empat Pilar Usability Dasar

#Keterbacaan (Legibility)

Ini gabungan keputusan visual kita: teks cukup besar, kontras cukup, line-length tidak terlalu panjang, dan hierarki jelas (episode 2, 4). Uji cepat: miringkan layar atau lihat dari jarak tangan — apakah informasi utama masih terbaca tanpa effort?

#Affordance (Petunjuk Fungsi)

Affordance adalah seberapa jelas suatu elemen "mengundang" interaksinya. Tombol terlihat bisa diklik (adanya fill, elevasi), link terlihat bisa diklik (warna berbeda), input terlihat bisa diisi (border & placeholder). Affordance yang baik membuat pengguna tidak perlu membaca manual:

Affordance yang jelas vs tidak

JELAS    : tombol berlatar primary + label verb
          input dengan border + placeholder
TIDAK    : teks biasa yang ternyata tombol (tanpa sinyal)
          ikon tanpa label (tebak-tebakan)

Jangan memaksa pengguna menebak apa yang bisa diklik. Kalau sebuah elemen interaktif tidak "terlihat bisa diklik", tambahkan affordance visual.

#Feedback (Umpan Balik)

Setiap aksi butuh respon — dalam milidetik, bukan detik:

Mikro: tombol berubah state pressed saat ditekan (episode 8).
Proses: spinner/skeleton saat data dimuat, agar pengguna tahu sistem bekerja.
Hasil: konfirmasi sukses ("Transaksi tercatat") atau error yang menjelaskan ("Nominal minimal Rp10.000").

Tanpa feedback, pengguna bertanya-tanya "apakah aksi saya diterima?" — dan sering mengulang aksi.

#Konsistensi

Elemen yang sama harus berperilaku sama (prinsip repetition, episode 2). Tombol simpan di satu layar dan tombol simpan di layar lain tidak boleh berganti gaya; ikon kategori tidak boleh berpindah makna. Konsistensi mengurangi beban belajar — pengguna yang sudah hafal satu layar otomatis bisa memakai layar lainnya.

#Sepuluh Heuristik Nielsen

Heuristik Nielsen (Jakob Nielsen, 1994) adalah sepuluh prinsip evaluasi yang paling banyak dipakai di dunia — masih relevan di 2026. Versi ringkasnya:

Visibility of system status — sistem selalu memberi tahu apa yang sedang terjadi (feedback!).
Match between system and the real world — pakai bahasa pengguna, bukan jargon sistem.
User control and freedom — pengguna bisa membatalkan ("undo", "back") tanpa hukuman.
Consistency and standards — pola yang sama; ikuti konvensi platform.
Error prevention — cegah kesalahan sebelum terjadi (validasi real-time, konfirmasi).
Recognition rather than recall — tampilkan pilihan; jangan menyuruh mengingat dari layar sebelumnya.
Flexibility and efficiency of use — ada jalan pintas untuk pengguna mahir (shortcut, aksi cepat).
Aesthetic and minimalist design — informasi yang tidak relevan bersaing dengan yang relevan.
Help users recognize, diagnose, and recover from errors — pesan error yang jelas dan memberi solusi.
Help and documentation — bantuan tersedia saat diperlukan (dalam konteks, bukan manual tebal).

Tip

Hafalkan sepuluh heuristik ini — ia seperti checklist dokter untuk antarmuka. Saat kalian "merasa ada yang aneh" dengan sebuah layar, jalankan heuristik satu per satu: hampir selalu masalah itu bisa dirumuskan sebagai pelanggaran heuristik tertentu (misal "tidak ada feedback" = heuristik 1).

#Menganalisis Kantongin dengan Heuristik

Contoh nyata: layar form transaksi Kantongin dicek dengan heuristik:

Heuristik	Cek pada form transaksi
1. System status	Apakah tombol submit menunjukkan loading saat diproses?
4. Consistency	Apakah label & style form sama dengan layar lain?
5. Error prevention	Apakah nominal divalidasi sebelum submit (bukan ditolak setelah)?
9. Recover from errors	Apakah pesan error menjelaskan cara memperbaiki, bukan hanya "gagal"?

Hasilnya bisa langsung menjadi daftar perbaikan konkret — bukan "rasanya kurang enak", melainkan "validasi nominal saat mengetik + pesan error dengan solusi". Inilah cara UI designer berbicara soal masalah dengan data dan prinsip, bukan selera.

Warning

Hati-hati menilai usability berdasarkan selera pribadi. "Saya suka ini / tidak suka itu" bukan temuan usability. Temuan harus bisa dikaitkan ke heuristik atau perilaku pengguna yang teramati — kalau tidak, ia hanya pendapat yang tidak bisa dipertanggungjawabkan.

#Common Pitfalls

Menilai usability dari screenshot — usability butuh menjalankan interaksi, bukan melihat statis.
Affordance ambigu — elemen interaktif yang tidak terlihat interaktif.
Feedback tertunda — tidak ada indikasi saat proses berjalan; pengguna mengira aplikasi macet.
Bahasa sistem — istilah teknis di label yang seharusnya bahasa pengguna ("validasi input gagal" vs "Nomor rekening salah").
Hanya mengevaluasi alur sukses — alur error, kosong, dan batas tidak diperiksa.

#Praktik: Evaluasi Sistematis

Pilih satu alur lengkap Kantongin (misal "ubah target tabungan").
Jalankan prototype (episode 12) dan tulis langkah-langkahnya.
Evaluasi dengan 4 pilar + heuristik Nielsen: catat pelanggaran yang ditemukan.
Tulis tiap temuan sebagai kalimat: heuristik yang dilanggar + dampak pengguna + usulan perbaikan.
Prioritaskan perbaikan (yang paling sering dilanggar / paling berisiko).

#Penutup

Pada episode 14 ini, kalian telah menguasai evaluasi usability yang mengubah "rasa" menjadi "temuan".

Inti yang harus dibawa pulang:

Empat pilar: keterbacaan, affordance, feedback, konsistensi.
10 heuristik Nielsen sebagai checklist evaluasi yang teruji puluhan tahun.
Temuan usability = prinsip yang dilanggar + dampak + perbaikan — bukan selera.
Evaluasi mencakup alur error, empty, dan batas — bukan hanya alur sukses.

Di episode 15 selanjutnya kita akan membahas accessibility in UI — kontras, touch targets, focus states, dan text scaling agar Kantongin bisa dipakai semua orang. Sampai jumpa di episode 15!