Animazioni Web all’opera

Un altro livello di informazione#section1

L’animazione è potente perché può creare “l’illusione della vita”– Questo vuol dire che bisogna tenere conto di aspetti della fisica come la gravità, le reazioni, le cadute, gli allungamenti e il tempo. C’è un motivo per cui i capolavori animati di Disney appaiono e “vengono sentiti” come migliori rispetto alle loro controparti più a buon mercato e prodotte rapidamente. La realtà è ricca di input sensoriali che mandano informazioni al cervello riguardo a dove ci troviamo e a cosa abbiamo intorno. Tradurre anche solo una frazione di quella informazione in un mezzo a due dimensioni può aiutare gli utenti a dedurre più informazioni riguardanti quello che stanno guardando e e come si relaziona con il sistema di informazioni in cui si trova.

Con la diffusione del flat design e degli errori di UX che si porta dietro, abbiamo visto esattamente quanto sia pericoloso togliere degli indizi visuali dai componenti di un sito. L’animazione può essere usata per l’effetto opposto. Applicata in maniera appropriata, l’animazione può indicare:

Causalità#section2

Quando una cosa succede proprio prima di un’altra, il cervello deduce che le due cose sono collegate e che la prima è causata dalla seconda. Per esempio, quando cliccate su un pulsante di invio e la form sparisce, ne deducete di aver causato una reazione della form, non che un timer è scattato esattamente in quel momento per coincidenza, causandone la sparizione proprio nello stesso istante in cui avete cliccato sul pulsante.

Feedback#section3

Laddove la causalità può essere dedotta tra due eventi senza l’input umano (come lo spinner che indica il caricamento che sparisce quando il film è pronto a partire), si ha feedback quando qualcosa indica all’utente che la sua azione ha attivato una risposta, come pulsanti che appaiono schiacciati quando vengono attivati. Questa reazione, scheumorfica e animata, all’input dell’utente, dice a quest’ultimo: “Hai premuto il pulsante.” (Vi ricordate di quando le persone schiacciavano i pulsanti di pagamento più e più volte?).

Relazioni#section4

L’animazione può sottolineare come le cose sono gerarchicamente e spazialmente in relazione tra loro e come ci potete interagire, collegare dove siete stati, dove siete e cosa potete fare. Per esempio, quando aprite una app sull’iPhone in iOS7, viene fatto un zoom dell’app invece di ridisegnare la pagina come veniva fatto in iOS6. In questo modo potete ricordare meglio dove si trova l’icona della app nel vostro schermo principale, rendendo più semplice ritrovarla.

Progressione#section5

Ritornando alle relazioni, l’animazione può mostrare l’avanzamento in una sequenza lineare. Abbiamo sufficiente familiarità con la classica “loading bar”. Consideriamo anche l’indicatore su un GPS o su una app di mappe, che mostra il progresso lungo un percorso. Una serie di fermo-immagini della strada man mano che si procede lungo il percorso sarebbe più difficile da seguire.

Fisica#section6

Mostrare il modo in cui gli oggettivirtuali reagirebbero nel mondo reale è uno scheumorfismo attivo. Come esempio, consideriamo quando qualcosa “cade” verso il basso sullo schermo: il movimento sarà più credibile se l’animazione guadagna velocità nel tempo, esattamente come gli oggetti che cadono accelerano sotto l’effetto della gravità. Far sì che le azioni “sembrino” reali aiuta gli utenti ad accettare il vostro scheumorfismo.

Transizione#section7

Queste sono un’autentica invenzione umana: la dissolvenza da una scena a un’altra in un film non ha una controparte in natura, ma le transizioni sono preziosissime per indicare i cambiamenti di atteggiamento mentale, ambientazione o task e la maggior parte delle persone è abituata dalla televisione e dai film che le cose che seguono una transizione sono collegate più o meno tangenzialmente alle cose che l’hanno preceduta.

Animazioni come miglioramenti#section8

Quando Coin lanciò il suo sito per i pre-ordini, in migliaia aprirono il proprio portafoglio per dargli il benvenuto.
Dopo aver guardato le dimostrazioni animate del sito a varie risoluzioni, notai quanto poco testo di marketing ci fosse: al suo posto, usa poche animazinoi e
video per fare una dimostrazione piuttosto che raccontare il funzionamento del prodotto. Il testo che rimane è selezionato accuratamente e non toglie nulla all’esperienza.
Le animazioni richiedono meno banda per essere scaricate rispetto ai video e meno impegno da parte di chi guarda: non ci sono pulsanti da schiacciare, appaiono semplicemente
mano mano che si fa scorre in basso nella pagina.

