Artikel ini ditulis pada 6 November 2026.
Alat AI berubah pantas. Kewajipan untuk menyatakan perkara yang telah berlaku tidak pernah berubah. Button, link, label, error, toast, skeleton, empty state, tooltip — inilah cara halaman menjawab tindakan pengguna. Fesyen gaya ikon akan terus berubah. Bacalah artikel ini sebagai peraturan kejujuran antaramuka, bukannya sekadar tinjauan komponen widget.
Halaman yang tidak pernah memberi maklum balas ialah halaman yang akan ditekan dua kali oleh pengguna. Mereka menekan dua kali kerana tiada petunjuk yang memberitahu bahawa tekanan pertama telah diterima sistem. Model AI sangat mahir melukis butang tekan, tetapi lemah dalam merangka maklum balas — melainkan anda memintanya secara khusus sebagai komponen tersendiri. Maklum balas bukannya hiasan visual, tetapi pembeza antara borang yang benar-benar mengumpul tempahan dengan borang yang sekadar kelihatan seperti satu.
Button melakukan tugas. Link menuju ke lokasi lain.
Button mengubah sesuatu pada halaman semasa: hantar, simpan, tempah, atau padam. Link mengarahkan pengguna ke lokasi lain: halaman esok, peta lokasi, atau dokumen polisi. Apabila model AI melukis setiap frasa sebagai button, pengguna tidak dapat membezakan antara tindakan berpindah dengan tindakan memproses data. Apabila model AI melukis setiap tindakan sebagai link, butang “Padam” kelihatan seperti halaman baharu — dan kadang-kadang memang menjadi halaman baharu, yang tentunya lebih buruk. Dalam taklimat anda, namakan kata kerja tindakan sebagai button dan destinasi navigasi sebagai link. Satu button utama (primary button) pada skrin sudah memadai; sisa butang lain boleh dibuat lebih senyap. Menampilkan dua button utama serentak ialah bentuk perdebatan reka bentuk yang enggan diselesaikan oleh halaman.
Tulis teks pada button sebagai kata kerja yang boleh disemak oleh pengguna kemudian. Teks “Tempah Temujanji” boleh disahkan hasilnya, manakala teks “Teruskan” atau “OK” tidak memberikan kepastian. Jika pembaca anda tidak membaca bahasa Inggeris, kata kerja yang kelihatan pada skrin mestilah dalam bahasa mereka. Namun, nama jenis komponen yang anda tampal dalam arahan — button, link — kekal dalam bahasa Inggeris.
Borang ialah set soalan berlabel
Form bukannya timbunan kotak kelabu. Setiap kotak ialah sebuah input. Setiap input memerlukan label yang kekal kelihatan di atasnya, bukannya sekadar teks pemegang tempat (placeholder) yang hilang apabila pengguna mula menaip. Teks pemegang tempat di dalam kotak ialah petunjuk pengisian, dan petunjuk bukannya nama medan. Pengguna sering lupa isi medan selepas menaip, dan penterjemah tidak dapat melihat nama medan yang sudah hilang. Tegaskan dalam arahan: setiap input wajib mempunyai label yang kelihatan di atasnya dalam bahasa pembaca.
Mesej ralat (error) mesti diletakkan bersebelahan medan input yang berkaitan dalam bentuk perkataan yang jelas, serta dirumuskan di bahagian atas jika terdapat beberapa ralat serentak. Warna sahaja bukannya mesej ralat. Warna merah dan hijau tidak dapat dilihat oleh ramai orang, padahal warna itulah perkara pertama yang digunakan oleh model AI. Tegaskan arahan anda: “gunakan perkataan di sebelah medan, bukannya warna sahaja.”
Status wajib diisi (required) ialah syarat yang anda nyatakan secara eksplisit, bukannya tanda bintang yang anda harap difahami secara universal. Nyatakan medan mana yang boleh dibiarkan kosong. Nombor telefon yang diwajibkan di satu negara mungkin bersifat pilihan di negara lain. Fakta perniagaan tersebut hendaklah ditulis dalam bahasa anda di bawah taklimat bahasa Inggeris.
Berita yang hilang, berita yang kekal, dan berita yang tiada
Toast (kadang-kadang dipanggil snackbar) ialah nota ringkas yang biasanya muncul di bahagian bawah skrin selepas tindakan dilakukan, lalu hilang dengan sendirinya. Nota seperti “Disimpan” atau “Disalin” cukup tampil selama tiga saat. Toast tidak boleh menjadi satu-satunya rekod kegagalan sistem. Mesej kegagalan mesti kekal berada di sebelah medan atau di bahagian atas borang sehingga pengguna membetulkannya. Toast yang menampilkan “Gagal menempah” kemudian hilang secara tiba-tiba ialah perbualan yang terputus.
Skeleton ialah bentuk blok kelabu halaman sementara teks sebenar sedang dimuatkan dari pelayan. Skeleton jauh lebih baik daripada menunggu halaman putih kosong tanpa kepastian, dan lebih baik daripada pemutar (spinner) yang tidak menjelaskan apa-apa. Gunakan skeleton apabila senarai data sedang dimuatkan. Jangan gunakan skeleton sebagai reka bentuk kekal. Jika data tidak pernah tiba, skeleton mesti menyerah dan bertukar menjadi empty state.
Empty state ialah paparan halaman apabila tiada maklumat yang dapat ditunjukkan lagi: tiada tempahan, tiada kelas minggu ini, atau tiada hasil carian. Empty state menyatakan kekosongan tersebut secara jelas dan menawarkan satu tindakan seterusnya. Jadual kosong tanpa teks bukannya empty state, melainkan halaman yang tidak bertanggungjawab. Inilah skrin yang sering dilupakan oleh organisasi kecil, padahal skrin inilah yang pertama kali ditemui oleh pelawat apabila senarai data memang benar-benar kosong.
Tooltip ialah beberapa perkataan penjelasan apabila menuding (hover) atau apabila tumpuan papan kekunci berada di atas ikon rahsia. Tooltip bukannya tempat meletakkan polisi panjang, dan ia tidak wujud pada banyak telefon bimbit secara boleh dipercayai. Jika perkataan itu penting untuk pengguna, tampilkan ia sebagai teks kelihatan di skrin. Tooltip hanyalah label ganti, bukannya dokumen maklumat.
Tekanan kedua yang tidak perlu
Seorang ibu bapa menempah kelas dari telefon bimbitnya dalam perjalanan pulang. Butang yang ditekan bertulis “Teruskan”. Tiada perubahan pada skrin yang dapat dilihat oleh mereka, lalu mereka menekan butang itu sekali lagi. Akibatnya, dua tempahan masuk ke sistem. Meja pendaftaran memanggilnya sebagai ralat pengguna, padahal masalah sebenar ialah ketiadaan maklum balas daripada halaman. Kata “Teruskan” bukannya kata kerja yang boleh disahkan hasilnya, dan halaman yang senyap tanpa respons bukannya pengesahan.
Halaman web yang berfungsi dengan baik terdiri daripada elemen yang jelas dan ringkas. Butang bertulis “Minta Kelas Ini” dalam bahasa ibu bapa. Setiap medan input mempunyai label yang tidak pernah hilang. Jika medan nombor telefon kosong, mesej penjelasan muncul di sebelah medan tersebut dan kekal. Apabila permintaan berjaya, toast memberi tahu bahawa permintaan telah terkirim lalu hilang, manakala borang itu sendiri bertukar menjadi resit ringkas yang boleh digulirkan semula. Jika senarai kelas kosong kerana jadual belum diterbitkan, empty state menjelaskan perkara tersebut dan menyediakan satu butang tindakan — bukannya jadual kosong yang kelihatan rosak. Semua ini bukannya masalah gaya visual, tetapi komitmen halaman untuk tidak membuatkan pengguna menebak-nebak.
Apabila memberi taklimat ini, kekalkan nama jenis elemen dalam bahasa Inggeris — button, label, error, toast, empty state — dan tulis setiap ayat yang dibaca oleh manusia dalam bahasa tempatan. Model AI yang cuma menerima label bahasa Inggeris akan menerbitkan teks antaramuka dalam bahasa Inggeris. Itu ialah bentuk kegagalan yang berbeza daripada toast yang hilang, tetapi sama kerap berlaku. Bentuk antaramuka dikongsi dalam bahasa Inggeris supaya tingkah laku betul; manakala perkataannya ditulis dalam bahasa tempatan supaya pengguna tahu perkara yang baru mereka lakukan.
Satu arahan taklimat
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.
Kemudian, tuliskan label medan dan ayat ralat dalam bahasa pembaca. Kalimat bahasa Inggeris di atas menetapkan bentuknya, manakala kalimat di bawahnya mencerminkan penjagaan anda. Model AI tidak akan tahu bagaimana cara klinik di bandar anda meminta maaf secara sopan. Anda yang lebih mengetahuinya. Artikel seterusnya akan membahas mengenai pergerakan animasi, serta hiasan mana yang boleh ditunda sehingga semua respons antaramuka ini sedia dibina.