Animace a Mikrointerakce v Menu: Libůstka nebo Rušení?

Majitel kavárny s 18 stoly v istanbulské Galatě se ptá: "Když přidám do menu animace, zůstanou hosté déle?" Odpověď se skrývá v milisekundách. Výzkum UX Movement 2023 je jednoznačný: 200-300 ms působí plynule, nad 500 ms už je to těžkopádné. Po zavedení fade-in při rolování čas na stránce vzrostl o 19% a odchody klesly o 12%.

Optimální Doby a Křivky Easing

Délka souvisí s lidským vnímáním. Pod 100 ms není znát; 200-300 ms působí přirozeně; 500 ms+ už je těžké. cubic-bezier(0.4, 0, 0.2, 1) — Material standard — vytváří přirozený pohyb.

Stagger 60 ms při načítání dodává prémiový pocit, ale nad 8 karet už je toho moc. Na mobilu je ideál 200 ms.

Co Funguje a Co Ne

Funguje: záložka kategorie s posuvným podtržením (250 ms), tlačítko "přidat do košíku" se scale 1,05x a ikonou zaškrtnutí, pulz srdce při oblíbení, fade-in při rolování.

• Hover scale 1,02x — hmatový pocit
• Odraz odznaku košíku — upoutá pozornost
• Skeleton loader — nastaví očekávání obsahu

Přehnání a Přístupnost

Nadbytek animací je problém přístupnosti. Podporujte prefers-reduced-motion — požadavek WCAG 2.1.

Paralax, autoplay videa a nekonečně rotující ikony jsou jasné rušení. Kavárna v Galatě zastavila pulzující odznak po 2 sekundách — CTR vzrostl o 23%.

FAQ

Ideální doba? 200-300 ms pro mikrointerakce, max 400 ms pro přechody.

Co poškozuje výkon? width/height přes JS způsobuje reflow; transform a opacity v CSS jsou akcelerovány GPU.

Vypínat pro seniory? Pouze přes prefers-reduced-motion, ne automaticky.

Bylo to užitečné? Sdílejte to.