Empty State

Empty State adalah pola tampilan yang muncul ketika tidak ada data atau konten yang tersedia di suatu halaman, modul, atau komponen.

Tujuannya bukan hanya menampilkan “ketiadaan data,” tetapi juga memberikan konteks, empati, dan panduan kepada pengguna tentang apa yang bisa dilakukan selanjutnya.

Empty State memiliki peran penting dalam menjaga pengalaman pengguna tetap positif, bahkan ketika sistem belum memiliki informasi untuk ditampilkan.

Penggunaan

Gunakan Empty State untuk menjelaskan kondisi halaman kosong, misalnya ketika belum ada data, belum ada aktivitas, atau hasil pencarian belum ditemukan. Selain menampilkan keadaan kosong, pola ini juga berfungsi untuk memberikan arah tindakan berikutnya kepada pengguna melalui CTA seperti “Tambah Data,” “Mulai Sekarang,” atau “Unggah File.”

Empty State juga dapat disertai ilustrasi atau ikon pendukung yang membantu pengguna memahami konteks secara visual dan menjaga tampilan tetap ramah. Hindari menampilkan halaman kosong tanpa penjelasan apa pun, karena dapat membuat pengguna bingung atau mengira sistem mengalami error.

Anatomi

Illustration / Placeholder

Elemen visual yang memberikan konteks visual secara ringan dan empatik.

Container

Area utama yang menampung seluruh elemen Empty State.

Title

Teks utama yang menjelaskan kondisi kosong secara singkat.

Deskripsi

Teks pendukung yang memberikan informasi tambahan atau arahan berikutnya.

Button (CTA)

Tombol tindakan yang mengajak pengguna melakukan langkah berikut (opsional).

Cara Penggunaan yang Disarankan

✅ Disarankan

Sertakan CTA yang relevan dan langsung membantu pengguna untuk memulai tindakan. Serta beri penjelasan singkat dan positif untuk menjaga nada komunikasi tetap ramah.

❌ Dihindari

Hindari teks yang terlalu pasif seperti hanya menampilkan "Kosong" tanpa konteks.

✅ Disarankan

Gunakan ilustrasi sederhana dengan gaya visual yang konsisten dengan sistem desain.

❌ Dihindari

Jangan gunakan ilustrasi yang terlalu berlebihan atau mencolok hingga mengalihkan fokus dari pesan utama. Hindari penggunaan warna atau elemen visual yang bertolak belakang dengan gaya antarmuka utama.

Penerapan

Product Management

Contoh ini digunakan pada halaman Product Management ketika belum ada data produk yang tersedia.
Tampilan ini memberikan konteks bahwa halaman masih kosong, sekaligus mengarahkan pengguna untuk memulai tindakan, seperti membuat grup produk baru melalui tombol “Buat Group Produk” di sisi kanan halaman.
Empty State ini menjaga halaman tetap informatif dan ramah, serta memastikan pengguna memahami langkah selanjutnya tanpa merasa kebingungan.

Spesifikasi