TEORIA DI BASE
DELL'ANIMAZIONE WEB

Esiste un'animazione funzionale che rende l'interfaccia più intuitiva e facile da usare. Questo tipo di animazione è utilizzato nelle interfacce dei prodotti e nelle applicazioni mobili. C'è poi l'animazione decorativa, utilizzata soprattutto nelle landing page o nei progetti speciali, che serve ad attirare l'attenzione dell'osservatore, a rendere il progetto più interessante e ad evocare determinate emozioni.

La velocità di animazione riflette il rapporto tra la distanza percorsa da un elemento e il tempo impiegato per farlo. La velocità comprende anche tutti i cambiamenti che l'elemento subisce dall'inizio alla fine. È uno dei componenti chiave dell'animazione, in quanto responsabile della dinamica complessiva e dell'atmosfera che si cerca di creare. La realizzazione di animazioni è un processo piuttosto creativo, e scoprirete subito che non è molto diverso dal dirigere un film.

Quando si progetta un'animazione, è importante pensare:

• Quanto durerà
• La velocità con cui avviene l'effetto di animazione
• A quale velocità l'elemento inizierà e terminerà il movimento

Quale durata scegliere per rendere l'animazione ordinata? Non esiste una risposta esatta. È importante non far attendere all'utente l'esito del movimento, ma anche non rendere l'animazione troppo veloce. L'osservatore deve avere il tempo di capire dove è apparso l'elemento sullo schermo e come è arrivato in una nuova posizione. In generale, l'animazione deve risultare naturale.

Le animazioni più dinamiche sono adatte alla comparsa di elementi piccoli come testi, elenchi, schede o pulsanti. Gli elementi di grandi dimensioni sono solitamente animati in modo più fluido. La durata dipende anche dalla quantità di spazio occupato dall'animazione. L'alta velocità è più adatta per i micromovimenti, perché maggiore è la velocità, maggiore è l'attenzione che richiede, distraendo l'utente dal resto del contenuto.

La distanza di movimento nell'animazione web è solitamente breve:

• Elementi che rivelano la trasparenza (schede, elenchi, immagini)
• Effetti Hover (animazione al passaggio del mouse) per pulsanti e schede: Zoom, spostamento, cambio di colore
• Pop-up (ad es. ingrandimento di una foto)
• Presentazione animata

Sebbene i parametri di animazione possano variare a seconda del progetto, la velocità di animazione tende a seguire un insieme di regole universali. L'animazione è più comoda da percepire entro i limiti specificati di seguito; usateli come guida e non sbaglierete.

Si tratta di un intervallo di valori medio per animare la maggior parte degli elementi, né troppo veloce né troppo lento. Questo intervallo è sufficiente per animare testo, piastrelle, elenchi ed elementi decorativi. Aumentiamo l'intervallo:

Un intervallo di 0,1 secondi viene percepito come un istante, il che lo rende adatto a piccoli elementi e movimenti (hovering, cambio di scheda, scorrimento nelle gallerie), mentre le animazioni più lunghe di un secondo appariranno stancanti. È bene assicurarsi di non applicare l'animazione a un elemento importante della pagina web.

