UI Animation - Parte I

Se stai progettando una nuova interfaccia per un’app, un sito web o un qualsiasi prodotto digitale, c’è un aspetto che ormai non puoi più ignorare: le animazioni.

Ad oggi è praticamente impossibile non trovare animazioni nei prodotti digitali con le migliori UX, di conseguenza anche le aspettative degli utenti sono cambiate. Un’interfaccia statica può risultare datata se non addirittura noiosa.

Animazioni ben progettate contribuiscono in maniera fondamentale alla definizione di un design moderno e gradevole, ma è tutto qui? Certo che no. Il loro impatto positivo nella UX include diversi aspetti funzionali e non solo il fattore estetico.Perché un’interfaccia animata è più intuitiva rispetto ad una statica? Per andare a fondo della questione è necessario approfondire la componente psicologica.

Psicologia cognitiva e benefici per il cervello

La psicologia cognitiva studia come lavora il nostro cervello e come avviene l’attivazione dei processi mentali.

Ecco alcuni concetti fondamentali:

• Carico cognitivo: la quantità totale di sforzo mentale impiegato dall’utente nello svolgimento di un’operazione.
• Modelli mentali: le immagini nella mente dell’utente che creano l’aspettativa riguardo ad una determinata interazione con il sistema o alle relazioni spaziali tra gli elementi dell’interfaccia.
• Metafore di interfaccia: azioni conosciute per indurre gli utenti a mettere in atto nuove azioni. Un esempio può essere l’icona del cestino sulla maggior parte dei computer che è molto simile alla sua controparte fisica, in modo da avvisare l’utente riguardo all’azione prevista.
• Affordance: la proprietà di un oggetto di influenzare, attraverso la sua apparenza visiva, il modo in cui viene usato. Per esempio, l'aspetto di una maniglia ben progettata dovrebbe far intuire immediatamente come la porta vada aperta: se tirandola, spingendola o facendola scorrere.

Esistono diversi studi accademici sull’efficacia delle animazioni nel processo di apprendimento. Un tema comune emerso dalle varie ricerche è la riduzione del carico cognitivo per gli utenti quando le transizioni di stato dell’interfaccia sono animate.

Più semplicemente, l’utente comprende con più facilità i passaggi di stato tra gli elementi dell’interfaccia traendo grazie a questo processo diversi benefici, tra questi:

• Acquisisce maggiore visibilità su ciò che accade.
• Deve sforzarsi meno per comprendere gli effetti delle interazioni.
• Percepisce meglio le relazioni spaziali tra gli elementi e costruisce modelli mentali più funzionali.

Per quanto riguarda metafore di interfaccia ed affordance è nella natura umana dare significato a qualcosa che si muova basandosi sull’esperienza nel mondo reale. Quando un elemento si muove su un’interfaccia, cerchiamo di interpretare la ragione di tale movimento domandoci: qualcosa lo ha spinto? Si è nascosto dietro ad un altro elemento? L’ho trascinato? Tutte questi interrogativi sono il nostro tentativo di dare un senso all’animazione in base alla nostra esperienza.

Animazioni che simulano aspetti e comportamenti del mondo reale possono contribuire a rafforzare metafore di interfaccia e affordance, rendendo così più familiari ed intuibili i comportamenti dell’interfaccia.

Principi di animazione interattiva

I 12 principi dell’animazione della Disney (Disney Animation: the Illusion of Life), ci insegnano molto su come creare animazioni più naturali, realistiche e piacevoli, sono sicuramente applicabili al nostro lavoro, ma si inseriscono in un contesto che non considera un fattore chiave: l’interattività. Gli utenti non guarderanno passivamente le nostre animazioni come nei film o cartoni animati, ma interagiranno con esse.

Ecco alcuni suggerimenti da seguire quando si progetta un’animazione per un’interfaccia:

Avere uno scopo

La prima e più importante regola è: evitare di usare animazioni per il solo scopo estetico. Se un’animazione non può essere giustificata in termini di funzionalità o miglioramento dell’usabilità, non ha ragione di esistere. Ogni volta che ci apprestiamo a inserire un’animazione nel nostro progetto dobbiamo domandarci: “Ma è davvero necessaria?”, "Sono davvero necessari questi movimenti?"

