Cominciate da scopo e sensazione#section1

Scopo#section2

Come ogni altro elemento in un design system, le animazioni devono avere uno scopo. Per integrare l’animazione, cominciate dal passare in rassegna l’interfaccia per osservare come e perché usate le animazioni in quel particolare prodotto e brand.

Per esempio, in FutureLearn abbiamo notato che usiamo le animazioni soprattutto in tre modi: per indicare un cambiamento di stato, per aggiungere enfasi o per mostrare informazioni extra.

Un cambiamento di stato mostra che un oggetto ha cambiato stato a causa di un’interazione da parte dell’utente. Per esempio, uno stato può cambiare con “hover” o con un click. In questo caso, l’animazione è usata per ammorbidire la transizione tra gli stati. Le animazioni di enfasi sono usate per attirare l’attenzione su specifiche informazioni o su un’azione, per esempio, un’esortazione per incoraggiare gli utenti a proseguire verso il passo successivo nel corso dell’interazione. Le animazioni che svelano sono usate per nascondere e mostrare informazioni extra, quali un menu che viene nascosto di lato, un drop down o un popover.

Non ci sono categorie “standard” per gli scopi delle animazioni. Alcuni prodotti usano molte animazioni standalone, quali i tutorial animati. Alcuni usano le transizioni di schermo, altri no. Per esempio, le animazioni di personalità e branding vengono raggruppate in una categoria separata nel Salesforce Lightning Design System.

I tipi di animazione vengono categorizzati in modo diverso nel Salesforce Lightning Design System rispetto a FutureLearn.

Le categorie sono specifiche della vostra interfaccia e del vostro brand e per il modo in cui usate l’animazione. Non dovrebbero essere normative. Il loro principale valore sta nell’articolare il perché il vostro team dovrebbe usare l’animazione, nel vostro specifico progetto.

Sensazione#section3

Così come ha uno scopo nell’aiutare l’utente a comprendere in che modo funziona il prodotto, l’animazione contribuisce anche ad esprimere la personalità del brand. Quindi, un altro aspetto da considerare è il modo in cui dovrebbe far sentire. In “Designing Interface Animation”, Val Head spiega come si possano usare gli aggettivi che descrivono le qualità del brand per definire l’animazione. Per esempio, un rapido movimento elastico può essere percepito come vivace ed energico, mentre degli “ease-in-out” regolari danno l’impressione di certezza e decisione.

Man mano che esaminate gli esempi di animazione nella vostra interfaccia, elencate che sentimenti dovrebbe generare l’animazione e segnatevi gli esempi particolarmente efficaci. Per esempio, date un’occhiata alle due animazioni qui sotto. Sebbene entrambe siano l’animazione dell’entrata e dell’uscita di un popover, le animazioni danno sensazioni diverse. L’esempio di Marvel dà sensazioni brusche attraverso l’uso di easing saltellante, mentre il piccolo movimento combinato con i cambiamenti di blur e opacità nell’esempio di FutureLearn lo fanno sembrare calmo e discreto.

Probabilmente, non c’è un modo giusto o sbagliato per animare un popover. Per quel che ne so, dipende tutto dal vostro brand e da come scegliete di comunicare attraverso il movimento. Nella vostra interfaccia potreste cominciare a notare animazioni che hanno lo stesso scopo ma sentimenti completamente diversi. Segnatevi quelli che vi sembrano giusti per il vostro brand, così che in seguito possiate allinearvi le altre animazioni.

Audit delle animazioni esistenti#section4

Una volta che vi siete fatti un’idea generale del ruolo che l’animazione gioca nell’interfaccia e che sentimenti dovrebbe scatenare, il passo successivo consiste nello standardizzare le animazioni esistenti. Come un inventario dell’interfaccia, potete fare un inventario incentrato specificatamente sulle animazioni. Cominciate col mettere insieme tutte le animazioni esistenti. Le potete catturare con QuickTime o con un’altra applicazione per la registrazione video. Contemporaneamente, tenetene traccia in un Google Doc, in un file Keynote o in un foglio Excel, quello che fa per voi.

Basandovi sullo scopo che avete definito in precedenza, inserite le categorie e poi aggiungete le animazioni alle categorie man mano che procedete. Durante l’audit potreste dover aggiustare tali categorie o aggiungerne di nuove, ma può essere d’aiuto non dover cominciare da una pagina bianca.

Esempi di categorie iniziali per raccogliere le animazioni in un Google Doc.

