Microinteractions & Animation — Detail yang Bikin UI Terasa Hidup

Microinteractions adalah animasi kecil yang memberi feedback saat user berinteraksi dengan antarmuka — tombol yang sedikit "menekan" saat diklik, checkmark yang muncul dengan animasi, progress bar yang smooth. Mereka terlihat sepele, tapi membedakan aplikasi yang terasa "mahal" dari yang terasa "murah".

4 Bagian Anatomi Microinteraction

Menurut Dan Saffer (penulis buku Microinteractions):

1. Trigger — apa yang memulai interaksi (klik, hover, scroll, load)
2. Rules — apa yang terjadi (state berubah, animasi berjalan)
3. Feedback — bagaimana user tahu itu terjadi (visual, suara, haptic)
4. Loops & Modes — apa yang terjadi setelahnya, apakah berulang atau tidak

Jenis Microinteractions Umum

1. Hover & Focus feedback

.button {
  background: #2563eb;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.button:active {
  transform: translateY(0);  /* "menekan" saat diklik */
}

Shadow yang naik + 1px elevation = tombol terasa tactile. Tanpa animasi, tombol terasa statis dan "mati".

2. Loading states — progress indicator

Jangan biarkan user bingung. Kalau aksi > 100ms, kasih feedback:

• < 100ms — instant, tidak perlu indicator
• 100ms–1s — spinner atau skeleton
• 1s–10s — progress bar dengan label ("Mengunggah... 40%")
• > 10s — progress bar + estimasi waktu + opsi cancel

3. State transitions — checkbox, toggle

.checkbox {
  transition: background 150ms, border-color 150ms;
}

.checkbox-checked {
  animation: pop 200ms cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Sedikit "pop" saat centang dicek memberi konfirmasi visceral bahwa aksi berhasil.

4. Page transitions & navigation

Gunakan view-transition-name (lesson Web Animation) untuk transisi halus antar halaman. Atau Framer Motion layoutId untuk shared element animation.

Durasi & Easing — Angka yang Harus Kamu Ingat

Prinsip: animasi UI yang "normal" = 200–300ms. Lebih lama dari 500ms terasa lamban. Lebih cepat dari 100ms terasa jerky.

Respect Preferensi User

Selalu hormati prefers-reduced-motion untuk user dengan gangguan vestibular atau yang mudah pusing:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Atau di JS:

const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const duration = prefersReduced ? 0 : 300;

Jangan Overdo It

Good microinteractions disadari, not seen. Kalau user tiba-tiba berkata "wow animasinya keren!" — biasanya berarti terlalu mencolok dan akan mengganggu pada interaksi ke-10, ke-100, ke-1000.

Tanda-tanda animasi berlebihan:

• Durasi > 500ms untuk aksi yang sering diulang
• Bouncing/spinning elemen non-loading
• Animasi yang memaksa user menunggu (tidak bisa di-skip)
• Parallax yang membuat scroll tidak natural

Checklist Sebelum Ship

• Setiap tombol punya hover/active state (minimal color + scale change)
• Loading state untuk aksi async > 100ms
• Success/error feedback dengan animasi halus (tidak hanya warna)
• prefers-reduced-motion dihormati
• Durasi 200–300ms untuk sebagian besar interaksi
• Easing ease-out atau cubic-bezier(0.4, 0, 0.2, 1) untuk natural feel
• Tidak ada animasi yang memblokir user action

Aturan emas: microinteractions adalah komunikasi, bukan dekorasi. Setiap animasi harus menjawab "apa yang baru saja terjadi?" atau "apa yang akan terjadi?".