Progettare animazioni web sicure per la sensibilità al movimento

Non è un segreto che molte persone considerino fastidiosi e sopravvalutati gli effetti scrolljack e parallax. Ma cosa succederebbe se l’animazione non vi provocasse solo fastidio ma vi facesse anche stare male?

Questa è la realtà con cui devono fare i conti le persone con disordini vestibolari scatenati da stimoli visivi. Dal momento che le interfacce animate stanno diventando sempre più la norma, più persone hanno cominciato a notare che il movimento sul larga scala sullo schermo può causare vertigini, nausea, mal di testa o peggio. Per alcuni, i sintomi possono addirittura durare molto tempo dopo la fine dell’animazione.

L’idea che l’animazione nelle interfacce possa far star male gli utenti non è qualcosa con cui abbiamo avuto molto a che fare quando il web era perlopiù un medium statico. In realtà è una rivelazione piuttosto nuova nella maggior parte dei circoli tecnologici. Anche Apple l’ha scoperto nel modo peggiore quando le transizioni animate in iOS 7 hanno cominciato a far star male alcune persone. Proprio come altri elementi del design, il modo in cui usate le animazioni può avere un impatto su quanto sarà accessibile il prodotto finale per il vostro pubblico, specialmente se soffre di un disordine vestibolare.

Un disordine vesti-cosa?#section1

Ogni malattia, danno o lesione al sistema vestibolare, il sistema attorno al nostro orecchio interno e cervello che processa le informazioni sensoriali coinvolte nel controllo dell’equilibrio e nei movimenti degli occhi, ricade sotto il termine ombrello di disordine vestibolare. C’è una lunga lista di disordini vestibolari, incluse la vertigine parossistica posizionale benigna (VPPB) e la labirintite. Anche l’a11y project dà la definizione di disordini vestibolari

Questi disturbi possono affliggere persone di tutte le età con sintomi e gravità che variano da persona a persona. Può essere difficile stimare un numero esatto di persone toccate da questi, per non parlare delle percentuali che possono esserne affette nel vostro specifico audience. Secondo vestibular.org, circa 8 milioni di adulti Americani riportano un problema cronico di equilibrio, mentre un ulteriore 2.4 milioni riporta un problema cronico di vertigini.

Vale anche la pena ricordare che le persone con disordini vestibolari non sono le uniche che possono potenzialmente essere infastidite dall’animazione sullo schermo. Le animazioni possono avere anche un impatto su chi soffre di epilessia e di emicrania.

Identificare le animazioni potenzialmente scatenanti#section2

Per avere un’idea migliore di che tipi di animazioni web scatenano i problemi alle persone con disordini vestibolari, ho fatto una chiacchierata con Greg Tarnoff e Craig Grannell sulle loro esperienze. Greg, che ha esperienza di vertigini ed emicranie, è un accessibility and UX consultant e uno speaker. Craig, che prova stordimento, è uno scrittore ed editore che ha scritto sugli effetti delle animazioni di iOS per pubblicazioni come il Guardian. Entrambe hanno parlato di come le animazioni delle interfacce influenzino le persone con disordini vestibolari.

Greg ha identificato Vimeo’s Cameo, Ice and Sky e RD Construction come problematici per via delle grandi aree di animazione ed effetti in stile parallasse sia in background che in primo piano, con movimenti a velocità differenti.

Per Craig, il carousel su Apple.com è un grosso problema, specialmente quando salta indietro alla prima foto. Non ci sono controlli per metterlo in pausa o per fermare quello specifico carosello, quindi non ci sono modi per evitarlo.

La pagina prodotto dell’iPhone, con le animazioni di background in stile parallasse e lo scrolljacking (in cui i background si animano a una velocità che non è in relazione con i vostri movimenti di scroll), causano anch’essi problemi.

Craig descrive anche lo scroll orizzontale su wired.co.uk come “una brutta sorpresa” se non ce lo si aspetta. Vedere un enorme spostamento orizzontale quando state scrollando verso il basso è sicuramente un distacco drastico dalle aspettative.

Di contro, Solarbeat è stato caratterizzato come solo “leggermente fastidioso”. E il sito Scarlet di Macaw non era troppo problematico al di là di alcune questioni con l’inizio dell’animazione.

Persone diverse hanno condizioni e reazioni diverse, ovviamente, ma questi esempi ci mostrano che le cause scatenanti hanno più sfumature di quante potremmo immaginarne se assumessimo semplicemente che nessuna o tutte le animazioni possono essere problematiche. Tre fattori, in particolare, giocano un ruolo importante: la dimensione relativa del movimento, la direzione del movimento e la distanza percepita che percorre un oggetto animato.

