Animaatiot ja Mikrovuorovaikutukset Menussa: Ilo vai Häiriö?

18 pöydän kahvilan omistaja Istanbulin Galatassa kysyy: "Jos lisään menuun animaatioita, viipyvätkö asiakkaat kauemmin?" Vastaus piilee millisekunneissa. UX Movementin 2023 tutkimus on selvä: 200-300 ms tuntuu sulavalta, yli 500 ms käy raskaaksi. Vieritysliipaisuisen fade-inin käyttöönoton jälkeen sivulla vietetty aika kasvoi 19% ja poistuminen laski 12%.

Optimaaliset Kestot ja Easing-käyrät

Kesto liittyy ihmisen havaintoon. Alle 100 ms jää huomaamatta; 200-300 ms tuntuu luonnolliselta; 500 ms+ on raskas. cubic-bezier(0.4, 0, 0.2, 1) — Materialin standardi — tuottaa luonnollisen liikkeen.

60 ms:n porrastus latauksessa luo premium-tunteen, mutta yli 8 kortin määrässä se on liikaa. Mobiilissa 200 ms on ihanne.

Mikä Toimii ja Mikä Ei

Toimii: kategorialahteen liukuva alleviivaus (250 ms), "lisää koriin" -painike 1,05x-skaalauksella ja valintamerkillä, sydänpulssi suosikkiin lisätessä, fade-in vieritettäessä.

• Hover scale 1,02x — tuntuva tunne
• Korin merkin pomppu — kiinnittää huomion
• Skeleton loader — asettaa sisältöodotuksen

Liiallisuus ja Saavutettavuus

Liika animaatio on saavutettavuusongelma. Tue prefers-reduced-motion -ominaisuutta — WCAG 2.1 -vaatimus.

Parallax, autoplay-video ja loputtomasti pyörivät kuvakkeet ovat selvää häiriötä. Galatan kahvila pysäytti pulsoivan merkin 2 sekunnin jälkeen — CTR nousi 23%.

FAQ

Ihanteellinen kesto? 200-300 ms mikrovuorovaikutuksiin, max 400 ms siirtymiin.

Mitkä animaatiot vahingoittavat suorituskykyä? width/height JS:llä laukaisee reflow'n; CSS:n transform ja opacity GPU-kiihdytettyjä.

Pois iäkkäille? Vain prefers-reduced-motionin kautta, ei automaattisesti.

Oliko tästä hyötyä? Jaa se.