Animationer og Mikrointeraktioner i Menuen: Charme eller Distraktion?

Ejeren af en café med 18 borde i Galata, Istanbul, spørger: "Hvis jeg tilføjer animationer til menuen, bliver gæsterne længere?" Svaret gemmer sig i millisekunder. UX Movement 2023 er klar: 200-300 ms føles flydende, over 500 ms bliver tungt. Efter indførelse af scroll-udløst fade-in steg opholdstiden 19%, og frafald faldt 12%.

Optimale Varigheder og Easing-kurver

Varighed hænger sammen med menneskelig opfattelse. Under 100 ms bemærkes ikke; 200-300 ms føles naturligt; 500 ms+ er tungt. cubic-bezier(0.4, 0, 0.2, 1) — Material-standarden — giver naturlig bevægelse.

En stagger på 60 ms ved indlæsning skaber en premium-følelse, men over 8 kort bliver det overdrevet. På mobil er 200 ms ideelt.

Hvad Virker, og Hvad Gør Ikke

Virker: kategorifane med glidende understregning (250 ms), "tilføj til kurv"-knap med 1,05x skala plus flueben, hjertepuls ved favorit, fade-in ved scroll.

• Hover scale 1,02x — taktil fornemmelse
• Bounce på kurv-badge — fanger opmærksomhed
• Skeleton loader — sætter indholdsforventning

Overdrivelse og Tilgængelighed

Overdreven animation er et tilgængelighedsproblem. Understøt prefers-reduced-motion — WCAG 2.1-krav.

Parallax, autoplay-video og uendeligt roterende ikoner er tydelig distraktion. Galata-caféen stoppede et pulserende badge efter 2 sekunder — CTR steg 23%.

FAQ

Ideel varighed? 200-300 ms til mikrointeraktioner, max 400 ms til overgange.

Hvilke animationer skader ydeevnen? width/height via JS udløser reflow; transform og opacity i CSS er GPU-accelereret.

Slå fra for ældre? Kun via prefers-reduced-motion, ikke automatisk.

Var dette nyttigt? Del det.