Bayangkan pengguna membuka aplikasi untuk pertama kali. Belum ada data, belum ada konten, hanya ruang kosong.
Kalau tidak ditangani dengan baik, momen ini bisa membuat user bingung atau bahkan langsung keluar.
Inilah peran Zero State UX—desain khusus untuk mengoptimalkan pengalaman ketika layar belum memiliki konten.
“The first experience sets the tone for everything after.”
— UX Collective
Apa Itu Zero State UX?
Zero State UX adalah desain yang muncul saat halaman atau aplikasi tidak memiliki konten sama sekali, biasanya pada:
- Pengalaman pertama (onboarding)
- Halaman baru tanpa data
- Hasil pencarian kosong
- Data dihapus atau belum diisi
Zero State bukan sekadar layar kosong, tapi kesempatan emas untuk menyambut, memberi arahan, dan mendorong aksi.
Internal Link: Empty State vs Error State
Zero State sering disalahartikan sama dengan error, padahal konteksnya berbeda.
Baca juga: Empty State UX – Menyambut Pengguna Saat Tidak Ada Data
Baca juga: Error Message UX – Bukan Teguran, Tapi Panduan yang Membantu
Mengapa Zero State UX Penting?
| Situasi | Dampak Jika Buruk |
|---|---|
| 🆕 Pertama kali pakai | User bingung & langsung uninstall |
| 🔍 Pencarian kosong | User mengira aplikasi error |
| 📭 Data belum diisi | UI terasa mati & tidak memberi motivasi |
| 📉 Tidak ada CTA jelas | User tidak tahu langkah berikutnya |
Komponen Utama dalam Desain Zero State
✅ 1. Pesan Ramah & Jelas
Gunakan bahasa yang menyambut, bukan menegur.
“Belum ada catatan di sini. Yuk, mulai buat catatan pertamamu.”
🎨 2. Ilustrasi atau Visual Menarik
Ilustrasi sederhana bisa membuat layar kosong tetap hidup.
🧭 3. Tindakan yang Disarankan (CTA)
Ajak pengguna melakukan aksi, misalnya:
“Tambah catatan baru” atau “Upload file pertama Anda.”
💡 4. Nada Positif
Hindari kata negatif seperti “kosong” atau “tidak ada.”
Gunakan narasi menyemangati: “Mari mulai sesuatu yang baru!”
Contoh Zero State UX yang Efektif
| Produk | Zero State UX |
|---|---|
| Notion | Halaman kosong → CTA “Gunakan template” + ikon senyum |
| Gmail | Inbox kosong → ilustrasi amplop + teks “Kamu bebas hari ini 🎉” |
| Spotify | Playlist kosong → CTA “Tambah lagu favoritmu sekarang” |
| Slack | Workspace baru → pesan sambutan + tips membuat channel |
Tips Mendesain Zero State UX
- ✨ Tambahkan sedikit humor agar terasa manusiawi
- 📱 Pastikan responsif di mobile → jangan biarkan area kosong membingungkan
- 🖼️ Gunakan ilustrasi brand untuk memperkuat identitas visual
- 🧠 Tes dengan user baru → lihat apakah mereka paham apa yang harus dilakukan
- 🔄 Berikan opsi alternatif → misalnya template, contoh, atau tur singkat
Kesalahan Umum dalam desain layar kosong
| Kesalahan UX | Dampak Negatif |
|---|---|
| ❌ Layar benar-benar kosong | User mengira aplikasi error atau bug |
| ❌ Tidak ada CTA | User bingung langkah berikutnya |
| ❌ Nada negatif | Menurunkan motivasi (contoh: “Tidak ada apa-apa”) |
| ❌ Ilustrasi generik | Tidak relevan dengan konteks aplikasi |
Kesimpulan: Awal yang Kosong Harus Tetap Bermakna
Desain layar kosong adalah kesempatan untuk menyambut pengguna, memberi arah, dan membangun kesan pertama.
Dengan pesan ramah, ilustrasi menarik, dan CTA jelas, layar kosong berubah jadi momen interaksi yang positif.
