No. 216

Nota della redazione: siamo lieti di condividere un estratto dal Capitolo 2 del nuovo libro di Rachel Nabors Animation at Work, ora disponibile da A Book Apart.

E così possiamo usare le animazioni per collegarci al sistema visivo degli utenti e per accelerare i loro processi cognitivi: fantastico! Ma prima di animare ogni elemento nei nostri design dobbiamo imparare quando e come usare questo nuovo strumento: da grandi poteri derivano grandi responsabilità, e così via. E, siccome l'animazione compete con molte altre questioni per il tempo di sviluppo e design, ha senso utilizzare le nostre risorse dove saranno maggiormente utili.

Questo capitolo imposta dei pattern di animazione di base e vi mostra come applicare l'animazione a un sistema più grande. Poi, imparerete come individuare i colli di bottiglia cognitivi e l'opzione più facile, massimizzando l'impatto delle animazioni in cui investire.

Pattern di animazione comuni

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

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.

Fig 2.1: Su questa pagina di Nike, le transizioni sono usate per navigare avanti e indietro su una linea retta ininterrotta di sneaker. (Guardate il video di accompagnamento.)

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.

Fig 2.2: Sul sito web di Fluevog, le transizioni spostano gli utenti dal contesto di navigazione nel sito al contesto di ricerca. (Guardate il video di accompagnamento.)

Integrazioni

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

Fig 2.3: Glossier.com usa un'animazione supplementare per mostrare e per nascondere il carrello dell'utente, facendoli restare nel contesto dello shopping più a lungo senza forzarli nel contesto di acquisto. (Guardate il video di accompagnamento.)

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

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.

Fig 2.4: Sul sito del Monterey Bay Aquarium, passare sopra a un pulsante fa scattare un'animazione che dà un feedback all'utente, comunicandogli che l'elemento è interattivo. (Guardate il video di accompagnamento.)

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

Fig 2.5: Lo studio di design Animal usa una barra di progresso per far sapere ai propri utenti la percentuale di caricamento della pagina e un logo animato per indicare quando è completamente carica. (Guardate il video di accompagnamento.)

Dimostrazioni

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!)

Fig 2.6: TurboTax sia informa i propri utenti sia maschera un page load lungo dimostrando cosa succede dopo che l'utente ha inviato i propri moduli delle tasse USA. (Guardate il video di accompagnamento.)

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

Fig 2.7: Mentre i visitatori girano per il sito Coin, vedono la value proposition dell'azienda. (Guardate il video di accompagnamento.)

Decorazioni

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

Fig 2.8: il sito di Revisionist History usa animazioni decorative per aggiungere interesse visivo a media non visuali. (Guardate il video di accompagnamento.)

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.

Fig 2.9: Polygon usa animazioni decorative come feature che fa colpo per distinguersi dalla concorrenza. (Guardate il video di accompagnamento.)

Volete saperne di più?

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

Animation at Work by Rachel Nabors
Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Rachel Nabors

Rachel Nabors è invited expert al W3C e una Google Developer Expert che fa consulenze nell'ambito delle animazioni web. Dà linfa alla community curando WebAnimationWeekly.com e gestendo la community Slack Animation at Work. Aiuta le aziende a introdurre l'animazione nei loro sistemi e le piace creare esperienze nuove e inusuali. Potete trovarla su Twitter, su rachelnabors.com e a Portland, Oregon.

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