{"id":618,"date":"2016-05-17T15:59:56","date_gmt":"2016-05-17T13:59:56","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/progettare-animazioni-web-sicure\/"},"modified":"2016-05-17T15:59:56","modified_gmt":"2016-05-17T13:59:56","slug":"progettare-animazioni-web-sicure","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/progettare-animazioni-web-sicure\/","title":{"rendered":"Progettare animazioni web sicure per la sensibilit\u00e0 al movimento"},"content":{"rendered":"
\n

Non \u00e8 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?<\/p>\n

Questa \u00e8 la realt\u00e0 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\u00f9 la norma, pi\u00f9 persone hanno cominciato a notare che il movimento sul larga scala sullo schermo pu\u00f2 causare vertigini, nausea, mal di testa o peggio. Per alcuni, i sintomi possono addirittura durare molto tempo dopo la fine dell’animazione.<\/p>\n

L’idea che l’animazione nelle interfacce possa far star male gli utenti non \u00e8 qualcosa con cui abbiamo avuto molto a che fare quando il web era perlopi\u00f9 un medium statico. In realt\u00e0 \u00e8 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<\/a>. Proprio come altri elementi del design, il modo in cui usate le animazioni pu\u00f2 avere un impatto su quanto sar\u00e0 accessibile il prodotto finale per il vostro pubblico, specialmente se soffre di un disordine vestibolare.<\/p>\n<\/div>\n

\n

Un disordine vesti-cosa?<\/h2>\n

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’\u00e8 una lunga lista di disordini vestibolari<\/a>, incluse la vertigine parossistica posizionale benigna (VPPB) e la labirintite. Anche l’a11y project d\u00e0 la definizione di disordini vestibolari<\/a><\/p>\n

Questi disturbi possono affliggere persone di tutte le et\u00e0 con sintomi e gravit\u00e0 che variano da persona a persona. Pu\u00f2 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<\/a>, circa 8 milioni di adulti Americani riportano un problema cronico di equilibrio, mentre un ulteriore 2.4 milioni riporta un problema cronico di vertigini.<\/p>\n

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.<\/p>\n<\/div>\n

\n

Identificare le animazioni potenzialmente scatenanti<\/h2>\n

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<\/a> e Craig Grannell<\/a> sulle loro esperienze. Greg, che ha esperienza di vertigini ed emicranie, \u00e8 un accessibility and UX consultant e uno speaker. Craig, che prova stordimento, \u00e8 uno scrittore ed editore che ha scritto sugli effetti delle animazioni di iOS per pubblicazioni come il Guardian<\/cite>. Entrambe hanno parlato di come le animazioni delle interfacce influenzino le persone con disordini vestibolari.<\/p>\n

<\/p>\n

Greg ha identificato Vimeo\u2019s Cameo<\/a>, Ice and Sky<\/a> e RD Construction<\/a> 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\u00e0 differenti.<\/p>\n

<\/p>\n

Per Craig, il carousel su Apple.com \u00e8 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.<\/p>\n

<\/p>\n

La pagina prodotto dell’iPhone<\/a>, con le animazioni di background in stile parallasse e lo scrolljacking (in cui i background si animano a una velocit\u00e0 che non \u00e8 in relazione con i vostri movimenti di scroll), causano anch’essi problemi.<\/p>\n

Craig descrive anche lo scroll orizzontale su wired.co.uk<\/a> come \u201cuna brutta sorpresa\u201d se non ce lo si aspetta. Vedere un enorme spostamento orizzontale quando state scrollando verso il basso \u00e8 sicuramente un distacco drastico dalle aspettative.<\/p>\n

<\/p>\n

Di contro, Solarbeat<\/a> \u00e8 stato caratterizzato come solo \u201cleggermente fastidioso\u201d. E il sito Scarlet<\/a> di Macaw non era troppo problematico al di l\u00e0 di alcune questioni con l’inizio dell’animazione.<\/p>\n

Persone diverse hanno condizioni e reazioni diverse, ovviamente, ma questi esempi ci mostrano che le cause scatenanti hanno pi\u00f9 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.<\/p>\n

Dimensione relativa del movimento<\/h3>\n

Le animazioni che spostano un oggetto lungo una gran quantit\u00e0 di spazio sono pi\u00f9 inclini a scatenare una risposta negativa nelle persone che soffrono di disordine vestibolare. La dimensione fisica dello schermo \u00e8 meno importante della dimensione relativa del movimento sullo spazio disponibile sullo schermo, quindi, un piccolo pulsante con una rotazione 3D probabilmente non creer\u00e0 problemi ma probabilmente li creer\u00e0 una transizione \u201cwipe\u201d a tutto schermo che copra l’intera larghezza di questo. \u00c8 poco probabile che causi problemi un’animazione che coinvolga solo propriet\u00e0 non di movimento, come l’opacit\u00e0, il colore e i blur.<\/p>\n

Direzioni e velocit\u00e0 non appaiate<\/h3>\n

\u00c8 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\u00e0 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 \u00e8 direttamente collegato alla velocit\u00e0 alla quale l’utente sta scorrendo, tendono anch’esse ad essere problematiche. Non ci vuole molto a capire quanto possano essere disorientanti.<\/p>\n

Distanza percorsa<\/h3>\n

La quantit\u00e0 di distanza percorsa da un’animazione \u00e8 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<\/a> per via della quantit\u00e0 di spazio virtuale percorso cos\u00ec rapidamente.<\/p>\n<\/div>\n

\n

Il cervello durante l’animazione<\/h2>\n

Tutto ci\u00f2 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.<\/p>\n

Spesso, una buona soluzione animata fa semplicemente in modo che sembri<\/em> pi\u00f9 semplice da usare e da capire. \u00c8 molto di pi\u00f9 di una semplice sensazione di pancia, c’\u00e8 anche della scienza dietro!<\/p>\n

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 \u00e8 essenzialmente scaricato dai loro cervelli nell’animazione che avete creato sullo schermo. Quando riducete il carico cognitivo<\/a>, liberate le risorse della memoria di lavoro degli utenti cos\u00ec possono concentrarsi su altre cose, come apprendere nuove capacit\u00e0<\/a> e memorizzare le informazioni<\/a>.<\/p>\n

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

\n

Progettare movimenti pi\u00f9 sicuri<\/h2>\n

Ci sono alcune cose che possiamo fare per rendere pi\u00f9 tranquilli i movimenti animati per le persone che li trovano scatenanti.<\/p>\n

Abbiate uno scopo<\/h3>\n

Le vostre animazioni per la UI dovrebbero essere progettate con uno scopo e avere una ragione d’essere. (\u00c8 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\u00f2 arricchire la user experience<\/a> oltre allo storytelling e alle abilit\u00e0 dimostrative. Iniziare da movimenti ragionati e rilevanti vi pu\u00f2 mettere sulla strada giusta per avere animazioni accessibili.<\/p>\n

Fornire un contesto significativo<\/h3>\n

Un link pubblicizzato come \u201cl’esperimento WebGL pi\u00f9 spintastic di sempre\u201d molto probabilmente conterr\u00e0 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.<\/p>\n

Ma non tutta l’animazione \u00e8 nascosta dietro a link. Identificare il contesto diventa pi\u00f9 difficile quando il movimento diventa sempre pi\u00f9 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.<\/p>\n

Se non siete sicuri che il contesto sia chiaro, aggiungerlo esplicitamente potrebbe aiutare. L’a11y project<\/a> suggerisce di fornire \u201cun indicatore di quale movimento avverr\u00e0 sul sito quando un utente fa un’azione\u201d. \u00c8 importante impostare le aspettative dell’utente.<\/p>\n

Date il controllo agli utenti<\/h3>\n

Se avete grandi quantit\u00e0 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\u00e0 di movimento hanno perfettamente senso dal punto di vista del design. Fornire quello che sostanzialmente \u00e8 un modo alternativo di vedere quel contenuto, o un piccolo controllo extra, pu\u00f2 essere di grande aiuto per chiunque sia sensibile al movimento.<\/p>\n

Questo pu\u00f2 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<\/a> raccomandano per le animazioni e applicateli a livello globale. Questo richiede in effetti un pochino di lavoro in pi\u00f9 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.<\/p>\n

Quanto lavoro richiede esattamente l’implementazione di un toggle dipender\u00e0 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<\/a> potrebbe essere usato in ogni sito.<\/p>\n

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

\n

Un po’ di aiuto dai browser?<\/h2>\n

Anche se avete le migliori intenzioni, potreste non avere le capacit\u00e0 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.<\/p>\n

La soluzione del toggle di Greg \u00e8 un buon approccio, ma i browser potrebbero fornirne una versione pi\u00f9 universale e pi\u00f9 semplice da implementare. Il browser potrebbe notificare gli utenti di contenuto fortemente animato senza cambiamenti aggiuntivi o senza sforzi da parte del developer.<\/p>\n

\"Notifica<\/p>\n

Pi\u00f9 controllo granulare potrebbe derivare da proposte come le User Queries<\/a> o User Context<\/a>. 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.<\/p>\n

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

Nell’aprile del 2015, Google Accessibility ha rilasciato l’estensione Animation Control<\/a> 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\u00e0 di controlli browser-based non sembra troppo lontano.<\/p>\n

Per quello che viene detto da chi ne ha davvero bisogno, il toggle di iOS \u201creduci animazioni\u201d 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!<\/p>\n<\/div>\n

\n

Create cose nuove e meravigliose, ma responsabilmente!<\/h2>\n

Sul web, pi\u00f9 che in ogni altro medium, la flessibilit\u00e0 e il controllo esistono per poter progettare contemporaneamente creativamente e responsabilmente. Possiamo decisamente innovare e spingere il web pi\u00f9 in l\u00e0 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.<\/p>\n

Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Le animazioni web su larga scala possono causare nausea, mal di testa a vertigini a milioni di persone che soffrono di vertigini o che hanno problemi all’orecchio interno. Per rendere i siti accessibili a tutti, non dobbiamo eliminare l’animazione, ma applicarla in maniera oculata. Val Head ci guida attraverso alcune delle sfide poste dai disordini vestibolari e ci fornisce delle linee guida per progettare tenendo a mente la sensibilit\u00e0 al movimento.<\/p>\n","protected":false},"author":818,"featured_media":7000795,"comment_status":"open","ping_status":"open","template":"","categories":[245,279,145],"tags":[],"coauthors":[413],"class_list":["post-618","article","type-article","status-publish","has-post-thumbnail","hentry","category-accessibilita","category-interaction-design","category-numero-128-18-maggio-2016"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000795"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=618"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}