Animazioni Web: cosa sono e perché ne hai bisogno

E qual è uno degli stimoli a cui non possiamo sottrarci? Il movimento. È scritto nel nostro DNA: quando con la coda dell’occhio registriamo qualcosa che si muove velocemente, il cervello ci avverte in una frazione di secondo. Reagiamo in maniera istintiva, perché il movimento potrebbe significare pericolo e, in altri tempi e in altri luoghi, una disattenzione poteva rivelarsi fatale.

Quindi, se un’immagine statica vale più di mille parole, quanto può valere un’animazione? È quello che cercheremo di capire in questo articolo in cui parleremo, in particolare, di animazioni web cercando di rispondere alle seguenti domande:

Se cerchiamo nel dizionario, la parola “animazione” deriva dal verbo latino “animare” che significa “vivificare, dar vita”.

Se invece consideriamo il lato pratico, l’animazione è la visualizzazione in rapida successione di una sequenza di immagini così da creare l’illusione del movimento. Se mettiamo insieme le due cose, l’animazione è il modo che abbiamo di dare vita alla nostra immaginazione.

Le animazioni web includono tantissime cose diverse: spaziano dal pulsante che si agita quando viene cliccato, alla transizione che agisce sull’opacità o sul colore di un elemento, fino ad arrivare a giochi interattivi anche complessi. Nella sua forma più semplice, comunque, un’animazione web consiste nel cambio di una proprietà di un elemento nel tempo.

Come abbiamo già detto sotto il cappello di “animazione web” ricadono tanti tipi diversi di animazioni, dai più semplici ai più complessi. Vediamo insieme quali sono alcuni dei più comuni e diffusi.

È un classico: passi con il puntatore del mouse sopra ad un pulsante e ti accorgi che si illumina o si colora o cambia forma o fa qualcos’altro ancora di diverso. E poi, dopo che hai cliccato, il pulsante assume l’aspetto di premuto.

Animazioni come queste sono utili all’utente perché danno un feedback visivo: rendono facilmente riconoscibili gli elementi cliccabili, aiutano a comprenderne la funzione e informano se le azioni eseguite hanno avuto successo o meno. Sono talmente utili che sono diventate un elemento standard di una buona interfaccia web.

Anche in questo caso le variazioni sul tema sono molteplici: scorrendo la pagina, si possono vedere gli elementi comparire uno dopo l’altro con delle transizioni, oppure si può simulare una navigazione a blocchi, come se la pagina fosse composta da schede diverse che si sostituiscono una sull’altra, e così via.

Si sa quanto sia importante fare subito una buona impressione: per questo spesso si cerca di rendere unico e memorabile l’header dei siti web aggiungendo un’animazione come sfondo. Fra le soluzioni più gettonate ci sono le animazioni di particelle o di elementi geometrici ma anche brevi video, o animazioni 2D/3D.

A volte queste animazioni hanno delle componenti interattive (per esempio, le particelle possono seguire il movimento del mouse) ma, in generale, la loro funzione è di intrattenimento: servono ad accogliere e a ben disporre l’utente perché prosegua nella navigazione.

Quando le animazioni diventano un contenuto vero e proprio di una pagina web, le declinazioni possibili sono veramente infinite. Cosa possiamo creare come contenuto animato? Praticamente tutto: potremmo realizzare un semplice banner promozionale o una fantastica galleria con le nostre fotografie più belle; un’infografica interattiva per l’articolo del blog o un render 3D del nostro prodotto di punta da inserire nella scheda dell’e-commerce.

In questi casi l’intelligenza sta nel sfruttare l’animazione per creare del reale valore aggiunto. Per intenderci: realizzare un’infografica statica è meno oneroso in termini di tempo e costi rispetto a creare un’infografica animata ma l’interattività della seconda può aumentare significativamente la comprensibilità dei dati e rendere il contenuto più fruibile e virale.

Mal sopportiamo l’attesa eppure a volte è necessario aspettare che la pagina o un singolo contenuto si carichi. Gli accorgimenti necessari sono due: fare di tutto perché questo tempo di attesa sia il più breve possibile; prevedere un loading, ovvero una di quelle animazioni di caricamento che girano, saltano o scompaiono.