Desain layar kosong yang mendorong penyelesaian setup di aplikasi

Mengapa empty state bisa membuat atau merusak penyelesaian setup

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:

• Apa layar ini?
• Kenapa kosong?
• Apa yang harus saya lakukan sekarang?

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."

Apa yang dipikirkan pengguna saat melihat layar kosong

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:

• Untuk apa halaman ini?
• Apa yang harus saya lakukan pertama kali?
• Apa yang terjadi setelah saya melakukannya?
• Apakah saya akan merusak sesuatu?
• Bisakah saya mengubah atau membatalkan nanti?

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.

Struktur sederhana yang bekerja: jelaskan, pandu, tenangkan

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:

• Jelaskan maknanya: satu kalimat pendek yang mengatakan area ini untuk apa.
• Pandu langkah berikutnya: satu aksi utama yang sesuai dengan langkah paling umum.
• Tenangkan mereka: satu baris kecil yang mengurangi risiko atau usaha yang dirasakan.

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.

Pola copy yang mengurangi kebingungan

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.

• Bagus: "Tambahkan pelanggan pertama Anda" atau "Buat proyek pertama Anda"
• Lemah: "Pelanggan" atau "Modul proyek"

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.

• "Buat proyek"
• "Impor kontak"
• "Pilih template"
• "Hubungkan akun pembayaran"
• "Undang rekan"

Tambahkan microcopy tepat di samping pilihan yang terasa berisiko. Penegasan kecil seringkali lebih berguna daripada penjelasan panjang:

• "Anda bisa mengubah ini nanti."
• "Ini butuh sekitar 2 menit."
• "Anda bisa menghapus ini kapan saja."

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."

Pola tata letak yang membuat aksi berikutnya jelas

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.

Pilih jalur yang tepat: buat, impor, atau mulai dari template

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.

Create-first: saat memulai dari nol adalah tugasnya

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.

Import-first: ketika pengguna sudah punya data di tempat lain

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.

Template-first: ketika kecepatan lebih penting daripada kontrol

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.

Langkah demi langkah: desain empty state untuk penyelesaian setup

Layar kosong bukan netral. Yang terbaik membuat tindakan sukses berikutnya terasa jelas, aman, dan cepat.

Metode 5 langkah yang bisa digunakan ulang

1. Pilih satu milestone setup untuk diutamakan. Tentukan satu tindakan yang membuktikan pengguna mendapat nilai (buat proyek pertama, tambahkan rekan pertama, hubungkan sumber data pertama). Ketika mencoba mendukung tiga tujuan sekaligus, pengguna bingung.
2. Kurangi input ke minimum. Sisakan hanya yang diperlukan untuk mencapai milestone itu. Kolom opsional bisa ditambahkan lewat "Tambah detail" setelah kemenangan pertama.
3. Tulis elemen inti dalam urutan ini:
   • Judul: untuk apa area ini (kata sederhana, tanpa slogan)
   • Badan: apa yang terjadi setelah aksi (1 kalimat)
   • CTA utama: kata kerja yang sesuai dengan milestone
   • Satu aksi fallback: impor, data contoh, atau template (jelas sekunder)
4. Tambahkan penenang dan jalur keluar. Jawab kekhawatiran: "Apakah saya akan merusak sesuatu?" Baris singkat seperti "Anda bisa mengedit ini nanti" plus cara mudah untuk membatalkan, mengedit, atau menghapus mengurangi keraguan.
5. Uji dengan 3 orang, lalu pantau penyelesaian. Amati di mana mereka ragu dan apa yang mereka klik pertama. Setelah diluncurkan, pantau tampilan empty state, klik CTA utama, dan rasio penyelesaian milestone.

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.

Kesalahan umum yang membuat pengguna terjebak

Sebagian besar empty state yang "terjebak" gagal karena satu alasan: mereka membuat langkah berikutnya terasa berisiko atau tidak jelas.

1) CTA yang saling bersaing

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.

2) Copy yang menjual fitur alih-alih hasil

"Dashboard kuat, peran fleksibel, pengaturan lanjutan" tidak memberi tahu orang apa yang harus dilakukan sekarang. Ganti dengan outcome yang mereka dapat setelah klik.

Contoh:

• "Tambahkan pelanggan pertama untuk mulai melacak penjualan (butuh 1 menit)"
• "Hubungkan repo Anda untuk menghasilkan build pertama"

3) Meminta terlalu banyak sebelum kemenangan pertama

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.

4) Teks samar atau bercanda yang menyembunyikan apa yang akan terjadi

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.

5) Tidak ada fallback ketika aksi utama terblokir

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.

Daftar periksa cepat sebelum rilis

Pengguna baru harus memahami apa layar ini, kenapa penting, dan apa yang harus dilakukan selanjutnya dalam sekitar lima detik.

• CTA utama jelas dan spesifik. Gunakan kata kerja + objek, seperti "Buat proyek pertama Anda" atau "Tambahkan pelanggan pertama Anda," bukan "Lanjut" atau "OK."
• Hanya satu aksi terlihat utama. Ukuran, warna, dan penempatan harus membuat langkah berikutnya jelas.
• Opsi sekunder terasa sekunder. Jika menawarkan "Impor" atau "Gunakan template," buat tampilannya lebih tenang dari aksi utama.
• Layar menjelaskan dirinya dengan cepat. Satu judul singkat plus satu kalimat singkat harus cukup menjawab: apa yang kosong, dan apa yang terjadi setelah klik.
• Ada jalur cepat ke kemenangan pertama. Template, data contoh, atau starter terpandu membantu pengguna melihat nilai tanpa setup berat.

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.

Contoh realistis: setup pertama kali untuk aplikasi baru

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:

• Waktu ke keberhasilan pertama (dari kunjungan pertama hingga pratinjau kerja)
• Tingkat drop-off antara empty state dan langkah build pertama
• Rasio klik CTA (utama vs sekunder)
• Penggunaan ulang dalam 7 hari
• Sinyal dukungan atau rage click pada area layar kosong

Langkah berikutnya: perbaiki satu alur, lalu skala pola

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:

• Baseline: catat rasio penyelesaian untuk langkah setup itu (dan waktu untuk menyelesaikan) selama 3–7 hari.
• Tulis ulang: sesuaikan judul, satu kalimat panduan, dan label tombol utama.
• Kurangi risiko: tambahkan satu baris penenang (apa yang terjadi selanjutnya, bisa dibatalkan, berapa lama).
• Uji: rilis ke persentase kecil pengguna baru, lalu bandingkan penyelesaian dan tiket dukungan.
• Kunci: jika menang, ubah menjadi template ulang yang bisa ditiru tim lain.

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.