Program Studi Bisnis Digital • FEB UNDIP

Desain UI & UX

Pertemuan 11 — Prototyping Interaktif: Menghubungkan Layar, Komponen, dan Microinteractions

Dari mockup diam menjadi rancangan yang bisa diklik, bergerak, dan terasa hidup — fondasi sebelum uji coba dengan pengguna nyata.

RPS MINGGU 12 • 2X50 MENIT

Selamat datang kembali, Saudara sekalian, di pertemuan kesebelas mata kuliah Desain UI dan UX. Dua pekan lalu kita sudah menyusun mockup high-fidelity yang tampak seperti aplikasi sungguhan, lengkap dengan warna, tipografi, dan komponen dari Design System yang kita bangun sendiri. Masalahnya, mockup itu masih berupa gambar diam — kalau Anda tunjukkan ke calon investor atau ke pengguna untuk uji coba, mereka tidak bisa benar-benar "memakainya". Hari ini kita mengubah gambar diam itu menjadi prototipe interaktif: layar-layar yang saling terhubung, tombol yang bisa diklik, dan microinteraction kecil seperti animasi tombol "like" di Tokopedia yang membuat aplikasi terasa hidup. Siapkan laptop dan akun Figma Anda, karena di akhir sesi kita akan langsung praktik merangkai prototipe checkout sederhana.

Bagian 1 dari 3

Dari Rancangan Diam ke Rancangan Hidup

Mengenal fidelity spektrum, istilah kunci prototyping interaktif, dan anatomi satu interaksi di Figma.

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda diharapkan mampu:

MEMAHAMI

konsep inti prototyping

Hotspot, transisi, state komponen, dan microinteraction — empat blok bangunan sebuah prototipe interaktif.

MAMPU

MERANGKAI

alur antar-layar

Menghubungkan beberapa layar mockup menjadi satu alur yang bisa diklik dan diuji seperti aplikasi asli.

Menjelaskan perbedaan low-fi, mid-fi, dan high-fi prototype serta kapan tiap tingkat dipakai.
Merancang microinteraction sederhana (trigger – rules – feedback) untuk satu aksi pengguna.

Mengapa Tidak Langsung Coding Saja?

Prototipe interaktif memungkinkan uji coba sebelum satu baris kode pun ditulis — jauh lebih murah untuk memperbaiki kesalahan di tahap ini.

Tanpa prototipe: tim programmer membangun aplikasi penuh selama berbulan-bulan, baru ketahuan alur checkout membingungkan pengguna setelah dirilis — biaya perbaikan mahal.

Dengan prototipe: tim UX menguji alur checkout dalam hitungan hari di Figma, revisi cepat, baru diserahkan ke programmer setelah alur teruji.

Kasus nyata: startup fintech lokal sering mengubah alur onboarding hingga 5–6 kali berdasarkan hasil uji prototipe, jauh sebelum aplikasi dirilis ke Play Store.

Pertanyaan yang sering muncul dari mahasiswa adalah, kenapa tidak langsung minta programmer membuat aplikasinya saja? Jawabannya soal biaya dan kecepatan: mengubah desain di Figma hanya perlu menggeser beberapa elemen dan menghubungkan ulang panah, sementara mengubah aplikasi yang sudah jadi kode berarti programmer harus menulis ulang logika, menguji ulang, dan berisiko memunculkan bug baru. Bayangkan sebuah startup fintech di Indonesia yang sedang merancang alur pendaftaran akun baru — dengan prototipe interaktif, tim desain bisa menguji lima sampai enam versi alur onboarding dalam waktu singkat, mendapat masukan dari calon pengguna, lalu memilih versi terbaik sebelum satu baris kode pun ditulis. Ini menghemat waktu pengembangan sekaligus mengurangi risiko aplikasi gagal dipakai karena alurnya membingungkan. Prinsip ini yang membuat prototyping menjadi jembatan wajib antara desain visual dan pengembangan sungguhan.

