Cara Membuat Empty State yang Mengarahkan Pengguna

Kamu membuka aplikasi catatan yang baru diunduh, dan yang tampil hanya latar putih dengan tulisan kecil “Belum ada catatan”. Tidak ada tombol, tidak ada petunjuk. Sebagian orang langsung menutup aplikasi di titik itu. Empty state, layar yang muncul ketika belum ada data untuk ditampilkan, sering jadi tempat pertama pengguna memutuskan apakah produk ini layak dilanjutkan.

Merancang empty state bukan soal menambahkan ilustrasi lucu di tengah layar. Ada keputusan isi, urutan tindakan, dan cara menulis yang menentukan apakah pengguna bergerak maju atau berhenti. Uraian berikut membahas komponen yang perlu ada, kapan memakai ilustrasi, dan kesalahan yang paling sering terjadi.

Kenapa empty state menentukan kesan pertama

Pengguna baru hampir selalu bertemu empty state lebih dulu, sebelum fitur apa pun terpakai. Di aplikasi daftar tugas, halaman pertama setelah onboarding adalah daftar kosong. Di dasbor analitik, grafik belum terisi karena belum ada data masuk. Momen ini menentukan apakah pengguna paham apa yang harus dilakukan atau menyimpulkan aplikasinya rusak.

Masalahnya, empty state sering dikerjakan paling akhir, setelah alur utama selesai. Desainer menambahkan teks seadanya karena menganggap layar ini jarang dilihat. Padahal bagi pengguna baru, inilah layar yang paling sering dilihat. Prinsip yang sama berlaku seperti saat merancang antarmuka untuk pengguna baru: setiap layar pertama harus menjawab pertanyaan “apa yang bisa saya lakukan di sini”.

Empat komponen yang wajib ada

Empty state yang berguna hampir selalu memuat empat hal. Tidak semua harus berupa elemen visual terpisah, tapi fungsinya perlu terpenuhi.

• Penjelasan singkat tentang mengapa layar ini kosong, bukan sekadar menyatakan bahwa datanya tidak ada.
• Satu tindakan utama yang jelas, biasanya berupa tombol untuk memulai hal pertama.
• Petunjuk alternatif bila pengguna datang dengan kondisi berbeda, misalnya opsi impor data atau menghubungkan akun.
• Konteks hasil, yaitu gambaran apa yang akan terlihat setelah data terisi, supaya pengguna tahu manfaatnya.

Contoh penerapannya pada aplikasi pengelola proyek. Alih-alih menulis “Tidak ada proyek”, tulis “Proyek yang kamu buat akan muncul di sini beserta tenggat dan anggotanya”. Lalu sediakan tombol “Buat proyek pertama” dan tautan kecil “Impor dari spreadsheet” untuk pengguna yang sudah punya data.

Membedakan empty state berdasarkan penyebabnya

Layar kosong tidak selalu berarti hal yang sama. Ada tiga kondisi yang perlu dibedakan karena tindakan yang tepat juga berbeda.

Kosong karena belum ada data

Ini kondisi paling umum pada pengguna baru. Fokusnya mendorong tindakan pertama. Tombol utama harus langsung terlihat tanpa perlu menggulir, dan teksnya menyebut hasil konkret, bukan label generik seperti “Tambah”.

Kosong karena filter terlalu sempit

Pengguna sudah punya data, tapi penyaringan menghasilkan nol baris. Menampilkan ilustrasi selamat datang di kondisi ini membingungkan. Yang dibutuhkan adalah penjelasan bahwa filter sedang aktif, plus tombol untuk mereset filter. Ini kasus serupa dengan penyaringan multi-kondisi pada query basis data: ketika hasilnya nol, yang perlu diperiksa adalah parameternya, bukan datanya. Pola berpikir itu bisa kamu lihat pada cara menampilkan data dari database dengan filter multi-kondisi di PHP, di mana kesalahan satu kondisi sudah cukup membuat seluruh hasil kosong.

Kosong karena kesalahan sistem

Permintaan gagal, koneksi terputus, atau data gagal dimuat. Ini bukan empty state biasa, melainkan kondisi error. Perlakukan dengan pesan yang menyebut penyebab dan tindakan pemulihan, misalnya tombol “Coba lagi”. Menampilkan ilustrasi ramah di sini akan terasa seperti menyembunyikan masalah.

