Belajar UI/UX Design - Motion Design & Micro-interactions

#Pendahuluan

Setelah di episode 20 kita merancang state dan pemulihan, pada episode ini kita memberi gerakan — bukan demi gaya, melainkan untuk komunikasi. Motion design adalah cara antarmuka menjelaskan apa yang terjadi: elemen masuk dari mana, layar berpindah bagaimana, dan aksi dikonfirmasi dengan apa.

Mengapa penting? Gerakan yang tepat membuat pengguna selalu tahu posisi dan konteksnya (motion sebagai orientasi). Gerakan yang salah — terlalu lama, terlalu ramai, atau sembarangan — membuat produk terasa lambat dan tidak profesional. Di kasir yang kecepatannya segalanya, motion harus membantu, bukan menghambat.

#Timing, Durasi, dan Easing

#Durasi: Secepat yang Masih Bisa Dipahami

Durasi motion berbanding lurus dengan jarak & kompleksitas elemen yang bergerak:

Aturannya: makin kecil elemen, makin cepat. Tombol yang "berdenyut" 500ms terasa mengantuk; panel yang meluncur 100ms terasa patah. Mulai dari angka referensi, lalu uji di perangkat nyata.

#Easing: Karakter Gerakan

Easing menentukan kecepatan di awal vs akhir gerakan:

Easing umum di CSS

.linear        { transition-timing-function: linear; }             /* robotik */
.ease-out      { transition-timing-function: ease-out; }           /* berhenti pelan */
.ease-in-out   { transition-timing-function: ease-in-out; }        /* pergi-berhenti seimbang */
.custom        { transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); } /* alami */

Panduan praktis:

• Masuk (in) — elemen datang: ease-out (mulai cepat, melambat saat berhenti).
• Keluar (out) — elemen pergi: ease-in (percepat lalu pergi).
• Gerakan berulang (pulse, shimmer): ease-in-out.
• Hindari linear untuk gerakan di dunia nyata — benda fisik tidak bergerak konstan.

#Micro-Interaction yang Bermakna

Micro-interaction (dasar di episode 11) paling efektif saat ia mengonfirmasi hasil dan memberi status. Untuk KasirKita:

1. Tombol Bayar — saat ditekan: loading 1 detik → ceklis hijau → kembali. Pengguna tahu transaksi tersimpan.
2. Item ditambahkan ke transaksi — kartu produk memberi respons ringan (skala 0.98 saat ditekan) + toast "Ditambahkan" di bawah.
3. Transisi antar tab — konten slide halus ke arah yang dimaksud, bukan fade acak.
4. Stok menipis — badge berdenyut pelan (bukan strobing) untuk menarik perhatian tanpa mengganggu.

Rule: setiap motion harus menjawab "apa yang terjadi sekarang?" — jika gerakan tidak menambah jawaban, hapus.

#Motion sebagai Orientasi

Gerakan terbaik adalah yang tidak disadari sebagai "animasi" — ia terasa sebagai navigasi yang natural:

• Elemen baru berasal dari arah yang logis (panel dari bawah, detail dari kanan).
• Saat berpindah layar, judul/tombol kunci melanjutkan posisinya agar pengguna tidak kehilangan konteks.
• Konten tetap di tempat saat data di-refresh, bukan layout melompat-lompat.

#Preferensi Reduced-Motion

Sebagian pengguna menderita motion sickness atau gangguan vestibular; sebagian lagi hanya terganggu gerakan berlebihan. Sistem operasi menyediakan pengaturan reduce motion, dan web mengeksposnya lewat CSS:

Hormati prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .anim {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

Saat reduced-motion aktif, konten utama tetap tersampaikan — hanya gerakan dekoratif yang dimatikan. Transisi halaman bisa menjadi fade 100ms; skeleton tidak berdenyut; badge tidak berkedip. Ini bagian dari kepatuhan WCAG (POUR, episode 13).

#Praktik: Animasikan Komponen Utama

Di Figma, gunakan fitur Smart Animate pada tab Prototype:

1. Tombol Bayar: buat varian default → loading → success (spinner → ceklis), hubungkan dengan Smart Animate 200ms.
2. Tab bar: konten berpindah dengan slide 250ms Ease Out.
3. Panel detail produk: muncul dari bawah (overlay) 300ms.
4. Badge stok menipis: animasi pulse 1.5s (di Figma lewat prototipe/plugin; tandai untuk developer).
5. Buat frame "Motion Guide" di design system: tabel durasi & easing standar + aturan reduced-motion untuk developer.

#Common Pitfalls

• Motion hanya hiasan — gerakan yang tidak mengkomunikasikan apa pun.
• Durasi terlalu lama — antarmuka terasa lambat; setiap 100ms ekstra adalah hambatan.
• Semua elemen animasi — layar seperti pohon natal; pilih elemen yang perlu gerak.
• Mengabaikan reduced-motion — pengguna vestibular tersingkir.
• Easing asal — linear dan durasi seragam membuat gerakan terasa robotik.

#Penutup

Pada episode 21 ini, kalian telah memberi gerakan yang bermakna pada KasirKita.

Inti yang harus dibawa pulang:

• Durasi mengikuti kompleksitas: micro 100-200ms, panel 200-300ms, layar 250-400ms.
• Easing memberi karakter: ease-out untuk masuk, ease-in untuk keluar, hindari linear.
• Micro-interaction mengonfirmasi hasil dan memberi status — bukan sekadar dekorasi.
• Motion sebagai orientasi: elemen datang dari arah logis, konteks tidak hilang.
• Reduced-motion wajib dihormati; informasi penting tidak boleh hanya ada dalam gerakan.

Di episode 22 selanjutnya kita akan menyerahkan pekerjaan kepada developer: design handoff — Dev Mode, spec & annotation, token export DTCG, dan kolaborasi design review untuk KasirKita. Sampai jumpa di episode 22!