Animazione e movimento

Ti è mai capitato di viaggiare in auto, in barca o in aereo e aver sentito improvvisamente che il mondo girasse? Oppure hai avuto un'emicrania così terribile che le animazioni sullo smartphone o sul tablet, create per "compiacerti" e farti improvvisamente ammalare? O forse sei sempre stato sensibile a tutti i tipi di movimento? Questi sono esempi di diversi tipi di disturbi vestibolari.

Entro i 40 anni, oltre il 35% degli adulti avrà sofferto di qualche forma di disfunzione vestibolare. Ciò può causare un periodo temporaneo di vertigini, vertigini indotta da emicrania o disabilità vestibolare più permanente.

Oltre a innescare le vertigini, molte persone trovano distraer i contenuti che si muovono, sbattono le palpebre o scorrono. Le persone affette da ADHD e altri disturbi da deficit di attenzione potrebbero essere così distratte dai tuoi elementi animati da dimenticarsi perché hanno già visitato il tuo sito web o la tua app.

In questo modulo, vedremo alcuni modi per supportare meglio le persone con tutti i tipi di disturbi causati dal movimento.

Contenuti lampeggianti e mobili

Quando crei animazioni e movimento, devi chiederti se il movimento dell'elemento è eccessivo. Ad esempio, colori che sfarfallano da scuro a chiaro o movimenti rapidi sullo schermo, possono causare convulsioni nelle persone con epilessia fotosensibile. Si stima che il 3% delle persone con epilessia soffra di fotosensibilità, che è più comune nelle donne e nei giovani.

Le linee guida sul flashing delle WCAG sconsigliano quanto segue:

• Lampeggia più di tre volte al secondo
• Lampeggia al di sotto della soglia generale di lampeggiamento e lampeggiamento rosso.

Questi flash possono, nella migliore delle ipotesi, causare l'impossibilità di utilizzare una pagina web o, nel peggiore dei casi, provocare una malattia.

Per qualsiasi movimento estremo, è fondamentale testarlo utilizzando lo strumento Photosensitive Epilepsy Analysis (PEAT). PEAT è uno strumento senza costi per capire se i contenuti, il video o le animazioni dello schermo possono causare convulsioni. Non tutti i contenuti devono essere valutati dalla PEAT, ma per sicurezza andrebbero valutati quelli che presentano transizioni lampeggianti o rapide tra colori di sfondo chiaro e scuro.

Un'altra domanda che dovresti porti riguardo all'animazione e al movimento è se il movimento dell'elemento è essenziale per comprendere i contenuti o le azioni sullo schermo. Se non è essenziale, valuta la possibilità di rimuovere tutti i movimenti, anche i micromomenti, dall'elemento che stai creando o progettando.

Supponi di ritenere che lo spostamento dell'elemento non sia essenziale, ma che possa migliorare l'esperienza complessiva dell'utente, oppure di non poter rimuovere il movimento per un altro motivo. In questo caso, devi seguire le linee guida sulle azioni delle WCAG. Le linee guida stabiliscono che è necessario creare un'opzione per consentire agli utenti di mettere in pausa, interrompere o nascondere il movimento: elementi non essenziali in movimento, lampeggianti o scorrono che si avviano automaticamente, durano più di cinque secondi e fanno parte di altri elementi della pagina.

Mettere in pausa, interrompere o nascondere il movimento

Aggiungi un meccanismo Metti in pausa, interrompi o nascondi alla pagina per consentire agli utenti di disattivare l'animazione in movimento potenzialmente problematica. Puoi eseguire questa operazione a livello di schermo o di elemento.

Ad esempio, supponiamo che il tuo prodotto digitale includa molte animazioni. Valuta la possibilità di aggiungere un pulsante di attivazione/disattivazione di JavaScript accessibile per consentire agli utenti di controllare la propria esperienza. Quando il pulsante viene impostato su "Movimento disattivato", tutte le animazioni vengono bloccate su quella schermata e su tutte le altre.

Utilizza query supporti

Oltre a essere selettivo nelle animazioni, a offrire agli utenti la possibilità di mettere in pausa, interrompere, nascondere il movimento ed evitare loop di animazione infiniti, puoi anche prendere in considerazione l'aggiunta di una query multimediale incentrata sul movimento. In questo modo gli utenti hanno ancora più scelta riguardo a cosa visualizzare sullo schermo.

@prefers-reduced-motion

Analogamente alle query supporti incentrati sul colore nel modulo Colore, la query supporti @prefers-reduced-motion controlla le impostazioni del sistema operativo dell'utente relative all'animazione.

Un utente può impostare preferenze di visualizzazione per ridurre il movimento. Queste impostazioni sono diverse a seconda del sistema operativo e possono avere un frame positivo o negativo. Con @prefers-reduced-motion, puoi progettare un sito che rispetti queste preferenze.

Su macOS e Android, l'utente attiva l'impostazione per ridurre il movimento. Su macOS, un utente può impostare Riduci movimento in Impostazioni > Accessibilità > Display. L'impostazione di Android è Rimuovi animazioni. Su Windows, l'impostazione è inquadrata in modo positivo come Mostra animazioni, che è attiva per impostazione predefinita. L'utente deve disattivare questa impostazione per ridurre il movimento.

In alternativa, come mostrato nel prossimo set di esempi, puoi programmare tutte le tue animazioni in modo che si fermino entro cinque secondi o meno, invece di essere riprodotte in un loop infinito.

Miglioramento progressivo del movimento

In qualità di designer e sviluppatori, dobbiamo fare molte scelte, tra cui gli stati di movimento predefiniti e la quantità di movimento da visualizzare. Diamo un'altra occhiata all'ultimo esempio sul movimento.

Supponiamo che l'animazione non sia necessaria per comprendere i contenuti sullo schermo. In questo caso, possiamo scegliere di impostare lo stato predefinito sull'animazione a movimento ridotto anziché sulla versione con movimento completo. A meno che gli utenti non richiedano specificatamente le animazioni, queste sono disattivate.

Non possiamo prevedere quale livello di movimento causerà problemi alle persone con convulsioni, disturbi vestibolari e altri disturbi visivi. Anche un piccolo movimento sullo schermo può provocare vertigini, visione annebbiata o peggio. Nell'esempio seguente, per impostazione predefinita non viene selezionata alcuna animazione.

Query supporti a più livelli

Puoi utilizzare più query supporti per offrire agli utenti ancora più scelte. Usiamo @prefers-color-scheme, @prefers-contrast e @prefers-reduced-motion insieme.

Consenti agli utenti di scegliere

Per quanto possa essere divertente creare animazioni nei nostri prodotti digitali per soddisfare gli utenti, è fondamentale ricordare che alcune persone saranno interessate da questi design. La sensibilità al movimento può influenzare chiunque, da un leggero malessere all'origine di una malattia o di una convulsioni debilitanti.

Puoi utilizzare una serie di strumenti diversi per consentire all'utente di decidere cosa è meglio per lui, anziché indovinare la quantità di movimento eccessiva. Ad esempio, aggiungi un pulsante di attivazione/disattivazione per attivare o disattivare l'animazione all'interno del tuo sito o della tua app web. Valuta la possibilità di impostare l'opzione su Off per impostazione predefinita.

Verifica la tua comprensione

Verifica le tue conoscenze in materia di accessibilità del movimento e dell'animazione.