Per ciascuna animazione aggiungete:

• Effetto: sulle prime potrebbe essere difficile descrivere l’effetto (Dovrebbe essere “crescere” o “ridimensionare”, “ondeggiare” o “oscillare”?). Non preoccupatevi di scegliere le parole giuste a questo punto, descrivete semplicemente quello che vedete, potete rifinirle in seguito.
• Esempio: può essere uno screenshot di un elemento animato con un link a una clip video o a una gif embedded.
• Timing e easing: scrivete il valore per ogni esempio, come 2 secondi ease.
• Proprietà: scrivete i valori esatti che cambiano, quali colore o dimensione.
• Sensazione: infine, aggiungete il sentimento dell’animazione: è calma o energica, sofisticata ed equilibrata o sorprendente e scherzosa?

Dopo aver fatto l’inventario delle animazioni in FutureLearn, ci siamo ritrovati un documento con circa 22 animazioni, raggruppate in quattro categorie. Ecco la categoria “cambiamento di stato”.

La pagina “State Change” dall’audit delle animazioni di FutureLearn, in un Google Doc.

Definite i pattern di utilizzo#section5

Una volta che avete raccolto tutte le animazioni, potete definire i pattern di utilizzo, basandovi su scopo e sensazione. Per esempio, potreste notare che la animazioni di enfasi tipicamente sono energiche e scherzose e che le transizioni dei cambiamenti di stato sono più sottili e calme.

Se questi sono i toni che volete sottolineare nel sistema, provate ad allineare tutte le animazioni a questi. Per farlo, prendete gli esempi che funzionano bene (ossia quelli che raggiungono lo scopo efficacemente e danno la sensazione giusta) e provate le loro proprietà con altre animazioni provenienti dalla stessa categoria. Vi troverete con una manciata di pattern.

Sviluppate un vocabolario per descrivere gli effetti#section6

Può essere difficile descrivere a parole gli effetti dell’animazione. Come ha notato Rachel Nabors in “Communicating Animations”, a volte le persone cominciano con delle “onomatopee intuitive: swoosh, zoom, plonk, boom”, che possono essere usate come punto di partenza per costruire dei vocabolari di animazione condivisi.

Alcuni effetti sono comuni e gli si possono assegnare dei nomi secondo i principi di animazione classici (schiaccia e allunga, anticipazione dell’azione, azioni a seguire, rallentamenti e accelerazioni¹) o si possono assegnare loro dei nomi prendendoli in prestito da Keynote (fade in, flip, slide down, etc.), mentre altri saranno specifici del vostro prodotto.

Vocabolario di animazioni nel Salesforce Lightning Design System.

Tipologie di movimento in IBM Design Language.

Potrebbero anche esserci degli effetti di animazione peculiari del vostro brand che potrebbero richiedere un nome distintivo. Per esempio, l’animazione “ripple” di TED nel pulsante play prende il nome dall’effetto “ripple” dei loro video introduttivi.

L’effetto “ripple” del video introduttivo su TED (a sinistra) si riflette nell’interazione del pulsante play (a destra).

Specificate i blocchi costitutivi#section7

Per i designer e gli sviluppatori, è utile specificare i blocchi costitutivi esatti che si possono mischiare e abbinare per creare nuove animazioni. Una volta che avete i pattern e gli effetti, potete estrarre i valori precisi – temporizzazione, easing e proprietà – e farli diventare palette. Le palette di animazione sono molto simili ai color swatch o alle scale tipografiche.

Temporizzazione#section8

La temporizzazione è cruciale nell’animazione. Ottenere la giusta temporizzazione non riguarda tanto la consistenza tecnica perfetta, quanto l’essere sicuri che la temporizzazione appaia consistente. Due elementi animati con la stessa velocità possono apparire totalmente diversi se hanno dimensioni diverse o se viaggiano su distanze diverse.

L’idea di “durata dinamica” nel Material Design si concentra su quanto qualcosa debba essere veloce a muoversi rispetto a quanto dovrebbe impiegarci per arrivarci:

Sarah Drasner, l’autrice di SVG Animations, ha suggerito che dovremmo gestire la temporizzazione nell’animazione così come gestiamo gli heading in tipografia: invece di avere un singolo valore, dovremmo cominciare da una “base” e fornire diversi step incrementali. Quindi, invece di h1, h2 e h3, avremo t1, t2, t3.

