Artikel ini ditulis pada 6 November 2026.
Alat AI cepat berubah. Namun, tingkat gerakan yang dapat ditoleransi oleh sebuah halaman web tidak pernah berubah. Efek melayang (hover), transisi (transition) singkat, serta respons mikro terhadap ketukan jari sudah cukup untuk membuat antarmuka terasa baik. Efek kaca (glassmorphism), parallax, efek muncul berurutan (staggered entrances), karosel (carousel), dan pengguliran terkunci (scroll snap) dapat dikenali dan ditolak secara tegas. Bacalah artikel ini sebagai panduan pembatasan, bukan tutorial animasi.
Model AI sering menambahkan gerakan animasi karena gerakan memberi kesan bahwa antarmuka dibuat dengan usaha keras. Halaman yang diam terlihat belum selesai saat demo di meja kerja, tetapi terlihat siap di ruang tunggu nyata. Orang-orang yang dituju oleh seri artikel ini berada dekat dengan situasi ruang tunggu: memegang ponsel di bawah terik jalanan, membaca dalam bahasa yang mungkin bukan bahasa utama model AI, dan tidak memiliki waktu untuk halaman yang terus bergoyang saat mereka mencoba membaca harga. Animasi hanya layak digunakan ketika menjelaskan suatu perubahan kondisi. Animasi tidak layak digunakan hanya untuk memamerkan bahwa seseorang mengetahui nama dari suatu efek visual.
Tiga efek yang layak mendapat tempat
Efek hover adalah perubahan visual saat penunjuk kursor berhenti di atas tombol kontrol: sedikit perubahan warna atau garis bawah pada tautan. Efek ini memberi tahu pengguna mouse bahwa elemen tersebut dapat diklik. Namun, efek ini tidak ada bagi pengguna layar sentuh. Apa pun yang hanya terlihat saat kursor melayang (on hover) akan menjadi tidak terlihat di ponsel. Tegaskan dalam brief bahwa penanda visual yang sama wajib muncul saat fokus keyboard (on focus), atau tidak perlu dipakai sama sekali.
Sebuah transition (transisi) adalah durasi singkat saat perubahan bentuk terjadi, biasanya sekitar seperlima detik. Drawer yang muncul mendadak dalam satu bingkai akan terasa rusak; sedangkan drawer yang membutuhkan waktu satu detik penuh untuk terbuka akan terasa lambat. Mintalah transisi singkat saat elemen dibuka dan ditutup. Jangan pernah meminta transisi animasi pada setiap huruf di dalam kalimat. Aktivitas membaca bukanlah sebuah pertunjukan panggung.
Sebuah microinteraction (mikrointeraksi) adalah respons visual kecil terhadap tindakan kecil pengguna. Tombol simpan memberi konfirmasi kilat; chip opsi yang dipilih berubah tampilan dengan jelas. Ini adalah bentuk kejujuran antarmuka yang sama seperti toast, tetapi digambar lebih kecil. Mikrointeraksi bukanlah maskot bergerak, semburan konfeti, atau efek suara. Jika Anda tidak dapat menjelaskan bentuk responsnya dalam satu kalimat singkat, berarti mikrointeraksi itu sudah terlalu berlebihan.
Nama-nama efek yang hanya perlu Anda kenali untuk ditolak
Istilah-istilah berikut adalah nama efek nyata. Namun, ini bukanlah istilah yang wajib ada pada pembuatan halaman pertama. Ketika model AI menawarkan efek ini, Anda dapat menolaknya secara langsung dengan menyebut namanya.
- Glassmorphism — panel berefek kaca buram. Efek ini menurunkan kontras teks di atasnya. Jika kata-kata menjadi sulit dibaca, singkirkan efek kaca tersebut.
- Parallax — latar belakang gambar yang bergerak dengan kecepatan berbeda dari teks. Efek ini membuat sebagian orang merasa mual, serta bertentangan dengan pengaturan sistem operasi yang meminta pengurangan gerakan.
- Bento — tata letak kisi-kisi dengan kotak berukuran tidak sama, dinamai dari kotak bekal nasi. Efek ini berguna kelak untuk dasbor analitik. Namun pada halaman pertama, bento menyembunyikan fakta mana yang paling penting karena perbedaan ukuran memicu perebutan perhatian.
- Stagger — item atau baris teks yang muncul satu per satu dengan jeda waktu. Pengguna terpaksa menunggu daftar informasi yang seharusnya bisa langsung mereka baca sekilas.
- Carousel (karosel) — deretan gambar atau kartu yang bergeser ke samping. Sebagian besar pengguna tidak pernah menggeser melewati slide pertama. Letakkan fakta informasi langsung di halaman utama.
- Scroll snap — pengguliran layar yang terkunci otomatis ke bingkai penuh berikutnya. Di ponsel, efek ini menjebak pengguna di antara section saat mereka hanya berniat membaca sekilas.
Anda tidak perlu mempelajari cara membuat efek-efek ini. Anda hanya perlu menolaknya saat mereka hadir tanpa diundang. Perintah singkat, dalam bahasa Inggris: “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Kalimat tersebut adalah brief yang sudah sangat lengkap.
Informasi harga di bawah terik matahari
Seseorang sedang berdiri di luar toko, memegang ponsel di bawah terik matahari, mencoba membaca biaya sebuah kelas sebelum melangkah masuk. Halaman web yang mereka buka justru menggeser harga setelah jeda animasi, menumpuk teks harga di atas foto jalanan, dan menggerakkan latar belakang lebih lambat daripada teksnya. Di layar monitor studio saat demo, tampilan itu tampak elegan. Namun di bawah terik matahari, tampilan itu tampak seperti halaman yang tidak mau tenang untuk bisa dipercaya. Pengguna akhirnya memutuskan masuk dan bertanya langsung secara manual. Halaman web tersebut gagal pada satu-satunya tugas yang dimilikinya.
Hal ini terjadi lebih cepat di tempat-tempat di mana ponsel adalah satu-satunya layar komputer dan jalanan adalah ruang kerjanya. Efek animasi yang membutuhkan ruangan redup dan monitor besar bukanlah standar yang netral, melainkan standar hasil salinan dari studio desain. Menyebutkan nama efek tersebut adalah cara Anda menolak salinan visual yang tidak perlu. Anda tidak perlu mengkritik gayanya; Anda hanya perlu menyebutkan kata benda bahasa Inggris mana yang tidak Anda inginkan, sehingga model AI tidak menyelusupkannya kembali dengan alasan “agar tampak lebih bagus”.
Brief yang mencegah masalah ini sangat ringkas dan menggunakan nama istilahnya agar model AI tidak dapat menerjemahkan kata “buat lebih tenang” menjadi dekorasi bentuk lain: “Tanpa carousel untuk daftar harga. Tanpa glassmorphism di belakang angka. Tanpa parallax. Tanpa stagger pada daftar kelas. Gunakan transisi singkat saat drawer terbuka, dan tanpa transisi sama sekali jika pengguna mengaktifkan reduced motion pada ponselnya. Gunakan teks gelap di atas permukaan terang yang datar.” Informasi harga adalah fakta pertama di dalam section, bukan slide kedua di dalam carousel. Anda dapat menulis paragraf aturan itu sekali dan menggunakannya kembali pada setiap halaman yang Anda buat tahun ini. Aturan tersebut akan tetap relevan jauh lebih lama daripada efek animasi yang menggoda model AI.
Pengaturan sistem yang mengungguli semua efek visual
Sistem operasi seluler dan komputer memungkinkan pengguna mengaktifkan fitur gerakan yang dikurangi (reduced motion). Halaman web yang mengabaikan preferensi tersebut bukanlah halaman yang dinamis, melainkan halaman yang mengabaikan kebutuhan nyata penggunanya. Tegaskan perintah ini dalam brief: jika pengguna mengaktifkan opsi reduced motion, langsung tampilkan hasil akhir antarmuka tanpa animasi slide maupun stagger. Informasi tetap tersampaikan, tetapi perjalanan animasi dibatalkan.
Kontras teks yang tinggi akan bertahan melampaui semua tren desain. Teks di atas foto, teks di atas efek kaca buram, atau teks berwarna abu-abu pucat yang tampak anggun di kanvas model AI — semuanya akan gagal dibaca di bawah sinar matahari, di layar ponsel murah, atau oleh mata pengguna yang lelah. Mintalah teks berwarna gelap di atas permukaan terang yang datar kecuali jika Anda memiliki alasan bisnis yang sangat kuat. Nama khusus untuk permukaan tidak wajib, tetapi kata-kata yang mudah dibaca adalah hal yang mutlak.
Alur melalui lima siri artikel ini tidak pernah bertujuan mengajarkan puluhan definisi kaku. Alur ini adalah tentang empat keputusan penting: Namakan komponen antarmuka dalam bahasa Inggris agar model AI tidak menebak-nebak. Tuliskan bahasa pembaca pada label dan rincian informasi. Tentukan apakah momen ini menghentikan alur, berbagi layar, atau sekadar memberi informasi. Lalu pastikan halaman web tetap cukup tenang untuk dibaca. Seseorang yang menguasai empat hal tersebut telah melepasi rintangan kosakata yang sebenarnya membatasi pekerjaan. Sisa istilah lainnya hanyalah katalog yang bisa mereka buka di kemudian hari — berdasarkan nama bahasa Inggrisnya — saat sebuah halaman web benar-benar membutuhkannya.