Belajar UX Designer - Agentic UX & GenUI
Mendesain untuk era agentic: pengguna mendelegasikan tugas ke AI agent dan antarmuka generatif (GenUI) yang menyusun dirinya sendiri — dengan praktik merancang pengalaman delegasi laporan di JagaKota.
#Pendahuluan
Setelah di episode 20 kita membuat keputusan sistem bisa dijelaskan, kini kita melangkah ke lanskap 2026 yang disebut-sebut sejak episode 1: agentic UX. Jika dulu pengguna mengoperasikan antarmuka, kini pengguna mendelegasikan — mereka berkata "urus laporanku" dan agen AI yang bekerja. Bersamanya muncul GenUI (generative UI): antarmuka yang menyusun dirinya sendiri sesuai konteks, bukan halaman statis yang didesain sekali.
Mengapa penting? Karena ini mengubah model desain dari "mendesain layar" menjadi "mendesain sistem yang mendesain layar". Kalian tetap perancang — tapi kini peran kalian bergeser ke aturan, batas, dan bahasa yang mengarahkan antarmuka yang lahir secara dinamis.
#Delegation: Dari Operasi ke Intensi
Ekonomi niat (episode 1) bekerja seperti ini:
LAMA: user menavigasi 5 layar form untuk lapor.
BARU: user mengetik "lapor lampu mati di dekat SDN 2, tadi pagi",
agen mengisi kategori, foto (dari kamera/arsip), lokasi, mengirim,
lalu melaporkan kembali statusnya.Pekerjaan designer berubah:
- Mendesain prompt & ekspektasi: apa yang bisa didelegasikan, apa batasannya.
- Mendesain konfirmasi: agen tidak boleh bertindak tanpa batas; momen persetujuan yang baik itu desain.
- Mendesain hasil: ringkasan yang bisa diverifikasi — "Laporan #4832 terkirim, kategori Sampah, akan diverifikasi 1×24 jam".
#Spektrum Delegasi
Tidak semua tugas layak didelegasikan penuh. Tentukan tingkat otonomi tiap tugas:
| Tingkat | Agen bertindak | Contoh JagaKota |
|---|---|---|
| 1. Bantuan | Agen menyarankan, user memutuskan | Usul kategori saat pengisian form |
| 2. Eksekusi terkontrol | Agen mengerjakan setelah persetujuan | Kirim laporan setelah ringkasan disetujui |
| 3. Otonomi bersyarat | Agen bekerja sendiri dalam batas | Cek status & laporkan berkala ke user |
| 4. Otonomi penuh | Agen bertindak bebas | (hindari untuk layanan publik — terlalu berisiko) |
Aturan praktis: semakin tidak bisa dibatalkan dampaknya, semakin rendah tingkat otonominya.
#GenUI: Antarmuka yang Menyusun Sendiri
Generative UI berarti komponen di-render dinamis berdasarkan konteks: cuaca, lokasi, riwayat, niat pengguna. Contoh di JagaKota — beranda yang berubah sesuai situasi:
# Pagi, pengguna sedang di area banjir langganan:
Beranda menampilkan: kartu "Laporan banjir di sekitar Anda: 3 baru
hari ini", tombol cepat "Lapor banjir", dan status laporan lama.
# Malam, pengguna hanya memantau:
Beranda menampilkan: daftar status laporan aktif + ringkasan mingguan.GenUI menjanjikan relevansi tinggi, tapi membawa tantangan baru: bagaimana menjaga konsistensi dan kontrol? Di sinilah peran kalian sebagai Design System Governor (episode 16) menjadi sentral — komponen harus dibatasi token dan pola agar antarmuka yang lahir tetap dikenali sebagai "JagaKota".
#Aturan Emas Agentic UX
- Konfirmasi untuk tindakan berisiko: mengirim laporan publik boleh butuh satu ketukan; menghapus akun wajib konfirmasi berlapis.
- Visibilitas proses: tunjukkan apa yang sedang dikerjakan agen — "Mengisi lokasi… Mencari kategori…" — supaya pengguna tidak menebak (heuristics #1).
- Koreksi yang mudah: "Bukan itu — ini trotoar, bukan jalan" harus langsung dipahami agen.
- Keluaran yang bisa diverifikasi: hasil agen selalu bisa ditinjau, diubah, dan dibatalkan.
- Hormati sumber daya: agen tidak boleh menghabiskan kuota atau memicu biaya tanpa persetujuan.
Warning
Agentic UX membesarkan risiko dari episode 18-20 secara bersamaan: agen yang terlalu patuh bisa dimanipulasi, dan antarmuka yang menyusun sendiri bisa menyembunyikan keputusan. Etika, privasi, dan explainability bukan opsional di era ini — mereka kondisi agar delegasi bisa terjadi. Tanpa kepercayaan, tidak ada yang mau mendelegasikan.
#Mendesain Delegasi JagaKota
Praktik episode ini — rancang pengalaman delegasi:
- Tentukan tugas yang boleh didelegasikan: lapor masalah, cek status, ingatkan revisi. Tentukan yang tidak boleh: menghapus akun, mengubah data kontak.
- Rancang alur konfirmasi: delegasi → ringkasan rencana agen → persetujuan → eksekusi → ringkasan hasil.
- Tentukan format komunikasi: satu layar ringkasan, atau chat-stream (episode 22).
- Definisikan batas: berapa laporan maksimal per sesi, kapan minta izin ulang.
Agen JagaKota siap:
• Mengirim 1 laporan: "Lampu mati di Jl. Merdeka depan SDN 2"
• Kategori otomatis: Lampu Jalan (tinggi)
• Lokasi: dari posisi Anda saat ini
• Mengirim notifikasi saat status berubah
[ Lanjutkan ] [ Ubah ] [ Batalkan ]#Common Pitfalls
- Delegasi tanpa batas — agen tanpa aturan adalah bahaya; definisikan sejak awal apa yang tidak boleh dilakukan.
- GenUI tanpa batasan sistem — antarmuka generatif yang lepas dari design system menghasilkan produk yang tidak dikenali.
- Menganggap semua tugas layak didelegasikan — beberapa tugas (memilih kata-kata keluhan sensitif) lebih baik tetap manual.
- Menghilangkan jejak audit — pengguna harus bisa melihat "apa yang dilakukan agen atas nama saya".
#Penutup
Inti yang harus dibawa pulang:
- Agentic UX bergeser dari mengoperasikan antarmuka ke mendelegasikan tugas ke agen.
- GenUI menyusun antarmuka secara dinamis; konsistensi dijaga lewat design system.
- Aturan emas: konfirmasi untuk aksi berisiko, visibilitas proses, koreksi mudah, hasil yang bisa diverifikasi.
- Etika, privasi, dan explainability adalah prasyarat delegasi — bukan pelengkap.
Di episode 22 selanjutnya kita akan membahas voice dan conversational UX — interaksi suara, chatbot, dan conversation design — dan merancang dialog flow untuk JagaKota. Sampai jumpa di episode 22!