Dimensione relativa del movimento#section3

Le animazioni che spostano un oggetto lungo una gran quantità di spazio sono più inclini a scatenare una risposta negativa nelle persone che soffrono di disordine vestibolare. La dimensione fisica dello schermo è meno importante della dimensione relativa del movimento sullo spazio disponibile sullo schermo, quindi, un piccolo pulsante con una rotazione 3D probabilmente non creerà problemi ma probabilmente li creerà una transizione “wipe” a tutto schermo che copra l’intera larghezza di questo. È poco probabile che causi problemi un’animazione che coinvolga solo proprietà non di movimento, come l’opacità, il colore e i blur.

Direzioni e velocità non appaiate#section4

È molto probabile che animazioni parallasse e scrolljacking esagerate causino problemi. Per la maggior parte del tempo, questi effetti coinvolgono oggetti in background che si muovono, a volte drasticamente, a velocità diverse rispetto a quelle in primo piano.. Le animazioni che si muovono in una direzione diversa da quella in cui l’utente sta facendo scroll o in un modo che non è direttamente collegato alla velocità alla quale l’utente sta scorrendo, tendono anch’esse ad essere problematiche. Non ci vuole molto a capire quanto possano essere disorientanti.

Distanza percorsa#section5

La quantità di distanza percorsa da un’animazione è anch’essa un fattore. Ovviamente, si tratta di spazio virtuale, ma le animazioni che coprono una grande distanza percepita possono essere scatenanti. Per esempio, le transizioni zoom 3D di iOS 7 hanno causato problemi per via della quantità di spazio virtuale percorso così rapidamente.

Il cervello durante l’animazione#section6

Tutto ciò non implica che non dobbiamo usare le animazioni nei siti web. Nessuna delle persone con cui ho parlato ha detto di voler eliminare tutte le animazioni nelle interfacce. In effetti, alcuni le apprezzano ancora molto dal punto di vista del design.

Spesso, una buona soluzione animata fa semplicemente in modo che sembri più semplice da usare e da capire. È molto di più di una semplice sensazione di pancia, c’è anche della scienza dietro!

A un livello base, animare il movimento di un elemento rende il suo percorso visibile sullo schermo. I vostri utenti non devono tenere traccia del movimento nella loro testa. Al contrario, quello sforzo è essenzialmente scaricato dai loro cervelli nell’animazione che avete creato sullo schermo. Quando riducete il carico cognitivo, liberate le risorse della memoria di lavoro degli utenti così possono concentrarsi su altre cose, come apprendere nuove capacità e memorizzare le informazioni.

Oltre ai benefici sul carico cognitivo, altri studi mostrano che l’animazione può migliorare il processo di decision-making (PDF) e addirittura aiutare le persone ad apprendere e ricordare relazioni di spazio (PDF). Animare tra stati può anche aiutare a prevenire la cecità al cambiamento. In breve: l’animazione può liberare del potere della mente e rendere l’interfaccia più semplice da capire – benefici che non possono essere ignorati.

Progettare movimenti più sicuri#section7

Ci sono alcune cose che possiamo fare per rendere più tranquilli i movimenti animati per le persone che li trovano scatenanti.

Abbiate uno scopo#section8

Le vostre animazioni per la UI dovrebbero essere progettate con uno scopo e avere una ragione d’essere. (È scontato, vero?) Se alcune parti della vostra interfaccia si muovono, dovrebbe esserci una ragione incentrata sul design. Ci sono molti modi in cui un’animazione può arricchire la user experience oltre allo storytelling e alle abilità dimostrative. Iniziare da movimenti ragionati e rilevanti vi può mettere sulla strada giusta per avere animazioni accessibili.

Fornire un contesto significativo#section9

Un link pubblicizzato come “l’esperimento WebGL più spintastic di sempre” molto probabilmente conterrà moltissimo movimento e le persone possono decidere con cognizione di causa se vale la pena seguire quel link sapendo i rischi in cui possono incappare.

Ma non tutta l’animazione è nascosta dietro a link. Identificare il contesto diventa più difficile quando il movimento diventa sempre più diffuso. Una persona che soffre di un disordine vestibolare potrebbe trovarsi a dover gestire un’inaspettato inizio dei sintomi senza aver incontrato nessun elemento che facesse presagire la presenza di contenuto in movimento, come per esempio alcuni ampi spostamenti in un articolo delle news.

