Pola desain empty state yang mengurangi kebingungan dan mengarahkan pengguna ke langkah setup berikutnya yang sukses, dengan contoh copy, tata letak, dan checklist yang bisa Anda terapkan cepat.
Layar kosong tidak netral. Ia menciptakan jeda di mana orang mulai menebak apa yang harus dilakukan, apakah mereka melewatkan langkah, atau apakah produknya berfungsi sama sekali. Saat setup, jeda itu mahal. Ia mengubah "saya mulai" menjadi "nanti saja."
Empty state adalah apa yang dilihat pengguna ketika belum ada yang bisa ditampilkan karena mereka belum membuat, mengimpor, atau menghubungkan apa pun. Ini bukan layar loading, pesan error, atau peringatan izin. Ini momen tepat sebelum ada nilai, ketika aplikasi perlu membantu pengguna mencapai hasil bermakna pertama.
Empty state yang baik punya satu tugas: menggerakkan pengguna ke tindakan sukses berikutnya dengan sesedikit pemikiran mungkin. "Sukses" penting. Langkah berikutnya harus menghasilkan outcome nyata (proyek pertama, sumber data terhubung, item pertama dibuat), bukan formulir buntu atau tur produk yang samar.
Momen-momen ini muncul lebih sering dari yang tim duga: login pertama setelah mendaftar, workspace baru, tab fitur tanpa item (proyek, pelanggan, file), atau jalur setup di mana impor dilewati dan tidak ada apa-apa.
Ketika empty state melakukan tugasnya, ia menjawab tiga pertanyaan dengan cepat:
Contoh: di Koder.ai, pengguna baru bisa membuka workspace baru dan melihat belum ada aplikasi. Empty state yang kuat mengatakan dengan jelas bahwa belum ada yang dibuat, menawarkan satu tindakan berikutnya yang jelas seperti "Buat aplikasi pertama Anda," dan menambahkan catatan kecil yang menenangkan (mis. bahwa ekspor source code dan snapshot tersedia setelah mereka mulai). Tujuannya mengubah "tidak ada apa-apa" menjadi "saya bisa mencapai hasil kerja pertama."
Bagi pengguna baru, layar kosong bisa terasa seperti aplikasi berhenti atau mereka melakukan sesuatu yang salah. Pikiran cepat mengisi celah, dan biasanya tidak menguntungkan Anda.
Kebanyakan orang diam-diam menanyakan hal yang sama:
Emosi di balik pertanyaan itu mendorong perilaku. Ketidakpastian membuat orang ragu. Takut salah membuat mereka menghindari tombol utama. Tidak sabar membuat mereka menutup aplikasi jika langkah berikutnya tidak jelas dalam beberapa detik.
Empty state untuk pengguna baru dan untuk pengguna mahir menyelesaikan masalah berbeda. Pengguna baru butuh konteks dan rasa aman karena mereka belum tahu kosakata produk Anda. Pengguna kembali ingin kecepatan: cara cepat membuat item lain, mengimpor data, atau mengulang aksi yang sudah dikenal.
Empty state setup juga berbeda dari status error dan loading. Loading berkata "tunggu, sesuatu sedang terjadi." Error berkata "ada yang gagal, ini penyebabnya." Setup berkata "belum ada apa-apa di sini, dan itu normal. Ini cara memulai."
Contoh konkret: jika seseorang membuka workspace baru di Koder.ai dan melihat halaman Projects kosong, mereka tidak memikirkan fitur. Mereka berpikir, "Mulai dari prompt, impor kode, atau pilih template, dan apakah itu akan merusak sesuatu?" Empty state Anda harus menjawab itu tanpa mengirim mereka ke dokumentasi.
Empty state yang baik tidak terasa kosong. Ia bertindak seperti rambu: "Ini fungsinya, dan ini klik berikutnya."
Struktur yang bekerja di sebagian besar alur setup punya tiga bagian:
Jaga penjelasan tetap ringkas. Jika butuh paragraf untuk menjelaskan layar, Anda meminta pengguna berpikir terlalu keras. Targetkan 1–2 kalimat pendek dengan kata-kata biasa seperti "Tambahkan proyek pertama Anda" atau "Buat workspace pertama Anda."
Lalu buat langkah berikutnya jelas dengan satu tombol utama. Jika Anda menampilkan tiga tombol setara, Anda meminta pengguna memilih jalur sebelum mereka memahami halaman. Jika harus menawarkan alternatif (impor, template, lewati), buat mereka tampil lebih tenang secara visual dibanding aksi utama.
Gunakan baris penenang untuk menghapus rasa takut umum: membuat kesalahan, buang waktu, atau butuh keterampilan teknis. Petunjuk kecil tentang apa yang terjadi berikutnya dan apa yang bisa dibatalkan membantu lebih dari penjelasan panjang.
Contoh copy untuk layar "Projects" untuk pengguna baru:
Judul: Mulai proyek pertama Anda
Penjelasan: Proyek menampung setup dan rilis aplikasi Anda.
Aksi utama: Buat proyek
Penenang: Sekitar 2 menit. Anda bisa mengganti namanya kapan saja.
Jika produk Anda mendukung beberapa cara untuk memulai (membangun dari chat, impor, atau template, seperti alat seperti Koder.ai), tetap jadikan "Buat" sebagai default dan tempatkan "Impor" dan "Gunakan template" sebagai aksi sekunder di bawahnya.
Empty state gagal ketika copy bicara tentang fitur alih-alih apa yang didapat pengguna. Kata-kata Anda harus dengan cepat menjawab: Apa layar ini? Kenapa saya harus melakukan sesuatu di sini? Apa yang harus saya lakukan selanjutnya?
Formula judul sederhana adalah Hasil + objek. Sebutkan hasil dan apa yang akan mereka buat, bukan nama fitur internal.
Untuk teks badan, gunakan apa itu + kenapa penting dalam satu atau dua kalimat:
"Pelanggan adalah orang yang Anda jual. Tambahkan satu sekarang agar Anda bisa mengirim faktur dan melacak pembayaran."
CTA harus dimulai dengan kata kerja jelas dan menyertakan kata benda spesifik. Hindari tombol samar seperti "Mulai" ketika ada beberapa jalur.
Tambahkan microcopy tepat di samping pilihan yang terasa berisiko. Penegasan kecil seringkali lebih berguna daripada penjelasan panjang:
Jika produk Anda menghasilkan keluaran untuk pengguna (seperti Koder.ai), tetapkan ekspektasi supaya orang tahu mereka tidak berkomitmen pada versi akhir: "Kami akan membuat draf pertama. Anda bisa meninjau dan mengedit sebelum deploy."
Empty state yang baik harus terbaca seperti rambu, bukan poster. Tata letak perlu urutan jelas supaya orang bisa melihat sekali, mengerti, dan bertindak.
Gunakan hierarki sederhana yang mengikuti cara mata memindai halaman: judul, satu kalimat, CTA utama, lalu aksi sekunder yang lebih tenang (impor, template, lewati).
Letakkan tombol utama dekat dengan pesan. Jika pengguna harus membaca, menggulir, lalu memutuskan, mereka sering berhenti. Pola umum adalah blok rapat (judul + badan + CTA), dengan ruang putih lebih banyak antara blok itu dan elemen lain (navigasi, footer, panel samping).
Ikon dan ilustrasi kecil bisa membantu pemindaian, tapi hanya jika menambah makna. Ikon folder di samping "Belum ada proyek" berguna. Maskot acak biasanya tidak. Jika menggunakan ilustrasi, pertahankan kecil dan letakkan di atas judul supaya tidak bersaing dengan CTA.
Salah satu pola terkuat adalah menampilkan pratinjau kecil kesuksesan: kartu contoh, satu baris demo di tabel, atau tile contoh pudar. Di alat seperti Koder.ai, layar kosong "Apps" bisa menampilkan satu tile contoh app (nama, status, terakhir diperbarui) supaya pengguna langsung memahami apa yang akan mereka buat.
Saat seseorang menemukan layar kosong, biasanya mereka ingin salah satu dari tiga hal: mulai dari awal, membawa data, atau bergerak cepat dengan starter. Empty state yang baik membuat jalur-jalur itu jelas tanpa memaksa pengguna mempelajari produk.
Utamakan "Buat" ketika kemenangan nyata pertama adalah membuat sesuatu baru: proyek, workspace, halaman, atau catatan pertama. Ini paling cocok ketika pengguna bisa menyelesaikannya cepat dan aksi bisa dibatalkan.
Jika pembuatan memakan waktu lebih lama, pecah menjadi langkah pertama yang lebih kecil (mis. "Buat draf") supaya mereka bisa maju tanpa merasa terkunci.
Utamakan "Impor" ketika kebanyakan pengguna baru datang dengan sistem, file, atau akun yang perlu dihubungkan. Empty state harus menyatakan apa yang didukung impor dan apa yang mereka dapatkan setelahnya (mis. pemetaan kolom dan item dibuat).
Cara praktis memilih CTA utama adalah menggunakan konteks. Jika pengguna datang dari konten migrasi, sorot Impor. Jika mereka meng-klik tombol "proyek baru" yang kosong, sorot Buat. Jika setup kompleks, sorot Template.
Utamakan template ketika produk Anda punya titik awal yang umum dan pengguna lebih ingin menyesuaikan daripada merancang. Namai template berdasarkan hasil ("Pipeline penjualan", "Perencana mingguan"), bukan fitur.
Opsi aman "Coba dengan data contoh" mengurangi rasa takut. Jelaskan bahwa itu bisa dihapus. Untuk builder berfokus chat seperti Koder.ai, proyek contoh bisa menunjukkan bentuk app yang bekerja sebelum pengguna menulis prompt sendiri.
Layar kosong bukan netral. Yang terbaik membuat tindakan sukses berikutnya terasa jelas, aman, dan cepat.
Contoh: jika seseorang membuka CRM baru dan melihat tab "Contacts" kosong, kemenangan tercepat adalah "Tambahkan kontak pertama Anda." Batasi ke nama + email, tawarkan "Impor CSV" sebagai fallback, dan yakinkan bahwa mereka bisa mengubah field nanti.
Sebagian besar empty state yang "terjebak" gagal karena satu alasan: mereka membuat langkah berikutnya terasa berisiko atau tidak jelas.
Jika Anda menampilkan tiga tombol yang tampak sama penting, pengguna ragu. Pilih satu aksi utama dan satu sekunder. Simpan sisanya di balik "Opsi lain" yang lebih tenang.
"Dashboard kuat, peran fleksibel, pengaturan lanjutan" tidak memberi tahu orang apa yang harus dilakukan sekarang. Ganti dengan outcome yang mereka dapat setelah klik.
Contoh:
Form panjang di empty state terasa seperti komitmen. Jika butuh detail, dapatkan setelahnya. Mulai dari langkah terkecil yang menghasilkan sesuatu yang terlihat.
Alih-alih meminta nama, ukuran perusahaan, peran, dan tujuan sebelum apa pun muncul, mulai hanya dengan "Nama proyek" dan buat sisanya opsional setelah layar pertama ada.
Humor boleh, tapi bukan di tempat pengguna butuh kejelasan. "Tidak ada yang melihat di sini" menyia-nyiakan momen. Katakan dengan tepat apa yang terjadi setelah klik, dan apa yang tidak terjadi.
Beberapa pengguna tidak bisa membuat dari nol. Tawarkan jalur cadangan nyata: impor, mulai dari template, atau coba data contoh. Misalnya, jika seseorang menggunakan Koder.ai dan belum punya ide, "Mulai dari app contoh" bisa membawa mereka ke layar kerja tanpa menulis spes lengkap.
Pengguna baru harus memahami apa layar ini, kenapa penting, dan apa yang harus dilakukan selanjutnya dalam sekitar lima detik.
Penenang mengubah ragu menjadi aksi. Tambahkan baris kecil di dekat CTA yang mengurangi rasa takut, seperti "Anda bisa mengubah ini nanti" atau "Tidak ada yang dipublikasikan sampai Anda konfirmasi." Tetap tenang dan spesifik.
Tes sederhana: minta rekan menatap layar selama lima detik, lalu beri tahu apa yang mereka pikir akan terjadi jika mereka klik tombol utama. Jika mereka tidak bisa menjawab, perbaiki copy atau hierarki.
Jika Anda membangun alur setup di builder berfokus chat seperti Koder.ai, daftar periksa yang sama berlaku. Empty state harus mengundang satu tindakan sukses berikutnya: mulai dari template, impor data, atau hasil kerja pertama yang bisa Anda sunting dengan aman.
Seorang pendiri solo mendaftar ke Koder.ai dan membuka workspace baru. Mereka mendarat di layar Projects dengan nol aplikasi dan tidak tahu seperti apa "baik".
Alih-alih tabel kosong, empty state menampilkan janji singkat, langkah jelas berikutnya, dan catatan keamanan kecil. Berikut contoh copy dan CTA (estimasi waktu adalah placeholder yang perlu Anda validasi):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
Setelah pendiri mengklik Create your first app, layar berikutnya menanyakan satu pertanyaan sederhana: "What are you building?" dengan satu input dan 2 contoh prompt (mis. "CRM untuk agensi kecil" atau "Landing page dengan signup"). Pertahankan jalurnya sempit: satu field yang jelas, satu tombol yang jelas.
Layar kedua bisa berupa tinjauan rencana cepat (fitur, halaman, data), diikuti langkah build dan pratinjau kerja. Momen keberhasilan pertama adalah ketika pengguna bisa melakukan satu hal nyata di pratinjau itu, misalnya menambahkan catatan atau mengirim signup percobaan.
Setelah data ada, pengguna kembali tidak seharusnya melihat empty state yang sama lagi. Layar Projects bisa berubah menjadi tampilan "aplikasi terbaru" dengan satu aksi cepat menonjol (mis. Aplikasi baru) dan aksi lebih kecil (seperti Snapshots atau Deploy) berdasarkan apa yang mereka lakukan terakhir.
Untuk mengetahui apakah empty state Anda bekerja, lacak beberapa angka:
Pilih satu alur setup untuk diperbaiki minggu ini. Pilih yang punya drop-off terbesar, atau yang sering dihadapi pengguna baru. Tulis ulang empty state-nya supaya menjawab tiga pertanyaan dengan cepat: Apa ini? Kenapa saya melakukannya sekarang? Apa klik berikutnya?
Jaga perubahan kecil. Anda bukan mendesain ulang onboarding. Anda membuat tindakan sukses pertama terasa jelas.
Rencana sederhana satu minggu:
Setelah Anda mendapatkan satu kemenangan, standarkan. Buat pola internal singkat untuk empty state: spasi, gaya judul, aturan ikon/ilustrasi, dan tata letak CTA konsisten. Ketika tim mengikuti struktur yang sama, pengguna mempelajarinya sekali dan bergerak lebih cepat di mana-mana.
Jika Anda membangun aplikasi baru dan ingin merancang langkah setup dengan cepat, Koder.ai (koder.ai) dapat membantu Anda merancang alur di Planning Mode dan menghasilkan versi pertama untuk diuji, lalu iterasi berdasarkan di mana orang benar-benar ragu.
Empty state adalah apa yang dilihat pengguna ketika belum ada yang ditampilkan karena mereka belum membuat, mengimpor, atau menghubungkan apa pun. Ia harus menjelaskan fungsi layar dan mengarahkan ke tindakan sukses berikutnya, bukan membiarkan pengguna menebak.
Layar loading memberi tahu “tunggu, sesuatu sedang terjadi,” dan status error mengatakan “ada yang gagal, ini penyebabnya.” Setup empty state mengatakan “belum ada apa-apa di sini, dan itu normal,” lalu memandu pengguna untuk membuat, mengimpor, atau memulai dari template agar mereka bisa mencapai hasil nyata pertama.
Usahakan menjawab tiga hal dengan cepat: apa layar ini, kenapa kosong, dan apa yang harus dilakukan selanjutnya. Jika pengguna tidak mengerti dalam beberapa detik, mereka cenderung ragu, khawatir melakukan kesalahan, atau meninggalkan aplikasi.
Gunakan struktur sederhana: satu penjelasan singkat tentang fungsi area, satu aksi utama yang jelas, dan satu baris penenang yang mengurangi rasa takut atau usaha. Ringkas teksnya supaya pengguna tidak perlu membaca paragraf untuk tahu apa yang harus diklik.
Default-kan satu tombol utama yang sesuai langkah selanjutnya paling umum, dan buat semua opsi lain jelas terasa sekunder. Jika Anda menampilkan beberapa tombol yang tampak setara, orang sering berhenti karena tidak tahu jalur mana yang “benar.”
Utamakan “Buat” ketika memulai dari nol memberi kemenangan terlihat tercepat, seperti proyek atau data pertama. Utamakan “Impor” ketika kebanyakan pengguna baru sudah punya data di tempat lain. Utamakan “Template” ketika pengguna lebih ingin cepat beradaptasi daripada merancang dari awal.
Buat judul sebagai hasil + objek, misalnya “Buat proyek pertama Anda” bukan label fitur seperti “Proyek.” Untuk teks badan, tambahkan satu kalimat yang menjelaskan apa yang terjadi setelah klik supaya pengguna bisa memprediksi hasilnya.
Letakkan judul, satu kalimat singkat, dan tombol utama dalam satu blok rapat dengan hierarki visual jelas. Buat aksi sekunder lebih tenang dan dekat, dan hindari menempatkan tombol utama jauh di bawah sehingga pengguna harus menggulir atau mencari.
Taruh catatan keamanan singkat di dekat aksi, seperti “Anda bisa mengubah ini nanti” atau “Tidak ada yang dipublikasikan sebelum Anda konfirmasi.” Di tool seperti Koder.ai, juga berguna menyebutkan tindakan yang bisa dibalik seperti snapshots/rollback atau kemampuan mengekspor source code setelah mulai membangun.
Lacak seberapa sering pengguna melihat layar kosong, mengeklik CTA utama, dan menyelesaikan milestone yang dimaksud. Perhatikan juga waktu hingga keberhasilan pertama dan tingkat drop-off antara empty state dan langkah berikutnya, karena empty state bisa tetap gagal menghasilkan hasil walau mendapat klik.