Un’animazione non deve ostacolare l’utente nello svolgimento di un task o nella fruizione di un contenuto. Può capitare spesso che un utente abbia già in mente una determinata azione da mettere in pratica e non abbia voglia di attendere lo svolgimento di un’animazione per poter procedere. È sempre un bene evitare animazioni di lunga durata per compiti svolti frequentemente dagli utenti (ad esempio l’apertura e la chiusura di un menù di navigazione principale).

Mantenere flessibilità

Le animazioni devono essere flessibili e rispondere sempre all’input dell’utente anche durante la loro esecuzione. Possiamo distinguere due categorie di animazioni:

• Animazioni bloccanti: l’animazione deve terminare prima che l’utente possa interagire.
• Animazioni non bloccanti: l’animazione risponde all’interazione dell’utente in tempo reale.

Avere la giusta durata

Trovare la durata giusta è più un’arte che una scienza esatta, molto dipende da varianti come il contesto di utilizzo o il carattere che vogliamo dare all’animazione. Esistono comunque delle linee guida così riassumibili:

• Tra i 200ms e i 350ms per piccole animazioni e micro-interazioni animate.
• Tra i 400ms e 500ms per animazioni più complesse.

Le ricerche su cui si basano questi numeri (Nielsen Norman Group e Model Human Processor)
 individuano un tempo minimo sotto al quale le animazioni non vengono percepite dall’utente e un tempo massimo sopra al quale l’utente inizia a percepire un ritardo nell’interazione. Dobbiamo tenere presente però che animazioni più complesse richiedono una durata maggiore per essere correttamente percepite. Il criterio di scelta della durata dipende dalla corretta percezione delle stesse da parte dell’utente.

Tenere d’occhio le performance

Soffermandoci per un attimo sulle animazioni web, dobbiamo essere consapevoli del fatto che ogni animazione vada ad incidere sulle performance del nostro prodotto. Risulta utile in quest’ottica conoscere le proprietà che i browser animano in maniera più efficiente: opacity, transform (rotate, traslate, scale).

È importante sapere che animazioni e microinterazioni animate, se ben progettate, possono influenzare positivamente il modo in cui le performance di un prodotto digitale vengono percepite dagli utenti, dando l’impressione che tutto accada più rapidamente.

Le micro-interazioni

A questo punto un chiarimento è d’obbligo. Animazione e micro-interazione sono due termini che a volte vengono confusi. Per chiarire questa ambiguità è necessario prima approfondire il concetto di micro-interazione.

Le micro-interazioni sono momenti delicati incentrati sulla realizzazione di un singolo compito. Questi piccoli momenti vanno ad inserirsi nell’interfaccia rendendola più umana e migliorando l’esperienza utente. 

Le utilizziamo di continuo, al punto che alcune sono diventate veri e propri standard come “scorri per sbloccare” o “pull-to-refresh”.

Dan Saffer, nel suo libro “Microinteractions - design with details”, individua quattro fasi che compongono la micro-interazione:

• Trigger: Ciò che da inizio alla micro-interazione, può essere determinato grazie ad un’ azione dell’utente come un click, oppure essere avviato dal sistema in risposta a determinate condizioni, come un notifica push.
• Regole: Le regole che determinano cosa succede una volta avviata la micro-interazione.
• Feedback: Tutto ciò che viene percepito dall’utente mentre accade la micro-interazione. Informa l’utente di come le regole stanno lavorando.
• Cicli e modalità: Le modalità con cui la micro-interazione si presenta nel tempo e cosa succede quando le condizioni cambiano.

Trigger: L'utente inizia a scrivere direttamente sul documento.
Regola: Al click sulla casella con il titolo del documento non ancora definito, il primo testo scritto dall'utente verrà utilizzato come titolo.
Feedback: Cambio del colore della casella, tooltip con label "Rename", cambio del colore del testo
Regola: Una volta inserito il titolo, l'utente potrà anche cambiare il testo del documento senza che il titolo venga cambiato.

La domanda che sorge a questo punto è: posso creare una micro-interazione non animata?
Certamente ma, a prescindere da tutti i vantaggi già elencati, dobbiamo sempre tenere conto della regola principale: le animazioni devono avere uno scopo. Se un’animazione migliora sensibilmente o è indispensabile alla comprensione corretta di una micro-interazione è senz’altro il caso di includerla nella progettazione.