Animazioni Disney e Principi di UX Choreography

Navigando per il nostro amato World Wide Web, ci siamo imbattuti in vari articoli sulla cara e sempre presente UX. Noi siamo ormai UX-centered, nel lavoro e nei nostri flussi di notizie, quindi capita che, tra un articolo e l’altro, qualcosa cattura completamente la nostra attenzione.
 

C’è un termine che non riusciamo a toglierci dalla mente, UX Choreography. Che strano accostamento di termini direte voi, che interessante e geniale prospettiva aggiungiamo noi. Andiamo per ordine e vedrete che tutto ha un senso logico, o almeno creativamente valido.
 

Spieghiamo prima il concetto di Coreografia tratto dal dizionario online di Repubblica.it.
Schermata 2015-05-14 alle 10.37.24
 

Coreografia fa tanto animazione, e se dobbiamo parlare di animazione, dobbiamo partire dalla Disney.
 
 

I 12 principi di animazione della Disney

Disney ha sviluppato 12 principi di animazione, che rappresentano al meglio la volontà di unire un movimento realistico ad un legame emozionale. L’azienda ha sempre concentrato i propri studi sulla maniera in cui le cose si muovevano e si comportavano nella vita vera. Sa perfettamente che quando un pubblico guarda qualcosa sullo schermo si aspetta che le cose si muovano in modo naturale.
 

Disney ha sempre saputo che per catturare l’audience avrebbe avuto bisogno di uno strato di legame emozionale. Ecco perché sono divenuti i primi animatori a creare lungometraggi che sapessero catturare il cuore degli spettatori e che facessero sembrare i personaggi credibili e narrabili. Movimenti realistici, engagement emotivo, salvataggi in situazione estreme, ecco la formula magica.
 

Si tratta di una serie di principi di animazione introdotti dagli animatori Ollie Johnston e Frank Thomas nel 1981 nel libro “The Illusion of Life: Disney Animation”, considerata da molti come la “Bibbia dell’animazione”.
 


 

1. Squash e stretch

Forse il principio più importante, ha come scopo dare un senso di flessibilità e di corporeità fisica a oggetti disegnati. Si può applicare a oggetti semplici [una palla che rimbalza] oppure a costruzioni più complesse [come la muscolatura del volto umano]. I termini, letteralmente schiacciamento e stiramento, stanno a indicare una variazione della forma degli oggetti disegnati, che se portati a livelli estremi creano dei risultati quasi comici.
 

2. Anticipation

Anticipation è utilizzato per preparare il pubblico ad una azione e far sembrare questa azione il più realistico possibile.
 

3. Staging

Lo scopo principale è dirigere l’attenzione dell’audience e evidenziare quali sono gli elementi più importanti in una scena.
 

4. Straight Ahead Action and Pose to Pose

Si tratta di due diversi approcci all’attuale processo di disegno. Il primo, “straight ahead action”, lo si ha quando si disegna la scena fotogramma per fotogramma dall’inizio alla fine. Il secondo, "pose to pose" indica il processo per cui si inizia dai fotogrammi chiave e poi si vanno, man mano, riempiendo quelli secondari. Il primo tipo di disegno crea una illusione di movimento più dinamica e più fluida, sicuramente più indicata per sequenze di azioni realistiche, anche se rende difficile mantenere le proporzioni e creare pose convincenti durante la narrazione. La tecnica “pose to pose” funziona meglio con le scene drammatiche o emozionali, dove è molto importante la composizione della scena e la relazione tra gli elementi presenti.
 

5. Follow Through and Overlapping Action

Questi principi riguardano due tecniche che aiutano a rendere il movimento più realistico e aiutano l’idea che i personaggi seguano le leggi della fisica, incluso il principio di inerzia.
Per follow through si intende quando le parti del corpo continuano a muoversi dopo che il personaggio si è fermato e compiono i classici movimenti “avanti e indietro”. Per overlapping action si indica la tendenza delle parti del corpo di muoversi con tempistiche differenti.
 

6. Slow In and slow Out

Il movimento del corpo umano e la maggior parte degli oggetti hanno bisogno di tempo per accelerare e per rallentare. L’animazione sembra più realistica se ci sono più disegni all’inizio e alla fine dell’azione, che enfatizzino le pose estreme e un po’ di meno nel mezzo.
 

7. Arc

Una azione quanto più naturale tende a seguire una traiettoria ad arco e l’animazione dovrebbe prenderne spunto per ottenere più realismo. Fanno eccezione i movimenti meccanici che si spostano delineando linee rette.
 

8. Secondary Action

Aggiungere azioni secondarie a quella principale dà alla scena più vita e persino rafforzarla. La cosa importante è che ci sia enfasi sulla scena primaria e non si perda l’attenzione.
 

9. Timing

Per timing si intende il numero di disegni o di fotogrammi di ogni singola azione, che si traduce nella velocità dell’azione in un film.
 

10. Exaggeration

