Il fascino intramontabile delle Animazioni Web

Ma cosa c’è alla base del successo di questo genere di contenuti e, soprattutto, come possiamo usarli efficacemente all’interno dei nostri siti web o sui social per promuovere noi stessi o la nostra attività?

È quello che scopriremo in questo articolo.

Partiamo da qui: vi siete mai chiesti perché ci piacciono tanto animazioni e filmati? Può sembrare strano ma la risposta va ricercata nel nostro "Old Brain".

Forse è un colpo per la nostra autostima ma, per quanto ci piaccia pensarci come persone civili ed evolute, in noi è ancora vivo l’istinto dell’uomo preistorico che lotta per cercare di sopravvivere in un mondo ostile e pieno di insidie.

Ce lo ricordano con chiarezza le neuroscienze spiegandoci come il nostro cervello sia diviso in 3 parti:

L’Old Brain ha 6 caratteristiche fondamentali:

Ed ecco spiegato perché siamo così attratti da video e animazioni: sono immagini in movimento e il nostro Old Brain è cablato per reagire subito a questo genere di stimoli. In fondo se, in tempi preistorici, qualcosa si muoveva all’improvviso poteva voler dire solo due cose:

In qualsiasi caso: "Attenzione! Attivati subito e agisci: attacca o fuggi."

E ancora oggi è così: il movimento attira la nostra attenzione e richiede una nostra reazione. Se comprendiamo questo meccanismo, lo potremo usare a nostro vantaggio nella creazione di pagine web e campagne promozionali.

Il potere di fascinazione che esercitano su di noi le immagini animate è tale che la loro storia, al contrario di quel che ci potremmo aspettare, è vecchia quasi quanto l’uomo.

Il più antico esempio di animazione di cui disponiamo, infatti, è una ciotola di terracotta di oltre 5.200 anni ritrovata in Iran: è sufficiente farla girare su se stessa per scoprire che le 5 scene con cui è decorata servono a riprodurre il movimento di una capra che salta per afferrare le foglie di una ramo.

Poi ci sono stati gli spettacoli di ombre proiettate sul muro dell’antico Egitto e della Cina.

E alla fine del 1600 è arrivata la lanterna magica che, attraverso apparecchi dai nomi fantasiosi come taumatropio, zootropio o cinetoscopio, ha portato al ben più famoso cinematografo dei fratelli Lumière in cui l’illusione ottica non era più realizzata con strisce disegnate ma grazie alla pellicola fotografica.

Era la fine dell’Ottocento: da lì il passo è stato breve e l’animazione si è poi sviluppata nel cinema e, più recentemente, sul Web.

Alla fine degli anni ‘90, presi dall’euforia, il Web pullulava di mirabolanti animazioni fatte in Flash che erano percepite come veri e propri elementi di modernità. Poi, passata, l’ubriacatura, si è iniziato a prestare più attenzione alle performance dei siti e a premiare la fruibilità piuttosto che la spettacolarità. Le animazioni in Flash hanno iniziato ad essere troppo pesanti e poco compatibili con la navigazione da mobile e, per questo, hanno segnato il passo.

Oggi, grazie alla molteplicità di strumenti e metodologie di sviluppo disponibili, i gestori di siti sono tornati ad implementare immagini in movimento per catturare l'attenzione dei visitatori ma con maggior consapevolezza e sobrietà rispetto al passato.

Perché? Semplicemente perché è pur sempre vero che le animazioni hanno il potere di:

Già da quello che abbiamo fin qui detto si capisce che ci sono animazioni e animazioni. In altre parole, ci sono animazioni che servono per spiegare una funzione, dare un feedback, anticipare un comportamento ed altre che servono semplicemente per rendere più piacevole la navigazione. Quelle del primo tipo vengono definite animazioni funzionali e rientrano nel campo dell’interaction design. Quelle del secondo tipo, invece, sono animazioni emotive e riguardano più l’ambito del motion design.

Esempi di animazioni funzionali sulle pagine web sono le transizioni tra le schermate ma anche le cosiddette micro-interazioni. Un pulsante che, quando ci si passa sopra con il mouse, si ingrandisce leggermente è una tipica micro-interazione.

Se pensiamo, poi, alle App che solitamente usiamo sullo smartphone, gli esempi di animazioni funzionali si moltiplicano: il pull down per l’aggiornamento, il caricamento dei loader, lo swipe tra un contenuto e l’altro, ecc.

Il punto cruciale e che tutte le animazioni funzionali non vengono aggiunte solo perché sono belle ma soprattutto perché sono in grado di migliorare un concetto o un processo.     

Tutte le altre sono animazioni emozionali e, pur non avendo gli stessi obiettivi, possono essere altrettanto utili, se non altro per rafforzare l’identità del brand e rendere più gradevole l’esperienza dell’utente.

Le animazioni emozionali possono essere più o meno complesse: rendono facile raccontare uno stroria e illustrare un messaggio in modo efficace e in poco di tempo. Per questo sono perfette per arricchire non solo le pagine di un sito web ma anche per corredare i post di un blog o per comunicare sui social, dove tutto deve essere immediato e d’impatto.

Il punto d’inizio per chiunque voglia fare dell’animazione il proprio lavoro non è tanto imparare ad utilizzare uno strumento specifico, quanto piuttosto conoscere ed assimilare i principi dell’animazione classica raccolti da due dei più importanti animatori Disney degli anni ‘30, Frank Thomas e Ollie Johnston, in un libro pubblicato nel 1986, “The Illusion of Life”.

In base alla loro vastissima esperienza, Secondo Johnston e Thomas l’animazione è così potente perché può creare “l’illusione della vita” ma perché riesca a farlo occorre rispettare 12 principi:

... e tanto altro ancora.

In tutti questi casi le animazioni ci guidano attraverso le interazioni, aiutandoci a comprendere relazioni, strutture e rapporti di causa ed effetto. In altre parole, le animazioni arricchiscono le comunicazioni di input sensoriali che ci aiutano a comprendere meglio la situazione e a interagire nel modo più appropriato.

Dunque smettiamo di considerare le animazioni solo come dei semplici ornamenti che è carino aggiungere alle nostre pagine Web. Se le progettiamo con attenzione e le realizziamo con cura, le animazioni possono arricchire significativamente la nostra comunicazione, rendendola più attraente ed efficace.