Gunakan uji kegunaan, bukan daftar tren
Ikhtisar Figma 2026 mencatat 3D imersif, navigasi eksperimental, palet cerah, gerakan, gamifikasi, dan pengalaman berbantu AI. Itu adalah eksplorasi, bukan bukti bahwa setiap situs harus menirunya. Halaman layanan dan akun sering kali mendapat manfaat lebih dari jalur yang dapat diprediksi.
Tulis tugas halaman sebelum memilih perlakuan. Bandingkan versi konvensional dan yang mengikuti tren pada tugas dan ukuran keberhasilan yang sama. Perhatian saja bukanlah kesuksesan.
Tentukan tindakan utama dan buat label, lokasi, dan hasilnya dapat dimengerti tanpa hover, gestur, atau tutorial.
Sediakan rute konvensional ke konten inti dan cara mudah untuk menghapus peningkatan jika bukti lemah.
Bangun sistem responsif di sekitar konten dan komponen
Desain responsif tetap bernilai tinggi karena ukuran layar tidak memprediksi niat atau metode input. Google merekomendasikan breakpoint yang dipimpin oleh konten, menghindari overflow horizontal, dan tidak menyembunyikan informasi hanya karena tata letak sempit. Mulailah dari kecil, lalu perluas ketika konten membutuhkan ruang lebih.
Container query menyesuaikan sebuah komponen terhadap ruang yang disediakan oleh induknya, sehingga satu kartu bisa bekerja di kolom utama dan bilah samping. Mereka tidak menggantikan media query: MDN menjelaskan grid, flex, dan media query viewport sebagai pendekatan fallback.
Batasi panjang baris teks pada layar lebar dan konfirmasi zoom tidak menyebabkan kolom terpotong atau scrolling horizontal.
Sediakan dimensi gambar sehingga browser dapat mengalokasikan ruang sebelum gambar dimuat dan mengurangi pergeseran tata letak.
Jadikan interaksi berorientasi aksesibilitas sebagai arah yang tahan lama
Desain yang mengutamakan aksesibilitas menangani bagaimana orang mengoperasikan situs, sehingga bertahan melampaui mode visual. WCAG 2.2 adalah Recommendation W3C. Kriteria barunya memberi kasus tinjauan konkret: fokus keyboard tidak boleh sepenuhnya tersembunyi oleh konten yang dibuat penulis pada Level AA; drag memerlukan alternatif pointer yang sederhana; dan target pointer memiliki minimal 24 by 24 CSS-pixel pada Level AA kecuali ada pengecualian.
Ubah kasus-kasus ini menjadi aturan sistem. Jangan biarkan header, kontrol cookie, peluncur obrolan, atau banner menutupi fokus. Tampilkan state fokus yang kuat. Di mana daftar dapat diurutkan ulang dengan drag, tawarkan operasi alternatif yang sederhana. WCAG 2.2 juga membahas bantuan, pengisian berulang, dan otentikasi yang dapat diakses. Pengecualian terkait keamanan dapat berlaku; dapatkan tinjauan keamanan dan aksesibilitas yang berkualifikasi.
Tekan Tab melalui perjalanan kunci di setiap tata letak dan pastikan kontrol yang difokuskan terlihat dan dapat diidentifikasi.
Ukur kontrol ikon yang kompak dan jarak di antara mereka, terutama di menu dan formulir.
Mendukung pengelola kata sandi dan fitur paste dapat mengurangi beban kognitif; jangan melemahkan kontrol tanpa tinjauan keamanan berkualifikasi.
Gunakan gerakan sebagai panduan opsional
Gerakan dapat memperjelas konfirmasi tersimpan, panel yang diperluas, atau langkah berikutnya. Gerakan merusak kegunaan ketika menunda pilihan, terus-menerus menarik perhatian dari konten, atau menjadi satu-satunya cara memahami perubahan status. Pengalaman ini adalah arahan, bukan persyaratan.
Hormati permintaan untuk mengurangi gerakan non-esensial. MDN mendokumentasikan media query `prefers-reduced-motion` untuk mendeteksi preferensi pengguna agar gerakan dapat dihapus, dikurangi, atau diganti. Pertahankan informasi dan umpan balik penyelesaian, tetapi gantilah efek skala besar, pan, paralaks, atau autoplay dengan perubahan visual yang tenang.
Nyatakan informasi yang disampaikan setiap animasi; hapus jika tidak ada jawaban.
Aktifkan reduced motion di level sistem operasi dan verifikasi halaman masih masuk akal.
Jadikan kecepatan dan stabilitas sebagai kriteria penerimaan desain
Performa adalah kendala desain, bukan tugas penyelesaian. Core Web Vitals Google saat ini adalah Largest Contentful Paint untuk pemuatan, Interaction to Next Paint untuk responsivitas, dan Cumulative Layout Shift untuk stabilitas visual. Target yang direkomendasikan adalah LCP 2,5 detik atau kurang, INP 200 milidetik atau kurang, dan CLS 0,1 atau kurang pada persentil ke-75, dipisah menurut mobile dan desktop. Mereka adalah target yang berguna, bukan pengganti pengujian tugas.
Tetapkan anggaran sebelum menambahkan video hero, font kustom, urutan gambar, efek sisi-klien, atau asisten pihak ketiga. Pengujian lab menangkap regresi sebelum rilis, tetapi pengukuran lapangan penting karena kondisi bervariasi.
Cadangkan ruang untuk gambar, embed, iklan, dan elemen antarmuka yang dimuat terlambat.
Gunakan cek lab saat pembangunan dan data pengguna nyata setelah rilis; tinjau mobile dan desktop secara terpisah.
Perlakukan antarmuka imersif, eksperimental, dan berbasis AI sebagai eksperimen bersyarat
3D, navigasi nonlinier, bercerita visual, dan bantuan percakapan dapat membantu ketika mereka mengurangi ketidakpastian yang tidak bisa diatasi konten statis. Mereka merupakan default yang buruk ketika pengunjung membutuhkan harga, tujuan yang diketahui, formulir, atau jawaban. Pertahankan rute langsung, deskripsi teks biasa, dan jalur yang dapat digunakan saat peningkatan dimuat atau gagal.
Prototype versi terkecil terlebih dahulu. Definisikan apa yang akan membenarkan mempertahankannya, seperti lebih sedikit pilihan keliru atau waktu menemukan jawaban yang lebih cepat. Catat bobot aset, eksekusi skrip, pemeliharaan, ketergantungan vendor, tinjauan privasi, dan alternatif yang dapat diakses. Demo mencolok tidak membuktikan kausalitas.
Pertahankan salinan inti, navigasi utama, dan tindakan utama dapat digunakan tanpa lapisan imersif atau asisten.
Batasi paparan awal, bandingkan hasil, dan pertahankan keputusan pembalikan.
Jalankan perubahan desain sebagai perubahan produk yang tangguh
Sebuah tata letak dapat mengubah pengiriman aset, perilaku JavaScript, alat persetujuan, dan layanan eksternal. Perlakukan redesain sebagai perubahan produksi. Status Is UP mendukung optimasi ketersediaan proaktif dan remediasi: identifikasi ketergantungan lemah sebelum peluncuran, tetapkan pemeriksaan, siapkan rollback, dan perbaiki risiko pengiriman yang berulang. Ini berbeda dari menunggu untuk melihat waktu henti setelah pengguna terdampak.
Pertahankan jalur sebelumnya sampai yang baru lulus cek tugas, aksesibilitas, dan performa. Tetapkan siapa yang dapat menangguhkan fitur. Periksa ulang setelah perubahan konten, browser, vendor, atau kampanye.
Periksa perjalanan kunci, aset, formulir, perilaku persetujuan, dan ketergantungan sebelum rilis luas.
Dokumentasikan jalur pembalikan yang diuji, pemilik keputusan, dan status pengunjung yang diharapkan.