La UI Animation per chi non sa come usare la UI Animation

Tutte le basi per aggiungere alla tua cassetta degli attrezzi un linguaggio visuale nuovo.

Autore

Claudio Postinghel

17 set 2020

Ogni mia giornata lavorativa inizia con la consapevolezza che far comunicare i miei utenti con i sistemi che progetto sarà una sfida.

Combino tra loro forme, testo, colori per realizzare interfacce che parlino chiaramente, ma spesso c’è qualcosa che manca, come se mi mancassero alcune parole.

Nella mia cassetta degli attrezzi mancavano le animazioni e ci sono moltissime cose che si possono dire soltanto con questo strumento. Ho scritto questo articolo per orientarmi meglio tra le varie tecniche.

🎨 Se vuoi vedere come abbiamo costruito l’animazione di copertina di questo articolo, invece, segui questo link.

Cosa significa UI Animation?

Per capire cosa significa UI Animation dobbiamo prima capire i due termini di cui è composta:

  • “UI”
  • “Animation”

UI

Con UI si intende l’interfaccia utente, un’interfaccia uomo-macchina, ovvero ciò che si frappone tra una macchina e un utente, consentendone l’interazione reciproca.

0 - Cerchi

Animation

L’animazione è invece una tecnica che produce l’illusione di movimento mostrando una serie di immagini in successione1. Qui il termine chiave è “movimento”.

Quindi, possiamo definire la UI Animation come la branca della UI che usa il movimento per comunicare.

Dentro o fuori dalla scena

Un’animazione può avvenire in due modi: intra-scena e inter-scena.

Intra-scena

L’interfaccia comunica attraverso il movimento rimanendo all’interno della stessa scena. Per esempio l’entrata di un toast, come in un progetto che abbiamo realizzato di recente.

Video 1 - Il toast di creazione fornitore

Attraverso il movimento l’evento impiega del tempo, invece che essere istantaneo. Questo ne aumenta la percezione per l’utente e quindi rende l’evento più evidente.

Allo stesso modo, scegliendo come un oggetto accelera e decelera possiamo comunicare un’informazione sulla sua origine. Questo fenomeno si chiama easing ed è spiegato tra qualche paragrafo.

Il toast dell’esempio qui sopra arriva da fuori, quindi:

  1. Entrerà nella scena a piena velocità
  2. Rallenterà alla fine del suo moto

Video 2 - Proprio come una birra al bar! 🍻 Dalla serie televisiva “Cin cin (cheers)”

Inter-scena

L’interfaccia comunica continuità tra scene diverse, rendendone più morbida la transizione.

Video 3.A - Navigando tra una vista e l’altra si compiono dei salti discreti

L’utente quando usa un software naviga tra una vista e l’altra, compiendo salti all’interno dell’architettura informativa e delle funzionalità. Senza animazione, il passaggio da uno stato all’altro avviene con dei salti discreti che spezzano l’esperienza.

Video 3.B - Con l’animazione, la transizione diventa continua

Possiamo ovviare a questo problema attraverso l’animazione, dando all’esperienza un senso di continuità.

Video 4 - Animazione in Beacon Adventure, un’app che abbiamo progettato e realizzato

Per esempio, in Beacon Adventure, un progetto di un’app per l’esplorazione di punti d’interesse turistici a cui abbiamo lavorato in passato, si passa dalla scena “lista delle avventure” alla scena “dettaglio delle avventure”. Un cambio istantaneo della vista sarebbe brusco, impattante. Abbiamo optato quindi per una shared transition, animando gli elementi in comune tra le due scene, in modo da rendere la transizione senza soluzione di continuità.

Perché animare?

“Va bene, ho capito che cos’è la UI Animation, ma perché dovrei usarla?”

La UI Animation è uno dei tanti strumenti che hai a disposizione come designer e come tale segue le regole più generali della buona progettazione.

Perché dovrei usare un certo strumento di design?

❌ Perché mi va
❌ Perché è carino e l’ho visto su Dribbble
❌ Perché… Perché… Perché?
✅ Perché ho identificato chiaramente un problema e adottare questa soluzione mi permette di risolverlo

La UI Animation segue le stesse regole: non è un qualcosa da aggiungere perché è la moda del momento, ma un mezzo da scegliere consapevolmente per raggiungere uno scopo.

Detto questo, per capire perché (e quando) usare l’animazione, e quindi quali scopi ci aiuta a raggiungere, è molto utile la distinzione2 tra:

  • Delightful
  • Functional Animation

Delightful Animation

Le delightful animation, come suggerisce il nome, sono quelle animazioni che deliziano l’utente.

Video 5.A - Un sito di promozione dell’energia pulita realizzato da Tubik

Video 5.B - Una bellissima landing realizzata da Studio VOR

