Ketika pengguna menjumpai layar kosong atau error di sebuah aplikasi, pengalaman mereka bisa berubah drastis. Di sinilah peran empty state dan error state menjadi penting. Meski tampak mirip, keduanya memiliki fungsi dan tujuan yang sangat berbeda dalam desain UX.
Memahami perbedaan antara empty state vs error state bukan sekadar detail kecil, tapi bagian krusial dari membangun antarmuka yang ramah, intuitif, dan manusiawi.
Apa Itu Empty State dan Error State?
🟦 Empty State
Empty state adalah kondisi UI saat belum ada data atau interaksi yang ditampilkan. Contohnya: folder belum punya file, keranjang belanja masih kosong, atau hasil pencarian belum tersedia.
Fungsinya adalah mengedukasi, mengarahkan, dan mengisi kekosongan dengan makna.
🟥 Error State
Sebaliknya, error state adalah respon sistem terhadap kegagalan. Misalnya: koneksi internet gagal, server error, atau input pengguna tidak valid.
Fungsinya adalah memberi penjelasan, solusi, dan menjaga kepercayaan pengguna.
Internal Link: Loading State UX
State kosong sering kali muncul berdampingan dengan loading state dalam alur aplikasi.
Baca juga: Loading State UI – Strategi Menahan Frustasi Pengguna
Perbandingan Fungsi dan Tujuan Desain
| Aspek | Empty State | Error State |
|---|---|---|
| 🔄 Kondisi Muncul | Tidak ada data atau interaksi | Ada kegagalan sistem atau input |
| 🎯 Tujuan Utama | Edukasi & ajakan interaksi | Penjelasan & pemulihan |
| 🧠 Psikologi Pengguna | Penasaran, siap eksplorasi | Frustrasi, cemas, ingin bantuan |
| 📝 Contoh Microcopy | “Ayo buat catatan pertamamu!” | “Ups! Koneksi terputus. Coba lagi nanti.” |
| 🎨 Desain Visual | Ilustrasi ringan, ajakan CTA | Simbol error, warna kontras (merah, kuning) |
| 🛠️ Solusi UX | Tampilkan CTA, panduan, tutorial | Tampilkan retry, error code, atau tombol bantuan |
Strategi Desain Empty State yang Efektif
- Ilustrasi Ringan dan Positif
Bantu pengguna merasa “dituntun”, bukan ditinggalkan. - Gunakan CTA (Call-to-Action)
Contoh: “Mulai Tambah Data”, “Unggah Pertama Anda” - Tambahkan Microcopy Edukatif
Jelaskan konteks: kenapa kosong, dan apa yang bisa dilakukan. - Integrasi Onboarding
Gunakan empty state untuk mengenalkan fitur baru.
Menurut UX Planet, empty state yang dirancang baik bisa meningkatkan aktivasi pengguna hingga 25%.
Strategi Desain Error State yang Efektif
- Pesan Jelas & Spesifik
Hindari “Terjadi kesalahan”. Gunakan: “Ups! Email belum diisi.” atau “Nomor tidak valid.” - Berikan Solusi atau Jalan Keluar
Contoh: tombol “Coba Lagi”, “Hubungi Bantuan”, atau refresh otomatis. - Jangan Salahkan Pengguna
Gunakan bahasa empatik: “Sepertinya terjadi kendala…” bukan “Anda salah input!” - Prioritaskan Aksesibilitas & Kontras Visual
Gunakan warna dan ikon yang kontras agar mudah ditangkap semua pengguna. - Logika Retry Otomatis untuk Error Teknis
Jangan paksa user ulangi semua proses jika error bukan dari mereka.
Contoh Penerapan dalam Aplikasi Populer
📱 Spotify
- Empty State: Playlist kosong berisi CTA dan rekomendasi lagu
- Error State: “No Internet Connection” + ilustrasi kabur + retry
🛍️ Tokopedia
- Empty State: Keranjang kosong dengan CTA menuju promo
- Error State: “Terjadi gangguan” dengan opsi “Coba Lagi”
🧾 Notion
- Empty State: Halaman kosong dengan tips penggunaan
- Error State: “Server unreachable” disertai link status server
Tools dan Referensi untuk Desain State UX
- Figma Community: UI state kits
- UX Writing Hub: contoh microcopy empty/error
- Google Material Design Guidelines
- Dribbble & Behance: inspirasi visual empty/error state
- UXPin: prototyping state interaksi
Kesimpulan: UX State Harus Adaptif dan Empatik
Empty state dan error state bukan sekadar layar cadangan. Mereka adalah bagian penting dari alur interaksi pengguna, dan menentukan apakah user lanjut eksplorasi atau malah keluar aplikasi.
Dengan pendekatan desain yang tepat, setiap state—baik kosong maupun gagal—bisa menjadi momen membangun hubungan positif dengan pengguna.
