Microinteractions β bu sayt'dagi kichik animatsiya va feedback'lar. Tugma bosilganda kichik o'zgarish, like tugma bosilganda yurak pulsatsiyasi, form yuborilganda yashil check icon. Bu kichik elementlar, lekin foydalanuvchi tajribasini sezilarli yaxshilaydi. Sayt \"jonli\" deb tuyiladi.
Microinteractions nima
Microinteraction β bitta vazifa uchun mo'ljallangan kichik dizayn elementi. Misol: Facebook like tugmasi β bossangiz qizil bo'ladi va kichik animatsiya. Bu microinteraction.
Asosiy 4 qism: 1. Trigger (foydalanuvchi action). 2. Rules (nima sodir bo'ladi). 3. Feedback (visual response). 4. Loops/modes (davomli holatlar).
Microinteractions misollar
Hover effects β tugma bossangiz rangi to'qroq, kichik shadow.
Click feedback β tugma bosilganda kichik scale (0.95).
Loading states β spinner, progress bar.
Form validation β real-time success/error feedback.
Like/favorite β yurak yoki yulduz animatsiyasi.
Notification β slide-in xabar.
Scroll progress β sahifa pastida progress bar.
Like counter β raqam animatsiya bilan o'sadi.
Nima uchun microinteractions kerak
Foydalanuvchi feedback olishi β siz nima qildi, nima sodir bo'ladi. Vizual signal.
UX yaxshilanishi β sayt \"professional\" tuyiladi.
Brand personality β ham brand qiyofasini ko'rsatadi.
Engagement β foydalanuvchi sayt'da uzoq qoladi.
Hover effects
Tugma hover: rangi to'qroq, shadow, scale.
Link hover: underline, rang o'zgaradi.
Card hover: shadow, lift effect (translateY -4px).
Image hover: zoom, overlay text.
Click feedback
Active state β tugma bosilganda. Scale 0.95, rangi to'qroq, shadow inset.
Foydalanuvchi \"bosildi\" deb biladi. Touch feedback ham.
Loading microinteractions
Form submit'da: tugma matni \"Yuborilmoqda...\" ga o'zgaradi, spinner qo'shiladi, disabled.
Page transition'da: progress bar yuqorisida.
Image yuklanishida: skeleton yoki blur-up effect.
Success feedback
Form yuborilganda: yashil check icon scale-in, \"Muvaffaqiyat\" xabari fade-in.
Email signup'da: \"Rahmat, tasdiq email yuborildi\".
Bu positive emotional response.
Error feedback
Form xato: input border qizil, shake animation (5-10px chap-o'ng), error matn fade-in.
Notification: red border, error icon, dismiss tugma.
Scroll effects
Parallax scroll β backround bilan kontent farqli tezlikda. Lekin haddan ortiq emas.
Scroll-triggered animation β kontent ekranda paydo bo'lganda fade-in yoki slide-in.
Library: AOS (Animate On Scroll), framer-motion.
Page transitions
Sahifalar orasida smooth transition β SPA framework'larda (React, Vue) keng ishlatiladi.
Fade, slide, scale β turli effect'lar.
Lekin haddan ortiq slow β foydalanuvchi bezor qiladi. 200-400ms.
Notification animations
Toast notification β sahifa burchagidan slide-in, 3-5 soniyada fade-out.
Modal β fade-in backdrop, scale-in container.
Snackbar β Material Design pastdan slide-up.
Animation timing
Quick (100-200ms) β tugma hover, click feedback. Foydalanuvchi darhol biladi.
Medium (300-500ms) β modal open, page transition.
Slow (500-800ms) β major animation, hero animation.
1s+ β kamroq, faqat e'tibor tortuvchi.
Easing functions
Linear β yomon, robotik. Avoid.
Ease-in β boshida sekin, oxirida tez.
Ease-out β boshida tez, oxirida sekin. Eng tabiiy.
Ease-in-out β ikkalasi.
Cubic-bezier β custom timing function.
CSS vs JavaScript animation
CSS animation: oddiy, performance yaxshi (GPU accelerated), simple use case'lar.
JavaScript animation: murakkab, interactive, real-time (mouse position'ga bog'liq).
Strategiya: oddiy uchun CSS, murakkab uchun JS.
Performance
Transform va opacity β GPU accelerated, performance yaxshi.
Width, height, top, left β repaint, sekin.
will-change: transform β brauzerga \"animation kelyapti\" deb ayadi.
Accessibility
prefers-reduced-motion media query β foydalanuvchi animation'ni kamaytirish xohlasa.
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
Vestibular disorder'li foydalanuvchilar uchun muhim.
Common animation xato
1. Juda ko'p animation β chalg'ituvchi.
2. Slow β foydalanuvchini bezor qiladi.
3. Auto-play β foydalanuvchi xohlamasa ham.
4. Performance yomon β jerky animation.
5. Accessibility ignorate.
Sayt.uz microinteractions
Sayt.uz da subtle microinteractions:
Tugma hover: rang to'qroq, shadow, translateY -2px (lift). 200ms ease-out.
Form validation: real-time inline. Email format check, password strength.
Modal open: fade-in backdrop, scale-in container. 300ms.
Notification: toast pastida slide-up, 4 soniyada fade-out.
Scroll effects: AOS bilan kontent fade-in (subtle).
prefers-reduced-motion qo'llab-quvvatlanadi.
Natija: sayt \"jonli\" tuyiladi, dwell time 4:30 (animation'ssiz 3:50 edi).