Pattern e scopo, un estratto da Animation at Work

Pattern di animazione comuni#section1

Se anche voi come me avete osservato tanti esempi di animazione sul web e nelle interfacce delle app, saprete che emergono alcuni patter. Questi sono utili per identificare e formulare succintamente lo scopo dell’animazione agli altri. Ecco le categorie che io ho scoperto che vengono usate maggiormente:

Transizioni: portano gli utenti da un posto all’altro dello spazio di informazione o li fanno passare da un task all’altro. Tendono ad avere un impatto notevole sul contenuto della pagina, perché sostituiscono una grande porzione di informazioni.

Integrazione: portano l’informazione dentro e fuori la pagina, ma non cambiano la “posizione” o il task dell’utente. Generalmente, aggiungono o aggiornano dei pezzi di contenuto aggiuntivo sulla pagina.

Feedback: indica il nesso di causa tra due o più eventi, spesso usati per mettere in collegamento un’interazione dell’utente con la reazione dell’interfaccia.

Dimostrazioni: spiegano come funziona qualcosa o espongono i suoi dettagli mostrando invece di raccontare.

Decorazioni: non danno informazioni ma sono puramente estetiche.

Diamo uno sguardo a ciascuna di queste per esaminarne l’impatto sull’esperienza dell’utente.

Transizioni#section2

In origine, il web era stato progettato come una serie di documenti collegati. Cliccando su un link il browser cancellava la schermata, spesso causando un flash bianco visibile, prima di creare la pagina successiva da zero. Anche se questo aveva senso nel contesto dei documenti di testo collegati, ha meno senso in un’era in cui le pagine condividono molti elementi complessi di design e appartengono allo stesso dominio. Non solo spreca risorse del browser per ricreare lo stesso layout di pagina, ma causa anche un aumento del carico cognitivo degli utenti quando devono orientarsi di nuovo nella pagina e rivalutarne il contenuto.

Le animazioni, nello specifico il movimento (motion), possono facilitare l’orientamento dell’utente in uno spazio di informazioni sottraendo tale lavoro dalla corteccia visiva del cervello. Idealmente, l’utilizzo di una transizione tra i cambiamenti nel flusso dei task o nel posizionamento nell’architettura dell’informazione rinforza dove è stato l’utente, dove sta andando e dove si trova adesso in un colpo solo.

Per esempio, sulla pagina SB Dunk di Nike, quando un utente clicca sulla freccia della navigazione, la sneaker attuale si sposta mentre la sneaker successiva entra dalla parte opposta (Fig 2.1). Queste transizioni mostrano chiaramente all’utente come dovrebbero navigare lungo il continuo di sneaker, aiutandolo a tenere traccia del loro posto e rinforzando il modello spaziale della ricerca in una fila di sneaker nel mondo reale.

Su un altro sito di scarpe, fluevog.com, le transizioni spostano un utente da un task all’altro (Fig 2.2). Dopo che un utente comincia a scrivere nel campo di ricerca, i risultati vengono animati sopra a uno sfondo più scuro. Questo fa passare l’utente dal contesto di browsing al rifinire i loro risultati di ricerca, velocizzando il loro focus e contemporaneamente rassicurandoli che possono tornare al browsing senza troppi sforzi.

Integrazioni#section3

Mentre le transizioni spostano l’utente da uno stato all’altro, le animazioni integrative forniscono delle informazioni aggiuntive all’utente. Pensate a quelle volte in cui dell’informazione complementare al contenuto principale della pagina appare o scompare dalla vista: avvisi, dropdown e tooltip sono tutti buoni candidati per animazioni supplementari in entrata ed uscita.

Ricordatevi che queste animazioni richiedono di rispettare il Cone Of Vision: gli utenti guarderanno direttamente un tooltip che appare vicino al cursore o la loro attenzione dovrà essere diretta a un avviso sul lato del loro tablet?

Quando un utente aggiunge un prodotto al carrello su glossier.com, piuttosto che portarli ad una pagina del carrello completamente nuova, il sito aggiorna semplicemente l’utente del contenuto del proprio carrello mostrandolo come una sidebar (Fic 2.3c). Mentre una transizione scuoterebbe l’utente dalla modalità di browsing del sito, questa animazione supplementare permette all’utente di congedare il carrello e continuare lo shopping.

La sidebar per il carrello usa un’ulteriore animazione supplementare per attrarre rapidamente e sobriamente l’occhio dell’utente: un metro progressivo che si riempie gradualmente per mostrare quanto deve spendere l’utente per avere la spedizione gratuita (Fig 2.3d).

