Animazione e movimento

Ti è mai capitato di trovarti in auto, barca o aereo e di sentire improvvisamente il mondo girare? O ti è mai capitato di avere una emicrania così forte che le animazioni sul tuo smartphone o tablet, create per "deliziarti", ti fanno stare male? 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à sperimentato una qualche forma di disfunzione vestibolare. Ciò può portare a un capogiro temporaneo, a vertigini indotte da emicrania o a una disabilità vestibolare più permanente.

Oltre a scatenare vertigini, molte persone trovano i contenuti in movimento, lampeggianti o scorrevoli distraenti. Le persone con ADHD e altri disturbi da deficit di attenzione potrebbero essere così distratte dagli elementi animati da dimenticare il motivo per cui hanno visitato il tuo sito web o la tua app.

In questo modulo, esamineremo alcuni modi per aiutare meglio le persone con tutti i tipi di disturbi scatenati dal movimento.

Contenuti lampeggianti e in movimento

Quando crei animazioni e movimenti, chiediti se il movimento dell'elemento è eccessivo. Ad esempio, i colori che sfarfallano dal buio alla luce o i movimenti rapidi sullo schermo possono causare crisi convulsive 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 relative al lampeggiamento delle WCAG sconsigliano quanto segue:

• Lampeggia più di tre volte in un secondo
• Lampeggi sotto la soglia generale di lampeggio e lampeggio rosso.

Nel migliore dei casi, questi lampi possono causare l'impossibilità di utilizzare una pagina web o, nel peggiore dei casi, portare a malattie.

Per qualsiasi movimento estremo, è fondamentale testarlo utilizzando lo strumento di analisi dell'epilessia fotosensibile (PEAT). PEAT è uno strumento senza costi per identificare se i contenuti, i video o le animazioni dello schermo possono causare crisi epilettiche. Non tutti i contenuti devono essere valutati da PEAT, ma i contenuti che contengono transizioni rapide o lampeggianti tra colori di sfondo chiari e scuri devono essere valutati, per sicurezza.

Un'altra domanda che devi porti in merito ad animazione e 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 quelli minimi, dall'elemento che stai creando o progettando.

Supponiamo che tu ritenga che il movimento dell'elemento non sia essenziale, ma possa migliorare l'esperienza complessiva dell'utente, o che tu non possa rimuovere il movimento per un altro motivo. In questo caso, devi seguire le linee guida sul movimento delle WCAG. Le linee guida stabiliscono che devi creare un'opzione per consentire agli utenti di mettere in pausa, interrompere o nascondere il movimento di: elementi non essenziali in movimento, lampeggianti o scorrevoli 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 di pausa, interruzione o nascondi alla tua pagina per consentire agli utenti di disattivare l'animazione di movimento potenzialmente problematica. Puoi farlo a livello di schermata o di elemento.

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

Utilizzare le query supporti

Oltre a selezionare con cura le animazioni, a offrire agli utenti opzioni per mettere in pausa, interrompere, nascondere il movimento ed evitare loop di animazione infiniti, puoi anche prendere in considerazione l'aggiunta di una query supporti incentrata sul movimento. In questo modo, gli utenti hanno ancora più scelta per quanto riguarda i contenuti visualizzati sullo schermo.

@prefers-reduced-motion

Simile alle query supporti incentrate sul colore nel modulo dei colori, la query supporti @prefers-reduced-motion controlla le impostazioni del sistema operativo dell'utente relative all'animazione.

Un utente può impostare le preferenze di visualizzazione per ridurre il movimento. Queste impostazioni variano a seconda dei sistemi operativi e possono essere formulate in modo 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 l'opzione Riduci movimento in Impostazioni > Accessibilità > Display. L'impostazione di Android è Rimuovi le animazioni. Su Windows, l'impostazione è formulata in modo positivo come Mostra animazioni, che è attiva per impostazione predefinita. Un utente deve disattivare questa impostazione per ridurre il movimento.

Per garantire l'accessibilità alle persone che hanno difficoltà con il movimento, anche le animazioni più brevi della soglia di 5 secondi delineata nelle linee guida WCAG 2.0 AA devono essere affrontate con cautela e il metodo più affidabile è dare agli utenti che hanno indicato una preferenza per il movimento ridotto il controllo esclusivo sulle animazioni, consentendo loro di avviare e interrompere l'animazione utilizzando controlli dedicati, come un pulsante di riproduzione e un pulsante di pausa.

Potenziamento progressivo per il movimento

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

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

Non possiamo prevedere il livello di movimento che causerà problemi alle persone con crisi epilettiche, disturbi vestibolari e altri disturbi visivi. Anche un piccolo movimento sullo schermo può causare vertigini, visione offuscata o peggio. Quindi, nell'esempio seguente, l'animazione non è predefinita.

Query supporti a più livelli

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

Consenti agli utenti di scegliere

Sebbene sia divertente integrare l'animazione nei nostri prodotti digitali per deliziare gli utenti, è fondamentale ricordare che alcune persone saranno influenzate da questi design. La sensibilità al movimento può colpire chiunque, da un leggero malessere a una malattia debilitante o a una crisi convulsiva.

Puoi utilizzare diversi strumenti per consentire all'utente di decidere cosa è meglio per lui, anziché indovinare quanto movimento è eccessivo. Ad esempio, aggiungi un pulsante di attivazione/disattivazione dell'animazione all'interno del tuo sito o della tua app web. Valuta la possibilità di impostare questo pulsante su off per impostazione predefinita.