Animasjoner og Mikrointeraksjoner i Menyen: Glede eller Forstyrrelse?

Eieren av en kafé med 18 bord i Galata, Istanbul, spør: "Hvis jeg legger animasjoner i menyen, blir gjestene lenger?" Svaret ligger i millisekunder. UX Movement 2023 er tydelig: 200-300 ms føles flytende, over 500 ms blir tungt. Etter innføring av fade-in ved scroll økte oppholdstiden 19%, og frafall sank 12%.

Optimale Varigheter og Easing-kurver

Varigheten henger sammen med menneskelig persepsjon. Under 100 ms merkes ikke; 200-300 ms føles naturlig; 500 ms+ er tungt. cubic-bezier(0.4, 0, 0.2, 1) — Material-standarden — gir naturlig bevegelse.

En stagger på 60 ms ved lasting gir premium-følelse, men over 8 kort blir det overdrevent. På mobil er 200 ms idealet.

Hva Som Virker og Ikke

Virker: kategorifane med glidende understreking (250 ms), "legg i kurv"-knapp med 1,05x skala og avhuksikon, hjertepuls ved favoritt, fade-in ved scroll.

• Hover scale 1,02x — taktil følelse
• Sprett på kurv-merke — fanger oppmerksomhet
• Skeleton loader — setter innholdsforventning

Overdrivelse og Tilgjengelighet

Overdreven animasjon er et tilgjengelighetsproblem. Støtt prefers-reduced-motion — WCAG 2.1-krav.

Parallax, autoplay-video og uendelig roterende ikoner er tydelig forstyrrelse. Galata-kafeen stoppet et pulserende merke etter 2 sekunder — CTR økte 23%.

FAQ

Ideell varighet? 200-300 ms til mikrointeraksjoner, maks 400 ms til overganger.

Hvilke animasjoner skader ytelsen? width/height via JS utløser reflow; transform og opacity i CSS er GPU-akselerert.

Slå av for eldre? Kun via prefers-reduced-motion, ikke automatisk.

Var dette nyttig? Del det.