Video 5.C - Un’interazione molto complessa con della fisica simulata green chameleon

Video 5.D - L’effetto parallasse sul nostro footer

Video 5.E - Io che provavo a fare il simpatico nel mio vecchio portfolio (no, non avevo dei baffi così lunghi!)

Sono animazioni importanti e presentano molti vantaggi:

  • Rendono più gradevole la navigazione e l’esperienza utente
  • Rafforzano l’identità del brand
  • Sono efficaci dal punto di vista emozionale

Ma non aggiungono un contributo funzionale.

Functional Animation

Il contributo funzionale lo troviamo invece nelle Functional Animation, che migliorano l’usabilità dei prodotti che realizziamo.

Riescono a farlo su quattro fronti:

  • Aspettativa
  • Continuità
  • Narrazione
  • Relazione

Aspettativa

L’animazione risponde a due domande sugli elementi di un’interfaccia:

  1. Cos’è questo oggetto?
  2. Come si comporta questo oggetto?

Attraverso l’animazione possiamo suggerire la natura di un oggetto, minimizzando il divario tra ciò che l’utente si aspetta e ciò che sperimenta.

Continuità

Come abbiamo visto poco sopra, le animazioni possono avvenire:

  • All’interno della stessa scena (intra-continuità)
  • Tra scene diverse (inter-continuità)

Narrazione

L’animazione spiega la progressione lineare degli eventi nell’esperienza dell’utente, collega tra loro momenti ed eventi discreti. Ad esempio: aiuta l’utente a capire meglio la progressione di un flusso.

Relazione

Spiega le relazioni tra gli elementi di un’interfaccia. Queste possono essere spaziali, temporali e gerarchiche. Definendo il legame tra i vari oggetti, le animazioni guidano la comprensione e il processo decisionale dell’utente.

Come animare?

“Ok, ma quindi, come faccio ad animare?” 🤔

Per capire come animare è molto utile ripercorrere i 12 principi della UI Animation, spiegato nell’articolo Creating Usability with Motion: The UX in Motion Manifesto.

Easing

📚 Definizione

Riguarda come gli elementi cambiano la loro velocità e il loro moto. Aiuta a muovere gli oggetti di un’interfaccia in modo simile agli oggetti del mondo reale3.

Il moto lineare è quel movimento costante nel tempo, senza variazioni di velocità.

Video 6.A - Moto lineare

Invece, un moto più naturale per un oggetto ha delle accelerazioni e decelerazioni.

Video 6.B - Easing

Lo descrive bene il sito easings.net, dicendo che “gli oggetti nella vita reale non partono e si fermano all’istante, e quasi mai si muovono a velocità costante. Quando apriamo un cassetto, lo spostiamo prima velocemente e lo rallentiamo man mano che esce. Lascia cadere qualcosa sul pavimento e prima accelererà verso il basso, quindi rimbalzerà di nuovo dopo aver colpito il pavimento.”4

☝ Esempio

✅ La porta del nostro ufficio

Video 6.C - Un esempio di easing: la porta del nostro ufficio!

Il movimento della nostra porta è morbido e molleggiato! Se una porta scorrevole partisse a tutta velocità appena la tocchiamo e si fermasse altrettanto velocemente alla fine, il tutto risulterebbe molto innaturale. E noi vogliamo che le nostre interfacce risultino familiari e naturali.

Offset & Delay

📚 Definizione

Quando si introducono nuovi elementi e scene, l’animazione definisce le relazioni e le gerarchie tra gli oggetti, raccontandoci qualcosa di loro.

☝ Esempio

✅ Gli elementi di una lista

Un ottimo esempio lo troviamo in The ultimate guide to proper use of animation in UX.

Infatti, l’apparizione degli elementi di una lista in sequenza, con un leggero ritardo tra un elemento e l’altro, ci suggerisce che si tratta proprio di una lista.

Video 7.A - Sembra una lista

Facendo invece apparire gli elementi tutti insieme riconosciamo comunque la lista, ma in modo meno chiaro.

Video 7.B - Sembra una lista ma un po’ di meno

❌ Un esempio negativo

Guardando questa animazione di entrata notiamo subito e intuitivamente che c’è qualcosa di sbagliato.

Video 8.A - Animazione originale

Infatti, vediamo nove oggetti composti da un’icona e un nome, quelli che cadono nei rettangoli rossi.

Video 8.B - Come sono raggruppati

Ma l’animazione ci racconta tutt’altro: vengono raggruppati rispettivamente icone (rettangoli blu) e nomi (rettangoli rossi) come oggetti separati.

Video 8.C - Come vengono raggruppati dall’animazione

Parenting

📚 Definizione

Il parenting crea relazioni gerarchiche, spaziali e temporali quando interagisce con più oggetti.