Queste interazioni non sono limitate agli scenari pubblicitari come l’ultimo Mac Pro o la Pencil di FiftyThree. Anche in situazioni molto ricche di testo, come la recensione della X-Box 360 di Polygon, le animazioni aggiunte rendono il contenuto “più vivo” semplicemente animando delle illustrazioni lineari. La navigazione usa delle animazioni sottili per aiutarvi a capire in che punto dell’articolo vi trovate in relazione alle altre sezioni. Il New York Times ha fatto delle valorose incursioni nello storytelling interattivo, dalla sua copertura dettagliata delle Olimpiadi del 2012 fino ad articoli come “A Game of Shark and Minnow.”

Dal desktop al touchscreen e viceversa#section9

Ai tempi in cui la RAM era in megabyte, l’animazione non era comune al di fuori dei giochi (e anche allora, spesso era scarna e primitiva). Gli utenti erano sottilmente condizionati a farsi delle immagini mentali del “prima” e del “dopo” mentre facevano azioni come l’apertura di un menu. Poi il cervello faceva gli straordinari per seguire quello che era successo tra la pressione di un pulsante del mouse e l’apparizione del menu. Questa piccola interruzione può disorientare un utente quando passa dall’immaginazione al completamento del task. Questa interruzione è aumentata di pari passo con la complessità delle interfacce. L’animazione ha aiutato a connettere i puntini tra quegli stati, come hanno scritto i ricercatori di computer interaction Scott E. Hudson e John T. Stasko nel 1993:

Scaricando l’interpretazione dei cambiamenti al sistema percettivo, l’animazione permette all’utente di continuare a pensare al dominio dei task, senza bisogno di cambiare contesto verso il dominio dell’interfaccia. Eliminando i cambi visuali improvvisi, l’animazione riduce la probabilità che l’utente rimanga sorpreso.¹

Oggi, piccoli ma potenti device touchscreen ci stanno spingendo ad organizzare le interfacce in piccoli spazi, in maniera semplice. Questo è il motivo per cui facciamo sempre più affidamento sull’asse Z: layers, sliding panels, sides, zoom. Ma le relazioni spaziali come queste sono difficili da computare per la mente usando il vecchio “confronto di istantanee”, quindi l’animazione “degli spazi intermedi” tra gli stati “prima” e “dopo” fa sì che gli utenti non siano confusi o frustrati.

Data la proliferazione dei piccoli device, questi pattern di design rimarranno di moda ancora per un bel po’ di tempo. Infatti, le esperienze su grandi schermi le stanno ora adottando, sovrapponendo e manipolando le informazioni in tre dimensioni, come potete vedere nella nuova demo del framework Famo.us.

Lastricata di buone intenzioni: supporto, performance e responsabilità#section10

Questo tipo di interazioni è all’avanguardia. Ci vogliono tempo e denaro per svilupparle e supportarle. Al momento, non tutti i browser supportano le animazioni CSS, le animazioni SVG, l’elemento canvas e i loro amici e perfino quando i browser dichiarano di supportare una feature, i device su cui girano potrebbero non essere sufficientemente potenti per rendere l’esperienza fluida, senza intoppi. L’implementazione da parte del produttore potrebbe avere dei bug. Non c’è un’unica soluzione per tutto: dovrete fare le vostre ricerche, scegliere le vostre battaglie e adottare delle strategie di attenuazione.

È di primaria importanza conoscere e usare le tecniche di animazione più efficienti e testarle sui device reali. Se è addirittura possibile, cercate di avere dei dati sui tipi di browser e device che costituiranno il traffico che vi aspettate. Ha poco senso investire tempo in interazioni non adatte al vostro pubblico.

In una certa misura, possiamo di nuovo far affidamento su un vecchio amico: il progressive enhancement. Usando tool come Modernizr è possibile avere come obiettivo quei browser che non supportano le vostre animazioni e inviargli un polyfill o qualcosa di statico al loro posto.