Menulis teks yang mengarahkan

Teks empty state punya satu tugas: membuat pengguna tahu langkah berikutnya dalam hitungan detik. Kalimat seperti “Belum ada apa pun di sini” gagal karena hanya mengulang keadaan. Ganti dengan kalimat yang menyebut hasil.

Lemah: “Data kosong.” Lebih baik: “Belum ada laporan bulan ini. Buat laporan pertamamu untuk melihat ringkasan penjualan.”

Panjang idealnya satu sampai dua kalimat. Hindari menumpuk penjelasan teknis tentang struktur data. Bila perlu panduan lebih panjang, taruh di tautan terpisah agar layar tetap ringkas. Cara menata label dan placeholder pada formulir juga menekankan hal serupa: teks pendek yang tepat lebih membantu daripada paragraf panjang yang menjelaskan segalanya.

Kapan ilustrasi membantu, kapan justru mengganggu

Ilustrasi berguna ketika layar kosong perlu terasa ramah, misalnya pada aplikasi konsumen atau produk yang menyasar pengguna awam. Namun ilustrasi besar di tengah layar memakan ruang yang seharusnya dipakai tombol tindakan. Pada layar sempit, gambar dekoratif sering mendorong tombol utama ke bawah lipatan.

Aturan praktisnya: letakkan tindakan lebih dulu, ilustrasi belakangan. Bila ruang terbatas, hilangkan ilustrasi dan pertahankan teks serta tombol. Ilustrasi yang menggambarkan hasil akhir, misalnya sketsa daftar yang sudah terisi, lebih membantu daripada gambar abstrak.

Kesalahan yang sering terjadi

Beberapa pola berulang muncul saat meninjau empty state di berbagai produk.

• Tombol tindakan disembunyikan di menu, padahal ini satu-satunya jalan keluar dari layar kosong.
• Semua kondisi kosong memakai desain yang sama, termasuk saat filter aktif atau sistem error.
• Teks menyalahkan pengguna, misalnya “Kamu belum mengatur apa pun”.
• Tombol utama dan tombol sekunder diberi bobot visual sama sehingga pengguna ragu.
• Ilustrasi memakan lebih dari setengah tinggi layar pada perangkat mobile.

Untuk memeriksa apakah empty state benar-benar bekerja, uji dengan tugas sederhana: minta pengguna baru mencapai tujuan tertentu dari layar kosong tanpa bantuan. Bila mereka ragu lebih dari beberapa detik atau menebak-nebak, teks dan tombolnya perlu diperbaiki. Metode uji semacam ini cukup ringan dan bisa dijalankan dengan beberapa peserta saja.

Hal serupa berlaku saat membangun komponen yang memuat daftar dari basis data. Selector yang tepat, seperti dibahas pada memilih selector jQuery: ID, class, atribut, atau filter, menentukan apakah elemen empty state muncul di waktu yang benar dan tidak tertukar dengan wadah data yang sudah terisi.

Ringkasan

Empty state yang baik menyebut penyebab layar kosong, menawarkan satu tindakan utama yang jelas, dan membedakan kondisi belum ada data, filter aktif, serta error. Dahulukan tombol, baru pertimbangkan ilustrasi. Uji dengan pengguna baru untuk memastikan mereka tahu harus berbuat apa tanpa perlu menebak.

Pertanyaan yang Sering Diajukan

Apakah setiap empty state perlu ilustrasi?

Tidak. Ilustrasi hanya membantu bila ruang mencukupi dan produk menyasar pengguna awam. Bila layar sempit atau pengguna sudah terbiasa dengan produk sejenis, teks singkat dan tombol tindakan sudah cukup.

Berapa banyak tindakan yang boleh ditampilkan?

Satu tindakan utama, ditambah paling banyak satu atau dua alternatif sekunder dengan bobot visual lebih rendah. Lebih dari itu membuat pengguna ragu memilih.

Bagaimana membedakan empty state dengan tampilan error?

Empty state muncul karena memang belum ada data, sedangkan error muncul karena permintaan gagal. Error perlu menyebut penyebab dan menyediakan tombol pemulihan seperti mencoba ulang, sementara empty state mengarahkan ke tindakan pertama.