Belajar UI Designer - Motion & Micro-interactions

#Pendahuluan

Setelah di episode 15 produk kita accessible, pada episode ini kita menghidupkannya: motion dan micro-interactions. Gerakan kecil — tombol yang merespons sentuhan, angka yang berubah mulus, toast yang meluncur — membuat antarmuka terasa hidup dan merespons, bukan sekadar gambar diam.

Mengapa motion penting untuk UI designer? Karena gerakan adalah feedback (ingat heuristik Nielsen ke-1 di episode 14): ia memberitahu pengguna bahwa aksi diterima. Tapi gerakan juga mudah disalahgunakan — animasi yang berlebihan membuat aplikasi terasa lambat dan melelahkan. UI designer profesional tahu kapan bergerak, bukan sekadar bagaimana.

#Prinsip Dasar Motion

#Timing (Durasi)

Durasi menentukan kecepatan dan "perasaan" gerakan:

Aturan emas: semakin kecil elemen, semakin cepat gerakannya. Motion UI harus terasa instan untuk aksi kecil, dan hanya sedikit lebih "dramatis" untuk perpindahan layar.

#Easing (Kurva Gerak)

Easing mengatur percepatan gerakan — dan inilah yang paling membedakan animasi "profesional" dari "main-main". Jangan pernah memakai default linear untuk UI:

ease-out  : mulai cepat, melambat di akhir → elemen MASUK (kurva umum)
ease-in   : mulai lambat, menguat → elemen KELUAR
ease-in-out: lambat di awal & akhir → perpindahan antar elemen
standard (Material): cubic-bezier(0.2, 0, 0, 1) → gerak "materi"

Dalam Figma, easing diatur di panel prototype (Ease out, Ease in, atau Custom). Untuk gerak material yang natural, pakai curve cubic-bezier(0.2, 0, 0, 1).

#Micro-interactions

Micro-interaction adalah momen kecil yang membuat pengguna merasa produk merespons. Komponennya: trigger, aturan (rules), umpan balik, dan loop. Contoh di Kantongin:

• Tombol simpan → whilePressed memberi efek tekan; saat berhasil, checkmark singkat (300 ms).
• Toggle dark mode → gerakan kecil pada switch + ikon berubah (sun → moon).
• Angka saldo → berubah dengan counter animation yang cepat (150 ms) saat transaksi dicatat.
• Toast sukses → meluncur dari bawah (ease-out), menetap 2-3 detik, lalu keluar (ease-in).

Micro-interaction harus mendukung konteks: gerakan pada aksi sukses memberi kepastian, gerakan pada error memberi peringatan — bukan sekadar "lucu".

#Motion yang Bermakna vs Hiasan

Pertanyaan kurasi yang harus selalu ditanyakan: "apakah gerakan ini membantu pengguna memahami atau hanya menghias?"

Aturan praktis: kalau gerakan dihapus dan tidak ada yang kehilangan informasi, gerakan itu hiasan — pertimbangkan untuk dihapus. Motion yang baik menghilang di balik fungsinya.

#Motion Spec (Spesifikasi Gerakan)

Agar developer bisa mengimplementasikan motion dengan tepat, susun motion spec sebagai bagian dari design system (token motion.* yang kita sebut di episode 9):

motion.duration.fast     = 150 ms   → micro-interaction
motion.duration.normal   = 250 ms   → transisi standar
motion.duration.slow     = 400 ms   → elemen besar
motion.easing.standard   = cubic-bezier(0.2, 0, 0, 1)
motion.easing.in         = ease-in
motion.easing.out        = ease-out
motion.reduce            = none      → saat user reduce-motion

Motion spec menjawab empat pertanyaan: berapa lama (duration), bagaimana kurva (easing), apa yang bergerak (property), dan apa yang memicunya (trigger). Dokumentasikan ini di halaman Tokens file system — lalu jadikan patokan saat handoff (episode 13).

#Praktik: Motion Spec Kantongin

1. Tambahkan token motion.* ke file Kantongin-System.
2. Desain 3 micro-interaction: tombol pressed, toggle theme, dan toast sukses — pakai variants + prototype.
3. Terapkan durasi/easing sesuai token pada masing-masing.
4. Dokumentasikan property (opacity, transform) dan trigger tiap animasi.
5. Uji dengan reduce-motion aktif — pastikan alur masih berfungsi tanpa animasi.

#Common Pitfalls

• Semua linear — animasi terasa kaku; selalu pakai easing.
• Durasi terlalu panjang — semuanya ≥ 500 ms membuat aplikasi terasa lambat.
• Motion tanpa fungsi — gerakan dekoratif yang membuat pengguna pusing.
• Mengabaikan reduce motion — animasi dipaksa untuk pengguna yang butuh tenang.
• Motion spec tidak ada — developer mengimplementasi gerakan dengan asumsi masing-masing.

#Penutup

Pada episode 16 ini, kalian telah menghidupkan Kantongin dengan motion yang bermakna dan spesifik.

Inti yang harus dibawa pulang:

• Timing: mikro 100-200 ms, transisi layar 200-400 ms — kecil lebih cepat.
• Easing: ease-out untuk masuk, ease-in untuk keluar; hindari linear.
• Micro-interaction adalah feedback nyata, bukan hiasan — tanya selalu "apakah ini membantu?".
• Motion tokens (duration, easing, reduce) didokumentasikan agar implementasi konsisten.

Di episode 17 selanjutnya kita akan membahas data visualization UI — chart, dashboard layout, dan storytelling data untuk menyajikan angka Kantongin dengan jelas. Sampai jumpa di episode 17!