Le animazioni, se usate bene, rendono un'interfaccia più comprensibile. Una finestra che si apre partendo dal pulsante premuto fa capire da dove arriva; un elemento che scivola nel carrello conferma l'azione; una transizione morbida tra due schermate aiuta a non perdere l'orientamento. Ma il movimento ha anche un costo. Per alcune persone può causare nausea, vertigini, mal di testa o, nei casi più gravi, crisi epilettiche. E per molte altre è soltanto una distrazione.
A cosa serve il movimento
Prima di aggiungere un'animazione conviene chiedersi quale problema risolve. Le funzioni legittime sono poche e precise:
- dare continuità: mostrare che un elemento si trasforma o si sposta, invece di sparire e riapparire;
- dare riscontro: confermare che un'azione è stata ricevuta, come un pulsante che reagisce al tocco;
- attirare l'attenzione su un cambiamento importante, con moderazione;
- indicare uno stato, come un caricamento in corso.
Se un'animazione non svolge nessuna di queste funzioni ed è solo decorativa, va valutata con molta più cautela.
Chi ha problemi con il movimento
Disturbi vestibolari
Il sistema vestibolare, nell'orecchio interno, contribuisce all'equilibrio e alla percezione del movimento. Chi ha un disturbo vestibolare, temporaneo o cronico, può stare male davanti a movimenti ampi sullo schermo: effetti di parallasse, sfondi che scorrono a velocità diverse dal contenuto, zoom improvvisi, rotazioni, pagine che scorrono da sole. Il malessere può durare ore dopo l'esposizione.
Epilessia fotosensibile
Alcune persone possono avere crisi epilettiche in risposta a luci lampeggianti. Il criterio WCAG 2.3.1, di livello A, stabilisce che nessun contenuto deve lampeggiare più di tre volte in un secondo, a meno che il lampeggiamento resti sotto determinate soglie. È uno dei pochi criteri in cui un errore può causare un danno fisico diretto, e va rispettato senza eccezioni.
Difficoltà di attenzione
Per chi fatica a concentrarsi, un elemento in movimento nel campo visivo rende difficile leggere il resto. Il criterio 2.2.2 chiede che i contenuti in movimento, lampeggianti o in scorrimento che partono da soli e durano più di cinque secondi possano essere messi in pausa, fermati o nascosti.
La preferenza «riduci movimento»
I principali sistemi operativi offrono un'impostazione per ridurre il movimento: in macOS e iOS si chiama «Riduci movimento», in Windows «Effetti di animazione», in Android «Rimuovi animazioni». I browser espongono questa preferenza alle pagine web tramite la media query prefers-reduced-motion, che permette di adattare il comportamento del sito.
Un approccio prudente è partire senza movimento e aggiungerlo solo per chi non ha chiesto di ridurlo:
.pannello {
opacity: 0;
transition: opacity 150ms ease-out;
}
@media (prefers-reduced-motion: no-preference) {
.pannello {
transform: translateY(16px);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
}
In questo esempio, chi ha attivato la preferenza vede una semplice dissolvenza breve; gli altri vedono anche lo scorrimento. Ridurre il movimento non significa per forza eliminare ogni transizione: le dissolvenze e i cambi di colore sono in genere ben tollerati, mentre gli spostamenti ampi e gli zoom sono i più problematici.
Lo stesso principio vale in JavaScript, per esempio per lo scorrimento animato verso un'ancora o per un carosello: si controlla la preferenza con window.matchMedia prima di avviare il movimento.
Regole pratiche
| Situazione | Indicazione |
|---|---|
| Transizioni di interfaccia | Brevi, in genere tra 150 e 300 millisecondi; più lunghe sembrano lente |
| Effetti di parallasse | Evitarli o disattivarli con la preferenza di movimento ridotto |
| Caroselli | Niente avvio automatico; se c'è, deve esserci un pulsante di pausa visibile |
| Video di sfondo | Fermi per impostazione predefinita, o con un controllo di pausa ben visibile |
| Indicatori di caricamento | Accettabili, ma senza lampeggiamenti rapidi |
| Scorrimento della pagina | Mai prendere il controllo dello scorrimento dell'utente |
Le durate indicate sono un riferimento di uso comune tra i progettisti, non una regola normativa: vanno provate sul prodotto reale.
Animazioni attivate dall'interazione
Il criterio WCAG 2.3.3, di livello AAA, chiede che le animazioni attivate da un'interazione, come lo scorrimento della pagina, possano essere disattivate, a meno che non siano essenziali. Anche se il livello AAA non è sempre un obiettivo obbligatorio, rispettare la preferenza di movimento ridotto è un modo semplice per soddisfare questo criterio nella maggior parte dei casi.
Come verificare
- Attivare la preferenza di movimento ridotto nel sistema operativo e navigare il sito: le animazioni ampie spariscono o si attenuano?
- Cercare elementi che si muovono da soli: si possono fermare?
- Controllare i contenuti che lampeggiano, compresi video e GIF caricati dagli utenti.
- Chiedersi, per ogni animazione, quale funzione svolge.
In sintesi
- Il movimento è utile quando dà continuità, riscontro o indica uno stato; da solo come decorazione ha un costo.
- Movimenti ampi, parallasse e zoom possono causare malessere a chi ha disturbi vestibolari.
- Nessun contenuto deve lampeggiare più di tre volte al secondo.
- La media query
prefers-reduced-motionpermette di rispettare la scelta dell'utente con poche righe di CSS. - Tutto ciò che si muove da solo per più di cinque secondi deve poter essere fermato.