Rekap: Spektrum Fidelity Rancangan

Prototyping interaktif hari ini bekerja di atas mockup high-fidelity yang sudah Anda buat pada pertemuan sebelumnya.

Tingkat	Wujud	Fokus Uji
Low-fidelity	Sketsa/wireframe garis kotak-kotak	Struktur & alur informasi
Mid-fidelity	Wireframe abu-abu berlabel	Tata letak & hierarki
High-fidelity	Mockup penuh warna & komponen	Estetika & kesan visual
Interaktif	Layar terhubung, bisa diklik	Alur perilaku & interaksi

Prototyping menambahkan dimensi baru — bukan menggantikan fidelity visual, melainkan menghidupkan alurnya.

Mari kita hubungkan materi hari ini dengan yang sudah kita pelajari sebelumnya, supaya Anda tidak bingung dengan istilah "fidelity". Fidelity itu soal seberapa detail tampilan visualnya — dari sketsa kasar low-fidelity, ke wireframe rapi mid-fidelity, sampai mockup penuh warna high-fidelity yang mirip aplikasi asli. Prototyping interaktif adalah dimensi yang berbeda: dia menambahkan kemampuan untuk diklik dan berpindah layar, dan bisa diterapkan di semua tingkat fidelity — bahkan sketsa kertas pun bisa "diprototipekan" secara sederhana dengan menyusun kartu-kertas dan menunjuk manual. Namun untuk proyek akhir Anda, kita akan langsung bekerja di atas mockup high-fidelity yang sudah rapi, supaya prototipe yang dihasilkan sudah cukup meyakinkan untuk diuji ke calon pengguna sungguhan minggu depan. Jadi ingat, prototyping bukan tahap yang menggantikan mockup, tapi tahap yang menghidupkannya.

Kamus Kecil: Istilah Kunci Prototyping

Lima istilah yang akan terus muncul sepanjang sesi ini — hafalkan maknanya, bukan hanya namanya.

Layar & Koneksi

Hotspot: area yang bisa diklik/disentuh pada sebuah layar (tombol, kartu produk, ikon).
Transisi: cara perpindahan visual dari satu layar ke layar lain (mis. geser, memudar).
Overlay: layar kecil yang muncul di atas layar utama, seperti pop-up konfirmasi.

Perilaku & Rasa

State (kondisi): tampilan berbeda dari komponen yang sama, mis. tombol normal vs ditekan.
Microinteraction: animasi kecil yang memberi umpan balik atas satu aksi pengguna.

Anggap slide ini sebagai kamus saku yang akan terus Anda buka sepanjang sesi hari ini. Hotspot adalah area yang bisa diklik — misalnya tombol "Tambah ke Keranjang" di halaman produk Tokopedia adalah sebuah hotspot. Transisi adalah cara perpindahan antar-layar, apakah geser dari kanan seperti membuka halaman baru, atau memudar seperti membuka pop-up. Overlay adalah layar kecil yang muncul di atas layar utama tanpa mengganti layar itu sepenuhnya, contohnya jendela konfirmasi "Hapus item ini?" yang muncul saat Anda menekan ikon sampah di aplikasi belanja. State menjelaskan tampilan berbeda dari komponen yang sama tergantung kondisinya, dan microinteraction adalah animasi kecil pemberi umpan balik, seperti hati yang membesar sesaat ketika Anda menekan tombol suka di Instagram. Lima istilah ini akan kita bedah satu per satu di slide-slide berikutnya dengan contoh yang lebih konkret.

Anatomi Satu Interaksi di Figma

Tiap koneksi antar-layar di Figma prototype dibangun dari empat bagian yang selalu berurutan.

Ubah salah satu bagian saja — misalnya ganti trigger dari "Klik" menjadi "Hover" — dan rasa interaksinya berubah total.