Ma il vero problema è la performance, specialmente su device sotto-potenziati con dei display ad alta definizione. Spesso hanno teste troppo grandi per il loro corpo: i processori non hanno potenza per ridisegnare lo schermo in maniera sufficientemente rapida da risultare “fluido”. L’assenza di fluidità distrugge la preziosa illusione della vita. In questo momento, le vostre opzioni sono limitate:

1. Ottimizzate le vostre animazioni. Se l’animazione non è fluida, tirate fuori gli strumenti di sviluppo e cominciate ad analizzare la timeline. Potreste dover alterare il vostro design per rendere più semplice il “repaint” (i gradienti e le ombre sono notoriamente costosi in termini di animazione).
2. Offrite un’alternativa. Se avete ottimizzato tutto il possibile, ma rimangono ancora delle combinazioni di browser e device la cui scarsità di supporto all’animazione rende l’esperienza inutilizzabile, allora prendete in considerazione l’opportunità di fare “device sniffing” per scegliere accuratamente queste combinazioni e offrire loro un’alternativa senza animazioni.
3. Andate in contro alle esigenze di uno specifico segmento del mercato. Alcuni sviluppatori hanno il lusso di servire solo un certo numero di device e browser senza preoccuparsi troppo di una minoranza di utenti. Per esempio, gli sviluppatori che creano app HTML5 per Firefox OS o per il Kindle Fire non hanno bisogno di preoccuparsi del traffico proveniente da IE8, mentre gli sviluppatori che lavorano su una intranet il cui accesso è limitato a un certno numero di browser sicuri potrebbero non aver bisogno di dare priorità ad Android. Ci sono volte in cui fornire un’esperienza migliore per la maggior parte ha più importanza dell’andare incontro alle necessità di una minoranza, ragion per cui è così importante conoscere il proprio traffico. Tuttavia, se avete un pubblico ampio e addirittura moderatamente vario, anche la vostra minoranza potrebbe essere una maggioranza.
4. Non fatelo. A volte è troppo presto. È per una buona ragione che ripensiamo con disdegno a quei micrositi in Flash del passato, così complicati e senza scopo, commissionati da clienti che mia madre apostroferebbe come “più soldi che buon senso”. È facile rimanere coinvolti nel piacere superficiale del rendere vivo il web che perdiamo di vista la persona più importante nella stanza: il pubblico. Ma quando ci concentriamo per prima cosa sui nostri utenti, sui loro bisogni e sui potenziali limiti dei loro device, possiamo prendere delle decisioni di interazione argute, che spingono in avanti lo stato dell’animazione web senza dimenticarsi che solo perché possiamo non vuol dire che dobbiamo farlo sempre e comunque.

E così vorresti essere un (web) animator?#section11

Sia che siate web designer o front-end developer, investire nelle capacità di animazione e nella teoria vi aiuterà a raffinare i vostri design e le vostre interfacce. Fortunatamente, l’animazione di vecchia scuola ha avuto decenni per maturare in una forma d’arte piena di materiali e tecniche che ci vengono passate dai maestri.

Una di queste è lo storyboarding. Su grandi progetti, avete bisogno di una prospettiva a volo d’uccello dei molti percorsi che può prendere un’interazione. Lo studio di animazione Disney per prima cosa creava gli storyboard: grandi lavagne mobili su cui gli animatori potevano fissare le scene illustrate per delineare la progressione della storia lungo la sequenza temporale. Le illustrazioni potevano essere tolte o aggiunte durante lo sviluppo della storia e la lavagna poteva essere portata in posti diversi perché potessero lavorarci differenti team. Per il web, tipicamente ricreerete degli storyboard non lineari attorno ai vari percorsi che può prendere un’interazione. Si può fare usando diverse lavagne per diversi insiemi di azioni e reazioni.

Gli storyboard migliorano la collaborazione comunicando in maniera chiara quello che accade, quando e in che modo, e sono perfetti per i primi stadi di esplorazione, quando si vuole evitare che le persone si affezionino particolarmente ad un certo design. Aiutano anche le persone a pensare prima all’animazione. I movimenti sono disegnati direttamente sulla lavagna con frecce colorate e frasi squisitamente descrittive come “fare una panoramica”, “zoom in” e così via. Ci sono molti libri sull’argomento (il mio preferito è “Storyboard Design Course: Principles, Practice, and Techniques“) e siti come Skillshare offrono corsi poco costosi tenuti da artisti dello storyboard di fama mondiale.

