Digital Transformation
Empty State
TL;DR: Empty state adalah tampilan yang muncul ketika sebuah halaman atau fitur belum berisi data, misalnya keranjang kosong, hasil pencarian nihil, atau dashboard pengguna baru. Empty state yang baik menjelaskan kenapa layar kosong dan menawarkan satu tindakan berikutnya yang jelas.
Apa itu Empty State?
Setiap produk digital punya momen kosong. Pengguna baru membuka dashboard yang belum berisi apa pun, pencarian tidak menemukan hasil, atau daftar pesanan masih nol. Momen itu sering diperlakukan sebagai bug visual yang cukup ditutup dengan tulisan "Tidak ada data", padahal ini salah satu titik paling menentukan dalam pengalaman awal.
Dalam praktik UI/UX, empty state dihitung sebagai satu state resmi bersama loading, error, dan filled. Tim yang memakai design system biasanya mendefinisikan keempatnya sekaligus, supaya tidak ada halaman yang lolos ke produksi dengan layar putih tanpa penjelasan.
Tiga Jenis Empty State
| Jenis | Kapan muncul | Yang perlu ditampilkan |
|---|---|---|
| First use | Pengguna baru, belum pernah membuat data | Penjelasan singkat manfaat fitur, satu tombol aksi utama |
| No results | Pencarian atau filter tidak menemukan apa pun | Saran koreksi, tombol reset filter, alternatif terdekat |
| Cleared | Semua item sudah selesai atau dihapus | Konfirmasi positif, jalan kembali ke daftar utama |
Ketiganya butuh nada yang berbeda. First use bersifat mengundang, no results bersifat membantu, dan cleared bersifat menenangkan. Menyamakan ketiganya dengan satu ilustrasi generik adalah kesalahan yang paling sering terjadi.
Kenapa Penting?
Empty state pertama kali dilihat justru oleh pengguna yang paling rapuh, yaitu pengguna baru yang belum punya alasan untuk bertahan. Layar kosong tanpa arah membuat mereka menebak, dan menebak adalah alasan umum orang menutup tab.
Formula praktisnya tiga baris: satu kalimat yang menjelaskan situasi, satu kalimat yang menjelaskan manfaat, satu tombol aksi. Hindari lelucon panjang dan ilustrasi besar yang mendorong tombol ke bawah layar. Ketika ragu, uji dengan usability testing singkat pada lima orang yang belum pernah memakai produk Anda.
Pertanyaan Umum
Apakah empty state harus pakai ilustrasi?
Tidak harus. Ilustrasi membantu menurunkan kesan error, tetapi teks yang jelas dan satu tombol aksi jauh lebih menentukan. Jika ilustrasi membuat tombol turun ke bawah lipatan layar, hapus ilustrasinya.
Apa bedanya empty state dengan error state?
Empty state berarti sistem bekerja normal tetapi memang belum ada data. Error state berarti ada yang gagal. Menyamakan keduanya membuat pengguna mengira produk Anda rusak padahal tidak.