Setiap koneksi yang Anda tarik dengan panah biru di Figma sebenarnya adalah rangkaian empat keputusan desain, bukan sekadar garis penghubung. Trigger menjawab pertanyaan "aksi apa dari pengguna yang memicu perubahan", misalnya tap layar pada perangkat mobile atau klik mouse pada desktop. Action menjawab "apa yang terjadi", biasanya berpindah ke layar lain, membuka overlay, atau kembali ke layar sebelumnya. Animasi menjawab "bagaimana perpindahannya terlihat" — polos berpindah seketika, memudar halus, atau fitur Smart Animate yang membuat elemen bergerak mulus dari posisi lama ke posisi baru. Destinasi menjawab "berakhir di mana". Kalau Anda mengganti satu bagian saja, misalnya trigger dari klik menjadi hover atau mendekatkan kursor, rasa interaksi keseluruhan berubah total — inilah yang membuat proses desain interaksi terasa seperti menyusun kalimat, bukan sekadar menghubungkan titik.

Walkthrough: Menghubungkan Dua Layar

Contoh kasus: menghubungkan halaman Daftar Produk ke halaman Detail Produk toko fesyen daring.

Tahap	Yang Dilakukan	Hasil
1. Pilih hotspot	Klik area kartu produk pada layar Daftar Produk	Muncul titik biru penanda hotspot
2. Tarik panah	Seret panah dari titik biru ke layar Detail Produk	Koneksi trigger “On Tap” terbentuk
3. Atur animasi	Pilih Smart Animate, durasi 300 ms, easing Ease Out	Perpindahan terasa halus, bukan mendadak
4. Uji coba	Jalankan mode Present, klik kartu produk	Layar berpindah sesuai rancangan

Sekarang mari kita bayangkan langkah konkretnya di layar Figma, seperti sedang menghubungkan katalog baju di toko fesyen daring buatan UMKM ke halaman detail produknya. Tahap pertama, Anda klik area kartu produk pada layar Daftar Produk untuk menandainya sebagai hotspot, lalu muncul titik biru kecil di pojok kartu. Tahap kedua, Anda seret panah dari titik biru itu menuju layar Detail Produk yang sudah Anda siapkan, sehingga terbentuk koneksi dengan trigger "On Tap" yang berarti perpindahan terjadi saat pengguna mengetuk kartu. Tahap ketiga, Anda memilih jenis animasi Smart Animate dengan durasi sekitar 300 milidetik dan kurva percepatan Ease Out, supaya perpindahan terasa halus bukan mendadak seperti berpindah paksa. Tahap terakhir, Anda menjalankan mode Present di Figma dan mengetuk kartu produk tersebut untuk memastikan semuanya berjalan sesuai rencana — inilah siklus dasar yang akan Anda ulangi puluhan kali saat merangkai prototipe penuh.

Bagian 2 dari 3

Komponen, State, dan Microinteraction

Bagaimana komponen dari Design System berubah wujud sesuai kondisi, dan bagaimana animasi kecil memberi umpan balik.

Dari Component ke Interactive Component

Di pertemuan tentang Design System, Anda belajar variant dan instance. Sekarang keduanya jadi bahan baku interaksi.

Rekap Istilah

Component: elemen master yang dipakai berulang (mis. tombol).
Variant: versi berbeda dari component yang sama (ukuran, warna, kondisi).
Instance: salinan component yang dipakai di layar-layar tertentu.

Fitur Interactive Component di Figma memungkinkan satu instance tombol otomatis berpindah antar-variant saat disentuh — tanpa Anda menggambar ulang.

Mari kita sambungkan lagi dengan materi Design System yang sudah kita bahas sebelumnya, karena konsep itu menjadi fondasi langsung untuk sesi hari ini. Anda ingat component adalah elemen master yang dipakai berulang, seperti tombol "Beli Sekarang" yang muncul di banyak halaman aplikasi belanja. Variant adalah versi-versi berbeda dari component yang sama, misalnya tombol berukuran besar untuk halaman utama dan berukuran kecil untuk kartu produk mini. Instance adalah salinan yang benar-benar dipakai di layar tertentu, yang otomatis mengikuti perubahan bila component induknya diperbarui. Nah, fitur Interactive Component di Figma memanfaatkan variant-variant itu untuk membuat satu instance tombol otomatis berganti tampilan sesuai kondisi — Anda tidak perlu menggambar ulang tombol untuk tiap kondisi, cukup sambungkan variant-variant yang sudah ada.

