{"id":764,"date":"2017-09-26T14:45:40","date_gmt":"2017-09-26T12:45:40","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/pattern-e-scopo-un-estratto-da-animation-at-work\/"},"modified":"2017-09-26T14:45:40","modified_gmt":"2017-09-26T12:45:40","slug":"pattern-e-scopo-un-estratto-da-animation-at-work","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/pattern-e-scopo-un-estratto-da-animation-at-work\/","title":{"rendered":"Pattern e scopo, un estratto da Animation at Work"},"content":{"rendered":"
\n

Nota della redazione:<\/strong> siamo lieti di condividere un estratto dal Capitolo 2 del nuovo libro di Rachel Nabors Animation at Work<\/cite><\/a>, ora disponibile da A Book Apart<\/a>.<\/p>\n<\/div>\n

E cos\u00ec 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\u00e0, e cos\u00ec 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.<\/p>\n

Questo capitolo imposta dei pattern di animazione di base e vi mostra come applicare l’animazione a un sistema pi\u00f9 grande. Poi, imparerete come individuare i colli di bottiglia cognitivi e l’opzione pi\u00f9 facile, massimizzando l’impatto delle animazioni in cui investire.<\/p>\n

\n

Pattern di animazione comuni<\/h2>\n

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:<\/p>\n

Transizioni<\/em>: 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\u00e9 sostituiscono una grande porzione di informazioni.<\/p>\n

Integrazione<\/em>: portano l’informazione dentro e fuori la pagina, ma non cambiano la \u201cposizione\u201d o il task dell’utente. Generalmente, aggiungono o aggiornano dei pezzi di contenuto aggiuntivo sulla pagina.<\/p>\n

Feedback<\/em>: indica il nesso di causa tra due o pi\u00f9 eventi, spesso usati per mettere in collegamento un’interazione dell’utente con la reazione dell’interfaccia.<\/p>\n

Dimostrazioni<\/em>: spiegano come funziona qualcosa o espongono i suoi dettagli mostrando invece di raccontare.<\/p>\n

Decorazioni<\/em>: non danno informazioni ma sono puramente estetiche.<\/p>\n

Diamo uno sguardo a ciascuna di queste per esaminarne l’impatto sull’esperienza dell’utente.<\/p>\n

Transizioni<\/h3>\n

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.<\/p>\n

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 \u00e8 stato l’utente, dove sta andando e dove si trova adesso in un colpo solo.<\/p>\n

Per esempio, sulla pagina SB Dunk<\/a> 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<\/strong>). 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.<\/p>\n

<\/p>\n

Fig 2.1<\/strong>: Su questa pagina di Nike<\/a>, le transizioni sono usate per navigare avanti e indietro su una linea retta ininterrotta di sneaker. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Su un altro sito di scarpe, fluevog.com<\/a>, le transizioni spostano un utente da un task all’altro (Fig 2.2<\/strong>). Dopo che un utente comincia a scrivere nel campo di ricerca, i risultati vengono animati sopra a uno sfondo pi\u00f9 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.<\/p>\n

<\/p>\n

Fig 2.2<\/strong>: Sul sito web di Fluevog<\/a>, le transizioni spostano gli utenti dal contesto di navigazione nel sito al contesto di ricerca. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Integrazioni<\/h3>\n

Mentre le transizioni spostano l’utente da<\/em> uno stato all’altro, le animazioni integrative forniscono delle informazioni aggiuntive all’<\/em>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.<\/p>\n

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\u00e0 essere diretta a un avviso sul lato del loro tablet?<\/p>\n

Quando un utente aggiunge un prodotto al carrello su glossier.com<\/a>, 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<\/strong>). Mentre una transizione scuoterebbe l’utente dalla modalit\u00e0 di browsing del sito, questa animazione supplementare permette all’utente di congedare il carrello e continuare lo shopping.<\/p>\n

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<\/strong>).<\/p>\n

<\/p>\n

Fig 2.3<\/strong>: Glossier.com<\/a> usa un’animazione supplementare per mostrare e per nascondere il carrello dell’utente, facendoli restare nel contesto dello shopping pi\u00f9 a lungo senza forzarli nel contesto di acquisto. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Questo processo per il carrello ha un terzo pattern: al pulsante \u201cAdd to Bag\u201d viene aggiunta un’icona rotante quando lo si clicca, il che d\u00e0 all’utente il feedback sul suo stato di caricamento (Fig 2.3b<\/strong>). Parlando di feedback\u2026<\/p>\n

Feedback<\/h3>\n

L’animazione pu\u00f2 dare agli utenti un feedback diretto riguardante le loro interazioni. Un pulsante schiacciato, una gesture \u201cswipe\u201d: 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 \u201cPay Now\u201d o se la pagina si sta davvero caricando.<\/p>\n

