Animaties en Micro-Interacties in het Menu: Charme of Afleiding?

De eigenaar van een café met 18 tafels in Galata, Istanbul, vraagt: "Als ik animaties aan mijn menu toevoeg, blijven klanten dan langer?" Het antwoord zit in milliseconden. UX Movement 2023 is duidelijk: 200-300ms voelt vloeiend, boven 500ms wordt traag. Na invoering van scroll-getriggerde fade-in steeg de paginatijd met 19% en daalde de uitstroom 12%.

Optimale Duur en Easing-Curves

De duur is gekoppeld aan menselijke waarneming. Onder 100ms blijft onopgemerkt; 200-300ms voelt natuurlijk; 500ms+ is zwaar. Voor easing geldt cubic-bezier(0.4, 0, 0.2, 1) — de Material-standaard.

Een stagger van 60ms bij laden geeft een premium gevoel, maar boven 8 kaarten wordt het overdreven. Op mobiel is 200ms ideaal — langer botst met touch-interacties.

Wat Werkt en Wat Niet

Werkt: categorie-tab met glijdende onderstreping (250ms), "in winkelmand"-knop met 1,05x scale plus check-icoon, hartpuls bij favoriet, fade-in bij scrollen.

• Hover scale 1,02x — tastbaar gevoel
• Bounce van winkelmand-badge — trekt aandacht
• Skeleton loader — zet content-verwachting

Overdaad en Toegankelijkheid

Te veel animatie is een toegankelijkheidsprobleem. Ondersteun prefers-reduced-motion — WCAG 2.1-eis.

Parallax, autoplay-video en oneindig draaiende iconen zijn duidelijke afleiding. Het Galata-café stopte een pulserend badge na 2 seconden — CTR steeg 23%.

FAQ

Ideale duur? 200-300ms voor micro-interacties, maximaal 400ms voor overgangen.

Welke animaties schaden de prestaties? width/height via JS veroorzaakt reflow; CSS transform en opacity zijn GPU-versneld.

Uitschakelen voor ouderen? Niet automatisch, maar via prefers-reduced-motion.

Was dit nuttig? Deel het.