Empat State Dasar Sebuah Tombol

Contoh: tombol "Bayar Sekarang" pada aplikasi checkout perlu tampil berbeda di tiap kondisi.

Tombol "Bayar Sekarang" berstatus disabled selama form alamat belum lengkap — mencegah kesalahan sebelum terjadi.

Perhatikan tombol "Bayar Sekarang" pada aplikasi belanja daring seperti Shopee atau Blibli — tombol itu sebenarnya bukan satu gambar statis, melainkan berpindah di antara empat kondisi ini sepanjang perjalanan pengguna. State default adalah tampilan normal saat pengguna baru membuka halaman checkout, siap untuk disentuh. State hover khusus muncul di perangkat desktop ketika kursor mouse berada di atas tombol tanpa diklik, biasanya warnanya sedikit berubah sebagai isyarat "tombol ini bisa ditekan". State pressed muncul sepersekian detik saat tombol benar-benar ditekan, memberi umpan balik instan bahwa aksi diterima sistem. State disabled adalah yang paling penting untuk dipahami mahasiswa bisnis digital: tombol dibuat tampak pudar dan tidak bisa ditekan selama form alamat pengiriman belum lengkap, sehingga mencegah pengguna melakukan kesalahan transaksi sebelum data lengkap. Merancang keempat state ini dengan konsisten adalah pekerjaan detail yang membedakan aplikasi terasa profesional atau terasa asal jadi.

Anatomi Microinteraction (Kerangka Dan Saffer)

Tiap microinteraction — sekecil apa pun — tersusun dari empat bagian yang sama.

1. Trigger & 2. Rules

Trigger: apa yang memulai (tap tombol suka).
Rules: apa yang boleh terjadi (jumlah suka bertambah satu, warna berubah merah).

3. Feedback & 4. Loop/Modes

Feedback: apa yang dirasakan pengguna (hati membesar sesaat, getar halus).
Loop & Modes: apa yang berubah bila diulang (tekan lagi = batal suka).

Sekarang kita masuk ke konsep microinteraction, istilah yang dipopulerkan oleh Dan Saffer dan sangat berguna untuk merancang detail-detail kecil yang sering terlupakan mahasiswa pemula. Ambil contoh tombol suka berbentuk hati di Instagram atau TikTok. Triggernya adalah aksi mengetuk ikon hati tersebut. Rules atau aturannya menentukan apa yang boleh terjadi setelah trigger itu, misalnya jumlah suka bertambah satu angka dan warna ikon berubah dari garis menjadi merah penuh. Feedback adalah apa yang dirasakan pengguna secara langsung, seperti ikon hati yang membesar sesaat sebelum kembali normal, memberi kepuasan visual instan. Loop and modes menentukan apa yang terjadi bila aksi yang sama diulang, misalnya menekan ikon hati sekali lagi akan membatalkan suka dan mengembalikan warna ke semula. Keempat bagian ini selalu ada di balik setiap animasi kecil yang terasa "menyenangkan" di aplikasi favorit Anda, dan mulai sekarang Anda akan mulai memperhatikannya secara sadar.

Microinteraction di Aplikasi Sehari-hari

TOKOPEDIA

Wishlist

Ikon hati berdenyut saat produk ditambah ke wishlist, memberi konfirmasi tanpa perlu pesan teks.

GOJEK

Toggle Online

Sakelar driver bergeser halus dan berubah warna saat status berpindah dari offline ke online.

BANK DIGITAL

Loading Transfer

Animasi lingkaran berputar saat transaksi diproses, mencegah pengguna mengetuk tombol berulang.

Mari kita lihat tiga contoh yang mungkin sudah Anda alami sendiri hari ini tanpa terlalu memperhatikannya. Di Tokopedia, saat Anda mengetuk ikon hati pada sebuah produk, ikon itu berdenyut sesaat sebagai konfirmasi bahwa produk sudah tersimpan di wishlist, tanpa perlu memunculkan pesan teks tambahan yang mengganggu. Di Gojek, sakelar status online-offline milik mitra pengemudi bergeser halus dari kiri ke kanan sambil berubah warna, memberi kepastian visual instan bahwa perubahan status berhasil tersimpan di sistem. Pada aplikasi bank digital, animasi lingkaran berputar saat transaksi transfer sedang diproses berfungsi ganda: memberi tahu pengguna bahwa sistem sedang bekerja, sekaligus mencegah pengguna mengetuk tombol kirim berulang kali karena mengira aksinya gagal. Ketiga contoh ini menunjukkan bahwa microinteraction yang baik biasanya tidak disadari secara sadar oleh pengguna — justru itulah tanda keberhasilannya.

Hitung dari Nol: Durasi Animasi Sebuah Daftar

Kasus: menampilkan 5 item pada daftar notifikasi, masing-masing muncul bertahap (staggered).

Langkah	Perhitungan	Nilai
1. Durasi dasar tiap item (standar UI, 200–300 ms)	Dipakai nilai tengah	250 ms
2. Jeda antar-item (stagger delay)	Ditetapkan tim desain	50 ms
3. Total jeda untuk 5 item (item ke-2 s.d. ke-5)	(5 − 1) × 50 ms	200 ms
4. Total waktu sampai item terakhir selesai muncul	250 ms + 200 ms	450 ms

Sekarang kita masuk ke perhitungan konkret, karena durasi animasi bukan angka sembarangan, melainkan hasil kalkulasi sadar. Bayangkan Anda merancang daftar lima notifikasi transaksi di aplikasi dompet digital, dan Anda ingin tiap item muncul bertahap dari atas ke bawah, bukan muncul serentak yang terasa kaku. Langkah pertama, tetapkan durasi dasar tiap item mengikuti standar umum antarmuka yaitu sekitar dua ratus sampai tiga ratus milidetik, kita pakai dua ratus lima puluh milidetik sebagai nilai tengah. Langkah kedua, tetapkan jeda antar-item sebesar lima puluh milidetik, supaya item kedua mulai muncul sedikit setelah item pertama. Langkah ketiga, karena ada lima item dan item pertama tidak perlu jeda, kita kalikan empat jeda tersisa dengan lima puluh milidetik menghasilkan dua ratus milidetik total jeda. Langkah terakhir, kita jumlahkan durasi dasar dengan total jeda itu untuk mendapatkan total waktu sampai item terakhir selesai muncul, yaitu empat ratus lima puluh milidetik — kurang dari setengah detik, tetap terasa cepat namun cukup untuk memberi kesan hidup pada daftar tersebut.

Coba Sendiri: Atur Durasi Animasi Staggered Daftar Anda

Ubah jumlah item, durasi dasar, dan jeda antar-item, lalu amati total waktu sampai item terakhir selesai muncul.

Bagian 3 dari 3

Praktik: Merangkai Prototipe Utuh

Studi kasus alur checkout, menghitung kompleksitas koneksi, kesalahan umum, dan latihan langsung di kelas.

Studi Kasus: Alur Checkout Toko Fesyen UMKM

Lima layar yang perlu dihubungkan menjadi satu alur pembelian utuh.

Alur maju tampak sederhana — tantangan sebenarnya ada pada jalur "kembali" dan kondisi galat (error) di tiap layar.