Questi dati sono stati rivelati da uno studio di Neilson Norman Group (società di consulenza e ricerca sull'esperienza utente) e dal Model Human Processor.

Quando le proprietà di un elemento animato sono simili a quelle degli oggetti fisici, sono più facili da percepire. Queste animazioni sono più prevedibili e per questo non causano disagio.

Contribuiscono a innescare determinate associazioni ed emozioni che sono familiari all'utente. Uno dei modi principali per ottenere una sensazione naturale è immaginare come si comporterebbe un oggetto fisico se si muovesse come la vostra animazione. In che modo questo influisce sulla velocità?

• Ad esempio, elementi identici si muovono in modo diverso se percorrono distanze diverse. Quando gli elementi si muovono, quello con la distanza più breve si ferma per primo.
• Anche gli elementi che variano in massa si muovono in modo diverso: quelli più grandi tendono a muoversi più lentamente. Se fosse un oggetto fisico, la sua massa gli impedirebbe di muoversi più velocemente.

Queste regole sono strettamente legate alla nostra percezione. È importante ricordare che gli oggetti fisici hanno sempre un inizio e una fine del loro movimento. A un certo punto accelerano (ad esempio all'inizio, se vengono spinti) e a un certo punto rallentano (ad esempio alla fine del percorso). L'animazione web trasmette queste proprietà con l'aiuto di Easing.

La distensione è la tecnica più importante nella progettazione dell'animazione, in quanto conferisce agli elementi autenticità, carattere e dinamica.

La distensione viene solitamente rappresentata attraverso un grafico del rapporto tra la distanza del movimento (asse Y) e il tempo necessario per percorrerla (asse X). Se si impara a leggerli e a comporli correttamente, si aiuterà il progettista a spiegare meglio il compito allo sviluppatore.

Il movimento lineare risulta il più innaturale. Immaginate che la velocità dell'elemento non cambi per tutta l'animazione, come se non ci fossero gravità e attrito. Un'animazione di questo tipo sembrerà artificiale e semplicemente sciatta.

Esistono diversi tipi di effetto di facilitazione. Esaminarli e imparare ad applicarli nei vostri progetti vi sarà sicuramente utile. Ecco quali sono gli esempi più comuni di easing e i loro grafici:

Questo tipo di facilitazione è il più comune. Le transizioni Ease-In-Out consistono nell'accelerare dolcemente un elemento all'inizio e nel rallentarlo alla fine del movimento. In questo modo le animazioni risultano più naturali: L'elemento accelera, completa il movimento e si ferma.

In questo caso, l'elemento accelera all'inizio e ha una velocità di animazione costante. Questo tipo di animazione assomiglia al lancio di un razzo.

Nelle animazioni Ease-Out, l'elemento ha un movimento rapido e pronunciato all'inizio e un movimento di arresto fluido alla fine.

L'attenuazione asimmetrica consente di applicare impostazioni più sottili per trasmettere con precisione le proprietà fisiche. In questo caso, i punti di accelerazione e decelerazione hanno una propria dinamica e i grafici con le curve di animazione possono apparire completamente diversi. Ad esempio, un elemento può avere un'accelerazione dolce all'inizio e un arresto rapido alla fine.

Quando gli oggetti si scontrano, possono rimbalzare l'uno sull'altro o allungarsi in direzioni diverse. Nella progettazione dell'animazione, questi effetti sono chiamati Rimbalzo ed Elastico. Questi effetti fanno sembrare il movimento naturale.

L'ampiezza del movimento dipende dall'idea generale del progetto. Quando si progetta, si deve confrontare l'elemento con un oggetto fisico per capire esattamente come costruire l'animazione. Se si vuole ottenere l'effetto di una palla leggera che salta, l'accelerazione dell'elemento dovrà essere dolce, mentre il suo rimbalzo sulla superficie dovrà essere ampio. Se invece si immagina una palla di metallo che cade, la sua discesa sarà molto più veloce, mentre il suo rimbalzo sarà appena percettibile.

L'alleggerimento dell'animazione, il rimbalzo e la velocità contribuiscono a creare una certa dinamica. Imparando a usare questi strumenti, saprete come impostare il tono giusto per la vostra animazione.

Le curve di Bezier sono utilizzate per tracciare l'accelerazione di un elemento. Una curva di Bezier è una curva matematica su un grafico contenente gli assi Y (distanza) e X (velocità), che riflettono la distanza percorsa dall'elemento nello spazio e il tempo impiegato per farlo. Regolando la curva, è possibile regolare la velocità con cui l'elemento percorre le diverse parti del suo percorso.

Esistono due tipi di curve di Bezier, Quadratica e Cubica. Le coordinate del primo e dell'ultimo punto sono chiaramente definite e si trovano sulla curva. Gli altri punti sono regolabili e si trovano all'esterno della linea. Lo spostamento dei punti trasforma la curva, creando una forma regolare.

Per imparare a leggere i grafici e capire come gli angoli sulla curva mostrano la dinamica del movimento, disegniamo due grafici simili ma leggermente diversi.

Non ci sono valori universali per i punti di una curva che possano creare un'animazione perfetta. L'importante è sperimentare e capire gradualmente quali dinamiche di movimento sono appropriate per ogni caso. Una volta imparato a leggere i grafici, potrete utilizzare queste conoscenze in modo più professionale. Per semplificarvi la vita, ecco un paio di servizi che aiutano i progettisti a visualizzare le animazioni:

cubic-bezier
Questo servizio aiuta a spostare la curva, a riprodurre le impostazioni e a salvare il risultato desiderato. Per semplificare il trasferimento del progetto di animazione al team di sviluppo, è possibile copiare i valori dei punti di coordinate e condividerli con lo sviluppatore.

easings.net
Questo servizio contiene progetti di animazione completati, che possono rivelarsi utili come esempi già pronti che contengono i valori giusti.

Su Tilda esistono diversi tipi di animazioni. In Zero Block c'è uno strumento avanzato per i designer che consente di impostare effetti di animazione personalizzati, e ci sono blocchi di base con effetti di animazione di base preimpostati.

Per saperne di più sulle animazioni su Tilda , cliccate qui.

Volevamo dare ai designer non professionisti l'opportunità di aggiungere animazioni interessanti ai loro progetti, per questo abbiamo aggiunto ai blocchi delle animazioni preimpostate. Le impostazioni utilizzate sono, a nostro avviso, perfettamente bilanciate, pur rimanendo universali. È sufficiente attivare l'animazione per l'elemento desiderato (intestazione, sottointestazione, ecc.) nel pannello Impostazioni del blocco.

Le animazioni sono state realizzate dai nostri designer. La velocità non è né troppo veloce né troppo lenta e gli elementi si susseguono con armonia. Vediamo come funzionano le impostazioni di animazione di Tilda utilizzando una delle copertine come esempio:

Nell'esempio, abbiamo assegnato lo stesso stile di animazione - che appare dal basso - a tutti gli elementi, per vedere meglio il movimento.

Abbiamo cercato di capire a quale velocità gli elementi sarebbero apparsi uno dopo l'altro, con quale ritardo e con quale spostamento. Se si osservano attentamente i valori sulla copertina, si può notare che:

• Il primo elemento a comparire è il più grande (l'intestazione è la più grande, quindi è l'elemento chiave).
• Il titolo è seguito da una descrizione, che ha un'importanza secondaria. La velocità di animazione è più elevata.
• Il pulsante appare per ultimo e la sua velocità di comparsa è superiore a quella di entrambi i testi.

Lo stile Easing è lo stesso per tutti gli elementi con animazione preimpostata:

Il grafico mostra che gli elementi accelerano rapidamente all'inizio e decelerano gradualmente alla fine.

La coreografia contribuisce a creare il ritmo nell'animazione. È simile al ritmo musicale, in quanto determina il carattere dell'opera. L'importante è che i movimenti dell'animazione siano chiaramente definiti e non monotoni (con lo stesso intervallo di tempo tra l'uno e l'altro).

Animazione parallela. Elementi di animazione che hanno la stessa velocità e lo stesso tempo, facendoli sembrare un unico gruppo.

Animazione ritardata. Si tratta di un'animazione che contiene un piccolo ritardo tra gli elementi che appaiono, con l'elemento successivo che si muove un po' più velocemente di quello precedente. Affinché gli elementi facciano ancora parte dello stesso gruppo, l'intervallo di ritardo deve essere piccolo (ad esempio, 0,3 secondi).

Raggruppamento di elementi. È possibile raggruppare gli elementi e combinare animazioni parallele e ritardate. Ad esempio, è possibile far apparire tutti i testi dell'intestazione contemporaneamente e far apparire i pulsanti con un ritardo.

La sequenza di animazione dipende dall'importanza dell'elemento, poiché esistono elementi uguali ed elementi chiave.

L'enfasi visiva sarà data all'elemento chiave, mentre il resto sarà unificato il più possibile. Ad esempio, il titolo della pagina può essere l'elemento principale, mentre i sottotitoli e le immagini saranno secondari. Un modo per evidenziare l'elemento chiave è mostrare prima il titolo, seguito da una pausa e dalla comparsa degli elementi secondari a un ritmo più lento.

In una pagina web, di solito si tratta di elenchi, gallerie fotografiche, schemi, elementi con uno scopo simile. Possono apparire insieme o uno dopo l'altro. Quando appaiono uno dopo l'altro, l'animazione dell'aspetto deve essere la stessa.

Le foto di una galleria fanno parte della stessa entità. È importante che l'attenzione dell'osservatore non sia dispersa. È necessario assicurarsi che l'animazione sia semplice, uniforme e sufficientemente veloce.

Questo tipo di animazione non ha lo scopo di attirare l'attenzione, poiché aggiunge solo dinamica durante lo scorrimento della pagina. Una buona tecnica per riunire visivamente i diversi elementi di un gruppo è iniziare l'animazione del secondo elemento prima della fine della prima animazione. Ad esempio:

Gli elementi chiave, invece, danno il tono e focalizzano l'attenzione dell'utente. Possono essere un unico elemento o più elementi (poi riuniti in gruppi). Ad esempio, si può creare un'intestazione grande e luminosa, impostarla in modo che appaia rapidamente senza ritardo, ma con un rallentamento alla fine. Gli altri elementi possono apparire in modo fluido e dopo l'intestazione, ma con un lungo ritardo.

L'animazione è uno strumento per aggiungere espressione, enfasi e controllare l'attenzione. È uno strumento molto potente, che spesso viene usato in modo inopportuno. Quando si parla di animazione, c'è spesso la tentazione di applicare tutte le tecniche che si conoscono in un unico progetto. In genere questo si rivela un errore, perché l'attenzione dello spettatore viene spostata dal movimento delle immagini e dei testi, e immergersi nel contenuto diventa molto difficile. Come si fa a sapere se non si sta esagerando?

Il bilanciamento delle animazioni nel progetto si riferisce al numero di elementi animati che non provocano una sensazione controversa nella visualizzazione della pagina. Aggiungere troppe animazioni è un errore comune. Per non rimuovere alla fine le animazioni non necessarie, è meglio determinare la quantità di animazione necessaria all'inizio, guidati dalle seguenti regole:

Non animate tutti gli elementi del vostro progetto. Una dinamica eccessiva stanca e disorienta l'osservatore. Per cominciare, determinate gli elementi da mettere in risalto: di solito due sono sufficienti. Ad esempio, i titoli e le foto della galleria.

Controllare la qualità. Se si aggiunge un'animazione a un progetto, è importante assicurarsi che funzioni correttamente e non si blocchi. L'animazione richiede molte risorse di sistema e sarà lenta o intermittente se il carico della CPU è elevato. Gli utenti saranno tutt'altro che impressionati e non ci sarà alcun fattore "wow". Pertanto, è essenziale che:

• Non animate troppi elementi
• Testate il sito web su computer poco potenti
• Al posto dell'animazione simultanea di più elementi, utilizzate una sequenza con un breve ritardo.
• Non caricare immagini pesanti sul sito web

Mantenere la gerarchia. Applicare la stessa animazione a elementi dello stesso valore in tutto il sito web. Ad esempio:

• Stesso stile di intestazione
• Stesso stile hover (ad esempio, l'aspetto dell'ombra sotto il pulsante al passaggio del mouse)

Mantenere lo stile. Applicare lo stesso stile di animazione alla gerarchia. Ad esempio, si può decidere che tutte le intestazioni delle sezioni si dissolvano dalla parte inferiore, mentre le immagini e le didascalie si presentino lateralmente.

Una quantità limitata di animazioni aiuta a non esagerare e a non confondere gli stili all'inizio. Assicuratevi assolutamente che la quantità minima di animazioni sulla pagina non sia sufficiente per voi, e solo allora cercate di aggiungerne altre.

L'animazione rende il progetto più interessante e ne sostiene lo stile, l'atmosfera e il carattere. Ma può essere dannosa se non si seguono le regole di base: