Micro-interactions: Chi Tiết Tạo Nên Sự Khác Biệt
Micro-interactions là những feedback nhỏ cho user biết hệ thống đang respond. Đây là điều biến UI từ "okay" thành "delightful".
Anatomy Của Micro-interaction
4 Thành Phần:
- Trigger: User action (click, hover, scroll)
- Rules: Logic xác định response
- Feedback: Visual/audio response
- Loops: Repeating behaviors
Button States
Prompt Cho Complete Button:
Design button với đầy đủ states:
Default: bg-emerald-600 text-white
Hover: bg-emerald-700, slight scale (1.02)
Active/Pressed: bg-emerald-800, scale (0.98)
Focus: ring-2 ring-emerald-500 ring-offset-2
Disabled: bg-slate-200 text-slate-400 cursor-not-allowed
Loading: opacity-80, spinner icon, disabled
Transition: all 150ms ease-out
Form Interactions
Input Field States:
Input với micro-interactions:
Default: border-slate-300
Hover: border-slate-400
Focus: border-emerald-500, ring-2
Error: border-red-500, shake animation (subtle)
Success: border-green-500, checkmark icon animate in
Disabled: bg-slate-50 cursor-not-allowed
Label: animate up khi focus (floating label)
Loading States
Skeleton Loading:
Skeleton loading cho cards:
- Background: bg-slate-200
- Animation: shimmer effect (gradient sliding)
- Shape: match actual content shapes
- Duration: animate-pulse hoặc custom 1.5s
Placeholder cho:
- Avatar: rounded-full w-10 h-10
- Title: h-4 w-3/4 rounded
- Subtitle: h-3 w-1/2 rounded
Button Loading:
Button loading state:
1. Click → disable immediately
2. Text fade to 80% opacity
3. Spinner appear (animate-spin)
4. Optional: text change "Đang xử lý..."
5. Success: green checkmark, then revert
6. Error: red X, shake, then revert
Hover Effects
Card Hover:
Card hover interaction:
On hover:
- Translate Y: -4px
- Shadow: increase từ shadow-sm → shadow-lg
- Border: optional color change
- Image: slight zoom (scale 1.05)
- CTA: opacity từ 0 → 1
Transition: 200ms ease-out
Đảm bảo accessibility: focus cũng có same effect
Toggle & Switch
Toggle component:
Off state: bg-slate-200, knob left
On state: bg-emerald-500, knob right
Transition: background 200ms, knob transform 150ms
Knob animation:
- Scale slightly on press (0.9)
- Spring animation khi release
Include: disabled state (opacity-50)
Notification Badges
Badge notification:
- Appear: scale từ 0 → 1 với bounce
- Pulse: subtle ping animation
- Update: number change có brief highlight
- Disappear: scale xuống 0
Position: absolute -top-1 -right-1
Prompting Best Practices
| Vague | Specific |
|---|---|
| "Add hover effect" | "On hover: translate-y -2px, shadow-md, 200ms ease" |
| "Make it feel responsive" | "Add 50ms tap delay, 0.98 scale on press" |
| "Loading animation" | "Spinner 16px, animate-spin, positioned left of text" |
💡 Pro Tip: Mỗi interactive element cần ít nhất 4 states: default, hover, active, disabled.