Mari kita gunakan studi kasus yang mendekati proyek akhir Anda: toko fesyen daring milik UMKM yang ingin punya alur checkout yang mudah diikuti. Alur majunya kelihatan sederhana — dari halaman Katalog, pengguna mengetuk satu produk menuju Detail Produk, lalu menekan tombol tambah ke Keranjang, melanjutkan ke halaman Checkout untuk mengisi alamat dan metode pembayaran, dan berakhir di halaman Konfirmasi pesanan. Namun tantangan sesungguhnya, yang sering dilupakan mahasiswa pemula, ada pada jalur-jalur tambahan: tombol kembali di tiap layar, serta kondisi galat seperti stok produk habis atau form alamat belum lengkap. Garis putus-putus pada diagram ini melambangkan jalur-jalur tambahan tersebut, yang jumlahnya bisa lebih banyak dari jalur maju utamanya. Studi kasus inilah yang akan kita hitung kompleksitasnya di slide berikutnya, supaya Anda punya gambaran realistis soal beban kerja merangkai prototipe checkout yang lengkap.

Hitung dari Nol: Kompleksitas Koneksi Prototipe

Memperkirakan jumlah total koneksi yang perlu dibuat untuk prototipe checkout 5 layar di atas.

Langkah	Perhitungan	Nilai
1. Jumlah layar utama	Katalog, Detail, Keranjang, Checkout, Konfirmasi	5 layar
2. Rata-rata koneksi maju + kembali per layar	Ditetapkan dari alur pada slide sebelumnya	3 koneksi
3. Total koneksi jalur normal	5 layar × 3 koneksi	15 koneksi
4. Tambah koneksi kondisi galat (stok habis, form belum lengkap, dsb.)	15 + 4 koneksi galat	19 koneksi

Angka ini penting untuk Anda sebagai perencanaan waktu, karena mahasiswa sering meremehkan berapa lama merangkai satu prototipe checkout yang lengkap. Langkah pertama, kita hitung jumlah layar utama dari studi kasus sebelumnya, yaitu lima layar: Katalog, Detail Produk, Keranjang, Checkout, dan Konfirmasi. Langkah kedua, kita perkirakan rata-rata tiga koneksi per layar, mencakup satu koneksi maju ke layar berikutnya dan setidaknya satu atau dua koneksi kembali atau ke overlay. Langkah ketiga, kita kalikan lima layar dengan tiga koneksi tersebut, menghasilkan lima belas koneksi untuk jalur normal saja. Langkah terakhir, kita tambahkan empat koneksi tambahan untuk kondisi galat yang realistis, seperti notifikasi stok produk habis atau form alamat belum lengkap, sehingga totalnya menjadi sembilan belas koneksi. Angka ini adalah estimasi ilustratif untuk membantu perencanaan, bukan rumus baku — tetapi cukup untuk menunjukkan bahwa prototipe checkout yang tampak sederhana sebenarnya butuh ketelitian membuat hampir dua puluh koneksi berbeda.

Kesalahan Umum Prototyping Interaktif

Lupa jalur kembali. Prototipe hanya bisa maju, pengguna terjebak tanpa cara kembali ke layar sebelumnya saat diuji.

Animasi terlalu lama. Durasi transisi di atas 500 ms membuat aplikasi terasa berat dan lamban, bukan responsif.

State tidak lengkap. Tombol tidak punya tampilan disabled, sehingga pengguna bisa menekan tombol yang seharusnya belum aktif.

Hotspot tidak konsisten. Area yang bisa diklik terlalu kecil atau berbeda posisi di tiap layar, membingungkan saat uji coba.

Sebelum praktik, mari kita bahas empat jebakan paling umum yang saya temukan berulang kali pada prototipe mahasiswa di kelas-kelas sebelumnya. Kesalahan pertama, lupa membuat jalur kembali — ini fatal karena saat pengujian usability minggu depan, pengguna asli akan mencoba menekan tombol kembali dan merasa terjebak kalau tidak ada koneksinya. Kesalahan kedua, animasi yang terlalu lama, di atas lima ratus milidetik, membuat aplikasi terasa berat dan lamban alih-alih responsif — ingat dari perhitungan tadi bahwa standar wajar ada di kisaran dua ratus sampai tiga ratus milidetik. Kesalahan ketiga, state komponen yang tidak lengkap, misalnya tombol bayar tidak dibuat disabled saat form belum lengkap, sehingga pengguna bisa "membayar" padahal datanya belum valid. Kesalahan keempat, ukuran atau posisi hotspot yang tidak konsisten antar-layar, membuat pengguna bingung karena area yang bisa diketuk berpindah-pindah tanpa pola yang jelas. Ingat baik-baik empat hal ini saat Anda mengerjakan latihan berikutnya.

