Apa yang dilihat pengguna saat halaman belum memiliki konten?
Apakah itu layar putih kosong? Atau justru momen menyambut yang hangat dan informatif?
Inilah pentingnya Empty State UX—desain antarmuka yang merangkul pengguna saat data belum ada, bukan malah membuatnya bingung atau kecewa.
“UX terbaik tidak hanya merancang saat penuh, tapi juga saat kosong.”
— UX Collective
Apa Itu Empty State UX?
Empty state UX adalah desain yang ditampilkan ketika tidak ada konten atau data untuk ditampilkan.
Hal ini bisa terjadi karena:
- Halaman baru pertama kali diakses
- Data belum dibuat oleh pengguna
- Filter pencarian tidak menghasilkan apa-apa
- Item dihapus, atau proses belum dimulai
Daripada dibiarkan kosong, empty state harus memandu, menjelaskan, atau mendorong tindakan.
Internal Link: Progressive Disclosure & Delightful UX
Empty state yang baik memperkenalkan produk secara bertahap dan menyenangkan.
Baca juga: Progressive Disclosure – Tampilkan Informasi Sedikit demi Sedikit
Baca juga: Delightful Details – Kejutan Kecil yang Menguatkan UX
Mengapa Empty State Itu Penting?
| Situasi UX | Dampaknya Jika Desainnya Buruk |
|---|---|
| 🆕 Pengguna baru | Tidak tahu apa yang harus dilakukan |
| 🔍 Pencarian gagal | Merasa error atau aplikasi tidak bekerja |
| 📭 Halaman kosong setelah hapus | UI terasa mati, tidak responsif |
| 💬 Belum ada aktivitas | Terasa sunyi, tidak mengundang interaksi |
Komponen Ideal dalam Desain Empty State
✅ 1. Pesan Singkat & Jelas
Gunakan bahasa ramah seperti:
“Belum ada catatan di sini.”
“Mari mulai membuat sesuatu!”
🎯 2. Ilustrasi atau Ikon yang Relevan
Visual membantu memperkuat konteks—misal: amplop kosong, folder, karakter tersenyum
🧭 3. Tindakan yang Disarankan (CTA)
Arahkan user ke langkah berikutnya, misal:
“Tambah catatan baru”
“Lihat template”
“Kembali ke halaman utama”
💬 4. Nada Suara Positif
Hindari kata “kosong” yang bernada negatif. Gunakan narasi menyambut seperti:
“Ayo mulai dari awal yang seru!”
Contoh Empty State UX yang Baik
| Produk | Situasi & Empty State UX |
|---|---|
| Notion | Halaman baru → “Buat halaman dengan template” + icon |
| Gmail | Inbox kosong → Ilustrasi amplop + pesan “Kamu bebas hari ini!” |
| Google Drive | Folder kosong → tombol “Upload File” atau “Buat Dokumen” |
| Spotify | Playlist kosong → “Tambah lagu favoritmu” + ikon musik |
Tips Mendesain Empty State yang Efektif
- 🔄 Gunakan motion ringan agar tidak terasa kaku (contoh: icon bergetar halus)
- 📱 Pastikan responsif mobile—empty state harus enak dibaca di layar kecil
- 🎨 Selaras dengan branding visual—jangan asal pakai ilustrasi umum
- 🧠 Test dengan pengguna baru—lihat apakah mereka mengerti next step
- 🔄 Pertimbangkan konteks lokal—terjemahan atau humor harus sesuai budaya
Kesalahan Umum dalam Empty State UX
| Kesalahan UX | Dampak Negatif |
|---|---|
| ❌ Layar kosong tanpa teks | User merasa error atau aplikasi rusak |
| ❌ Tidak ada CTA | User tidak tahu harus ke mana selanjutnya |
| ❌ Ilustrasi generik/menyesatkan | Tidak memperkuat konteks dan membingungkan |
| ❌ Nada suara pasif atau negatif | Menurunkan semangat dan enggan melanjutkan |
Kesimpulan: Sambutlah Kekosongan dengan Arah yang Jelas
Empty state UX adalah peluang emas untuk menyambut, membimbing, dan membangun kepercayaan sejak layar pertama.
Jangan sia-siakan ruang kosong—ubah jadi momen interaksi yang positif.
Antarmuka bukan hanya tentang data.
Tapi juga tentang bagaimana kita menyiapkan ruang sebelum data itu hadir.
