La guida definitiva all'uso corretto dell'animazione in UX

Al giorno d’oggi è difficile impressionare o persino sorprendere con un’animazione dell’interfaccia. Un’animazione mostra le interazioni tra le schermate, spiega come utilizzare l’applicazione o semplicemente orienta l’attenzione di un utente. Gli articoli sull’animazione in UX che sono in rete, quasi tutti descrivono solo casi d’uso specifici o aspetti generali; non vi è alcun articolo in cui tutte le regole relative all’animazione delle interfacce siano descritte in modo chiaro e pratico.
Nel testo che segue troverai tutti i principi e le regole principali per iniziare ad animare le interfacce, per averle sempre a portata di mano, in un unico posto.

Come utilizzare correttamente l’animazione in UX – Guida pratica

Durata e velocità dell’animazione

Quando gli elementi cambiano il loro stato o posizione, la durata dell’animazione dovrebbe essere abbastanza lenta da dare agli utenti la possibilità di notare il cambiamento, ma allo stesso tempo abbastanza veloce da non creare attesa.

Numerose ricerche hanno svelato che la velocità ottimale per l’animazione dell’interfaccia è compresa tra 200 e 500 ms. Queste cifre si basano sulle peculiarità del cervello umano.
Qualsiasi animazione inferiore a 100 ms è istantanea e non verrà riconosciuta affatto. Allo stesso tempo un’animazione più lunga di 1 secondo trasmetterebbe un senso di ritardo e quindi sarebbe noioso per l’utente.

Sui dispositivi mobili, le Linee Guida per il Material Design suggeriscono anche di limitare la durata dell’animazione a 200–300 ms.
Per quanto riguarda i tablet, la durata dovrebbe essere più lunga del 30% (circa 400–450 ms). Il motivo è semplice: le dimensioni dello schermo sono più grandi, quindi gli oggetti devono fare un percorso più lungo quando cambiano posizione. Sui dispositivi wearable, la durata dovrebbe essere di conseguenza più breve del 30% (circa 150-200 ms), perché su uno schermo più piccolo la distanza da percorrere è più breve.

L’animazione Web viene trattata in modo diverso. Poiché siamo abituati ad un’apertura quasi istantanea di pagine Web in un browser, ci aspettiamo di transitare tra stati diversi altrettanto velocemente. Pertanto, la durata delle transizioni web dovrebbe essere circa 2 volte più breve rispetto a quella dei dispositivi mobili, e quindi tra 150 e 200 ms.
Diversamente, l’utente penserebbe inevitabilmente che il computer si stia bloccando o che ci siano problemi con la connessione a Internet.
Tuttavia, se stai creando un’animazione decorativa sul tuo sito web o stai cercando di attirare l’attenzione dell’utente su determinati elementi, dimentica queste regole. In questi casi, infatti, l’animazione può essere anche più lunga.

È necessario ricordare che, indipendentemente dalla piattaforma, la durata dell’animazione dovrebbe dipendere non solo dalla distanza percorsa, ma anche dalla dimensione dell’oggetto. Gli elementi più piccoli o animazioni con variazioni ridotte dovrebbero muoversi più velocemente. Di conseguenza, l’animazione con elementi grandi e complessi sembra migliore quando dura un po’ più a lungo.
Tra gli oggetti in movimento della stessa dimensione, il primo a fermarsi è l’oggetto che ha superato la distanza più breve.
Piccoli oggetti rispetto a oggetti grandi si muovono più lentamente poiché creano offset più grandi.

Quando gli oggetti si scontrano, l’energia della collisione deve essere uniformemente distribuita tra loro secondo le leggi fisiche. Quindi, è meglio escludere l’effetto di rimbalzo. Usalo solo in casi eccezionali, quando ha veramente senso.

Il movimento degli oggetti deve essere chiaro e nitido, quindi non utilizzare il motion blur. È difficile riprodurre questo effetto persino sui moderni dispositivi mobili e in più il motion blur non è affatto utilizzato nell’animazione dell’interfaccia.
Le voci di un elenco (news, elenchi indirizzi e-mail, ecc.) dovrebbero comparire con un ritardo molto breve. La comparsa di ogni nuovo elemento dovrebbe durare da 20 a 25 ms. Se fosse più lenta, potrebbe infastidire l’utente.

Easing

L’easing aiuta a rendere più naturale il movimento dell’oggetto. È uno dei principi essenziali dell’animazione, che è ampiamente descritto nel libro The Illusion of Life: Disney Animation, scritto da due animatori chiave della Disney: Ollie Johnston e Frank Thomas.
Affinché l’animazione non appaia meccanica e artificiale, l’oggetto dovrebbe muoversi con una certa accelerazione o decelerazione, proprio come tutti gli oggetti vivi nel mondo fisico.

Leggi anche La tua startup potrebbe fallire senza UX

Moto lineare

