Artikel ini ditulis pada 6 November 2026.
Alat AI cepat berubah. Kewajiban untuk menyampaikan apa yang telah terjadi tidak pernah berubah. Button, link, label, error, toast, skeleton, empty state, tooltip — inilah cara halaman web memberikan jawaban kepada pengguna. Tren gaya ikon akan terus bergeser. Bacalah artikel ini sebagai aturan kejujuran antarmuka, bukan sekadar tur komponen widget.
Halaman web yang tidak pernah memberikan laporan adalah halaman yang akan diketik atau diklik dua kali oleh pengguna. Mereka menekan tombol dua kali karena tidak ada petunjuk yang memberi tahu bahwa ketukan pertama sudah diterima sistem. Model AI sangat mahir menggambar tombol tekan, tetapi buruk dalam merancang respons balasan — kecuali jika Anda memintanya secara eksplisit sebagai komponen tersendiri. Balasan sistem bukanlah dekorasi visual, melainkan pembeda antara formulir yang benar-benar memproses pemesanan dan formulir yang hanya tampak seperti pemesanan.
Button melakukan tugas. Link mengarahkan ke lokasi lain.
Button mengubah suatu kondisi di halaman saat ini: kirim, simpan, pesan, atau hapus. Link mengarahkan pengguna ke lokasi lain: halaman besok, peta lokasi, atau dokumen kebijakan. Ketika model AI membuat semua frasa berbentuk button, pengguna tidak dapat membedakan antara tindakan berpindah dan tindakan memproses data. Ketika model AI membuat semua tindakan berbentuk link, tombol “Hapus” bisa tampak seperti halaman baru — dan terkadang memang menjadi halaman baru, yang tentu lebih buruk. Dalam brief Anda, sebutkan kata kerja tindakan sebagai button dan tujuan navigasi sebagai link. Satu button utama (primary button) pada layar sudah cukup; sisa tombol lainnya bisa dibuat lebih tenang. Menampilkan dua button utama bersamaan adalah bentuk keraguan desain yang enggan diselesaikan oleh halaman.
Tuliskan teks pada button sebagai kata kerja yang dapat diverifikasi pengguna di kemudian hari. Teks “Pesan Jadwal” dapat dikonfirmasi hasilnya, sedangkan teks “Lanjutkan” atau “OK” tidak memberi kepastian. Jika pembaca Anda tidak menggunakan bahasa Inggris, kata kerja yang terlihat pada layar harus ditulis dalam bahasa mereka. Namun, nama jenis komponen yang Anda tempelkan dalam prompt — button, link — tetap menggunakan bahasa Inggris.
Formulir adalah kumpulan pertanyaan berlabel
Form bukanlah sekadar tumpukan kotak abu-abu. Setiap kotak adalah sebuah input. Setiap input membutuhkan label yang tetap terlihat di atasnya, bukan sekadar teks placeholder yang menghilang saat pengguna mulai mengetik. Teks placeholder di dalam kotak hanyalah petunjuk pengisian, dan petunjuk bukanlah nama kolom. Pengguna sering lupa apa isi kolom tersebut setelah mengetik, dan mesin penerjemah tidak dapat membaca nama kolom yang sudah hilang. Tegaskan dalam perintah: setiap input wajib memiliki label yang terlihat di atasnya dalam bahasa pembaca.
Pesan kesalahan (error) harus diletakkan persis di samping kolom input yang bermasalah dalam bentuk kata-kata jelas, serta dirangkum di bagian atas jika terdapat beberapa kesalahan sekaligus. Warna semata bukanlah pesan kesalahan. Warna merah dan hijau tidak dapat dibedakan oleh banyak orang, padahal warna itulah hal pertama yang dipakai model AI. Tegaskan perintah Anda: “gunakan kata-kata di samping kolom, bukan warna saja.”
Status wajib diisi (required) adalah kondisi yang Anda nyatakan secara eksplisit, bukan tanda bintang yang Anda harapkan dipahami secara universal. Sebutkan kolom mana saja yang boleh dikosongkan. Nomor telepon yang wajib diisi di satu negara mungkin bersifat opsional di negara lain. Fakta bisnis tersebut harus ditulis dalam bahasa Anda di bawah brief bahasa Inggris.
Kabar yang hilang, kabar yang bertahan, dan kabar yang belum ada
Toast (kadang disebut snackbar) adalah pesan singkat yang biasanya muncul di bagian bawah layar setelah suatu tindakan dilakukan, lalu hilang dengan sendirinya. Pesan seperti “Tersimpan” atau “Tersalin” cukup tampil selama tiga detik. Toast tidak boleh menjadi satu-satunya tempat mencatat kegagalan sistem. Pesan kegagalan harus tetap bertahan di samping kolom atau di bagian atas form sampai pengguna memperbaikinya. Toast yang menampilkan “Gagal memesan” lalu mendadak hilang adalah komunikasi yang terputus.
Skeleton adalah bentuk blok abu-abu pengganti halaman saat teks asli sedang dimuat dari server. Skeleton jauh lebih baik daripada layar putih kosong tanpa kejelasan, dan lebih baik daripada spinner putar yang tidak menjelaskan apa pun. Gunakan skeleton saat daftar data sedang dimuat. Jangan gunakan skeleton sebagai tampilan permanen. Jika data tidak pernah sampai, skeleton harus berhenti dan berubah menjadi empty state.
Empty state adalah tampilan halaman saat belum ada data yang dapat ditunjukkan: belum ada pemesanan, tidak ada kelas minggu ini, atau tidak ada hasil pencarian. Empty state menyebutkan kekosongan tersebut secara jelas dan menawarkan satu tindakan berikutnya. Tabel kosong tanpa teks bukanlah empty state, melainkan halaman yang tidak bertanggung jawab. Inilah layar yang sering dilupakan oleh organisasi kecil, padahal layar inilah yang pertama kali dilihat pengunjung ketika daftar data memang masih kosong.
Tooltip adalah beberapa kata penjelasan yang muncul saat kursor diarahkan (hover) atau saat fokus keyboard berada di atas sebuah ikon rahasia. Tooltip bukan tempat menaruh kebijakan panjang, dan tidak bekerja secara andal di ponsel. Jika kata-kata itu penting bagi pengguna, tampilkan sebagai teks biasa di layar. Tooltip hanyalah label cadangan, bukan dokumen informasi.
Ketukan kedua yang tidak perlu
Seorang wali murid memesan kelas dari ponselnya dalam perjalanan pulang. Tombol yang ia tekan bertuliskan “Lanjutkan”. Tidak ada perubahan apa pun di layar yang dapat ia lihat, sehingga ia mengetuk tombol itu sekali lagi. Akibatnya, dua pemesanan masuk ke sistem. Petugas pendaftaran menyebutnya sebagai kesalahan pengguna, padahal masalah sebenarnya adalah tidak adanya respons balasan sistem. Kata “Lanjutkan” bukanlah kata kerja yang bisa dipastikan hasilnya, dan halaman yang diam tanpa respons bukanlah sebuah konfirmasi.
Halaman web yang berfungsi dengan baik terdiri dari elemen-elemen yang lugas. Tombol bertuliskan “Daftar Kelas Ini” dalam bahasa wali murid. Setiap kolom input memiliki label yang tidak pernah hilang. Jika kolom nomor telepon kosong, pesan penjelasan muncul di samping kolom tersebut dan tidak hilang. Ketika pendaftaran berhasil, sebuah toast memberi tahu bahwa permintaan telah terkirim lalu menghilang, sementara form itu sendiri berubah menjadi tanda terima ringkas yang dapat digulir kembali. Jika daftar kelas kosong karena jadwal belum terbit, empty state menjelaskan hal tersebut dan memberikan satu tombol untuk bertindak — bukan tabel kosong yang tampak rusak. Semua ini bukan masalah gaya visual, melainkan komitmen halaman untuk tidak membuat pengguna menebak-nebak.
Saat menyusun brief ini, pertahankan nama jenis elemen dalam bahasa Inggris — button, label, error, toast, empty state — lalu tuliskan setiap kalimat yang dibaca manusia dalam bahasa lokal. Model AI yang hanya menerima label bahasa Inggris akan menerbitkan teks antarmuka dalam bahasa Inggris. Itu adalah bentuk kegagalan yang berbeda dari toast yang hilang, tetapi sama seringnya terjadi. Bentuk antarmuka dibagikan dalam bahasa Inggris agar perilakunya tepat; sedangkan kata-katanya ditulis dalam bahasa lokal agar pengguna paham apa yang baru saja mereka lakukan.
Satu kalimat brief
Build a booking form. Each input has a visible label. Errors are written beside the field in words, not by color alone. After a successful send, show a toast that says the visit is requested and leaves after a few seconds. If sending fails, keep the error on the form. If there are no visits yet, show an empty state with one button to add the first.
Setelah itu, tuliskan label kolom dan kalimat kesalahan dalam bahasa pembaca. Kalimat bahasa Inggris di atas menetapkan bentuknya, sedangkan kalimat di bawahnya mencerminkan kepedulian Anda. Model AI tidak akan tahu bagaimana cara klinik di kota Anda menyampaikan permintaan maaf secara santun. Anda yang lebih mengetahuinya. Artikel berikutnya akan membahas tentang gerakan animasi, serta dekorasi mana yang bisa ditunda sampai semua respons antarmuka ini selesai dibuat.