Animazione Web nell'era post-flash

In questo ambiente fortemente competitivo, le aziende sono alla frenetica ricerca di modi per catturare e mantenere l'attenzione delle persone. Mentre svolgiamo la nostra vita quotidiana, il flusso infinito di stimoli visivi che ci scaturiscono dalle pubblicità animate per strada, dai video sui nostri cellulari, per non parlare dei nostri feed sui social media, crea un senso di movimento costante che è in lizza per la nostra attenzione.

La reazione in una frazione di secondo al movimento nel nostro ambiente è stata sviluppata dalla necessità di sopravvivere e innescata da stimoli ambientali percepiti come potenzialmente minacciosi o dannosi; le persone prestano maggiore attenzione alle cose che si muovono. Quando cogliamo qualcosa che si muove velocemente con la coda dell'occhio, il cervello ci avvisa in una frazione di secondo perché il nostro cervello subconscio ha già reagito al pericolo prima che la nostra mente cosciente abbia avuto il tempo di elaborare le informazioni.

Gli inserzionisti lo sanno, ed è per questo che abbiamo animato annunci stradali alle fermate degli autobus e sui binari della metropolitana, annunci video che spuntano nei flussi dei social media e cartelloni pubblicitari elettronici con video full-motion. La tecnica è un effetto uno-due progettato per fornire messaggi di marketing. In primo luogo, catturando la nostra attenzione e, in secondo luogo, utilizzando video e animazioni per trasmettere il messaggio.

Se un'immagine statica vale più di mille parole, quanto vale un'animazione?

È qui che entra in gioco l'animazione web. I web designer sperano di catturare e mantenere la nostra attenzione, e magari aggiungere un'inaspettata scossa di gioia. L'animazione Web può essere utilizzata per visualizzare vari passaggi di un processo o un'idea complessi, per illustrare un semplice messaggio di marketing o per spostare le cose su una pagina Web in modo naturale e fluido mentre le persone scorrono, ancora una volta, per attirare l'attenzione su qualcosa.

Come è iniziata l'animazione Web, l'ascesa delle GIF

Durante i primi giorni del World Wide Web, le cose erano piuttosto statiche e noiose. Le pagine Web erano per lo più basate su design grafico e layout del mondo della stampa. Tuttavia, alcuni designer hanno compiuto uno sforzo concertato, nonostante le sfide tecniche e di larghezza di banda, per includere le prime forme di animazione web al fine di renderle più dinamiche e attraenti. Una delle prime aggiunte di un'animazione GIF a un sito Web è stata in Batman Forever di Jeffrey Zeldman nel 1995. I visitatori sono stati accolti dal volo di Batman verso di loro, animato come una sequenza di immagini.

Il sito promozionale di Batman Forever era uno dei siti più popolari dell'epoca. Ha ispirato altri web designer e sviluppatori a incorporare l'animazione web GIF come elemento bizzarro e accattivante nei loro siti web.

Avanti veloce di 20 anni e le GIF animate sono ormai ovunque. Sono su Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram e Facebook. Le GIF sono adatte per animazioni in loop brevi, sequenze di immagini e persino brevi loop video. Uno sfortunato difetto è che il formato del file GIF non ha una trasparenza variabile e non supporta un canale alfa; pertanto, tutti i pixel sono completamente opachi o completamente trasparenti.

Le animazioni GIF sono state l'inizio di una rinascita nel web design, ma non erano l'ideale. Soprattutto all'inizio della connessione remota e delle velocità di Internet lente, le GIF erano dei maiali di larghezza di banda. Il risultato è stata una sequenza pixelata a bassa risoluzione. Lo svantaggio per i progettisti che dovevano comprimere le GIF alla dimensione più piccola possibile era una tavolozza limitata a 8 bit, che provocava molto dithering. La situazione è cambiata con Internet ad alta velocità che è diventato più comune nel 21 ° secolo e, di conseguenza, l'animazione web è diventata più bella con milioni di colori e più fluida con frame rate più elevati.

L'alba dell'animazione Web in Flash

Il grande boom dell'animazione Web è arrivato con l'introduzione di Flash nel 1996, quando Macromedia ha annunciato il suo plug-in Web e lo strumento di animazione basato su frame di accompagnamento: Macromedia Flash (dopo aver acquisito FutureSplash Animator, un programma di animazione vettoriale). Flash ha svolto un ruolo di primo piano nel portare nuove funzionalità al web. Dall'audio e dall'animazione all'interattività e al video, Flash ha contribuito a far progredire Internet.

