Membangun
Interaksi & Prototype
Menghidupkan desain statis menjadi produk interaktif yang bisa diklik, dicoba, dan diuji pengguna.
Apa itu Interaction Flow?
Trigger
Pemicu aksi. Apa yang diklik user?
Action
Proses yang terjadi.
Destination
Hasil akhirnya.
Contoh Flow Sederhana
Prinsip Flow yang Baik
Natural & Terprediksi
Alur harus masuk akal bagi manusia. Jangan membuat pengguna bingung dengan lompatan yang aneh.
Klik Produk → Lihat Detail
Klik Back → Splash Screen
Konsistensi Navigasi
Tombol dan navigasi harus selalu berada di tempat yang sama dan berperilaku sama.
Reversible (Bisa Dibalik)
Pengguna harus selalu bisa membatalkan aksi atau kembali ke tempat sebelumnya. Jalur buntu (Dead End) adalah kesalahan fatal.
"Setiap layar harus punya minimal 1 jalan keluar."
Error State
Apa yang terjadi jika user melakukan kesalahan? Aplikasi yang baik tidak hanya menangani "Happy Path" (semua lancar), tapi juga "Unhappy Path".
-
Jangan Pindah Layar Jika login gagal, user harus tetap di halaman login.
-
Pesan Jelas Beritahu apa yang salah. "Password Salah", bukan "Error 404".
LOGIN PAGE
Membuat Prototype di Figma
Tab Prototype
Pindah dari tab "Design" ke "Prototype" di panel kanan.
Pilih Hotspot
Klik elemen yang akan diklik (tombol/card).
Tarik Kabel
Drag titik plus (+) biru ke layar tujuan.
Setting Animasi
Pilih "Navigate To" dan jenis animasi (Slide/Instant).
Jenis Animasi Umum
Gunakan animasi yang sesuai konteks.
Tugas Individu: Prototyping
Lanjutkan wireframe Anda menjadi prototype aktif.
Wajib Ada (Min 5 Interaksi)
Bonus Points +++
Buat "Login Gagal" (Error State) & Overlay Konfirmasi.
Pengumpulan
- Copy Link Figma (Share View)
- Screen Record Prototype (Opsional)
FORMAT NAMA
Prototype_[Nama]_KD2.3
Check Sebelum Submit
Pastikan tidak ada "Dead End" (Layar tanpa jalan keluar).
Selamat Berkarya!
"Flow yang baik terasa tidak terlihat. User mencapai tujuan tanpa berpikir."