Mengapa Desain Empty State UI Sama Pentingnya dengan Halaman Utama

Azura Team • 2026-01-12

Azura Labs - Kalau ngomongin UI/UX, kebanyakan orang langsung fokus ke homepage, landing page, atau halaman utama aplikasi. Wajar sih, karena itu yang pertama kali dilihat user. Tapi ada satu elemen yang sering diremehkan bahkan kadang dianggap “nanti aja” padahal dampaknya besar ke pengalaman pengguna, yaitu empty state UI.

Empty state adalah kondisi ketika konten belum ada. Misalnya :

Inbox masih kosong
Belum ada data di dashboard
Daftar favorit masih nol
Belum ada transaksi
Hasil pencarian tidak ditemukan

Sekilas terlihat sepele. Tapi justru di momen inilah user paling rentan bingung, ragu, atau bahkan langsung keluar dari aplikasi. Makanya, desain empty state UI itu sama pentingnya dengan halaman utama.

Apa Itu Empty State UI (Versi Simpel)

Empty state UI adalah tampilan yang muncul ketika tidak ada data untuk ditampilkan. Bukan error, bukan bug tapi kondisi yang normal, terutama untuk :

User baru
Fitur yang belum dipakai
Aktivitas yang belum dilakukan

Masalahnya, banyak aplikasi masih menampilkan empty state seperti ini :

“No data available.”

Titik. Selesai.

Tanpa penjelasan. Tanpa arahan. Tanpa empati.

Padahal dari sisi user, itu bisa terasa seperti :

“Ini maksudnya apa ya?”

“Aplikasi ini rusak?”

“Gue harus ngapain sekarang?”

Empty State = Momen Pertama User Berinteraksi

Buat user baru, empty state sering jadi pengalaman pertama mereka di sebuah fitur. Bahkan kadang :

Mereka belum pernah melihat versi “berisi”
Mereka belum tahu manfaat fitur tersebut

Kalau empty state-nya :

Kosong
Dingin
Nggak informatif

User bisa langsung kehilangan konteks.

Sebaliknya, empty state yang baik bisa :

Menjelaskan fungsi fitur
Memberi rasa “aman”
Mengajak user melakukan aksi pertama

Dengan kata lain, empty state adalah kesempatan emas untuk onboarding tanpa terasa seperti onboarding.

Empty State Bukan Sekadar “Halaman Kosong”

Kesalahan paling umum adalah menganggap empty state cuma placeholder. Padahal empty state yang bagus biasanya punya tiga elemen penting :

Penjelasan yang Jelas
User perlu tahu :
- Kenapa kosong
- Apakah ini normal
- Apakah ada yang salah atau tidak
Contoh :
“Kamu belum punya data transaksi karena belum melakukan pembelian.”
Ini jauh lebih manusiawi daripada “No data”.
Arahan yang Spesifik
Empty state seharusnya memberi petunjuk langkah berikutnya, bukan membiarkan user menebak.
Misalnya :
- Tombol “Tambah Data”
- CTA “Buat Proyek Pertama”
- Link “Cari Produk”
Empty state tanpa CTA itu kayak peta tanpa arah.
Nada Bahasa yang Ramah
Nggak harus kaku dan formal. Justru empty state adalah tempat yang pas buat :
- Copywriting santai
- Bahasa manusia
- Sedikit humor (kalau sesuai brand)
Contoh :
“Sepi banget di sini 😅 Yuk mulai dengan nambah task pertamamu!”
Ini bikin user merasa ditemani, bukan ditinggal.

Dampak Empty State ke UX & Retention

Empty state UI punya pengaruh besar ke :

User activation
Feature adoption
Retention

Kalau user :

Bingung → mereka keluar
Nggak tahu harus ngapain → mereka berhenti
Merasa aplikasi ribet → mereka uninstall

Sebaliknya, empty state yang baik bisa :

Mendorong user mencoba fitur
Mengurangi bounce rate
Meningkatkan engagement

Banyak produk digital gagal bukan karena fiturnya jelek, tapi karena user nggak pernah sampai ke tahap pakai fitur itu.

Empty State vs Error State

Ini penting :

Empty state ≠ error state

Empty state = kondisi normal
Error state = ada masalah

Kalau empty state didesain seperti error (warna merah, pesan negatif), user bisa salah paham dan mengira aplikasinya rusak.

Empty state seharusnya :

Tenang
Informatif
Optimis

Contoh Empty State yang Buruk

Beberapa contoh yang sering ditemui :

Layar putih kosong
Tulisan “Data tidak tersedia”
Tidak ada tombol apa pun
Tidak ada ilustrasi atau konteks

Masalahnya :

User tidak tahu apa yang harus dilakukan
Tidak ada edukasi
Tidak ada dorongan aksi

Ini seperti buka toko tapi lampunya mati dan nggak ada petunjuk apa pun.

Contoh Empty State yang Baik

Empty state yang efektif biasanya :

Pakai ilustrasi sederhana
Copywriting singkat tapi jelas
CTA yang relevan

Misalnya :

“Belum ada proyek di sini. Buat proyek pertamamu dan mulai kolaborasi sekarang.”

Satu kalimat, satu tombol, satu arah. Jelas.

Kenapa Empty State Harus Dipikirkan Sejak Awal

Banyak tim produk mendesain empty state di akhir atau bahkan lupa sama sekali. Padahal empty state seharusnya :

Dirancang barengan dengan happy path
Jadi bagian dari flow utama
Disesuaikan dengan konteks user

Terutama untuk :

Aplikasi baru
Fitur baru
User pertama kali

Karena faktanya, kondisi kosong itu pasti terjadi.

Empty State = Kesempatan Branding

Empty state juga bisa jadi media branding :

Tone of voice
Kepribadian produk
Nilai yang ingin disampaikan

Brand yang fun bisa playful.

Brand profesional bisa tetap ramah tapi rapi.

Yang penting: konsisten dengan identitas produk.

Desain empty state UI bukan pelengkap, bukan aksesoris, dan jelas bukan hal sepele. Justru di saat “tidak ada apa-apa”, pengalaman user sedang diuji.

Empty state yang baik :

Mengedukasi
Mengarahkan
Mengurangi friksi
Membuat user merasa ditemani

Kalau halaman utama adalah pintu depan, maka empty state adalah petugas yang menyambut dan mengarahkan. Dan tanpa petugas itu, banyak user akan langsung pergi.

Baca Juga :