Gli oggetti che non sono influenzati da alcuna forza fisica si muovono linearmente, in altre parole a velocità costante. E proprio per questo fatto sembrano molto innaturali e artificiali all’occhio umano.
Tutte le applicazioni per l’animazione utilizzano le curve di animazione. Proverò a spiegare come leggerle e cosa significano. La curva mostra come cambia la posizione dell’oggetto (asse y) durante gli stessi intervalli di tempo (asse x). Nel caso attuale, il movimento è lineare, quindi l’oggetto percorre la stessa distanza ad uno stesso tempo.

Il movimento lineare può, ad esempio, essere utilizzato solo quando l’oggetto cambia colore o trasparenza. In generale, possiamo usarlo per gli stati in cui un oggetto non cambia la sua posizione.

Ease-in o curva di accelerazione

Sulla curva possiamo vedere che all’inizio la posizione dell’oggetto cambia lentamente e la velocità aumenta gradualmente. Ciò significa che l’oggetto si sta muovendo con una certa accelerazione.

Questa curva dovrebbe essere utilizzata quando gli oggetti vengono fuori dallo schermo alla massima velocità, come accade per le notifiche di sistema o per le schede dell’interfaccia. Ma bisogna tenere presente che tale tipo di curva dovrebbe essere utilizzata solo quando gli oggetti lasciano lo schermo definitivamente e non possono più essere richiamati o restituiti.

La curva di animazione aiuta a esprimere il giusto mood dell’animazione.
Nell’esempio di seguito, possiamo vedere che la durata del movimento e la distanza è la stessa per tutti gli oggetti, ma anche piccoli cambiamenti nella curva ci danno la possibilità di influenzare il mood dell’animazione.
E ovviamente, cambiando le curve, puoi far muovere l’oggetto nella maniera il più simile possibile al mondo reale.

Ease out o curva di decelerazione

È l’opposto della curva di ease-in, quindi l’oggetto copre rapidamente lunghe distanze riducendo lentamente la velocità fino a quando non si ferma.

Questo tipo di curva dovrebbe essere usato quando l’elemento emerge sullo schermo: compare sullo screen alla massima velocità e poi rallenta gradualmente fino a quando non si ferma completamente.
Questo effetto può essere applicato anche a diverse tipologie di cards o oggetti che compaiono dall’esterno dello schermo.

Ease-in-out o curva standard

Questa curva fa in modo che gli oggetti acquistino velocità all’inizio e che poi rallentino lentamente fino ad arrivare a zero. Questo tipo di movimento è il più utilizzato nell’animazione dell’interfaccia. Ogni volta che hai dubbi sul tipo di movimento da utilizzare nell’animazione, usa la curva standard.

Secondo le Linee Guida per la Progettazione dei Materiali, è meglio utilizzare una curva asimmetrica per rendere il movimento più naturale e realistico. La fine della curva deve essere più enfatizzata del suo inizio, in modo che la durata dell’accelerazione sia più breve di quella del rallentamento.
In questo caso, l’utente presterà maggiore attenzione al movimento finale dell’elemento, e quindi al suo nuovo stato.

La funzione di entrata e uscita viene utilizzata quando gli oggetti si spostano da una parte all’altra dello schermo. In tal caso, l’animazione evita l’effetto appariscente e teatrale.
Lo stesso tipo di movimento dovrebbe essere usato quando l’elemento scompare dallo schermo ma l’utente può riportarlo nella posizione precedente in qualsiasi momento. Riguarda, tra gli altri, il menù di navigazione.

Da questi esempi segue una regola fondamentale che molti principianti trascurano: l’animazione iniziale non è uguale all’animazione finale. Come nel caso del menù di navigazione, che appare con la curva di decelerazione e scompare con la curva standard. Inoltre, secondo Google Material Design, il tempo di comparsa dell’oggetto dovrebbe essere più lungo per attirare più attenzione.

Una funzione cubic-bezier () viene utilizzata per descrivere le curve. Si chiama cubic perché si basa su quattro punti. Il primo punto con le coordinate 0; 0 (in basso a sinistra) e l’ultimo con le coordinate 1; 1 (in alto a destra) sono già definiti nel grafico.
Dobbiamo individuare solo due punti sul grafico, che sono dati da quattro argomenti della funzione cubic-bezier (): i primi due sono le coordinate x e y del primo punto, i secondi due sono le coordinate x e y del secondo punto.
Per semplificare il tuo lavoro con le curve ti suggerisco di utilizzare i siti easings.net e cubic-bezier.com. Il primo contiene l’elenco delle curve utilizzate più di frequente, i cui parametri è possibile copiare sul proprio strumento di prototipazione. La seconda fonte ti dà la possibilità di giocare con diversi parametri della curva e vedere immediatamente come si muoveranno gli oggetti.

Coreografia nell’animazione delle interfacce