☝ Esempio

✅ Il color picker di Instagram e Figma

Video 9 - Il picker del colore di Instagram

Quando creiamo una storia di Instagram possiamo scegliere un colore direttamente dalla foto, per esempio per abbinare il nuovo testo con il colore del logo.

Quando muoviamo il picker del colore (freccia blu), l’oggetto che ci indica quale colore stiamo selezionando (freccia verde) si muove all’unisono con il picker, comunicando una relazione tra i due.

Video 10 - Il picker del colore di Figma

Spesso il comportamento è diverso. Per esempio, in Figma il feedback sul colore che stiamo selezionando (indicato dalla freccia rossa) non si trova in corrispondenza del picker (che si muove nel riquadro rosso).

Nell’esempio di Figma si nota chiaramente che i due oggetti sono degli elementi separati. Quando però i due oggetti si muovono insieme, l’effetto è così forte che vengono percepiti come un oggetto unico, come accade nell’esempio di Instagram.

Transformation & Masking

📚 Definizione

La trasformazione dà continuità al flusso narrativo quando cambia la funzione dell’oggetto.

Il masking, invece, crea continuità in un oggetto quando l’utilità è determinata da quale parte è rivelata o nascosta.

☝ Esempio

✅ Il mio vecchio portfolio

Un buon esempio dell’utilizzo di questi due principi lo troviamo nel mio vecchio portfolio.

Qui possiamo vedere la lista dei case study, che contiene i vari progetti come CityBikes (evidenziato in rosso) riempito dalla copertina dell’elemento (evidenziato in giallo).

Video 11.A - La lista dei case study del mio vecchio portfolio

Mentre nel case study aperto viene mostrata tutta la pagina (evidenziata in rosso) e l’intestazione della pagina (evidenziata in giallo), seguita dal resto del contenuto.

Video 11.B - Animazione di apertura di un case study

Solitamente si usa un semplice reindirizzamento: cliccando sul case study viene caricata la sua pagina. Volevo però che la transizione tra la pagina principale con l’elenco dei case study e il singolo case study fosse il più “smooth” possibile. Quindi ho usato una transizione invece che un reindirizzamento a un’altra pagina.

L’elemento della lista si trasforma (transformation) in tutta la pagina, creando uno stato continuo di flusso narrativo. Contemporaneamente, la copertina diventa l’intestazione della pagina. Cambia così quale parte è rivelata o nascosta all’interno dell’elemento, creando così un senso di continuità.

Video 11.C - I due stati dell’animazione messi a confronto.

Value Change

📚 Definizione

Mostrando il variare di un dato si trasmettono dinamicità e cambiamento.

☝ Esempio

❌ La data di fondazione

Video 12.A - Anno di fondazione di Fatture in Cloud

Per esempio, nel sito aziendale ha poco senso animare l’anno di fondazione, in quanto è un valore che non cambia nel tempo.

✅ Dati che cambiano in meglio

Video 12.B - Statistiche di Fatture in Cloud

Ha senso invece animare dei valori come la valutazione sugli store o il numero di documenti creati al mese, suggerendo implicitamente che saliranno ancora.

Overlay

📚 Definizione

L’overlay consiste nel far entrare in scena un elemento sopra un altro. In questo modo si comunica una relazione spaziale tra l’elemento animato e il resto dell’interfaccia

👆 Esempio pratico

✅ Il dettaglio di un elemento di una lista su Domustudio

Video 13 - Il dettaglio di uno dei condomini nella rubrica dell’amministratore di condominio

In Domustudio il dettaglio di un elemento di una lista entra in scena scorrendo sull’interfaccia, posizionandosi sopra la vista principale. In questo modo comunica una relazione spaziale con il resto dell’interfaccia. Il modale laterale sta sopra al resto ed è più vicino all’utente perché è più rilevante.

Cloning

📚 Definizione

Quando degli oggetti si originano nascendo da altri oggetti, si crea continuità, relazione e narrativa.

☝ Esempi

❌ L’invio di un messaggio su Whatsapp:

Video 14.A - Conversazione su Whatsapp

In WhatsApp quando inviamo un messaggio, il messaggio inviato appare semplicemente, spezzando la narrazione. Nel mondo reale gli oggetti non si comportano in questo modo.

✅ L’invio di un messaggio su iMessage:

Video 14.B - Conversazione su iMessage

In iMessage quando inviamo un messaggio, il messaggio inviato si origina dal campo di testo. Alla pressione del tasto “invia” le parole scorrono sparendo verso l’alto, sembra quasi che scorrano dal messaggio scritto nel messaggio inviato.

✅ Un’altra chat:

Video 14.C - L’animazione di una chat di Jakub Antalik

