No. 216

Mantenere coerente la coreografia dell'animazione fin dall'inizio di un progetto può essere difficile, specialmente per le piccole aziende. Senza uno specialista dell'animazione dedicato a ciò all'interno del team, può essere complicato dare delle priorità alle linee guida e ai pattern all'inizio del processo di design. La cosa più probabile che possa accadere è che l'animazione verrà aggiunta durante lo sviluppo del prodotto.

Non sorprende che questo approccio ad hoc possa portare ad inconsistenze, duplicati e revisioni sul lungo termine, ma lascia anche spazio per delle esplorazioni e scoperte creative riguardanti ciò che funziona e ciò che non funziona. Per quanto possa essere utile poter stabilire le fondamenta del sistema fin da subito, va altrettanto bene permettere ai pattern di emergere in maniera organica man mano che il vostro team sperimenta e trova la propria voce con l'animazione.

Una volta che ci saranno animazioni a sufficienza, potreste cominciare a pensare a come assicurarne la consistenza e a come riutilizzare i pattern esistenti piuttosto che ricrearli da zero ogni volta. Come si fa la transizione da qualche animazione scoordinata a un sistema coerente? Io trovo utile cominciare a pensare allo scopo delle animazioni e alle sensazioni che dovrebbero evocare.

Cominciate da scopo e sensazione

Scopo

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

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

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.

Qualità del brand tradotte in movimento
Sentimento del brand Sentimento dell'animazione Esempi di effetto
Vivace ed energico Veloce e morbido Balzo delicato
Anticipazione
Overshoot morbido
Giocoso e amichevole Elastico o tipo molla Schiacciare e allungare
Easing balzellante
Agitazione
Risoluto e sicuro In equilibrio e stabile Ease-in, Ease-out
Ease-in-out
Calmo e morbido Piccoli movimenti morbidi o assenza di movimento Cambiamenti di opacità, colore, blur e dimensione

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.

Animazione di popover su Marvel

Animazione di un popover su Marvel (sinistra) e FutureLearn (destra).

Animazione di popover su FutureLearn

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

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.

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' presa dall'audit delle animazioni di FutureLearn, in un Google Doc

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

Definite i pattern di utilizzo

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.

Pattern di animazione su FutureLearn, raggruppati per scopo e sensazione
Scopo Effetti di animazione Sensazione
Cambiamento di stato interattivo Colore, 2s ease
Opacità, in – 0.3s, out – 1.1s ease
Ridimensionamento, 0.4 ease
Calma, soffice
Enfasi Pulsazione energica, 0.3s ease-in
Pulsazione sottile
Ondeggiamento, 0.5s ease-in-out
Energico, giocoso
Mostrare informazioni Scorrere verso il basso, 0.4 swing
Scorrere verso l'alto, 0.7s ease
FadeInUp, 0.3 ease
Ruotare, 0.3 ease
Sicuro, deciso, equilibrato

Sviluppate un vocabolario per descrivere gli effetti

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 accelerazioni1) 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.

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.

The ripple effect in the intro video on TED (left) mirrored in the play button interaction (right).

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

Specificate i blocchi costitutivi

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

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:

Piuttosto che usare un'unica durata per tutte le animazioni, aggiustate ogni durata per accomodare la distanza percorsa, la velocità dell'elemento e i cambiamenti di superficie.

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

Linee guida di durata in Carbon Design System.

Easing

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

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à

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

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:

Guiding principles for motion in Salesforce Lightning Design System are kept short and simple

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

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.'

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

Riassumendo

Quando integrate l'animazione nei design system, provate a vederla in relazione a tre cose: principi guida, pattern di utilizzo e blocchi costituenti. I principi guida forniscono la direzione generale, i pattern di utilizzo specificano quando e come applicare gli effetti e i building block contribuiscono alla creazione di nuove animazioni. Anche se le vostre animazioni fossero state inizialmente create senza un piano, metterle insieme in un sistema coerente e documentato vi può aiutare ad aggiornare e creare basandovi su quello che avete già in maniera intenzionale e che sia di supporto al brand.

Ulteriori letture:
Creating Usability with Motion: The UX in Motion Manifesto
Web Animation Past, Present, and Future
Designing Interface Animation
Animation in Responsive Design

Note

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Alla Kholmatova

Alla Kholmatova è interaction designer in FutureLearn, una piattaforma open di online education. È affascinata dalle interfacce, ma ancora di più, dalle persone che si trovano da entrambe i lati: designer e utenti, ed è sempre alla ricerca di modi per ridurre il gap tra di essi.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA