I prodotti di consumo digitale, grazie alla loro enorme diffusione, stanno diventando oggetti di studio per gli UX/UI designer, soprattutto nel campo del motion design.

Molto spesso quei prodotti che percepiamo come di ottima usabilità, sono percepiti in quanto tali proprio grazie alle animazioni, che stanno tra i flussi di navigazione dell’utente senza che questo se ne accorga. Le animazioni infatti giocano un ruolo importante dal punto di vista esperienziale, guidano l’utente nella serie di sue possibili azioni, lo aiutano a percepire avvisi e variazioni. In altre parole, le animazioni si possono considerare il libretto (inconscio) di istruzioni di un prodotto di design.

Esempi di Motion Design nella quotidianità

Se parliamo di animazioni non parliamo propriamente di novità. Da sempre designer e professionisti nel mondo della grafica cercano di sviluppare ed implementare animazioni per migliorare la funzionalità dei propri prodotti. Solo recentemente però questo aspetto ha assunto un carattere decisivo nell’esperienza d’uso dell’utente.

Pensiamo ad esempio a Word, il programma del pacchetto Office. Uno dei punti di riferimento fondamentali è il cursore lampeggiante, esso indica dove ci troviamo all’interno della pagina, indica che il programma è operativo e funzionante, mentre a volte riesce ad irritarci, quando ad esempio dobbiamo scrivere l’articolo per il nostro blog ma non sappiamo da dove cominciare, e l’intermittenza del cursore ci sembra mettere pressione.

Un altro esempio analogo, con origini passate ma ancora utilizzato, può essere il rimbalzo delle app nel dock dei sistemi operativi “Mac-OS”. L’icona che saltella nel nostro schermo ci restituisce un feedback (non sempre positivo) sull’azione che il nostro computer sta svolgendo.

Negli ultimi anni si è fatto molto per definire delle regole sul corretto utilizzo delle animazioni e sulle specifiche funzionali di ogni tipologia di motion design. Google ad esempio ne parla in maniera specifica in relazione al material design.

Le origini del Motion Design risalgono alla Disney

Prima che le animazioni entrassero a far parte della vita di tutti i giorni, il principale impiego di questa tecnica era il cinema, in particolare il cinema d’animazione.

Disney, per prima negli anni 80, aveva creato 12 principi fondamentali che facevano da base a tutti gli animatori dell’epoca:

1. Squash & Stretch: (compressione e dilatazione) ha come scopo dare un senso di flessibilità e di corporeità fisica a oggetti disegnati.
2. Anticipation: serve per preparare il pubblico ad una azione e far sembrare questa azione il più realistico possibile.
3. Staging: (messa in scena) evidenziare e attirare l’attenzione su un oggetto specifico della scena.
4. Straight Ahead Action and Pose to Pose: “Straight Ahead Action” indentifica le scene disegnate fotogramma per fotogramma con un risultato molto dinamico e realistico, mentre “Pose to Pose” si basa sui fotogrammi chiave rendendo molto realistica la scena.
5. Follow Through and Overlapping Action: rendono realistico il personaggio e danno la parvenza che esso segua le leggi della fisica.
6. Slow In and slow Out: disegni intermedi che stanno tra l’inizio e la fine dell’azione, serve ad enfatizzare il movimento.
7. Arc: le animazioni naturali seguono solitamente traiettorie ad arco che l’animazione dovrebbe imitare, ad eccezione di quelle meccaniche che invece seguono linee rette.
8. Secondary Action: aggiungere un’animazione secondaria alla scena dà credibilità, purché questa non distolga l’attenzione dalla primaria.
9. Timing: si intende il numero di disegni o di fotogrammi di ogni singola azione, che si traduce nella velocità d’azione in un film.
10. Exaggeration: rispecchia l’imitazione della realtà, è usato soprattutto nell’animazione dei cartoni.
11. Solid drawing: questo principio fa sì che i disegni solidi prendano forma nelle tre dimensioni dello spazio, acquisendo volume e spessore.
12. Appeal: non significa essere simpatico, ma essere considerato reale e interessante.