Questo processo per il carrello ha un terzo pattern: al pulsante “Add to Bag” viene aggiunta un’icona rotante quando lo si clicca, il che dà all’utente il feedback sul suo stato di caricamento (Fig 2.3b). Parlando di feedback…

Feedback#section4

L’animazione può dare agli utenti un feedback diretto riguardante le loro interazioni. Un pulsante schiacciato, una gesture “swipe”: entrambe collegano un’azione umana a una reazione dell’interfaccia. O il contrario: uno spinner di loading sulla pagina indica che stiamo aspettando il computer. Senza un feedback visivo, le persone rimangono a chiedersi se hanno effettivamente cliccato sul pulsante “Pay Now” o se la pagina si sta davvero caricando.

Sul sito del Monterey Bay Aquarium, passare sopra a un pulsante causa il cambiamento del suo colore da rosso a blu, indicando che l’elemento è interattivo ed è pronto a reagire all’input dell’utente (Fig 2.4). Gli stati “hover” dei pulsanti sono un classico esempio di questo tipo di animazione, in parte perché il guadagno di dare un feedback visivo sui pulsanti agli utenti è così misurabile e importante per gli affari.

Il sito dello studio di design Animal usa una barra di colore in cima alla pagina così come una versione animata del loro logo per indicare gli stati “in caricamento” e “caricata” della pagina mentre creano interesse e rafforzano il loro brand “wild” (Fig 2.5).

Dimostrazioni#section5

Le dimostrazioni sono l’uso delle animazioni che personalmente preferiscono. Possono essere sia piacevoli sia intelligenti. Queste animazioni mettono l’informazione in prospettiva, mostrano quello che sta accadendo o come funziona qualcosa. Questo rende le animazioni dimostrative le compagne perfette delle infografiche. Una cosa che fanno tutte le animazioni di dimostrazione è, come vedremo, raccontare una storia.

Le pagine “Processing…” sono un’opportunità per spiegare agli utenti cosa sta succedendo mentre aspettano. TurboTax fa un buon uso di queste pagine di processing (Fig 2.6). Dopo che gli utenti hanno inviato i propri moduli delle tasse USA, elimina ogni ansia residua mostrandogli dove sono dirette le loro informazioni e cosa possono aspettarsi, il tutto rinforzando l’affidabilità e l’accessibilità del loro brand. (Aiuta anche che l’animazione distrae gli utenti da un caricamento di pagina piuttosto lungo con qualcosa di visivamente interessante!)

Coin è noto per usare animazioni dimostrative per spiegare la value proposition delle loro consolidation card ai visitatori curiosi mentre scorrono il sito (Fig 2.7): non c’è bisogno di premere play e stare a guardare un video pubblicitario o far passare paragrafi di contenuto esplicativo. Questa pagina è la vera essenza del “mostra, non spiegare”.

Decorazioni#section6

Non è difficile scambiare le animazioni decorative per animazioni dimostrative. Ma c’è una differenza cruciale: laddove le dimostrazioni portano nuove informazioni nel sistema, le animazioni decorative non lo fanno. Sono i grassi e gli zuccheri della piramide alimentare dell’animazione: sono degli ottimi amplificatori di sapori, ma la moderazione è fondamentale.

Il modo migliore per scovare un’animazione puramente decorativa è di chiedersi: “Cosa può imparare un utente da questa animazione? Li guida o gli mostra qualcosa che altrimenti non saprebbero?”. Se la risposta è no, potreste avere sotto mano un’animazione decorativa.

Anche se hanno una pessima reputazione, le animazioni decorative possono aiutare far diventare straordinario l’ordinario. Il sito di Revisionist History usa animazioni decorative con giudizio per dare vita a delle illustrazioni piatte. Le animazioni aggiungono giusto un po’ di interesse così che il contenuto della pagina possa essere più austero, permettendo agli utenti di concentrarsi sul podcast (Fig 2.8).

Polygon.com ha usato epicamente delle illustrazioni animate per creare i pezzi forte di una serie di recensioni di console. Queste animazioni decorative possono non aver aggiunto delle nuove informazioni, ma hanno rinforzato in modo cruciale il brand Polygon. Hanno anche contribuito a far risaltare ogni recensione di console rispetto alla concorrenza, che all’epoca sfoggiava fotografie indistinguibili degli stessi device.

Volete saperne di più?#section7

Questo estratto da Animation at Work vi aiuterà a cominciare. Ordina la copia completa oggi, insieme ad altri eccellenti titoli, da A Book Apart.