Animazioni e microinterazioni sul sito servono quando rispondono a una domanda che il visitatore si sta facendo in quel momento: ho cliccato davvero? sta caricando? dove è finito il menu che ho aperto? Quando non rispondono a niente allungano l'attesa, pesano sulla velocità e per alcune persone diventano un disturbo fisico. Le microinterazioni fatte bene quasi non si notano; quelle sbagliate si notano subito, e non in bene.
Microinterazione o animazione: che differenza c'è?
Una microinterazione è la risposta a una singola azione: il pulsante che cambia stato quando lo premi, il campo che segnala un errore mentre scrivi, l'interruttore che scorre, il prodotto che finisce nel carrello. Ha un innesco preciso (il clic, il tocco, la digitazione) e un compito limitato, dare un riscontro. Le animazioni in senso più ampio comprendono anche le transizioni tra pagine, i contenuti che entrano durante lo scorrimento, le illustrazioni in movimento in apertura di pagina.
La distinzione serve perché le regole cambiano. Le microinterazioni hanno un compito chiaro e, se sono brevi, raramente fanno danni. Le animazioni decorative invece vanno giustificate una per una, perché costano in velocità e in attenzione.
In quali momenti un'animazione aiuta davvero?
Un articolo di web.dev, il sito di Google dedicato agli sviluppatori, distingue tre usi del movimento: dare un riscontro, rendere l'attesa più sopportabile e decorare. I primi due lavorano per te, e su un sito aziendale si traducono così:
- riscontro: il pulsante di invio mostra che il modulo sta partendo e poi conferma che è arrivato; l'articolo entra nel carrello e il contatore si aggiorna
- stato: mentre la pagina carica, uno scheletro grigio con la forma dei contenuti al posto di una rotellina che non dice niente
- orientamento: il menu che scivola dal lato da cui lo hai aperto, la scheda che si espande senza far saltare il resto della pagina
- attenzione: un segnale discreto sul campo obbligatorio dimenticato, o sull'unica azione importante della pagina
C'è anche una ragione tecnica per curare il riscontro. Google misura la reattività delle pagine con l'Interaction to Next Paint (INP), che considera buono un valore fino a 200 millisecondi: conta il tempo tra un clic o un tocco e il primo cambiamento visibile sullo schermo. Se un'operazione richiede tempo, la strada giusta è mostrare subito un segnale che qualcosa sta succedendo e completare il lavoro dopo.
Quando le animazioni diventano un problema?
Le linee guida di Apple sul movimento, scritte per le app ma utili anche per il web, sono nette: niente movimento aggiunto tanto per farlo, poca animazione sulle interazioni che si ripetono spesso e, per quanto possibile, nessun obbligo di aspettare la fine di un'animazione prima di poter fare qualcosa. Sui siti aziendali queste regole si violano in modi riconoscibili:
- il titolo principale che compare solo dopo un'animazione di ingresso: nei browser basati su Chromium un elemento con opacità zero non viene considerato per il Largest Contentful Paint, quindi la misura del caricamento si sposta in avanti
- lo scorrimento modificato, che cambia la velocità o la direzione della pagina rispetto al gesto di chi la usa
- effetti di parallasse insistenti, che le WCAG citano tra le animazioni capaci di scatenare reazioni in chi soffre di disturbi vestibolari
- caroselli che avanzano da soli, senza un comando per fermarli
- informazioni o comandi che compaiono solo al passaggio del mouse, un gesto che sul telefono non esiste
- ogni sezione che entra con la stessa dissolvenza, così niente si distingue da niente
Quanto deve durare un'animazione?
Una durata ufficiale valida per tutto non esiste, ma i sistemi di design dei grandi produttori danno riferimenti concreti. Material 3 di Google organizza le durate in quattro famiglie di valori: brevi, da 50 a 200 millisecondi; medie, da 250 a 400; lunghe, da 450 a 600; extra lunghe, da 700 a 1.000. Come orientamento, il cambio di stato di un pulsante sta bene nella fascia breve e l'apertura di un pannello in quella media; Apple, dal canto suo, chiede animazioni di riscontro brevi e precise.
Oltre alla durata conta la curva, cioè come il movimento accelera e rallenta. Il movimento lineare, a velocità costante, sembra meccanico ed è adatto quasi solo agli indicatori di avanzamento. Per un elemento che entra si usa in genere una curva che rallenta verso la fine, per uno che esce una che accelera: tra i valori di Material 3 esistono proprio le varianti di accelerazione e decelerazione. Durate e curve vanno fissate una volta nel design system e riusate ovunque, così il sito si muove sempre allo stesso modo.
Chi soffre il movimento, e cosa chiedono le regole di accessibilità?
Per chi ha disturbi vestibolari, cioè dell'orecchio interno, alcune animazioni provocano vertigini, nausea ed emicrania: lo spiegano le WCAG, che citano proprio lo scorrimento con parallasse. Per questo i sistemi operativi hanno un'impostazione per ridurre il movimento (su macOS si chiama Riduci movimento, su Android Rimuovi animazioni) e i siti possono leggerla con la media query prefers-reduced-motion.
Le WCAG 2.2, lo standard di riferimento per l'accessibilità dei siti, hanno tre criteri che riguardano il movimento:
- pausa, stop, nascondi, livello A: ciò che si muove da solo per più di cinque secondi, insieme ad altri contenuti, deve poter essere messo in pausa, fermato o nascosto
- tre lampeggiamenti, livello A: niente deve lampeggiare più di tre volte al secondo, salvo restare sotto le soglie previste
- animazione da interazioni, livello AAA: il movimento innescato da un'interazione, se non è essenziale, deve poter essere disattivato
Il terzo criterio appartiene al livello più alto, che lo stesso W3C sconsiglia di imporre come regola generale su interi siti. Rispettarlo però costa poco: basta una versione senza movimento non essenziale per chi ha attivato la preferenza. Se il tuo sito deve rispettare requisiti di accessibilità, trovi il quadro nella guida all'accessibilità web.
Un sito animato è per forza più lento?
No, se le animazioni sono scritte bene. La guida di web.dev sulle animazioni ad alte prestazioni consiglia di animare solo transform e opacity, le due proprietà che il browser gestisce senza ricalcolare la pagina, e di evitare quelle che obbligano a rifare il layout o a ridisegnare. La guida sul Cumulative Layout Shift aggiunge di spostare gli elementi con transform invece di cambiarne altezza, larghezza o posizione, così i contenuti non saltano.
Poi c'è il peso. Ogni libreria di animazione è codice da scaricare ed eseguire, e su uno smartphone di fascia media si sente: conviene caricarla solo nelle pagine che la usano. Le metriche da tenere d'occhio prima e dopo sono i Core Web Vitals, misurati sul telefono e non solo sul computer.
Con quali strumenti si realizzano, e come si sceglie?
Per la maggior parte delle microinterazioni bastano le transizioni CSS, leggere e facili da spegnere per chi chiede meno movimento. Per i passaggi tra una pagina e l'altra c'è la View Transition API, che anima il cambio di vista sia nelle applicazioni a pagina singola sia nella navigazione tra documenti. Per sequenze legate allo scorrimento c'è GSAP con ScrollTrigger, che sincronizza un'animazione con la barra di scorrimento o tiene ferma una sezione mentre la pagina scorre; nei progetti React c'è Motion, la libreria nota in passato come Framer Motion.
Più dello strumento conta il ruolo che il movimento ha nel progetto. Su Oroscopo Oggi l'esperienza animata è il prodotto: il sito è sviluppato in codice su misura, con stelle che scorrono, pianeti in orbita e parallasse profonda, perché l'obiettivo è che la consultazione quotidiana sia un piacere oltre che un'informazione. Sul sito di un'azienda di servizi lo stesso livello di movimento distrarrebbe da ciò che conta, e bastano poche microinterazioni curate. Lo diciamo da studio che il movimento lo ama: il nostro sito ha ricevuto una Honorable Mention su Awwwards.
Come si valutano le animazioni prima di approvare il sito?
Non serve essere tecnici per un controllo serio. Prima del via libera, prova così:
- attiva la riduzione del movimento nelle impostazioni del telefono o del computer e ricarica il sito: le animazioni non essenziali devono sparire o ridursi
- apri le pagine principali su uno smartphone di fascia media, con la rete mobile
- verifica di poter leggere e cliccare subito, senza aspettare che un'animazione finisca
- cerca elementi che si muovono da soli senza un comando per fermarli
- ripeti le azioni frequenti, come aprire il menu: se dopo qualche volta l'animazione ti pesa, peserà anche ai clienti
- naviga con la tastiera: durante le transizioni deve restare visibile dove ti trovi
Hai in mente un effetto preciso, o un sito di riferimento che ti piace? Mandacelo dalla pagina sul nostro web design e ragioniamo insieme su quanto movimento serve davvero al tuo progetto.
