Motion Graphic + Web Design = UX Design

Principi di Motion Graphic per migliorare l’esperienza utente del tuo sito web

Il Motion Design è diventata una competenza necessaria per progettisti UX e sviluppatori di siti web.

Le animazioni per il web possono consentirti un notevole balzo in avanti nella cura della user experience (UX) del tuo sito web.

Le animazioni interattive sono ormai comuni nelle app del tuo smartphone e il web è sempre stato un passo indietro rispetto alle piattaforme native: adesso, grazie ai nuovi e costanti miglioramenti sulle capacità di rendering dei nuovi browser, anche il web design può evolversi attraverso la motion graphic e puntare a rendere ogni interazione una delizia per l’utente…

Uno dei principi fondamentali dell’animazione è la gestione del tempo nello spazio (timing & spacing), in una parola, la velocità.

Secondo Val Head, autrice di diversi testi sulle animazioni CSS e di questo interessante articolo, nella teoria classica la velocità nelle animazioni deve obbedire e quindi riprodurre determinate leggi fisiche (es. caduta di un oggetto), mentre nelle animazioni di un’interfaccia web, la velocità serve a dare personalità agli oggetti animati.

Nelle animazioni web questo elemento è chiamato easing (accelerazione) e determina il modo in cui cambia la velocità nel corso della durata di un’animazione.

Nelle specifiche dei fogli di stile (CSS3), la funzione di timing di un’animazione (vedi esempio) viene normalmente gestita attraverso un set di proprietà predefinite: ease, ease-in, ease-out, ease-in-out e linear.

.foo { transition: transform .5s ease; }

Le variazioni di velocità previste da queste chiavi CSS non sono però sufficienti per costruire un’animazione con una propria personalità: come il nome suggerisce, si può applicare un’accelerazione in entrata, in uscita (oppure in entrambe) con una funzione di tempo/spazio a valori predefiniti, quindi non è possibile rappresentare un movimento con caratteristiche uniche.

Per risolvere il problema, esattamente come lo risolverebbero artisti della Motion Graphic per il video e per il cinema, il parametro ease può essere sostituito con la funzione cubic-bezier.

La funzione, nota anche tra grafici e illustratori per rappresentare i vettori, può essere rappresentata su un piano cartesiano dove i valori di x rappresentano i secondi (durata dell’animazione) e i valori di y rappresentano il percorso (spazio). La curva che si può ottenere da un punto A ad un punto B rappresenta la variazione della velocità: è maggiore quando la curva sale in verticale e minore quando la curva si appiattisce.

La funzione cubic-bezier richiede 4 valori che corrispondono alle coordinate x,y dei punti a cui sono fissate le linee (o più volgarmente “maniglie”) Bézier, che rappresentano (metaforicamente parlando) le braccia che muovono i gessi sul piano cartesiano.

Alla funzione di ease applicata nell’esempio precedente, possiamo sostituire i seguenti valori, per ottenere lo stesso identico effetto di variazione della velocità:

.foo { transition: transform .5s cubic-bezier(.25,.1,.25,.1); }

Per ottenere variazioni personalizzate della velocità di un elemento della tua interfaccia web, non è necessario rimettere le mani su vecchi e ammuffiti libri di analisi e studio di funzioni: schiacciare o staccare il pedale dell’acceleratore è semplice come disegnare una curva con un gesso e una corda e non mancano tool completamente gratuiti per poter gestire la tua curva in modo pratico e visuale.

Tra i migliori ti segnalo Cubic-bezier.com e Ceaser.