Proprio come nelle coreografie di danza, il proposito è guidare l’attenzione dell’utente in una direzione fluida durante il passaggio da uno stato a un altro.
Esistono due tipi di coreografia: equal e subordinate interaction.

Equal interaction

Equal interaction significa che l’apparizione di tutti gli oggetti risponde ad una regola particolare.
In tal caso, l’aspetto di tutte le cards viene percepito come un flusso che guida l’attenzione dell’utente in una certa direzione, ovvero dall’alto verso il basso. Se non seguiamo l’ordine, l’attenzione dell’utente non sarà localizzata. Anche l’aspetto di tutti gli elementi in una volta sarebbe un aspetto negativo.
Per quanto riguarda la vista tabulare, è un po’ più complicato. Qui il focus dell’utente dovrebbe essere diretto in diagonale, quindi mostrare gli elementi uno per uno è una cattiva idea. Rivelare ogni elemento uno per uno renderà l’animazione eccessivamente lunga e l’attenzione dell’utente si comporterà secondo una logica zigzag, il che è sbagliato.

Subordinate interaction

Subordinate interaction significa che abbiamo un oggetto centrale che attira tutta l’attenzione dell’utente e tutti gli altri elementi sono subordinati ad esso. Questo tipo di animazione dà il senso dell’ordine e attira più attenzione sul contenuto principale.
In altri casi, sarebbe molto difficile per l’utente capire quale oggetto seguire e la sua attenzione sarebbe dispersa. Pertanto, se hai diversi elementi che desideri animare, devi definire chiaramente la sequenza del loro movimento e animare il minor numero di oggetti possibile contemporaneamente.

Secondo il Material Design, quando gli oggetti in movimento cambiano le loro dimensioni in modo sproporzionato, dovrebbero spostarsi lungo un arco anziché in linea retta perché questo aiuta a rendere il movimento più naturale.
Con “sproporzionato” intendo che il cambiamento di altezza e larghezza dell’oggetto mediante aumento / diminuzione viene effettuato in modo asimmetrico, cioè con velocità diversa (ad esempio, una card quadrata si trasforma in un rettangolo).

Il movimento lungo la linea viene utilizzato quando l’oggetto cambia proporzionalmente le sue dimensioni. Poiché l’implementazione di tale movimento è molto più semplice, la regola del movimento sproporzionato dell’arco viene spesso trascurata.
Guardando i casi pratici, possiamo constatare il predominio del movimento lineare.

Il movimento sulla curva può essere ottenuto in due modi: il primo chiamato Vertical Out – il movimento dell’oggetto inizia in orizzontale e termina in verticale; il secondo – Horizontal Out – il movimento inizia in verticale e termina in orizzontale.

Il percorso del movimento dell’oggetto lungo la curva deve coincidere con l’asse principale dell’interfaccia di scorrimento. Ad esempio, nell’immagine successiva possiamo scorrere l’interfaccia dall’alto verso il basso e di conseguenza la card si dispone secondo il movimento Vertical Out – prima a destra e poi in basso.
Il movimento inverso viene eseguito in modo opposto, ovvero la card si alza per prima in verticale e finisce per muoversi in orizzontale.
Se i percorsi degli oggetti in movimento si intersecano, questi non possono muoversi l’uno attraverso l’altro. Gli oggetti dovrebbero lasciare abbastanza spazio per il movimento di un altro oggetto, rallentando o accelerando la propria velocità.
Un’altra opzione: spingono semplicemente via gli altri oggetti. Perché? Perché supponiamo che tutti gli oggetti nell’interfaccia si trovino su uno stesso piano.

In un altro caso, l’oggetto in movimento può sollevarsi sopra altri oggetti. Ma anche in questo caso nessuna dissolvenza o movimento attraverso altri oggetti. Perché?
Perché vogliamo che gli elementi dell’interfaccia si comportino in conformità con le leggi della fisica e che nessun oggetto solido nel mondo reale sia in grado di farlo.

Leggi anche La user experience nel food delivery. La parola a Maia Lottersberger, Head of Communication, Foodora

Quindi, se riassumiamo tutte le regole e i principi sopra menzionati, l’animazione nell’interfaccia dovrebbe riflettere i movimenti che conosciamo dal mondo fisico – attrito, accelerazione, ecc. È imitando il comportamento degli oggetti del mondo reale che possiamo creare una sequenza che consenta agli utenti di capire cosa aspettarsi dall’interfaccia.
Se l’animazione è costruita correttamente, è discreta e non distrae gli utenti dai loro obiettivi. Se invece dovesse risultare un elemento di disturbo, è necessario smorzarla o addirittura rimuoverla del tutto. Ciò significa che l’animazione non dovrebbe mai rallentare l’utente o impedire l’esecuzione dell’attività.
Ma non dimentichiamoci che l’animazione è più un’arte che una scienza, e che quindi è sempre meglio sperimentare e testare le tue decisioni sugli utenti.

Credits: Taras Skytskyi

Link: medium.com