Queste azioni sono riassunte molto bene in questo video, dove sono riprese in chiave minimal.

L’illusione della vita di cento lodigiani su Vimeo.

L’importanza dell’animazione nei confronti della UX/UI

L’importanza del motion design si identifica in diversi aspetti dell’esperienza d’uso di un prodotto digitale:

• Genera fiducia

Se correttamente sviluppate, le animazioni possono suscitare fiducia e mettere a proprio agio gli utenti.

• Collega in maniera naturale le azioni

L’animazione rende fluido ed automatico il passaggio da un’azione a quella successiva. Stabilisce un percorso di fruizione che l’utente sarà naturalmente portato a seguire. Questo avviene sia all’interno di una singola sezione della piattaforma, sia nell’insieme del consumo del nostro prodotto.

• Crea un filone di narrazione

Le azioni tra loro collegate possono assumere un carattere narrativo durante l’uso del prodotto.  L’esperienza in questo caso sarà estremamente coinvolgente e suggestiva, oltre che funzionale e intuitiva.

• Crea relazione tra gli elementi

In termini di oggetti che compongono l’interfaccia, le animazioni assumono una funzione di relazione nel momento in cui a tale oggetto ci aspettiamo una determinata azione. Questo aiuta la riconoscibilità degli elementi e permette di agevolare l’utente nella parte decisionale.

Animazione Funzionale e Animazione Emotiva

Come abbiamo già detto più volte, se si parla di grafica tutto deve avere un senso. La grafica fine a sé stessa non porta mai a risultati concreti, se non visibilità al designer che l’ha realizzata. Parlando però in termini aziendali, gli obiettivi devono essere comuni alla mission e alla strategia.

Compreso ormai come le animazioni siano uno strumento utilissimo a disposizione dei designer, dobbiamo scontrarci con la dura realtà dei fatti. Molto speso infatti le animazioni restano espresse solo a livello concettuale perché di difficile realizzazione da parte dei developer. L’implementazione di questo nuovo modo di strutturare un’interfaccia richiede molto più tempo di quanto non fosse richiesto prima.

È molto importante quindi riflettere e capire se si ha realmente la necessità di sviluppare motion design all’interno della propria piattaforma. Nel caso lo fosse bisogna assicurarsi che le animazioni abbiano un significato ben preciso e che riescano a comunicare in maniera efficace l’azione o il messaggio in questione.

Le animazioni si possono dividere in:

Animazioni Funzionali

Alcuni esempi sono il “pull down” per aggiornare, i “loader” che identificano il caricamento dei contenuti, l’animazione di un “action button” o ancora uno “swipe” tra un contenuto e l’altro.

Fonte: Dribbble

Fonte: Dribbble

Animazioni Emozionali

Altre animazioni invece hanno il semplice scopo di rispecchiare e rafforzare l’identità di un brand. Questo per rendere più gradevole l’esperienza dell’utente e rendere riconoscibile il prodotto.

Fonte: Dribbble

Fonte: Abduzeedo

Fin dalla fase di sketching i designer, in funzione della fruizione dei contenuti, dovrebbero includere la progettazione delle animazioni. È importante anche distinguere queste due tipologie di animazioni per collocarle nei giusti spazi.

Prima il dovere e poi il piacere, funzionalità prima di emozionalità

Le nostre strategie devono quindi essere composte da due principali componenti, le “promesse” e le “reason why”, l’una deve essere la conseguenza dell’altra. Allo stesso modo, nel campo della user experience, dobbiamo porre in cima alle nostre priorità la funzionalità, per tradurla poi in animazione o qualsiasi altro espediente utile a renderla interessante. È importante seguire i trend e restare aggiornati, soprattutto nel mondo della comunicazione visiva, e le animazioni in questo caso possono essere un’onda da cavalcare con le nostre piattaforme.