Se non siete sicuri che il contesto sia chiaro, aggiungerlo esplicitamente potrebbe aiutare. L’a11y project suggerisce di fornire “un indicatore di quale movimento avverrà sul sito quando un utente fa un’azione”. È importante impostare le aspettative dell’utente.

Date il controllo agli utenti#section10

Se avete grandi quantità di movimento che coprono molto spazio visivo, prendete in considerazione di offrire l’opzione per disattivare o ridurre il movimento. Ci sono moltissimi casi in cui grandi quantità di movimento hanno perfettamente senso dal punto di vista del design. Fornire quello che sostanzialmente è un modo alternativo di vedere quel contenuto, o un piccolo controllo extra, può essere di grande aiuto per chiunque sia sensibile al movimento.

Questo può essere ottenuto con un pulsante o un toggle switch per ridurre o spegnere l’animazione globalmente sul vostro sito. Pensatelo come i controlli di pausa che le WCAG raccomandano per le animazioni e applicateli a livello globale. Questo richiede in effetti un pochino di lavoro in più da parte vostra, ma offre un’opzione importante. Se significa fare la differenza tra essere in grado di passare del tempo con i vostri contenuti oppure no, anche se si tratta di un piccolo numero di utenti, allora ne vale la pena.

Quanto lavoro richiede esattamente l’implementazione di un toggle dipenderà a seconda dell’opzione (o delle opzioni) di animazione web che state usando, ovviamente. Come esplorazione di questa idea, Greg Tarnoff ha sviluppato un prototipo di un toggle switch che potenzialmente potrebbe essere usato in ogni sito.

Un semplice toggle che sia consistente su molti siti renderebbe più semplice per chi è sensibile alle animazioni ridurre l’animazione rapidamente e semplicemente. Se è qualcosa che anche a voi piacerebbe vedere realizzato, fate una fork del pen e aggiungetevi le vostre idee. Questo tipo di cose non può che migliorare con quante più teste vi contribuiscono.

Un po’ di aiuto dai browser?#section11

Anche se avete le migliori intenzioni, potreste non avere le capacità tecniche o il tempo per mettere insieme un toggle efficace per l’animazione. Sebbene sia una cosa responsabile da fare, lo sforzo potenziale che richiede comincia a farlo sentire come una soluzione temporanea.

La soluzione del toggle di Greg è un buon approccio, ma i browser potrebbero fornirne una versione più universale e più semplice da implementare. Il browser potrebbe notificare gli utenti di contenuto fortemente animato senza cambiamenti aggiuntivi o senza sforzi da parte del developer.

Più controllo granulare potrebbe derivare da proposte come le User Queries o User Context. I browser potrebbero permettere agli sviluppatori di personalizzare il comportamento desiderato per la versione motion-full sia per quella motion-light dei propri siti basandosi su una API che esponga le preferenze dell’utente.

Gestire questa situazione a livello del browser potrebbe inizialmente non essere così inverosimile come sembra. Grazie alla Web Animation API, abbiamo già alcuni controlli molto utili nei developer tools di Chrome e Firefox per mettere in pausa e far partire un’animazione globalmente. Una versione di questo per gli utenti potrebbe essere un gran passo avanti nel dare il controllo agli utenti su quanta animazione incontreranno.

Nell’aprile del 2015, Google Accessibility ha rilasciato l’estensione Animation Control per Chrome che ha come target i formati di immagine come .gif o gli SVG animati con SMIL. In combinazione con i controlli globali nei Dev Tools e la possibilità di controlli browser-based non sembra troppo lontano.

Per quello che viene detto da chi ne ha davvero bisogno, il toggle di iOS “reduci animazioni” lascia molto a desiderare. Magari i browser potrebbero fare un lavoro migliore? Mi piacerebbe vedere il web risolvere questo in un modo che mostri ai realizzatori di sistemi operativi chi comanda!

Create cose nuove e meravigliose, ma responsabilmente!#section12

Sul web, più che in ogni altro medium, la flessibilità e il controllo esistono per poter progettare contemporaneamente creativamente e responsabilmente. Possiamo decisamente innovare e spingere il web più in là progettando animazioni straordinarie per le interfacce e allo stesso tempo essere designer responsabili. Come web animator, con un briciolo di pensiero creativo, potete avere la botte dell’animazione piena e la moglie ubriaca.

Illustrazioni: {carlok}