A seconda della dimensione del progetto, la palette di temporizzazione potrebbe essere semplice, oppure potrebbe essere più elaborata. La maggior parte delle animazioni su FutureLearn usa un tempo base di 0.4. Se questa temporizzazione non vi sembra giusta, è molto probabile che il vostro oggetto sta percorrendo una distanza più breve (nel qual caso usate “Tempo più breve”) o una distanza più lunga (nel qual caso userete “Tempo più lungo”).

• Tempo più breve: 0.3s: Distanza percorsa più breve
• Base: 0.4s: Tempistica di base
• Tempo più lungo: 0.6s: Distanza percorsa più lunga

Idee simili usate nelle linee guida di durata in Carbon Design System sono collegate alla “rilevanza del cambiamento”:

Linee guida di durata in Carbon Design System.

Easing#section9

Diversi valori di easing possono dare una sensazione distintiva all’animazione. È importante specificare quando usare ciascun valore. Le palette di easing in Marvel Styleguide forniscono una comoda guida per quando usare ogni valore, per esempio “Sensazione di molla. Ottimo per attirare l’attenzione.”

Palette di easing nella Marvel Styleguide.

Una palette di easing può anche essere molto generica e scritta come insieme di linee guida, come si fa, per esempio, nel Salesforce Lightning Design System:

Per FutureLearn, l’abbiamo resa ancora più semplice e l’abbiamo limitata a due tipi di easing: Ease out “per le cose che si muovono” (come i cambiamenti di dimensione e gli slide up o down) e Linear “per le cose che non si muovono” (come i cambiamenti di colore od opacità).

Proprietà#section10

Oltre ai valori di tempo ed easing, è utile specificare le proprietà che tipicamente cambiano nelle vostre animazioni, come:

• Opacità
• Colore
• Dimensione
• Distanza
• Rotazione
• Blur
• Elevazione

Di nuovo, potete specificare quelle proprietà come palette con un numero di base e gli step incrementali per supportare vari use case. Per esempio, quando si specificano le animazioni di ridimensionamento in FutureLearn, abbiamo notato che più è piccolo l’oggetto, più deve ridimensionarsi in proporzione alla sua dimensione, perché il cambiamento sia visibile. Una palette per ridimensionare gli oggetti riflette questo:

Piccolo: ×0.025
Oggetti grandi
e.g. un’immagine thumbnail

Base: ×0.1
Oggetti medi
e.g. pulsante

Grande: ×0.25
Oggetti piccoli
e.g. icona

Sebbene non ci sia una precisione perfetta su come sono impostate queste proprietà, forniscono il punto di inizio per il team e ci aiutano a ridurre le inconsistenze nel nostro linguaggio di animazione.

Accordo sui principi guida#section11

Se avete dei principi guida, è più semplice puntare ad essi quando qualcosa non va bene. Alcuni principi potrebbero essere specifici al modo in cui il vostro team affronta l’animazione. Per esempio:

I principi guida per l’animazione nel Salesforce Lightning Design System sono brevi e semplici.

Se il vostro team non si sente ancora sicuro con l’animazione, potrebbe valere la pena includere alcuni dei principi più generali, come “lasciatela per i momenti più importanti dell’interazione” e “impedite che intralci il completamento di un task”.

La sezione dei principi guida può anche includere un rationale per l’utilizzo dell’animazione nel vostro prodotto e il sentimento generale della vostra animazione e in che modo si collega al vostro brand. Per esempio, IBM Design Language usa il movimento fisico delle macchine per estrarre le qualità che vogliono comunicare attraverso l’animazione, quali la precisione e l’accuratezza.

Ogni movimento della macchina, dal colpo potente di un braccio della stampante allo scorrimento liscio del carrello di una macchina da scrivere, ha uno scopo e ogni funzione risponde a un bisogno.

IBM Design Language

Nel Design Language di IBM, l’oscillazione ritmica delle bobine di nastro in movimento è usata in maniera metaforica per supportare l’esperienza di attesa dell’utente.

I principi guida possono anche includere metafore spaziali, che possono fornire un modello mentale utile per chi deve creare le animazioni. Material Design di Google è un ottimo esempio di come pensare alle interfacce in termini di “materiali” fisici possa fornire un riferimento comune per designer e sviluppatori quando pensano al movimento nelle loro applicazioni.

In Material Design, “Material can push other material out of the way”.

Note#section13

• 1. Per saperne di più, leggete 12 Principles of Animation di Disney in The Illusion of Life