Animationer och Mikrointeraktioner i Menyn: Charm eller Distraktion?

Ägaren till ett café med 18 bord i Galata, Istanbul, frågar: "Om jag lägger till animationer i menyn, stannar gästerna längre?" Svaret göms i millisekunder. UX Movement 2023 är tydlig: 200-300 ms känns flytande, över 500 ms blir trögt. Efter införandet av fade-in vid scroll steg sidans sessionstid 19%, och avhopp föll 12%.

Optimala Tider och Easing-kurvor

Tiden hänger ihop med mänsklig perception. Under 100 ms märks inte; 200-300 ms känns naturligt; 500 ms+ är tungt. cubic-bezier(0.4, 0, 0.2, 1) — Materials standard — ger naturlig rörelse.

En stagger på 60 ms vid laddning skapar premium-känsla, men över 8 kort blir det överdrivet. På mobil är 200 ms idealiskt.

Vad Som Fungerar och Inte

Fungerar: kategoriflik med glidande understrykning (250 ms), "lägg i kundvagn"-knapp med 1,05x skala och bockikon, hjärtpuls vid favorit, fade-in vid scroll.

• Hover scale 1,02x — taktil känsla
• Studs på kundvagnsmärke — fångar uppmärksamhet
• Skeleton loader — sätter innehållsförväntning

Överdrift och Tillgänglighet

Överdriven animation är ett tillgänglighetsproblem. Stöd prefers-reduced-motion — WCAG 2.1-krav.

Parallax, autoplay-video och oändligt roterande ikoner är tydlig distraktion. Galata-caféet stoppade ett pulserande märke efter 2 sekunder — CTR steg 23%.

FAQ

Ideal tid? 200-300 ms för mikrointeraktioner, max 400 ms för övergångar.

Vilka animationer skadar prestanda? width/height via JS triggar reflow; transform och opacity i CSS är GPU-accelererat.

Stänga av för äldre? Bara via prefers-reduced-motion, inte automatiskt.

Var detta hjälpsamt? Dela det.