Latihan Kelas: Rangkai 3 Layar

Waktu: 15 menit. Kerjakan berpasangan menggunakan mockup high-fidelity dari pertemuan sebelumnya.

Instruksi

Pilih 3 layar mockup Anda (mis. Beranda → Detail → Keranjang).
Buat minimal 1 hotspot per layar dengan trigger "On Tap".
Terapkan transisi Smart Animate, durasi 250–300 ms.
Tambahkan minimal 1 state "disabled" pada salah satu tombol.
Uji di mode Present — pastikan ada jalur kembali (back).

Hasil dikumpulkan sebagai link Figma di grup kelas sebelum sesi berakhir.

Sekarang giliran Anda praktik langsung, jadi silakan berpasangan dengan teman sebelah dan buka file mockup high-fidelity yang sudah Anda buat pada pertemuan sebelumnya. Pilih tiga layar saja untuk latihan ini supaya cukup waktu diselesaikan dalam lima belas menit, misalnya dari halaman Beranda menuju Detail Produk lalu ke Keranjang. Pastikan setiap layar punya minimal satu hotspot dengan trigger "On Tap", terapkan transisi Smart Animate dengan durasi antara dua ratus lima puluh sampai tiga ratus milidetik seperti yang sudah kita hitung tadi, dan jangan lupa menambahkan minimal satu tombol dengan state disabled untuk melatih kepekaan Anda terhadap kondisi galat. Yang paling penting, uji hasilnya di mode Present dan pastikan ada jalur kembali supaya tidak mengulangi kesalahan umum yang baru saja kita bahas. Setelah selesai, kumpulkan link Figma di grup kelas — saya akan berkeliling untuk membantu kelompok yang mengalami kendala.

Rangkuman & Persiapan Pertemuan 12

Yang Kita Pelajari

Anatomi interaksi: trigger – action – animasi – destinasi.
State komponen (default/hover/pressed/disabled) & microinteraction (trigger–rules–feedback–loop).
Menghitung durasi animasi & kompleksitas koneksi prototipe.

TUGAS SEBELUM P12

Prototipe Utuh

Selesaikan prototipe interaktif proyek akhir Anda (semua layar terhubung) — akan dipakai langsung sebagai bahan usability testing minggu depan.

Mari kita rangkum perjalanan kita hari ini sebelum saya tutup sesi. Kita mulai dari memahami anatomi satu interaksi yang terdiri dari trigger, action, animasi, dan destinasi, lalu masuk ke detail state komponen dan kerangka microinteraction ala Dan Saffer yang membuat aplikasi terasa hidup dan responsif. Kita juga sudah berlatih menghitung dari nol, baik durasi animasi sebuah daftar maupun perkiraan jumlah koneksi untuk prototipe checkout yang realistis. Tugas Anda sebelum pertemuan berikutnya adalah menyelesaikan prototipe interaktif untuk proyek akhir Anda sendiri, memastikan semua layar sudah terhubung lengkap dengan jalur kembali dan state yang sesuai, karena pertemuan depan kita akan langsung memakainya sebagai bahan usability testing dengan metode think-aloud protocol bersama pengguna sungguhan. Siapkan mental Anda, karena melihat orang lain mencoba menggunakan rancangan Anda sendiri adalah pengalaman yang sangat berharga sekaligus kadang mengejutkan. Sampai jumpa di pertemuan dua belas.