Belajar UI/UX Design - Prototyping & Interaction Design

#Pendahuluan

Setelah di episode 10 kita punya komponen kit, pada episode ini kita menghidupkannya — menyambungkan layar menjadi alur yang bisa diklik dan diuji, lengkap dengan micro-interaction yang membuat antarmuka terasa responsif. Inilah momen di mana "gambar" menjadi "produk".

Mengapa penting? Desain statis tidak bisa menguji pengalaman nyata: apakah pengguna paham harus klik apa, apakah transisi terasa alami, apakah umpan balik cukup. Prototype interaktif menjawab semua itu sebelum kode ditulis — dan menjadi bahan usability test di episode 15.

#Interaction Design Fundamentals

Interaction design adalah perancangan respons sistem terhadap tindakan pengguna. Prinsip dasarnya:

• Feedback — setiap aksi mendapat respons: tombol berubah, halaman berpindah, data tersimpan.
• Affordance — elemen memberi petunjuk cara pakainya: tombol terlihat bisa ditekan, input terlihat bisa diisi.
• Consistency — interaksi yang sama menghasilkan respons yang sama di semua layar.
• State visibility — pengguna selalu tahu di mana mereka berada dan apa yang terjadi.

Di Figma, interaksi dibuat di tab Prototype: pilih elemen, klik ikon +, tentukan trigger (on tap, while hover, drag) dan action (navigate to, swap, open overlay, back).

#Micro-Interaction

Micro-interaction adalah detail respons kecil yang membuat produk terasa hidup dan manusiawi. Empat bagian utamanya:

1. Trigger — apa yang memulai (klik tombol, geser).
2. Rules — apa yang terjadi (tombol berubah jadi "memuat").
3. Feedback — bagaimana pengguna tahu (spinner, ceklis).
4. Loops/modes — perubahan state yang menyertainya (tombol non-aktif setelah dipakai).

Contoh untuk KasirKita — tombol "Konfirmasi":

Trigger : klik tombol Konfirmasi
Rules   : tombol berubah jadi state loading 1 detik,
          lalu tampilkan toast "Transaksi tersimpan"
Feedback: spinner di dalam tombol → ceklis hijau singkat
Loop    : setelah selesai, tombol kembali ke default

Micro-interaction yang baik memberi rasa — transaksi berhasil terasa "mantap" karena ada konfirmasi visual yang tepat, bukan layar diam tanpa reaksi.

#State & Flow Logic

Prototype yang baik mencakup state dan flow logic — termasuk jalur yang tidak enak:

• State: default, loading, empty, error, success pada setiap elemen penting.
• Flow: jalur sukses + jalur alternatif (batal, kembali, error, offline).

Untuk alur transaksi KasirKita, prototype harus mencakup:

Jangan hanya memprototipe jalur bahagia. Usability test (episode 15) akan menemukan masalah justru di jalur error — jika prototype tidak punya jalur itu, pengujian tidak representatif.

#Animasi: Durasi dan Easing

Animasi yang baik tidak terlihat — ia membantu orientasi, tidak menghambat. Dua parameter utama:

Panduan animasi (referensi implementasi)

/* Micro-interaction cepat, keluar pelan */
.btn { transition: transform 150ms ease-out; }
 
/* Panel/sheet naik pelan, tidak kaku */
.sheet { transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); }

#Praktik: Prototype Interaktif di Figma

Sambungkan layar KasirKita hasil episode 7-10 menjadi prototype penuh:

1. Sambungkan jalur utama: Beranda → Konfirmasi → Pembayaran → Sukses.
2. Tambah jalur alternatif: tombol Batal, error transaksi (overlay), tombol kembali.
3. Buat micro-interaction: tombol Konfirmasi dengan state loading + toast sukses.
4. Set animasi: durasi 200-300ms, easing default Figma (Ease Out).
5. Uji dalam mode present (tombol ▶): jalankan alur dari awal sampai akhir.

#Common Pitfalls

• Prototype hanya jalur bahagia — jalur error/batal tidak teruji.
• Animasi dekoratif — transisi 800ms yang bergaya membuat pengguna menunggu; gunakan untuk orientasi, bukan pertunjukan.
• Feedback tidak konsisten — klik tombol A memberi umpan balik, tombol B tidak; pengguna kehilangan kepercayaan.
• Mengabaikan state loading — prototype melompat langsung ke hasil, padahal di produk nyata ada jeda.

#Penutup

Pada episode 11 ini, kalian telah menghidupkan KasirKita menjadi prototype interaktif yang siap diuji.

Inti yang harus dibawa pulang:

• Interaction design: feedback, affordance, consistency, dan state visibility.
• Micro-interaction terdiri dari trigger, rules, feedback, dan loops — ia membuat produk terasa hidup.
• Prototype harus mencakup semua jalur flow, termasuk batal dan error, bukan hanya jalur bahagia.
• Animasi: 150-250ms micro, 250-400ms layar; easing yang tepat; hormati reduced-motion.

Di episode 12 selanjutnya kita akan membakukan semua keputusan visual ke design system & design tokens — prinsip, governance, komponen reusable, hingga DTCG Design Tokens dan naming convention untuk KasirKita. Sampai jumpa di episode 12!