• IT
  • DE
  • EN
Vai ai contenuti

Il fascino intramontabile delle Animazioni Web

WebSite Blog
Pubblicato da Incomedia in Webdesign · 20 Agosto 2020
Anche oggi ti sei collegato online, hai navigato un po’, usato Facebook, WhatsApp e YouTube e hai visto almeno un meme, una gif animata, un video, anzi molto probabilmente ne hai visto ben più di uno. In effetti, non passa giorno che tu non ne veda e non ne condivida almeno uno e, come te, facciamo così un po’ tutti: in questo modo la diffusione e la viralità dei contenuti animati è ormai altissima.

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.

Animazioni e filmati: perché ci piacciono tanto?

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:
  • il New Brain – è la parte più evoluta, preposta alla rielaborazione dei dati e al pensiero razionale;
  • il Middle Brain – è la parte che si occupa di elaborare sensazioni ed emozioni;
  • l’Old Brain – è il cervello rettiliano, quello più antico e meno raffinato che però, alla fine, controlla i dati provenienti dagli altri due cervelli e prende le decisioni determinando le azioni.

L’Old Brain ha 6 caratteristiche fondamentali:
  1. è egocentrico
  2. è sensibile ai contrasti decisi
  3. è concreto
  4. ricorda bene l’inizio e la fine ma non ciò che sta in mezzo
  5. è visivo
  6. reagisce alle emozioni forti

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:
  1. "Attenzione! C’è del cibo."
  2. "Attenzione! Puoi diventare cibo."

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.

Le animazioni: un po’ di storia

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:
  • catturare l’attenzione delle persone;
  • rendere tutto più gradevole e accattivante;
  • se usate coscientemente, aiutare gli utenti a percepire variazioni e segnalazioni guidandoli nella navigazione.

Animazioni: Functional o Delightful?

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.

Ok, ma come si crea un’animazione?

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:



1. Squash & Stretch (compressione e dilatazione)
2. Anticipazione
3. Staging (messa in scena)
4. Azione diretta e azione da posa a posa
5. Susseguenza e arrivo oltre il punto di stop
6. Rallentamento in entrata e uscita
7. Archi
8. Azione secondaria
9. Temporizzazione
10. Esagerazione
11. Disegno solido
12. Appeal (attrattiva)

In effetti, se realizzata tenendo in considerazione principi base della fisica come la gravità, le reazioni e il tempo, le animazioni possono risultare più realistiche e verosimili e riuscire non solo a raccontare meglio una storia ma anche a :
  • indicare causalità → clicco su un pulsante e la form sparisce
  • dare un feedback → clicco su un pulsante e questo rimane nello stato premuto
  • rappresentare una relazione → lo zoom su un punto su una mappa me ne chiarisce la collocazione spaziale
  • indicare una progressione → pensiamo a una barra di caricamento

... 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.


Torna ai contenuti