L’esagerazione è un effetto utilizzato soprattutto dall’animazione, perché incarna perfettamente il senso di imitazione della realtà riportata nei cartoni. Il livello di questo elemento dipende dal significato che si vuole trasmettere, più lo si accentua e più ci avvicineremo al surreale.
 

11. Solid drawing

Questo principio fa si che i disegni solidi prendano forma nelle tre dimensioni dello spazio, acquisendo volume e spessore. L’animatore deve essere un progettista eccellente e capirne di tridimensionalità, anatomia, contrasti di colore e molto altro.
 

12. Appeal

Per un personaggio dei cartoni l’appeal è il carisma degli attori in carne e ossa. Non significa essere simpatici, ma essere considerato reale e interessante.
 
 

UX Choreography

La UX Choreography è la perfetta combinazione tra il come, il quando e perché avvengono certe interazioni. Riguarda le giuste applicazioni dei movimenti e di cattura dell’audience combinati insieme ai momenti più integrali della User Experience, dove puoi iniziare a creare un legame con il tuo utente in un dialogo a due. Non si tratta dell’utilizzo funzionale di best practice o elementi lineari, si tratta di rendere le interazioni dei nostri utenti divertenti, di raccontare una storia attraverso le varie sequenze, di creare esperienze con il movimento.
 

Come farlo al meglio? Rebecca Usai, UX designer, al SXSW [South by Southwest, il festival musicale e cinematografico di Austin] ha elencato 5 passaggi fondamentali.
 

√ Lascia Feedback

Il feedback aiuta a comprendere il risultato dell’interazione dell’utente, che sia giusta o sbagliata e soprattutto ne spiega il perché. Il feedback è uno strumento utilizzato per mostrare se qualcosa è corretto oppure no, se qualcosa è in fase di loading, se si stanno facendo progressi o semplicemente se hai delle opzioni tra cui scegliere. I feedback sono importanti perché costruiscono fiducia con i tuoi utenti e gli utenti amano vedere che stanno facendo qualcosa nel modo giusto.
 

√ Dispensa Feedforward

A differenza dei precedenti, il feedforward sono notoriamente meno famosi. Si tratta di una forma di anticipazione, di consigli, una sorta di affordance visuale che aiuta a far capire agli utenti quali sono le possibili interazioni e come far funzionare qualcosa al meglio. I feedforward accompagnano l’utente verso la corretta sequenza di azioni per evitare confusione e raggiungere gli obiettivi in maniera più chiara. Un esempio è la classica frase “fai attenzione, guarda qui!”.
 

√ Conosci il tuo spazio

Avere una consapevolezza degli spazi aiuta gli utenti ad orientarsi nel loro ambiente e chiarisce le relazioni che intercorrono tra i vari elementi. In questa prospetta non dobbiamo dimenticare che, soprattutto quando realizziamo app, il contesto di fruizione è molto piccolo, quindi fate attenzione a cosa inserite nello spazio e quanti elementi interagiscono tra di loro.
 

√ Focalizza i tuoi utenti

Il focus dell’utente guida la sua attenzione e rende più chiari i vari cambiamenti nella narrazione.
Enfatizza gli elementi centrali in base a cosa viene comunicato. Non è facile far focalizzare gli utenti in momenti in cui le scene sono piene di oggetti, per questo anche il background deve aiutare l’utente a concentrare la propria attenzione su elementi specifici.
 

√ Lascia parlare il tuo Brand

Il Tone of Voice del brand per cui stai lavorando deve essere sempre rispettato. Non dobbiamo prestare attenzione solo al testo, anche gli elementi e i movimenti che disegniamo devono trasmettere la stessa visione.
 
 

Material Design


 

L’anno scorso Google ha lanciato Material Design, un sistema visivo ben strutturato e spiegato nei minimi dettagli, con l’intento di unificare l’esperienza d’uso dei suoi prodotti nei vari dispositivi elettronici, dal computer, al tablet, allo smartphone.
 

Google ha saputo sintetizzare al meglio i 12 principi elaborati dalla Disney e ne ha fatto un plus per sviluppatori e designer. Material design è una guida passo a passo su come far convivere in un’interfaccia i pilastri del buon design e le continue innovazioni tecnologiche, cercando di portare in primo piano il piacere d’uso e il lato emotivo di una interfaccia.
 

“Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies. We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic. This is material design”. Google
 

Per chi si occupa di UX e UI, così come chi si occupa di progettazioni grafiche, questi principi non sono nuovi. Sono best practice da dover seguire per far sì che il progetto riesca e acquisti significato per l’attore principale di tutto, l’utente.
 

Che si tratti di film, app, website, libri, indipendentemente dal contesto e dal mezzo, i nostri obiettivi sono sempre gli stessi. Lavoriamo per creare significati, per creare legami tra i nostri utenti e i personaggi [o la storia] che raccontiamo. Il successo o meno di questo processo è nelle nostre mani.
 

“You are responsible for directing each element’s entrance, performance, and exit". Rebecca Ussai.