Artikel ini ditulis pada 6 November 2026.
Alat AI cepat berubah. Keputusan apakah akan menghentikan alur pengguna, meluncur di samping mereka, atau menggeser lembaran dari bawah layar tidak pernah berubah. Dialog, drawer, bottom sheet, dropdown, tabs, accordion — ini semua adalah cara untuk meminta interaksi pengguna. Menu produk akan terus bergeser. Bacalah artikel ini sebagai pertimbangan memilih jenis interupsi, bukan sebagai katalog yang harus dihafalkan.
Sebuah section pada halaman dapat memuat fakta yang bernilai tetap: alamat, harga, atau jam buka. Namun, beberapa informasi justru mengganggu jika selalu ditampilkan di halaman utama, sekaligus membingungkan jika dipindah ke halaman baru. Filter pencarian, konfirmasi singkat, atau penjelasan panjang yang jarang dibuka orang adalah contohnya. Istilah sehari-hari untuk semua elemen ini sering digeneralisasi menjadi “pop-up”. Penyederhanaan kata itulah yang membuat model AI menebak-nebak. Bagilah keputusan antarmuka ini menjadi tiga pertanyaan: Haruskah pengguna berhenti sejenak? Bolehkah halaman utama tetap terlihat? Ataukah ini sekadar sudut pandang lain dari daftar data yang sama?
Hentikan, bagikan, atau alihkan
Dialog (sering juga disebut modal) terletak di tengah layar dan meredupkan konten di belakangnya. Gunakan dialog hanya ketika pengguna wajib memberikan jawaban sebelum tindakan lain aman dilakukan: menghapus data penting, mengonfirmasi pemesanan, atau memperbaiki kolom wajib yang kosong. Dialog adalah tempat yang buruk untuk artikel panjang, menu navigasi, atau pengumuman kejutan. Saat dialog terbuka, fokus keyboard harus terkunci di dalamnya. Tombol Escape atau tombol batal yang jelas harus bisa menutup dialog dan mengembalikan fokus keyboard ke tombol pemicunya. Jika Anda tidak menjelaskan syarat ini, model AI sering kali menggambar kotak tanpa akses navigasi keyboard, sehingga pengguna tanpa mouse terjebak. Syarat penutup ini bukanlah detail susulan, melainkan bagian dari spesifikasi utama.
Drawer meluncur masuk dari tepi awal (start edge) dan membiarkan halaman utama tetap terlihat di sampingnya. Gunakan drawer untuk pekerjaan yang merujuk pada isi halaman: filter daftar, rincian informasi lanjutan, atau pengaturan yang tidak bersifat krisis. Tutup drawer dengan tombol Escape atau ketukan di luar area panel. Pada halaman bahasa Arab atau bahasa lain berorientasi kanan-ke-kiri (RTL), tepi awal berada di sebelah kanan. Gunakan istilah “start edge” alih-alih “selalu dari kanan”, agar drawer tidak terbuka berlawanan dengan arah baca pengguna.
Bottom sheet adalah panel yang muncul menggeser dari bagian bawah layar ponsel. Bottom sheet merupakan saudara dari drawer yang dirancang khusus untuk kenyamanan ibu jari saat memegang ponsel di bagian bawah. Gunakan bottom sheet untuk beberapa pilihan tindakan cepat pada item yang baru saja diketuk: panggil, simpan, atau bagikan. Jangan gunakan bottom sheet untuk formulir panjang berisi puluhan kolom. Sheet sebaiknya berhenti pada posisi sepertiga atau setengah layar, dan harus dapat ditutup dengan menggesernya ke bawah atau menekan tombol Escape. Jika bahasa Anda tidak memiliki istilah baku untuk elemen ini, jangan mengarang kata baru. Penjelasan “panel yang muncul dari bawah” ditambah istilah bottom sheet sudah cukup menyampaikan maksudnya.
Area sama, sudut pandang berbeda
Dropdown membuka daftar pilihan singkat di dekat tombol kontrol dan langsung menutup begitu opsi dipilih. Penggunaan dropdown cocok untuk memilih bahasa, urutan penyortiran, atau jumlah barang. Dropdown bukan navigasi utama dan bukan tempat menampung teks panjang. Jika daftar pilihan memiliki lebih dari sepuluh baris, gunakan halaman baru atau drawer alih-alih menu melayang yang terpotong di layar ponsel.
Tabs menyimpan beberapa tampilan berbeda di lokasi yang sama. Pengguna dapat berpindah ke samping untuk melihat sudut pandang sejajar: minggu ini dan minggu depan, deskripsi dan bahan. Semua label tabs harus tetap terlihat. Menyembunyikan label tabs di dalam menu dropdown menghilangkan esensi dari fungsi tabs itu sendiri.
Accordion menumpuk deretan pertanyaan dan membuka kontennya ke bawah — sebutkan apakah accordion terbuka satu per satu atau bisa beberapa sekaligus. Gunakan accordion untuk informasi rinci yang tidak semua orang perlu baca: syarat pengiriman atau FAQ panjang. Jangan pernah menyembunyikan informasi harga utama di dalam accordion yang tertutup. Kondisi tertutup mengasumsikan pengguna tidak membutuhkannya, padahal harga bukanlah jenis fakta yang patut disembunyikan.
Tabs dan accordion sering kali tertukar karena keduanya dianggap “menghemat ruang”. Tabs mengganti tampilan konten utama sambil tetap memperlihatkan label lainnya. Accordion mendorong konten halaman ke bawah dan menyembunyikan jawaban sampai diklik. Jika Anda hanya meminta model AI untuk “menghemat ruang”, Anda akan mendapatkan salah satu dari keduanya secara acak. Sebutkan nama elemen yang sesuai dengan cara pengguna mencari informasi.
Dua bentuk salah pada ruang kerja yang sama
Daftar peserta kelas membutuhkan dua jenis interaksi berbeda. Satu tindakan berisiko tinggi: membatalkan pendaftaran siswa. Satu tindakan biasa: menampilkan kelas malam saja. Versi awal menempatkan keduanya ke dalam “pop-up” yang sama karena itu satu-satunya istilah dalam brief. Akibatnya, tombol pembatalan mudah terketuk secara tidak sengaja, dan filter kelas malam menutupi daftar yang sedang dibaca guru. Satu kata yang sama digunakan untuk dua tugas berbeda, dan keduanya berakhir buruk.
Solusinya adalah memisahkan istilah tersebut. Tindakan pembatalan membuka dialog yang meredupkan sisa halaman. Kalimat di dalamnya menjelaskan siapa yang akan dihapus dari daftar. Tombol Escape dan tombol batal yang jelas akan menutup dialog, lalu mengembalikan fokus ke tombol pemicunya. Sementara itu, filter kelas malam membuka drawer dari tepi awal (start edge), sehingga daftar utama tetap terlihat di sampingnya dan dapat ditutup dengan mengetuk area luar. Di layar ponsel, filter yang sama dapat berubah menjadi bottom sheet karena posisi tangan pengguna berada di bawah. Guru tidak perlu mempelajari tiga sistem baru; mereka hanya perlu memahami momen mana yang diizinkan untuk menghentikan alur kerja mereka.
Tuliskan perbedaan fungsi ini dalam bahasa lokal agar mudah dipahami tim, lalu tempelkan nama istilah bahasa Inggrisnya agar model AI tidak menggabungkannya kembali menjadi satu pop-up generik. Jika bahasa Indonesia belum memiliki kata sehari-hari untuk drawer, gunakan deskripsi “panel dari tepi layar yang tidak menutupi daftar utama”. Jangan menghabiskan waktu mengarang kata benda formal yang kaku. Perilaku elemen itulah inti dari pelajarannya.
Satu kalimat brief
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
Di bawah perintah tersebut, tuliskan rincian filter yang Anda inginkan dalam bahasa Anda. Model AI bisa membangun drawer tanpa perlu tahu bahwa filter Anda berisi lokasi dan rentang harga. Sebaliknya, Anda tidak bisa mengambil keputusan rincian bisnis dalam bahasa Inggris yang tidak Anda kuasai. Bentuk antarmuka berlaku umum, sedangkan informasi bisnis tetap ditulis dalam bahasa lokal.
Orang sering kali memperdebatkan elemen mana yang terlihat lebih modern. Perdebatan yang lebih berguna adalah elemen mana yang menghormati tugas pengguna. Menghentikan alur pengguna hanya untuk menanyakan urutan sortir adalah tindakan yang mengganggu. Sebaliknya, menyembunyikan konfirmasi pembatalan di dalam menu dropdown yang tersembunyi adalah hal yang berbahaya. Setelah Anda mahir menjelaskan kedua kondisi tersebut, Anda telah menguasai bagian penting dari perancangan antarmuka. Bagian selanjutnya lebih ringkas namun sering terlewatkan: memberi tahu pengguna apakah tindakan mereka telah berhasil tanpa memindahkan mereka ke halaman baru.