{"id":443,"date":"2014-03-19T17:49:28","date_gmt":"2014-03-19T16:49:28","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/animazioni-web-all-opera\/"},"modified":"2014-03-19T17:49:28","modified_gmt":"2014-03-19T16:49:28","slug":"animazioni-web-all-opera","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/animazioni-web-all-opera\/","title":{"rendered":"Animazioni Web all’opera"},"content":{"rendered":"

Quando lasciai il mio lavoro lo scorso Aprile, il piano era quello di usare i miei incredibili trucchi di animazioni CSS3<\/a> per trovare lavoro come front-end developer in un’agenzia di New York. Tuttavia, man mano che parlavo alle conferenze e che facevo colloqui per varie aziende, ho realizzato che non sarei mai stata soddisfatta dal lavoro come tradizionale front-end developer. Angular.js non mi esalta, non voglio essere la guardiana di un altro imponente repository di fogli di stile. Non sto alzata tutta la notte a creare delle Sass extensions. (Beh, tranne quella in cui ho creato l’extension che aiuta a calcolare le keyframe CSS animations<\/a>.)<\/p>\n

C’era solo un’area dello sviluppo che mi intrigava davvero: l’interazione. Canvas, SVG, la web audio API, webGL. Le animazioni CSS3 erano solo l’inizio della mia infatuazione. Ho cominciato a vedere il browser come qualcosa di pi\u00f9 di un lettore di documenti e internet come pi\u00f9 di una serie di documenti collegati.<\/p>\n

Usiamo HTML per raccontare storie e comunicare una gran quantit\u00e0 di informazioni e l’animazione pu\u00f2 aiutarci a fare entrambe queste cose in maniera migliore. Proprio come la gerarchia guida gli utenti attraverso il contenuto, l’animazione li guida attraverso le interazioni, aiutandoli a comprendere relazioni, struttura, causa ed effetto. L’animazione non dovrebbe essere una feature “nice to have”, perch\u00e9 \u00e8 fondamentale per la comunicazione.<\/p>\n

\n

Un altro livello di informazione<\/h2>\n

L’animazione \u00e8 potente perch\u00e9 pu\u00f2 creare “l’illusione della vita”<\/a>– Questo vuol dire che bisogna tenere conto di aspetti della fisica come la gravit\u00e0, le reazioni, le cadute, gli allungamenti e il tempo<\/a>. C’\u00e8 un motivo per cui i capolavori animati di Disney appaiono e “vengono sentiti” come migliori rispetto alle loro controparti pi\u00f9 a buon mercato e prodotte rapidamente<\/a>. La realt\u00e0 \u00e8 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\u00f2 aiutare gli utenti a dedurre pi\u00f9 informazioni riguardanti quello che stanno guardando e e come si relaziona con il sistema di informazioni in cui si trova.<\/p>\n

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<\/a>. L’animazione pu\u00f2 essere usata per l’effetto opposto. Applicata in maniera appropriata, l’animazione pu\u00f2 indicare:<\/p>\n

Causalit\u00e0<\/h3>\n

Quando una cosa succede proprio prima di un’altra, il cervello deduce che le due cose sono collegate e che la prima \u00e8 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 \u00e8 scattato esattamente in quel momento per coincidenza, causandone la sparizione proprio nello stesso istante in cui avete cliccato sul pulsante.<\/p>\n

<\/div>\n

Feedback<\/h3>\n

Laddove la causalit\u00e0 pu\u00f2 essere dedotta tra due eventi senza l’input umano (come lo spinner che indica il caricamento che sparisce quando il film \u00e8 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\u00f9 e pi\u00f9 volte?).<\/p>\n

<\/div>\n

Relazioni<\/h3>\n

L’animazione pu\u00f2 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\u00f9 semplice ritrovarla.<\/p>\n

<\/div>\n

Progressione<\/h3>\n

Ritornando alle relazioni, l’animazione pu\u00f2 mostrare l’avanzamento in una sequenza lineare. Abbiamo sufficiente familiarit\u00e0 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\u00f9 difficile da seguire.<\/p>\n

<\/div>\n

Fisica<\/h3>\n

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

<\/div>\n

Transizione<\/h3>\n

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 \u00e8 abituata dalla televisione e dai film che le cose che seguono una transizione sono collegate pi\u00f9 o meno tangenzialmente alle cose che l’hanno preceduta.<\/p>\n

<\/div>\n<\/div>\n
\n

Animazioni come miglioramenti<\/h2>\n

Quando Coin lanci\u00f2 il suo sito per i pre-ordini<\/a>, in migliaia aprirono il proprio portafoglio per dargli il benvenuto.
\nDopo 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
\nvideo per fare una dimostrazione piuttosto che raccontare il funzionamento del prodotto. Il testo che rimane \u00e8 selezionato accuratamente e non toglie nulla all’esperienza.
\nLe 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
\nmano mano che si fa scorre in basso nella pagina.<\/p>\n

\"Coin<\/a><\/video><\/p>\n

Queste interazioni non sono limitate agli scenari pubblicitari come l’ultimo Mac Pro<\/a> o la Pencil di FiftyThree<\/a>. Anche in situazioni molto ricche di testo, come la recensione della X-Box 360<\/a> di Polygon<\/cite>, le animazioni aggiunte rendono il contenuto “pi\u00f9 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<\/em> alle altre sezioni. Il New York Times<\/cite> ha fatto delle valorose incursioni nello storytelling interattivo, dalla sua copertura dettagliata delle Olimpiadi del 2012<\/a> fino ad articoli come \u201cA Game of Shark and Minnow<\/a>.\u201d<\/p>\n<\/div>\n

\n

Dal desktop al touchscreen e viceversa<\/h2>\n

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\u00f2 disorientare un utente quando passa dall’immaginazione al completamento del task. Questa interruzione \u00e8 aumentata di pari passo con la complessit\u00e0 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:<\/p>\n

\n

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\u00e0 che l’utente rimanga sorpreso.1<\/sup><\/p>\n<\/blockquote>\n

Oggi, piccoli ma potenti device touchscreen ci stanno spingendo ad organizzare le interfacce in piccoli spazi, in maniera semplice. Questo \u00e8 il motivo per cui facciamo sempre pi\u00f9 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\u00ec che gli utenti non siano confusi o frustrati.<\/p>\n

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

\n

Lastricata di buone intenzioni: supporto, performance e responsabilit\u00e0<\/h2>\n

Questo tipo di interazioni \u00e8 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’\u00e8 un’unica soluzione per tutto: dovrete fare le vostre ricerche, scegliere le vostre battaglie e adottare delle strategie di attenuazione.<\/p>\n

\u00c8 di primaria importanza conoscere e usare le tecniche di animazione pi\u00f9 efficienti<\/a> e testarle sui device reali. Se \u00e8 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.<\/p>\n

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

Ma il vero problema \u00e8 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\u00e0 distrugge la preziosa illusione della vita. In questo momento, le vostre opzioni sono limitate:<\/p>\n

    \n
  1. Ottimizzate le vostre animazioni.<\/strong> Se l’animazione non \u00e8 fluida, tirate fuori gli strumenti di sviluppo e cominciate ad analizzare la timeline<\/a>. Potreste dover alterare il vostro design per rendere pi\u00f9 semplice il “repaint” (i gradienti e le ombre sono notoriamente costosi in termini di animazione).<\/li>\n
  2. Offrite un’alternativa.<\/strong> Se avete ottimizzato tutto il possibile, ma rimangono ancora delle combinazioni di browser e device la cui scarsit\u00e0 di supporto all’animazione rende l’esperienza inutilizzabile, allora prendete in considerazione l’opportunit\u00e0 di fare “device sniffing” per scegliere accuratamente queste combinazioni e offrire loro un’alternativa senza animazioni.<\/li>\n
  3. Andate in contro alle esigenze di uno specifico segmento del mercato.<\/strong> 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 \u00e8 limitato a un certno numero di browser sicuri potrebbero non aver bisogno di dare priorit\u00e0 ad Android. Ci sono volte in cui fornire un’esperienza migliore per la maggior parte ha pi\u00f9 importanza dell’andare incontro alle necessit\u00e0 di una minoranza, ragion per cui \u00e8 cos\u00ec importante conoscere il proprio traffico. Tuttavia, se avete un pubblico ampio e addirittura moderatamente vario, anche la vostra minoranza potrebbe essere una maggioranza.<\/li>\n
  4. Non fatelo.<\/strong> A volte \u00e8 troppo presto. \u00c8 per una buona ragione che ripensiamo con disdegno a quei micrositi in Flash del passato, cos\u00ec complicati e senza scopo, commissionati da clienti che mia madre apostroferebbe come “pi\u00f9 soldi che buon senso”. \u00c8 facile rimanere coinvolti nel piacere superficiale del rendere vivo il web che perdiamo di vista la persona pi\u00f9 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\u00e9 possiamo non vuol dire che dobbiamo farlo sempre e comunque.<\/li>\n<\/ol>\n<\/div>\n
    \n

    E cos\u00ec vorresti essere un (web) animator?<\/h2>\n

    Sia che siate web designer o front-end developer, investire nelle capacit\u00e0 di animazione e nella teoria vi aiuter\u00e0 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.<\/p>\n

    Una di queste \u00e8 lo storyboarding. Su grandi progetti, avete bisogno di una prospettiva a volo d’uccello dei molti percorsi che pu\u00f2 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\u00e9 potessero lavorarci differenti team. Per il web, tipicamente ricreerete degli storyboard non lineari attorno ai vari percorsi che pu\u00f2 prendere un’interazione. Si pu\u00f2 fare usando diverse lavagne per diversi insiemi di azioni e reazioni.<\/p>\n

    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\u00ec via. Ci sono molti libri sull’argomento (il mio preferito \u00e8 “Storyboard Design Course: Principles, Practice, and Techniques<\/a><\/cite>“) e siti come Skillshare<\/a> offrono corsi poco costosi tenuti da artisti dello storyboard di fama mondiale.<\/p>\n

    Anche imparare la teoria dell’animazione \u00e8 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<\/a><\/cite>“. \u00c8 conciso, copre i concetti pi\u00f9 importanti e non vi prender\u00e0 molto tempo. Avete pi\u00f9<\/em> tempo? Cercate dei film di animazione che davvero vi parlino, provate a cercare un libro tipo L’arte di\u2026<\/em> 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<\/a><\/cite>“!). Anche se non vi considerate designer, prendere familiarit\u00e0 con questi termini vi avviciner\u00e0 alle persone con cui lavorate.<\/p>\n

    Familiarizzate quanto pi\u00f9 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<\/em> risulta quell’audio quando \u00e8 silenziato?). Siti come MDN<\/a> hanno molto materiale a cui far riferimento, mentre HTML5 Rocks<\/a> copre molte API che di solito non vengono capite bene. Codrops<\/a> mostra degli esperimenti e Kirupa.com<\/a> copre le animazioni CSS in maniera pi\u00f9 approfondita di chiunque altro. I libri di O\u2019Reilly sono oro colato, ma serve anche seguire i pi\u00f9 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<\/a>, Pasquale D\u2019Silva<\/a>, Jesse Freeman<\/a>, Seb Lee-Delisle<\/a> e perfino la sottoscritta<\/a>.<\/p>\n

    Molti sviluppatori e designer hanno anche contribuito con degli animation event per framework come Angular.js<\/a> e hanno collaborato alla creazione di tool di prototipazione con capacit\u00e0 di animazione come Framer<\/a>. Librerie come D3<\/a> 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> a Adobe Edge Animate<\/a> fino a Web Designer<\/a> di Google, gratis (sebbene orientato agli annunci pubblicitari).<\/p>\n

    Non dovete per forza usare tutte queste tecniche e questi strumenti ogni giorno: vi basta sapere quali sono pi\u00f9 indicati per uno specifico task. Ad esempio, canvas \u00e8 un incubo per l’accessibilit\u00e0, perch\u00e9 sostanzialmente si tratta di un tag immagine che vi permette di mischiare i suoi pixel nella maniera che preferite. Non \u00e8 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\u00f9 appropriata.<\/p>\n

    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\u00ec una conoscenza pi\u00f9 ampia anche se pi\u00f9 superficiale di molte tecniche. Poi potrete padroneggiare lo strumento giusto per l’adeguata circostanza quando questa vi si presenter\u00e0. Non avete bisogno di leggere dozzine di libri enormi su ogni singola tecnica. Anche i libri pi\u00f9 piccoli ma autorevoli, come “Web Audio API<\/a><\/cite>” di Boris Smus possono insegnarvi moltissime cose e rinforzare le conoscenze che gi\u00e0 possedete.<\/p>\n<\/div>\n

    \n

    Mettiamoci al lavoro!<\/h2>\n

    Le user interface animate possono essere potenti, cos\u00ec potenti da offrire un vantaggio competitivo ai prodotti, indipendentemente dalla piattaforma. Sono cos\u00ec sicura di questo futuro che ho deciso di investirci i miei soldi e avviare il mio studio, Tin Magpie<\/a>, 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.<\/p>\n<\/div>\n

    \n

    Note<\/h2>\n