Anatomi

Default Empty State

Empty State dengan aksi

Jenis dan variasi

Default Empty State

Komponen visual yang digunakan untuk memberikan informasi kepada pengguna saat tidak ada data, konten, atau hasil yang dapat ditampilkan, tanpa menyertakan opsi tindakan langsung.

Empty State dengan aksi

Komponen visual yang digunakan untuk memberikan informasi kepada pengguna saat tidak ada data, konten, atau hasil yang dapat ditampilkan, namun dilengkapi dengan elemen tindakan (action) untuk membantu pengguna mengambil langkah berikutnya.

Behaviors

Ditampilkan ketika data tidak tersedia

Empty State yang muncul saat data tidak tersedia dirancang untuk memberikan konteks kepada pengguna dan menawarkan solusi untuk melanjutkan.

Dapat ditampilkan dalam satu layar penuh atau menjadi bagian dari suatu komponen visual lain

Empty State layar penuh digunakan untuk halaman mandiri tanpa data utama, seperti dashboard kosong. Tujuannya adalah memberikan fokus penuh pada pesan yang ingin disampaikan tanpa gangguan dari elemen lain, memastikan pengguna memahami konteks dengan jelas. Selain itu, Empty State sebagai bagian dari komponen visual diterapkan pada elemen tertentu dalam halaman seperti Table, Card, dan lain-lain.

Panduan penggunaan

Memberikan konteks

Empty State harus menjelaskan alasan mengapa halaman kosong atau mengapa data tidak bisa ditampilkan.

Mengarahkan tindakan pengguna

Selalu informasikan langkah selanjutnya yang harus dilakukan oleh pengguna.

Disarankan

Berikan konteks yang detail untuk membuat pengguna mengetahui konteks kenapa Empty State ini muncul.

Dihindari

Hindari menggunakan pesan yang generik, tanpa konteks atau arahan yang dapat membuat pengguna frustrasi.

Panduan penulisan

Secara umum, Empty State (halaman kosong) digunakan ketika belum/tidak ada informasi yang dapat ditampilkan kepada pengguna, contohnya:

• Pada halaman riwayat dan pengguna belum memiliki riwayat apapun yang tercatat di dalam sistem.
• Pada halaman dasbor dan pengguna belum pernah melakukan tindakan apapun di dalam platform.
• Pada halaman hasil pencarian ketika sistem tidak dapat menemukan hasil pencarian yang sesuai dengan kata kunci terkait.
• Dan lainnya.

Jelaskan situasi

Penulisan pada halaman Empty State perlu didesain dengan fokus untuk memberikan informasi sejelas mungkin mengenai apa yang sedang terjadi. Pastikan penulisan mencakup informasi terkait fungsi dari halaman atau informasi yang akan muncul nantinya.

Dorongan untuk melakukan tindakan

Penulisan pada halaman Empty State dapat juga mencakup informasi mengenai hal apa yang dapat dilakukan oleh pengguna. Gunakan pilihan kata yang sifatnya mendorong (encouraging) agar pengguna dapat memahami bahwa mereka perlu melakukan sesuatu agar halaman ini tidak lagi kosong. Jika ada aksi yang bisa langsung dilakukan pengguna di halaman tersebut, dorongan ini bisa ditampilkan melalui interaksi tombol atau clickable text untuk memudahkan.

Penggunaan kapitalisasi

Judul dari halaman Empty State menggunakan kapitalisasi judul (title case), sedangkan bagian deskripsi menggunakan kapitalisasi kalimat (sentence case).