Belajar UI/UX Design - Generative UI & Personalization

#Pendahuluan

Setelah di episode 23 AI mempercepat workflow desain, pada episode ini kita melihat bagaimana AI mengubah antarmuka itu sendiri: generative UI dan personalization. Antarmuka tidak lagi statis "satu untuk semua" — ia bisa menyesuaikan diri dengan pengguna.

Mengapa penting? Karena konteks pemakaian KasirKita sangat beragam: Bu Sari (55 tahun, penglihatan menurun) melayani antrean pagi dengan ponsel kecil, sementara admin warung (25 tahun) menatap desktop seharian. Satu UI yang sama tidak pernah optimal untuk keduanya. Generative UI dan personalization menjanjikan antarmuka yang lebih pas — dengan risiko yang harus dikelola hati-hati.

#Generative UI

Generative UI adalah antarmuka yang dibangkitkan (generate) dinamis berdasarkan konteks — bukan layout yang ditentukan sekali oleh desainer. Prinsipnya: sistem memilih/menyusun komponen sesuai kebutuhan saat itu.

Contoh generative UI di KasirKita

Konteks: Bu Sari, transaksi pertama pagi ini, ponsel 390px,
         sinyal 2 bar, font besar (setting aksesibilitas).
Antarmuka yang dibangkitkan:
  - Daftar produk: kartu besar, font 18px, urut sesuai
    barang yang sering dibeli tiap pagi
  - Tombol "Bayar": selalu terlihat, 56px tinggi
  - Saat sinyal lemah: mode offline otomatis,
    badge "tersimpan lokal" aktif

Kuncinya: generative UI tetap menggunakan design system & tokens (episode 12) — komponen yang sama, dirakit ulang. Yang berubah adalah arrangement & konfigurasi, bukan komponen-komponen liar yang tidak konsisten.

#Peran Desainer di Generative UI

Desainer tidak lagi merancang satu layout final, melainkan aturan & pola: kapan kartu besar vs kecil, kapan daftar vs grid, kapan mode offline aktif. Ini pergeseran dari "desain layar" ke "desain sistem keputusan" — dan membutuhkan pemahaman komponen & state yang sangat kuat (episode 10, 20).

#Personalization

Personalization menyesuaikan pengalaman berdasarkan data pengguna — dengan dua aturan emas:

Kontrol pengguna — personalization harus bisa dilihat & diubah pengguna, bukan kotak hitam.
Transparansi — pengguna tahu mengapa mereka melihat hal yang berbeda (episode 18).

Contoh untuk KasirKita:

Personalization	Cara kerja	Risiko yang dikelola
Produk sering dibeli diurutkan ke atas	Dari riwayat transaksi	Jangan mengubur produk lain sepenuhnya
Pintasan menu kasir yang sering dipakai	Dari pola klik	Tetap sediakan akses penuh
Ukuran font otomatis lebih besar	Dari setting aksesibilitas	Hormati preferensi eksplisit
Mode offline otomatis	Dari deteksi sinyal	Beri tahu status dengan jelas

Tip

Mulai personalization dari yang mudah dijelaskan & mudah dibatalkan: "Kami urutkan produk yang sering kamu jual. Kamu bisa mengubahnya di sini." Jika sebuah personalization tidak bisa dijelaskan dalam satu kalimat sederhana, ia terlalu kompleks untuk dipaksakan.

#Voice dan Multimodal Input

Multimodal input memungkinkan pengguna berinteraksi lewat berbagai cara: sentuh, suara, kamera, gestur. Untuk kasir, input suara adalah lompatan besar:

Voice commerce: "tambahkan nasi goreng dua, es teh satu" → item masuk keranjang.
Scan barcode (kamera): menggantikan pencarian manual produk.
Konfirmasi suara: "total tiga puluh lima ribu" → pengguna konfirmasi vokal.

Aturan multimodal:

Jangan paksa satu modalitas — suara adalah pelengkap, bukan pengganti sentuh.
Selalu beri feedback visual atas apa yang didengar — pengguna harus bisa melihat "nasi goreng 2" sebelum konfirmasi.
Sediakan fallback untuk lingkungan bising (warung ramai) & pengguna yang tidak nyaman bicara.
Uji ketahanan: salah dengar adalah error tersendiri; siapkan alur perbaikan yang mudah.

Warning

Jangan mempermanenkan kesenjangan: personalization & generative UI yang tidak transparan bisa membuat pengguna merasa "diawasi" — dan bisa memperkuat bias (produk tertentu selalu ditonjolkan untuk segmen tertentu). Transparansi, kontrol, dan audit berkala adalah harga yang harus dibayar untuk personalization yang etis.

#Praktik: Konsep UI Adaptif untuk Satu Skenario

Pilih satu skenario KasirKita (misal "Bu Sari, pagi ramai, sinyal lemah, ponsel kecil"):

Tulis konteks: perangkat, persona, waktu, kondisi sinyal, preferensi aksesibilitas.
Definisikan aturan adaptif: kapan kartu besar, kapan mode offline, kapan produk diurutkan.
Desain 2 varian: default vs adaptif — tunjukkan apa yang berubah dan alasannya.
Dokumentasikan kontrol: di mana pengguna bisa melihat & mengubah personalization.
Rancang feedback: bagaimana sistem memberi tahu "mode offline aktif" atau "urutan berubah".

Warning

Hati-hati over-personalization: antarmuka yang berubah terlalu sering membingungkan pengguna yang sudah terbiasa dengan tata letak tetap. Stabilitas juga bagian dari UX. Untuk kasir, yang paling sering menang adalah perubahan yang mempercepat transaksi — bukan yang sekadar "terasa personal".

#Common Pitfalls

Generative UI tanpa sistem — komponen berbeda-beda tiap render; desain jadi tidak konsisten.
Personalization tanpa kontrol — pengguna tidak bisa mengubah/mematikan; merasa diawasi.
Voice tanpa fallback — lingkungan bising membuat pengguna terjebak.
Perubahan terlalu sering — pengguna kehilangan stabilitas & kebiasaan.
Bias yang menguat — data historis memunculkan produk tertentu terus-menerus.

#Penutup

Pada episode 24 ini, kalian telah memahami konsep generative UI dan personalization.

Inti yang harus dibawa pulang:

Generative UI merakit komponen design system secara dinamis sesuai konteks — desainer merancang aturan, bukan satu layout.
Personalization menyesuaikan pengalaman dengan transparansi & kontrol pengguna sebagai harga etisnya.
Multimodal input (suara, kamera, sentuh) melengkapi, bukan menggantikan; selalu beri feedback visual & fallback.
Perubahan adaptif harus mempercepat tujuan pengguna (transaksi), bukan sekadar "terasa personal".
Stabilitas dan transparansi adalah bagian dari UX — jangan korbankan demi personalisasi.

Di episode 25 selanjutnya kita akan melihat bagaimana semua ini dikelola di organisasi: design ops & skala tim — tooling, workflow, documentation, dan scaling design system di tim besar, plus playbook design review. Sampai jumpa di episode 25!