Anche imparare la teoria dell’animazione è divertente. (Si tratta inoltre di un’ottima scusa per sedersi a guardare dei classici dell’animazione a “scopo educativo”!). Suggerisco di cominciare con “Tezuka School of Animation Volume 1: Learning the Basics“. È conciso, copre i concetti più importanti e non vi prenderà molto tempo. Avete più tempo? Cercate dei film di animazione che davvero vi parlino, provate a cercare un libro tipo L’arte di… che lo riguarda (di solito sono pieni di storyboard, dettagli dell’animazione e decisioni di design. (In questo momento sono completamente assorbita da “The Art of Frozen“!). Anche se non vi considerate designer, prendere familiarità con questi termini vi avvicinerà alle persone con cui lavorate.

Familiarizzate quanto più possibile con le CSS animation e transition, SVG, canvas e la web animations API, web audio e video e perfino la specifica WAI-ARIA. (Come risulta quell’audio quando è silenziato?). Siti come MDN hanno molto materiale a cui far riferimento, mentre HTML5 Rocks copre molte API che di solito non vengono capite bene. Codrops mostra degli esperimenti e Kirupa.com copre le animazioni CSS in maniera più approfondita di chiunque altro. I libri di O’Reilly sono oro colato, ma serve anche seguire i più noti nomi tra quelli che lavorano, parlano a conferenze e scrivono in questo ambito dell’interaction design e del game development in HTML5, come Val Head, Pasquale D’Silva, Jesse Freeman, Seb Lee-Delisle e perfino la sottoscritta.

Molti sviluppatori e designer hanno anche contribuito con degli animation event per framework come Angular.js e hanno collaborato alla creazione di tool di prototipazione con capacità di animazione come Framer. Librerie come D3 possono fare chiarezza sulla generazione di grafici SVG e sulle loro transizioni. Per le animazioni basate sulla pagina, molte aziende offrono delle visual user interface che facilitano la manipolazione della timeline, da Animator di Sencha a Adobe Edge Animate fino a Web Designer di Google, gratis (sebbene orientato agli annunci pubblicitari).

Non dovete per forza usare tutte queste tecniche e questi strumenti ogni giorno: vi basta sapere quali sono più indicati per uno specifico task. Ad esempio, canvas è un incubo per l’accessibilità, perché sostanzialmente si tratta di un tag immagine che vi permette di mischiare i suoi pixel nella maniera che preferite. Non è adatto per le infografiche o per le interfacce, ma le animazioni basate su SVG e CSS possono essere ancora usate con materiali che necessitano un valore semantico in una pagina. Se pensate di aver bisogno sia del suono sia dell’animazione, considerate un tag video. Ma se dovete separare questi elementi, canvas e web audio potrebbero essere la scelta più appropriata.

Piuttosto che cercare di padroneggiare qualsiasi API troviate, passate poco tempo a fare prove con molte cose. Trovate dei modi per applicare quel che avete visto ai progetti e guadagnate così una conoscenza più ampia anche se più superficiale di molte tecniche. Poi potrete padroneggiare lo strumento giusto per l’adeguata circostanza quando questa vi si presenterà. Non avete bisogno di leggere dozzine di libri enormi su ogni singola tecnica. Anche i libri più piccoli ma autorevoli, come “Web Audio API” di Boris Smus possono insegnarvi moltissime cose e rinforzare le conoscenze che già possedete.

Mettiamoci al lavoro!#section12

Le user interface animate possono essere potenti, così potenti da offrire un vantaggio competitivo ai prodotti, indipendentemente dalla piattaforma. Sono così sicura di questo futuro che ho deciso di investirci i miei soldi e avviare il mio studio, Tin Magpie, per specializzarmi nella creazione di sbalorditive interazioni e nel raccontare storie migliori con il codice. Spero che molti di voi si uniranno a me. Non vedo l’ora di guardare quello che creerete.

Note#section13

• 1. Da “Animation: From Cartoons to the User Interface,” pubblicato in UIST’93: Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology, pagg. 45-55. Si può acquistare un PDF dell’articoloe.

Illustrazioni: {carlok}