Animazioni e Microinterazioni del Menu: Incanto o Distrazione?

Il titolare di un caffè da 18 tavoli a Galata, Istanbul, chiede: "Se aggiungo animazioni al menu, i clienti restano di più?" La risposta è nei millisecondi. UX Movement 2023 è chiaro: 200-300ms appare fluido, oltre i 500ms diventa pesante. Dopo aver introdotto fade-in al scroll, il tempo medio è salito del 19% e l'abbandono è sceso del 12%.

Durate Ottimali e Curve di Easing

La durata segue la percezione umana. Sotto 100ms non si nota; 200-300ms sembra naturale; 500ms+ è lento. Per easing, cubic-bezier(0.4, 0, 0.2, 1) — standard Material — produce movimento naturale.

Uno stagger di 60ms al caricamento dà un tocco premium, ma oltre 8 card diventa eccessivo. Su mobile, 200ms è ideale — di più scontra con il tocco.

Cosa Funziona e Cosa No

Funziona: tab di categoria con sottolineatura scorrevole (250ms), bottone "aggiungi al carrello" con scale 1,05x più icona di spunta, pulsazione del cuore al preferito, fade-in al scroll.

• Hover scale 1,02x — sensazione tattile
• Rimbalzo del badge carrello — cattura l'attenzione
• Skeleton loader — anticipa il contenuto

Eccessi e Accessibilità

L'eccesso di animazioni è un problema di accessibilità. Rispetta prefers-reduced-motion — requisito WCAG 2.1.

Parallax, video autoplay e icone a rotazione infinita sono distrazioni. Il caffè di Galata ha fermato un badge pulsante dopo 2 secondi — CTR +23%.

FAQ

Durata ideale? 200-300ms per microinterazioni, massimo 400ms per transizioni.

Quali animazioni rallentano? width/height in JS causa reflow; transform e opacity CSS sono accelerate GPU.

Disabilitare per anziani? Solo via prefers-reduced-motion, non in automatico.

Ti è stato utile? Condividilo.