Empty state adalah tampilan yang muncul ketika suatu halaman belum memiliki konten, misalnya keranjang belanja yang masih kosong atau hasil pencarian yang tidak ditemukan. Meski jarang menjadi fokus utama dalam desain, empty state yang dirancang dengan baik bisa memengaruhi pengalaman pengguna secara signifikan.
Apa Itu Empty State?
Empty state adalah kondisi di mana suatu bagian website atau aplikasi belum memiliki data untuk ditampilkan. Contohnya meliputi halaman riwayat transaksi yang masih kosong, hasil pencarian tanpa hasil, atau kotak masuk pesan yang belum memiliki percakapan sama sekali.
Mengapa Empty State Sering Diabaikan?
Banyak desainer fokus merancang tampilan saat konten sudah terisi penuh, sehingga kondisi kosong sering kali hanya ditampilkan dengan halaman putih polos atau pesan generik seperti “Tidak ada data”. Padahal, kondisi ini justru sering dialami pengguna baru yang baru pertama kali menggunakan produk Anda.
Dampak Empty State yang Buruk terhadap Pengguna
Empty state yang kosong tanpa penjelasan bisa membuat pengguna bingung, apakah terjadi kesalahan sistem atau memang belum ada data yang perlu ditampilkan. Kebingungan ini berpotensi membuat pengguna baru merasa produk Anda sulit digunakan sejak awal.
Prinsip Dasar Merancang Empty State yang Baik
1. Jelaskan Kondisi dengan Bahasa yang Ramah
Gunakan pesan yang jelas untuk menjelaskan mengapa halaman tersebut kosong. Misalnya, “Belum ada produk di keranjang Anda” lebih informatif dibanding sekadar “Kosong” tanpa konteks tambahan.
2. Berikan Panduan Langkah Selanjutnya
Selain menjelaskan kondisi, empty state yang baik juga mengarahkan pengguna pada tindakan selanjutnya. Contohnya, menyertakan tombol “Mulai Belanja Sekarang” pada halaman keranjang yang masih kosong.
3. Gunakan Ilustrasi yang Relevan
Ilustrasi sederhana bisa membantu memperjelas kondisi empty state sekaligus membuat tampilan terasa lebih ramah, dibanding hanya menampilkan teks polos tanpa elemen visual pendukung.
4. Sesuaikan dengan Konteks Penggunaan
Pesan empty state sebaiknya disesuaikan dengan konteks spesifik halaman tersebut. Pesan untuk halaman pencarian yang tidak menemukan hasil tentu berbeda dengan pesan untuk halaman riwayat transaksi yang memang belum memiliki data.
Contoh Penerapan Empty State yang Baik
- Hasil pencarian kosong, disertai saran kata kunci alternatif atau tombol untuk mereset filter pencarian
- Keranjang belanja kosong, disertai rekomendasi produk populer untuk mendorong pengguna mulai berbelanja
- Kotak masuk pesan kosong, disertai ajakan untuk mulai berinteraksi dengan fitur yang tersedia
- Dashboard tanpa data, disertai panduan singkat langkah pertama yang perlu dilakukan pengguna baru
Manfaat Empty State yang Dirancang dengan Baik
Empty state yang informatif membantu mengurangi kebingungan pengguna baru, sekaligus mengarahkan mereka pada tindakan yang relevan. Dengan begitu, pengalaman pengguna tetap terasa lancar, bahkan saat belum ada konten yang bisa ditampilkan.
Kesimpulan
Empty state adalah detail kecil yang sering terlewat, namun memiliki dampak nyata terhadap pengalaman pengguna, terutama bagi pengguna baru. Dengan pesan yang jelas, panduan langkah selanjutnya, dan ilustrasi yang relevan, kondisi kosong pada produk Anda bisa tetap terasa ramah dan membantu. Kemal Studio memperhatikan detail seperti empty state dalam setiap proyek UI/UX, agar pengalaman pengguna tetap optimal di setiap kondisi halaman.