Sul sito del Monterey Bay Aquarium<\/a>, passare sopra a un pulsante causa il cambiamento del suo colore da rosso a blu, indicando che l’elemento \u00e8 interattivo ed \u00e8 pronto a reagire all’input dell’utente (Fig 2.4<\/strong>). Gli stati \u201chover\u201d dei pulsanti sono un classico esempio di questo tipo di animazione, in parte perch\u00e9 il guadagno di dare un feedback visivo sui pulsanti agli utenti \u00e8 cos\u00ec misurabile e importante per gli affari.<\/p>\n

<\/p>\n

Fig 2.4<\/strong>: Sul sito del Monterey Bay Aquarium<\/a>, passare sopra a un pulsante fa scattare un’animazione che d\u00e0 un feedback all’utente, comunicandogli che l’elemento \u00e8 interattivo. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Il sito dello studio di design Animal<\/a> usa una barra di colore in cima alla pagina cos\u00ec come una versione animata del loro logo per indicare gli stati \u201cin caricamento\u201d e \u201ccaricata\u201d della pagina mentre<\/em> creano interesse e rafforzano il loro brand \u201cwild\u201d (Fig 2.5<\/strong>).<\/p>\n

<\/p>\n

Fig 2.5<\/strong>: Lo studio di design Animal<\/a> usa una barra di progresso per far sapere ai propri utenti la percentuale di caricamento della pagina e un logo animato per indicare quando \u00e8 completamente carica. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Dimostrazioni<\/h3>\n

Le dimostrazioni sono l’uso delle animazioni che personalmente preferiscono. Possono essere sia piacevoli sia<\/em> 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 \u00e8, come vedremo, raccontare una storia.<\/p>\n

Le pagine \u201cProcessing\u2026\u201d sono un’opportunit\u00e0 per spiegare agli utenti cosa sta succedendo mentre aspettano. TurboTax fa un buon uso di queste pagine di processing (Fig 2.6<\/strong>). 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\u00e0 e l’accessibilit\u00e0 del loro brand. (Aiuta anche che l’animazione distrae gli utenti da un caricamento di pagina piuttosto lungo con qualcosa di visivamente interessante!)<\/p>\n

<\/p>\n

Fig 2.6<\/strong>: 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.<\/a>)<\/p>\n<\/div>\n

Coin \u00e8 noto per usare animazioni dimostrative per spiegare la value proposition delle loro consolidation card ai visitatori curiosi mentre scorrono il sito (Fig 2.7<\/strong>): non c’\u00e8 bisogno di premere play e stare a guardare un video pubblicitario o far passare paragrafi di contenuto esplicativo. Questa pagina \u00e8 la vera essenza del \u201cmostra, non spiegare\u201d.<\/p>\n

<\/p>\n

Fig 2.7<\/strong>: Mentre i visitatori girano per il sito Coin, vedono la value proposition dell’azienda. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Decorazioni<\/h3>\n

Non \u00e8 difficile scambiare le animazioni decorative per animazioni dimostrative. Ma c’\u00e8 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 \u00e8 fondamentale.<\/p>\n

Il modo migliore per scovare un’animazione puramente decorativa \u00e8 di chiedersi: \u201cCosa pu\u00f2 imparare un utente da questa animazione? Li guida o gli mostra qualcosa che altrimenti non saprebbero?\u201d. Se la risposta \u00e8 no, potreste avere sotto mano un’animazione decorativa.<\/p>\n

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

<\/p>\n

Fig 2.8<\/strong>: il sito di Revisionist History<\/a> usa animazioni decorative per aggiungere interesse visivo a media non visuali. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n

Polygon.com<\/a> 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.<\/p>\n

<\/p>\n

Fig 2.9<\/strong>: Polygon<\/a> usa animazioni decorative come feature che fa colpo per distinguersi dalla concorrenza. (Guardate il video di accompagnamento.<\/a>)<\/p>\n<\/div>\n<\/div>\n

\n

Volete saperne di pi\u00f9?<\/h2>\n

Questo estratto da Animation at Work<\/cite> vi aiuter\u00e0 a cominciare. Ordina la copia completa oggi<\/a>, insieme ad altri eccellenti titoli, da A Book Apart<\/a>.<\/p>\n

\"Animation<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Le animazioni sfruttano il sistema visivo degli utenti e accelerano il processo cognitivo. Ma quali sono gli elementi del nostro design che traggono maggior beneficio da questo nuovo strumento? In questo estratto dal nuovo libro di Rachel Nabors, Animation at Work, scoprirete alcuni pattern di animazione di base e imparerete come si applicano le animazioni a un design system pi\u00f9 ampio.<\/p>\n","protected":false},"author":818,"featured_media":7000824,"comment_status":"open","ping_status":"open","template":"","categories":[279,193],"tags":[],"coauthors":[414],"class_list":["post-764","article","type-article","status-publish","has-post-thumbnail","hentry","category-interaction-design","category-numero-215-17-settembre-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000824"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=764"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}