Belajar Product Designer - Usability & Interaction Design
Menerapkan 10 heuristic usability Nielsen, pola interaksi yang umum dipakai, dan desain states yang lengkap pada komponen Sehati. Di episode ini kalian mengevaluasi interaksi fitur cek gejala dengan heuristic checklist, memperbaiki temuan, dan merancang states untuk loading, error, dan empty
#Pendahuluan
Setelah di episode 8 kita membangun design system Sehati — tokens, komponen, dan governance — pada episode ini kita memastikan sistem itu tidak hanya konsisten, tetapi juga mudah dipakai. Inilah ranah usability dan interaction design.
Usability menjawab "seberapa mudah user mencapai tujuannya?", interaction design menjawab "bagaimana elemen merespons aksi user?". Keduanya sering dianggap "rasa", padahal keduanya bisa dievaluasi secara sistematis — salah satu caranya lewat 10 heuristic usability Jakob Nielsen yang sudah terbukti lintas generasi.
#10 Heuristic Usability
Heuristic adalah aturan praktis untuk menemukan masalah usability tanpa riset mahal. Inilah ringkasan yang paling relevan untuk Sehati:
| # | Heuristic | Arti praktis |
|---|---|---|
| 1 | Visibility of system status | User selalu tahu "sekarang terjadi apa" |
| 2 | Match with real world | Gunakan bahasa user, bukan jargon teknis |
| 3 | User control & freedom | Ada jalan keluar: back, cancel, undo |
| 4 | Consistency & standards | Kata & aksi sama di seluruh produk |
| 5 | Error prevention | Cegah error sebelum terjadi |
| 6 | Recognition over recall | Tampilkan pilihan, jangan minta hafalan |
| 7 | Flexibility & efficiency | Shortcut untuk pengguna mahir |
| 8 | Aesthetic & minimalist | Hanya info yang relevan |
| 9 | Help users recover from errors | Error ditulis jelas + cara perbaiki |
| 10 | Help & documentation | Bantuan saat dibutuhkan |
Ambil contoh fitur cek gejala. Heuristic #6 (recognition over recall) berarti pertanyaan disajikan sebagai pilihan gejalanya (tap pill "batuk", "demam"), bukan input teks bebas — pasien tidak perlu menghafal istilah medis. Heuristic #2 berarti label "Hasil triase" dijelaskan dengan kata sehari-hari: "Gejala ringan — bisa dirawat di rumah".
#Pola Interaksi yang Sering Dipakai
Interaksi yang familier mengurangi beban belajar. Beberapa pola yang wajib dikenal product designer:
- Tabs vs bottom nav: tabs untuk subtopik dalam satu area; bottom nav untuk area utama produk.
- Modal & sheet: untuk task pendek yang memblokir konteks (konfirmasi, edit singkat).
- Inline validation: umpan balik langsung saat input, bukan setelah submit.
- Progressive disclosure: sembunyikan detail lanjutan sampai dibutuhkan (misal "detail medis" dalam accordion).
- Undo & confirm: destruktif pakai konfirmasi; non-destruktif (hapus draft) pakai undo.
Struktur ini familier bagi pengguna aplikasi mobile Indonesia: navigasi utama selalu terlihat, detail didorong ke layar baru, dan tindakan berbahaya selalu dikonfirmasi.
#States: Desain untuk Semua Kondisi
Komponen yang baik punya state lengkap. Terlalu sering desainer hanya membuat state default — lalu saat aplikasi loading atau gagal, tampilannya berantakan. Empat state inti:
| State | Kapan terjadi | Contoh Sehati |
|---|---|---|
| Empty | Belum ada data | "Belum ada riwayat konsultasi" + CTA mulai cek gejala |
| Loading | Proses berlangsung | Skeleton list dokter; spinner saat cek gejala |
| Error | Gagal memproses | "Gagal menghubungi dokter. Coba lagi" + tombol retry |
| Partial | Data tidak lengkap | Hasil triase tanpa rekomendasi dokter (koneksi lemah) |
Prinsip penting: error message harus menyebut apa yang terjadi, kenapa, dan apa yang harus dilakukan user — bukan "Error 500" tanpa penjelasan. Dan loading state bukan sekadar spinner: skeleton yang meniru struktur konten nyata membuat user merasa lebih cepat (perceived performance).
Important
Jangan pernah mengandalkan "ini jarang terjadi" untuk melupakan error state. Error state adalah bagian dari kualitas produk — dan di aplikasi kesehatan, error yang tidak jelas bisa membuat pasien panik atau menyerah. Desainlah state error seperti mendesain state utama: dengan copy yang tenang dan jalan keluar yang jelas.
#Praktik: Evaluasi Interaksi Fitur Cek Gejala
Buka prototype episode 7 dan evaluasi dengan checklist 10 heuristic. Lakukan per layar:
- Tulis skor 0-2 (0 = tidak terpenuhi, 1 = sebagian, 2 = penuh) untuk 10 heuristic.
- Catat layar dengan skor terendah.
- Perbaiki temuan dengan menerapkan pola interaksi yang sesuai.
Layar 04 HasilTriase
- Visibility status : 2/2 (progress jelas)
- Error prevention : 0/2 (bisa submit tanpa gejala dipilih)
→ Perbaikan: disable tombol hasil sampai ada jawaban + hint.Satu temuan bagus sudah cukup untuk melatih proses. Yang penting adalah kebiasaan mengevaluasi secara sistematis, bukan sekadar "rasanya enak".
#Penutup
Inti yang harus dibawa pulang:
- Usability bisa dievaluasi sistematis lewat 10 heuristic Nielsen.
- Recognition over recall: sajikan pilihan, jangan minta hafalan.
- Pakai pola interaksi yang familier untuk mengurangi beban belajar.
- Komponen harus punya 4 state: empty, loading, error, partial.
- Error message yang baik: apa terjadi, kenapa, dan apa yang harus dilakukan.
Di episode 10 selanjutnya kita akan membahas accessibility by default — WCAG, inclusive design, dan komponen accessible — agar Sehati bukan hanya mudah dipakai, tetapi juga bisa dipakai oleh semua orang, termasuk pengguna dengan disabilitas. Sampai jumpa di episode 10!