Dalam dunia UI/UX, sering kali fokus tertuju pada elemen dengan konten: kartu produk, dashboard penuh data, atau galeri foto. Tapi ada satu area penting yang justru sering terlewat: empty state—halaman kosong yang muncul saat tidak ada data, hasil pencarian nihil, atau pengguna belum melakukan apa pun.
Padahal, desain empty state adalah momen strategis untuk mengedukasi pengguna, mendorong aksi, dan bahkan memperkuat kepribadian brand.
Apa Itu Empty State dalam Desain UI/UX?
Empty state adalah tampilan antarmuka yang muncul ketika data atau konten utama belum tersedia. Contoh:
- User belum mengunggah apa pun
- Keranjang belanja masih kosong
- Pencarian tidak menemukan hasil
- Belum ada notifikasi atau pesan
Menurut UX Planet:
“Empty states are an overlooked part of the user journey. When designed well, they guide, educate, and convert.”
Kenapa Empty State Itu Penting?
🧠 1. Momen Edukasi
Gunakan untuk menjelaskan cara kerja fitur atau apa yang bisa dilakukan user di halaman tersebut.
🚀 2. Dorong Aksi
Berikan CTA yang jelas: tambahkan item, mulai proyek, unggah file, cari produk.
🧩 3. Bangun Empati & Brand Voice
Gunakan ilustrasi, teks, atau animasi yang mencerminkan kepribadian brand—fun, suportif, atau profesional.
📱 4. Kurangi Frustasi
Halaman kosong bisa membingungkan. Empty state yang ramah membuat user tetap merasa terarah.
Contoh Empty State yang Efektif
| Jenis Empty State | Tujuan | Contoh CTA atau Konten |
|---|---|---|
| Belum ada data (new user) | Onboarding & dorong eksplorasi | “Tambahkan proyek pertama Anda” |
| Hasil pencarian nihil | Koreksi atau alternatif | “Coba kata kunci lain” |
| Error koneksi / gagal | Empati + retry | “Gagal memuat. Coba lagi?” |
| Konten sudah dihapus | Penjelasan + arahkan ke fitur lain | “Coba telusuri konten terbaru” |
Menurut Smashing Magazine:
“The best empty states guide users toward success by offering help, encouragement, or action.”
Prinsip Desain Empty State yang Baik
✅ 1. Jelaskan Situasi dengan Ringkas
- “Belum ada data yang ditambahkan.”
- “Kami tidak menemukan hasil.”
✅ 2. Beri CTA Jelas
- “Buat sekarang”, “Unggah file”, “Tambah produk”
✅ 3. Tambahkan Ilustrasi atau Animasi
Visual membantu menarik perhatian dan membuat halaman tidak terasa “mati”.
✅ 4. Konsisten dengan Brand Voice
Startup edukasi bisa santai dan lucu. Aplikasi finansial sebaiknya tetap profesional dan terpercaya.
Tools & Resources untuk Empty State Design
- Humaaans / Open Peeps: ilustrasi fleksibel yang bisa dikustom
- LottieFiles: animasi ringan untuk UI
- Undraw / Blush: ilustrasi gratis untuk onboarding & empty state
- Figma Plugins: “Empty State”, “Content Reel”, dll
Internal Link: Motion dan Micro Interaction dalam Empty State
Empty state bisa jadi momen ideal untuk memperkuat micro interaction—dari animasi saat konten belum muncul, hingga transisi halus saat data mulai masuk.
Baca juga: Micro Interaction: Sentuhan Kecil, Dampak Besar di UI/UX
Kesalahan Umum dalam Empty State
- ❌ Hanya menampilkan teks “tidak ada data”
- ❌ Tidak memberi tahu user apa yang harus dilakukan selanjutnya
- ❌ Tidak responsif di mobile
- ❌ Visual terlalu kaku atau tidak sesuai brand
Kesimpulan: Halaman Kosong Tak Boleh Kosong Makna
Desain empty state adalah kesempatan emas untuk memperkuat UX, memperkenalkan fitur, dan mendorong pengguna bertindak. Di era produk digital yang makin kompetitif, detail kecil seperti ini bisa menjadi pembeda.
Ingat: halaman kosong bukan akhir perjalanan, tapi awal interaksi.
