Belajar UI Designer - Prototyping & Interaction

#Pendahuluan

Setelah di episode 11 produk kita tampil di banyak layar, pada episode ini layar-layar itu kita hubungkan: prototype. Layar statis hanya bisa dinilai "bagus tidaknya tampilan"; prototype yang clickable bisa menjawab pertanyaan yang lebih penting — "apakah pengguna tahu langkah selanjutnya?".

Mengapa prototyping adalah keterampilan inti UI designer? Karena sebagian besar masalah pengalaman baru terlihat saat produk dijalankan, bukan saat dilihat statis. Alur yang tampak jelas di kertas sering terasa janggal saat diklik — dan menemukan kejanggalan ini di fase desain jauh lebih murah daripada di fase pengembangan.

#User Flow Sebelum Prototype

Prototype yang baik berangkat dari user flow — peta langkah pengguna menyelesaikan satu tugas. Untuk alur "tambah transaksi" di Kantongin:

100%

Tulis flow sebelum menyentuh tab prototype. Flow menentukan layar apa yang perlu dibuat dan interaksi apa yang perlu disambungkan. Tanpa flow, prototyping sering jadi sambungan sembarangan antar layar.

#Interaksi Dasar Figma

Di Figma, buka tab Prototype dan sambungkan trigger → aksi:

Trigger — apa yang memulai interaksi: onTap, onDrag, onHover, whileHover, whilePressed, atau whileFocus.
Aksi — apa yang terjadi: Navigate (pindah layar), Swap (ganti isi frame), Overlay (modal), Open link, atau Set variable.
Destination — layar tujuan.

Interaksi tombol Tambah Transaksi

Tombol [onTap] → Navigate → Screen: Form Transaksi
Trigger onTap  | Animasi Smart Animate | 300ms | ease-out

Untuk feedback visual, kombinasikan dengan variants: tombol punya state default → pressed (via whilePressed) sehingga saat diklik tombol terasa ditekan, lalu layar berpindah. Detail ini yang membuat prototype terasa nyata, bukan sekadar berpindah-pindah halaman.

#Animasi Transisi

Transisi antar layar bukan hiasan — ia memberi konteks spasial: pengguna tahu dari mana dia datang dan ke mana dia pergi. Prinsip dasar:

Dari mana elemen datang? Elemen yang berhubungan antar layar (misal kartu transaksi → detail transaksi) sebaiknya dihubungkan dengan Smart Animate dengan nama layer yang sama, sehingga Figma menginterpolasi posisi/ukuran.
Durasi — transisi standar 150-300 ms; gerakan UI jangan sampai terasa "terbang" atau "tersendat" (dibahas detail di episode 16).
Easing — ease-out untuk muncul, ease-in untuk menghilang, ease-in-out untuk perpindahan.

Tip

Mulai dari interaksi yang benar-benar penting untuk diuji: navigasi utama, submit form, dan feedback error/sukses. Jangan membuat semua layar "serba bisa diklik" sejak awal — fokuskan prototype pada alur yang ingin kalian pertanyakan, sisanya cukup statis.

#Prototype Clickable

Prototype clickable adalah versi yang bisa dicoba orang lain. Untuk menguji alur "tambah transaksi" dengan tester (di episode 14 dan 25), siapkan:

Start point — set frame beranda sebagai titik awal (ikon ▶ di panel prototype).
Alur lengkap — semua langkah dari flow terhubung, termasuk state error dan empty.
Device preset — tampilkan dalam frame iPhone/desktop sesuai konteks uji.
Share link — mode Present atau share link agar tester bisa mencoba dari device sendiri.

Saat testing, amati di mana tester ragu — itu data paling berharga dari prototype. Detail lengkap metode evaluasi dibahas di episode 14 dan 25.

#Kapan Memakai Tool Prototyping Lain

Figma prototype unggul untuk alur dan interaksi umum. Untuk kebutuhan tertentu, tool lain membantu:

Protopie / Framer — mikro-interaksi kompleks, gesture multi-touch, dan animasi berbasis kondisi.
Figma Smart Animate — transisi antar layar dengan elemen yang sama.

Aturan praktis: mulai di Figma; beralih ke tool lanjutan hanya jika ada kebutuhan nyata (misal memvalidasi gesture khusus). Tool yang lebih kompleks menambah biaya maintenance file.

Warning

Prototype adalah alat validasi, bukan pengganti produk. Hati-hati terjebak "menghaluskan prototype" tanpa pernah mengujinya ke pengguna. Sebuah prototype yang jelek tapi diuji memberi data; prototype yang indah tapi tidak pernah dibuka orang lain hanyalah presentasi.

#Praktik: Prototype Alur Transaksi

Gambar user flow "tambah transaksi" (3-5 layar: beranda → form → review → sukses).
Buat state default/pressed pada tombol lewat variants.
Sambungkan interaksi: onTap tombol → form; submit → review; konfirmasi → sukses.
Terapkan Smart Animate untuk elemen yang sama antar layar.
Share prototype — minta satu orang mencoba alur tanpa instruksi, catat di mana mereka ragu.

#Common Pitfalls

Prototype tanpa flow — layar tersambung acak, tidak mencerminkan alur nyata.
Animasi berlebihan — semua elemen "terbang" sehingga uji alur terasa lambat.
Transisi durasi terlalu lama — 500 ms ke atas terasa lamban untuk navigasi standar.
Melupakan state error/empty — alur hanya sukses; tester tidak melihat apa yang terjadi saat gagal.
Prototype tidak pernah diuji — dibuat untuk "dipamerkan", bukan untuk menjawab pertanyaan desain.

#Penutup

Pada episode 12 ini, kalian telah mengubah layar Kantongin menjadi pengalaman yang bisa dicoba dan diuji.

Inti yang harus dibawa pulang:

User flow adalah fondasi prototype — tentukan layar dan sambungan sebelum klik.
Interaksi dasar Figma: trigger (onTap, whilePressed) + aksi (Navigate, Overlay, Smart Animate).
Transisi memberi konteks spasial: durasi 150-300 ms dengan easing yang tepat.
Prototype berharga saat diuji, bukan saat dipamerkan.

Di episode 13 selanjutnya kita akan membahas handoff design-developer — Dev Mode Figma, spesifikasi, dan dokumentasi aset agar desain Kantongin bisa diimplementasikan tanpa kehilangan detail. Sampai jumpa di episode 13!