L'opportunità di creare animazioni web semplici, snelle e basate su vettori su interi siti che includevano interazioni, ha creato quello che potrebbe essere definito il periodo "barocco" del web design con (troppi) molti elementi animati che affollano il paesaggio. Tuttavia, Flash ha offerto uno sguardo alle possibilità del web design dinamico, consentendo ai designer di sperimentare e scatenando un periodo di rapida evoluzione del web design.

Le animazioni flash sono leggere e relativamente facili da realizzare. Con una dimensione di pochi kilobyte, sono distribuiti in formato file SWF e un file che utilizza suoni con grafica vettoriale nitida. La creazione di animazioni web è diventata un processo semplificato che non ha aggiunto molto ai tempi di caricamento delle pagine web. Ma nonostante ciò rimaneva uno svantaggio significativo: per funzionare era necessario un plug-in del browser.

Inoltre, l'interazione sofisticata in Flash è stata abilitata da ActionScript (AS), un linguaggio di programmazione orientato agli oggetti simile a JavaScript. ActionScript è stato inizialmente progettato per controllare semplici animazioni vettoriali 2D, ma successivamente si è evoluto in uno strumento sofisticato.

Sfortunatamente, l'animazione Flash non doveva essere reattiva, non funzionava bene su tutti i dispositivi e alla fine è stata eliminata da tutti i dispositivi mobili più diffusi. Sebbene la dimensione del file fosse relativamente piccola, Flash non era ben ottimizzato e finiva per essere affamato di CPU, il che era un problema anche sui cellulari. La fine dell'era Flash è arrivata dopo che Steve Jobs ha deciso di non supportare Flash sui dispositivi mobili Apple.

Flash è stato creato durante l'era dei PC, per PC e mouse. Ma l'era mobile riguarda dispositivi a basso consumo, interfacce touch e standard Web aperti, tutte aree in cui Flash non è all'altezza.

Steve Jobs

Animazione Web oggi

Oggi, poiché Flash è obsoleto, abbiamo esigenze diverse per l'animazione web. Gli strumenti devono essere flessibili e leggeri. I web designer devono creare contenuti reattivi e adattabili per diversi dispositivi (desktop, tablet e dispositivi mobili), tenendo conto di varie dimensioni dello schermo, browser, proporzioni, densità di pixel e altro ancora. I nostri capolavori di animazione web devono funzionare su un cellulare da 5 pollici e 720 pixel fino a un tablet QXGA da 9,7 pollici, fino a un display Retina 6K da 32 pollici.

La tecnologia è maturata a tal punto che anche i dispositivi mobili sottodimensionati hanno la larghezza di banda e la potenza di elaborazione per gestire animazioni Web molto impegnative e contenuti video ad alta risoluzione. Questo non significa che i siti web debbano essere super "occupati". Come sempre, si tratta di trovare il giusto equilibrio tra animazione, interazione dinamica ed elementi statici. Il fatto che oggi possiamo implementare molte animazioni web fantasiose non significa che dovremmo.

Anche i web designer/animatori devono considerare il supporto multipiattaforma. Dieci anni fa, i designer non dovevano assicurarsi che le loro creazioni stessero bene su una gamma così ampia di dispositivi. È necessario prendere in considerazione diverse proporzioni, orientamenti verticali e orizzontali, nonché diverse densità di pixel e distanze di visualizzazione. Questo enigma presenta ai web designer una serie di nuove sfide e potenziali insidie. Il test degli utenti consuma tempo prezioso, più cose potrebbero andare storte su una moltitudine di piattaforme e le animazioni web devono essere più dettagliate che mai.

HTML5, CSS3, JavaScript e SVG (grafica scalabile) sembrano essere le migliori soluzioni per l'animazione web. L'uso di queste moderne tecnologie e linguaggi web aiuterà ad affrontare la maggior parte, ma non tutti, i problemi di cui sopra. Ma è sempre una buona idea procedere con cautela, soprattutto quando ci si trova in un territorio inesplorato, e un ampio controllo di qualità e test è d'obbligo.

Perché usare l'animazione web?

L'animazione Web può attirare e mantenere l'attenzione delle persone più a lungo di una pagina Web statica e comunica un'idea o un concetto in modo più chiaro ed efficace. L'eccellente animazione web trasmette una storia dietro ogni movimento. Si tratta di dare vita a un'animazione con significato e "anima" (lat. anima).