Questo effetto è ancora più evidente nell’animazione usata in questo esempio, nel quale il messaggio letteralmente si strappa via da dove si origina. È un po’ estremo, ma spiega bene il principio.

Parallax

La parallasse è quell’effetto per il quale l’osservatore vede soggetto e sfondo muoversi a velocità diverse: se ci muoviamo nel mondo reale, gli oggetti si muovono a diverse velocità in base a quanto è distante il piano a cui appartengono.

Video 15.A - I piani si muovono a velocità diverse in base alla distanza dall’osservatore

Frontalmente, vedremo una cosa di questo tipo:

Video 15.B - Come viene percepito frontalmente

Usare la parallasse nel nostro design consiste nel muovere degli oggetti sull’interfaccia allo stesso modo, così da trasmettere questa distanza.

Questo ci comunica l’importanza degli oggetti, per esempio distinguendo chiaramente ciò che è solo sfondo da ciò che è contenuto.

16 - Dog

Immagine 16 - Effetto bokeh su un doggo Foto originale di Matthew Henry

Un ottimo esempio di corrispettivo fotografico della parallasse è l’effetto Bokeh. Questa tecnica permette di dare maggior importanza al soggetto in primo piano (posto su un piano vicino a noi), sfocando lo sfondo in secondo piano (posto su un piano più lontano da noi).

Obscuration

📚 Definizione

Consente di orientarsi spazialmente in relazione a oggetti o scene non presenti nella gerarchia visiva primaria.

👆 Esempi pratici

✅ Il modale di personalizzazione delle colonne di Domustudio

Video 17 - Il modale di personalizzazione delle colonne

Quando in Domustudio apriamo il modale per personalizzare quali colonne visualizzare, questo appare davanti l’interfaccia principale, che viene leggermente oscurata.

Questo permette di separare questa vista da quella principale, pur mantenendo un contesto e una continuità spaziale.

✅ Lo switcher delle applicazioni di iOS

Potremmo prendere molti altri esempi di iPhone, Apple cura particolarmente questo genere di dettagli. Uno di questi è lo switcher delle applicazioni.

Video 18.A - Lo switcher delle applicazioni su iPhone

Quando viene aperto, il resto dell’interfaccia si comporta come fa per l’apertura delle cartelle, rimanendo lì dov’è.

Video 18.B - Lo switcher delle applicazioni su OnePlus

Invece sul mio OnePlus 6, una volta richiamato, il resto del launcher si oscura completamente, spezzando la continuità spaziale.

Dimensionality

📚 Definizione

La dimensionalità permette di superare il mondo piatto tipico delle interfacce utente e fornisce una narrazione spaziale quando i nuovi oggetti entrano o escono dalla scena.

👆 Esempi pratici

✅ Progressive disclosure di Stripe

Video 19 - L’animazione per la progressive disclosure in Stripe dal video
Designing Meaningful Animation di Val Head

Nel checkout di Stripe quando viene mostrata il form d’inserimento del numero di cellulare, questa si inclina o si appiattisce, come la visiera parasole dell’auto.

Quello che ci comunica questo tipo di animazione è simile proprio al parasole: l’oggetto esiste anche se non lo vedi, ma appare quando serve.

Si tratta di un classico caso di progressive disclosure.

✅ Lo switcher delle applicazioni di iOS (sì, ancora lui!)

Video 20 - La dimensionalità dello switcher delle applicazioni di iOS

Lo switcher delle applicazioni di iOS è molto curato. Le applicazioni si muovono in tre dimensioni, in modo morbido e realistico. Sembrano quasi un mazzo di carte dove quelle in cima alla pila si muovono più velocemente di quelle in fondo.

✅ Le stories di Instagram

Video 21 - La dimensionalità delle storie di Instagram

Anche Instagram usa questo effetto per passare tra le stories di un follower e l’altro. Questo effetto aiuta l’utente a capire com’è strutturata e disposta l’informazione. Ogni gruppo di stories, nonostante se ne possa vedere uno per volta, è rappresentato in un preciso punto dello spazio, che in questo caso è letteralmente… dietro l’angolo!

Dolly & Zoom

📚 Definizione

Il dolly e lo zoom sono due effetti ripresi dal mondo del cinema.

Lo zoom ingrandisce una porzione della vista, come accade quando allarghiamo una foto. Nel dolly invece avviene un vero e proprio spostamento del punto di vista della posizione dell’osservatore o degli oggetti che lo circondano.

👆 Esempi pratici

✅ Lo sblocco di iOS

Video 22 - L’animazione di sblocco di iOS

Anche in questo caso, Apple mostra un ottimo esempio di questo effetto. Quando sblocchiamo l’iPhone, le applicazioni cadono sulla home screen passando da dietro il punto di vista dell’utente.

Notes

Autore

Claudio Postinghel