Belajar UI/UX Design - Error, Empty & Recovery States

#Pendahuluan

Setelah di episode 19 kita memperkuat bahasa antarmuka, pada episode ini kita merancang momen kegagalan dan kekosongan — error, 404, empty, loading — plus cara pengguna pulih dari semuanya. Ini bagian yang paling sering dilupakan, padahal justru di sinilah kualitas produk diuji.

Mengapa penting? Pengguna mengingat momen buruk lebih lama daripada momen biasa. Transaksi yang gagal di kasir, stok yang hilang tanpa penjelasan, atau halaman yang "hang" tanpa indikasi — semua momen itu menentukan apakah Bu Sari besok masih memakai KasirKita. Desain state yang baik mengubah kepanikan menjadi ketenangan.

#Error dan 404

#Halaman Error

Error yang baik punya struktur jelas (dari episode 19): apa yang salah → mengapa → jalan keluar. Untuk halaman penuh:

Halaman error umum KasirKita

┌──────────────────────────────────┐
│            [ ⚠️ ikon ]              │
│   Gagal memuat laporan            │  apa yang salah
│   Koneksi ke server bermasalah.   │  mengapa
│   Data di perangkatmu tetap aman. │  meyakinkan
│   [ Coba Lagi ]  [ Lihat Offline ]│  jalan keluar
└──────────────────────────────────┘

#404: Tidak Ditemukan

404 adalah halaman yang paling sering jadi "tempat pembuangan" — halaman tanpa desain. Padahal 404 adalah momen pengguna tersesat; ia harus membantu pulang:

Jelaskan dengan jujur: "Halaman tidak ditemukan".
Tawarkan jalan keluar: tombol "Kembali ke Beranda" atau pencarian.
Jangan menyalahkan: bukan "Kamu salah alamat".
Untuk kasir: jangan pernah menampilkan 404 mentah di tengah transaksi — beri jalur aman kembali.

#Empty State

Empty state (detail di episode 10 & 19) mengikuti formula situasi → alasan → aksi. Dalam state kit, siapkan variannya:

Konteks	Empty state yang baik
Stok kosong	"Belum ada produk. Tambahkan produk pertamamu untuk mulai memantau stok." + [Tambah Produk]
Rekap kosong	"Belum ada transaksi hari ini." + [Mulai Transaksi]
Pencarian kosong	"Tidak ditemukan produk 'roko'." + saran [Lihat semua produk]
Notifikasi kosong	"Belum ada notifikasi. Kami kabari saat stok menipis."

Perhatikan: bahkan empty state pencarian diberi informasi yang berguna (saran), bukan sekadar "hasil tidak ditemukan".

#Loading dan Skeleton

Skeleton (placeholder berbentuk konten) lebih baik daripada spinner untuk memuat data — ia memberi antisipasi bentuk konten dan terasa lebih cepat:

Aturan loading:

Skeleton untuk konten besar (daftar, laporan); spinner untuk aksi singkat di tombol.
Sertakan status untuk screen reader (role="status" / aria-busy) — pengguna tunanetra perlu tahu data sedang dimuat.
Hindari skeleton berkedip berlebihan — gunakan animasi halus; hormati reduced-motion (episode 21).
Jangan tampilkan skeleton kosong tanpa batas — siapkan timeout ke error state.

#Recovery: Undo dan Retry

Pemulihan adalah jaring pengaman yang membuat pengguna berani bertindak:

#Undo

Undo menghilangkan ketakutan akan kesalahan. Kasus klasik: pengguna salah menghapus item dari transaksi.

Undo muncul singkat & dekat dengan tempat kejadian (toast "Produk dihapus" + tombol "Urungkan").
Batas waktu jelas (5-10 detik); setelah lewat, aksi permanen.
Jangan pakai modal konfirmasi "Yakin hapus?" jika ada undo — undo lebih murah bagi pengguna.

#Retry

Retry memulihkan kegagalan sementara (jaringan, server):

Tombol "Coba Lagi" tersedia di setiap error yang bisa diperbaiki.
Auto-retry untuk operasi yang bisa diulang otomatis (sinkronisasi transaksi offline).
Beri status "menunggu koneksi" yang jelas, bukan layar diam.
Untuk kasir: simpan transaksi lokal dulu lalu sinkron — Bu Sari tidak boleh kehilangan transaksi karena sinyal.

Tip

Pilih antara konfirmasi vs undo berdasarkan konsekuensi & frekuensi: aksi destruktif permanen (hapus akun) → modal konfirmasi; aksi yang sering terjadi & bisa dibatalkan (hapus item, hapus produk) → undo. Undo lebih cepat bagi pengguna yang sedang terburu-buru di kasir.

#Praktik: State Kit + Copy

Bangun State Kit di design system KasirKita:

Error: halaman error umum, 404, error form, error transaksi (offline).
Empty: stok, rekap, pencarian, notifikasi — lengkap dengan copy-nya.
Loading: skeleton daftar produk & laporan, spinner tombol.
Recovery: undo toast (item terhapus), retry, sinkronisasi offline.
Tulis copy untuk setiap state mengikuti tone of voice episode 19.
Tandai setiap state dengan status aksesibilitasnya (role, aria-live, aria-busy).

Warning

Jangan sembunyikan kegagalan dengan memutar-mutar spinner tanpa batas, atau menampilkan layar kosong tanpa pesan. Pengguna lebih rela mendengar "terjadi masalah" dengan jelas daripada menunggu selamanya dalam ketidakpastian. Ketidakpastian adalah UX failure yang paling sering terabaikan.

#Common Pitfalls

Error mentah/kode teknis — 500 tanpa penjelasan & tanpa jalan keluar.
404 tanpa navigasi pulang — pengguna tersesat tanpa peta.
Loading tanpa batas — skeleton berputar terus tanpa timeout.
Konfirmasi berlebihan — modal "yakin?" untuk hal yang bisa dibatalkan dengan undo.
Undo tanpa batas waktu — pengguna tidak tahu kapan aksi menjadi permanen.

#Penutup

Pada episode 20 ini, kalian telah merancang state kit lengkap untuk momen-momen tidak ideal.

Inti yang harus dibawa pulang:

Error = apa yang salah + mengapa + jalan keluar; 404 harus membantu pengguna pulang.
Empty state = situasi + alasan + aksi; jangan "Tidak ada data" tanpa makna.
Skeleton untuk konten besar, spinner untuk aksi singkat; selalu sertakan status aksesibilitas.
Undo untuk aksi yang sering & bisa dibatalkan; retry untuk kegagalan sementara; simpan dulu, sinkronkan nanti untuk kasir offline.
Ketidakpastian (loading tanpa batas) adalah kegagalan UX yang paling diam-diam.

Di episode 21 selanjutnya kita akan menghidupkan state-state ini dengan gerakan yang bermakna: motion design & micro-interactions — timing, easing, durasi, dan preferensi reduced-motion untuk KasirKita. Sampai jumpa di episode 21!