L'animazione Web deve essere fluida, significativa e supportare il viaggio del visitatore. Il web designer/animatore deve essere consapevole di come l'animazione si inserisce nell'esperienza dell'utente, cercare di prevedere i probabili flussi degli utenti e quindi supportarla in modo significativo.

I web designer non devono guardare all'animazione web da una prospettiva puramente tecnica; hanno bisogno di guardarlo dal punto di vista dell'utente.

Una delle cose essenziali dell'animazione è il tempismo. Il giusto tempismo conferisce un significato fisico ed emotivo a un'animazione. L'esperienza dovrebbe essere fluida e logica. Se l'animazione non è fluida (ha un problema di tempismo), le persone potrebbero percepirla come un bug e perdere ogni motivazione per esplorare ulteriormente il sito web.

L'animatore deve usare un tempismo appropriato per fornire l'effetto desiderato. Quanti fotogrammi chiave devono essere utilizzati nell'animazione? Che tipo di cambiamento dinamico nell'animazione è dovuto all'interazione del visitatore e quanto velocemente arriva la risposta dopo l'interazione? L'animazione è stravagante, seria, divertente?

Da un punto di vista logico, possiamo dividere l'animazione web in due tipi fondamentali:

• Un'animazione Web statica e non interattiva, ad esempio un'animazione GIF.
• Un'animazione web dinamica con coinvolgimento dell'utente e interattività che cambia in base all'input dell'utente.

Il miglior esempio di animazione dinamica è un gioco, in cui gli utenti manipolano il contenuto sullo schermo. Un altro semplice esempio potrebbe essere la modifica della posizione di determinati elementi mentre un visitatore del sito Web scorre un sito Web a scorrimento parallasse. L'animazione non è passiva, varia a seconda delle azioni dell'utente.

L'animazione Web dinamica viene spesso utilizzata per presentare infografiche animate su un sito Web, quindi le persone prestano maggiore attenzione ad aree specifiche durante lo scorrimento della pagina: è un modo efficace per evidenziare le informazioni rilevanti.

I pro ei contro dell'animazione web

Ecco alcuni pro e contro delle tecniche di animazione web, comprese le soluzioni legacy che non sono più in uso.

Che dire dei pro e dei contro dell'animazione web in generale? Un'animazione web ben eseguita può ancora sembrare fuori luogo, quindi è sempre una buona idea porre alcune domande cruciali (così come i clienti del quiz e altri membri del team) prima di procedere con l'integrazione dell'animazione nella progettazione di un sito web.

Innanzitutto, dobbiamo verificare in che modo l'animazione influirà sull'esperienza dell'utente. Migliorerà l'UX del sito web? I designer dovrebbero:

• Esamina il design del sito Web esistente (se disponibile)
• Controlla il pubblico di destinazione e le piattaforme hardware che utilizzano
• Controlla i tempi di caricamento del sito e il carico della CPU
• Esplora altre alternative
• Tieni d'occhio l'usabilità

Non è una buona idea utilizzare l'animazione web su un sito per seguire semplicemente le tendenze.

La decisione di utilizzare l'animazione web dovrebbe essere trattata come qualsiasi altra decisione progettuale; i web designer devono valutare i pro ei contro e assicurarsi che l'esperienza dell'utente non sia compromessa. Dovrebbero anche collaborare con gli sviluppatori per accertare i requisiti del codice e assicurarsi che non rimangano bloccati con codice inefficiente che potrebbe dover essere modificato lungo la strada.

La moderna tecnologia di animazione Web è maturata in modo significativo negli ultimi 20 anni: le prestazioni, la larghezza di banda disponibile e la qualità del rendering sono aumentate. Tuttavia, i designer dovrebbero procedere con cautela e aggiungere animazioni a un sito Web solo se migliorano significativamente l'esperienza dell'utente.

Ulteriori letture sul blog di Toptal Design:

• Come creare animazioni di caricamento personalizzate per ridurre le frequenze di rimbalzo
• Creazione di illustrazioni sbalorditive con Sketch e Looper in pochissimo tempo
• Una guida dettagliata all'animazione dell'interfaccia utente con Principio e Schizzo
• Ispirazioni per l'animazione del logo per rendere il tuo marchio più riconoscibile
• Una guida passo passo alla creazione di video esplicativi di prodotto animati