Belajar Product Designer - Generative & Adaptive Interfaces
Mendesain antarmuka yang tidak lagi statis: adaptive UI, komponen generatif, dan personalisasi konten di era GenUI. Di episode ini kalian merancang home Sehati yang adaptif berdasarkan kondisi pengguna, belajar menjaga kualitas dan kepercayaan ketika interface berubah-ubah, dan memahami peran design system di dalamnya
#Pendahuluan
Setelah di episode 21 kita merancang AI-native features untuk Sehati, pada episode ini kita melangkah lebih jauh: interface yang bisa berubah sendiri. Selama puluhan tahun, UI adalah artefak statis yang didesain sekali dan ditampilkan sama untuk semua. Era GenUI (generative UI) mengubah asumsi itu: interface di-generate secara dinamis berdasarkan konteks, data, dan tujuan pengguna.
Ini menghadirkan paradoks menarik bagi product designer: kita tidak lagi hanya mendesain layar, tetapi mendesain sistem yang menghasilkan layar. Tantangannya bergeser dari "membuat tata letak" ke "membuat aturan dan penjaga kualitas". Dan di produk kesehatan, interface yang salah di-generate bisa menyesatkan — kualitas bukan pilihan.
#Adaptive UI: Berubah Sesuai Konteks
Adaptive UI menyesuaikan tampilan berdasarkan konteks: waktu, kondisi pengguna, perangkat, riwayat, dan tujuan. Ini berbeda dari sekadar responsive (menyesuaikan ukuran layar) — adaptif menyesuaikan isi dan prioritas, bukan hanya tata letak.
Contoh home Sehati yang adaptif:
Skenario A (pagi, pasien diabetes):
┌─ Pertahankan rutinitas pagi
├─ [Cek gula darah] [Obat: metformin 500mg ✔]
└─ Artikel: "Kadar gula puasa yang sehat"
Skenario B (malam, pasien batuk 2 hari):
┌─ Perlu perhatian
├─ [Cek gejala batuk] [Konsultasi 24 jam]
└─ Info: "Kapan batuk perlu ke dokter?"Perhatikan: bukan sekadar urutan berbeda — prioritas dan CTA yang ditampilkan berbeda berdasarkan kondisi pasien. Adaptif yang baik mengurangi langkah (episode 6): pasien diabetes langsung melihat aksi yang relevan tanpa mencari.
#Generative Components & Personalisasi
Generative components adalah elemen UI yang dihasilkan oleh AI berdasarkan data — bukan template statis. Contoh: kartu ringkasan kesehatan yang ditulis ulang sesuai hasil terbaru, atau halaman "rencana perawatan" yang disusun dari jawaban triase.
Personalisasi yang dilakukan dengan benar menggunakan data untuk mempercepat tujuan pengguna, bukan untuk menampilkan lebih banyak iklan. Prinsipnya:
| Personalisasi baik | Personalisasi buruk |
|---|---|
| Menyesuaikan CTA dengan kondisi kesehatan | Menampilkan iklan berdasarkan gejala |
| Menyederhanakan form dengan data yang dimiliki | Menyembunyikan opsi yang "kurang menguntungkan" |
| Menjelaskan mengapa konten ini muncul | Membuat user merasa diintai tanpa alasan |
Batas ini penting — menyeberang ke "personalisasi buruk" adalah dark pattern (episode 18) dan bisa menandai pelanggaran privasi (episode 19).
Warning
Di era GenUI, determinisme hilang: dua pengguna bisa melihat antarmuka berbeda, dan halaman yang sama bisa berubah antar kunjungan. Ini masalah besar untuk testing dan trust. Solusinya: tetapkan bagian mana yang boleh generatif (konten, kartu rekomendasi) dan bagian mana yang wajib statis & konsisten (navigasi, tombol aksi berisiko, konfirmasi). Jangan pernah membiarkan AI mem-generate elemen yang berpotensi berbahaya bila salah.
#Menjaga Kualitas di Interface Dinamis
Karena UI tidak lagi statis, kontrol kualitas harus bergeser dari "review tiap layar" ke review sistem penghasil layar:
- Design tokens sebagai penjaga batas — komponen generatif hanya boleh menyusun token yang ada (episode 8), tidak boleh menciptakan warna/spacing baru.
- Templat terkurasi + isi generatif — layout dari template yang divalidasi manusia; AI hanya mengisi isi (teks, rekomendasi).
- Validasi otomatis — aturan teknis yang dicek: kontras, target sentuh, panjang teks, jumlah CTA per layar.
- Human review sampel — reviewer memeriksa layar hasil generate secara berkala, bukan tiap layar.
- Feedback pengguna — tombol "kenapa ini muncul?" dan laporan "konten tidak relevan" menjadi umpan balik.
Wajib: 1 CTA primer (tindakan), maks 1 CTA sekunder
Wajib: token warna dari semantic scale, kontras ≥ 4.5:1
Wajib: teks maks 2 baris, tanpa klaim medis tanpa sumber
Dilarang: memunculkan harga/penawaran dari data gejalaAturan ini adalah "guardrails" yang mengubah komponen generatif menjadi aman — desainnya dijamin konsisten walau isinya dinamis.
#Praktik: Rancang Home Adaptif Sehati
- Definisikan 2 skenario konteks (misal pasien baru vs pasien diabetes rutin).
- Sketsa home adaptif untuk tiap skenario (lo-fi).
- Tentukan bagian statis (navigasi, konfirmasi) dan bagian generatif (kartu rekomendasi).
- Tulis 3 aturan guardrail untuk komponen generatif (contoh di atas).
#Penutup
Inti yang harus dibawa pulang:
- Adaptive UI menyesuaikan prioritas & isi, bukan sekadar tata letak.
- Generatif & personalisasi harus memprioritaskan tujuan pengguna, bukan iklan.
- GenUI menghilangkan determinisme — tetapkan bagian yang wajib statis.
- Kualitas dijaga lewat tokens + templat + validasi + human review — bukan review tiap layar.
- Tulis guardrails tegas untuk elemen yang bisa membahayakan bila salah.
Di episode 23 selanjutnya kita akan membahas scalable design systems — memperluas design system Sehati lintas produk dan tim: token governance, contribution model, dan cara menjaga sistem tetap sehat saat perusahaan bertumbuh. Sampai jumpa di episode 23!