UI Animation - Parte II

Quando e perché usare le animazioni

Abbiamo parlato dei vantaggi delle animazioni ed elencato alcune linee guida di animazione interattiva, ora vedremo in quali casi possono aiutarci a migliorare i nostri progetti.

Orientamento e contesto

Le animazioni hanno il grande potere di dare indizi sullo spazio in modo molto più concreto di qualsiasi altro strumento di design. Grazie ad esse gli utenti hanno più elementi per comprendere al meglio le relazioni spaziali e le gerarchie degli elementi nell’interfaccia. Questo è vero soprattutto quando parliamo di dispositivi dalle dimensioni ridotte, dove spesso abbiamo grandi quantità di contenuto in poco spazio a disposizione. Un pattern molto diffuso, esempio di questo concetto, è il menu di navigazione principale off-screen su un livello diverso.

Nei casi in cui le animazioni vengono usate in questo modo, il carico cognitivo degli utenti è ridotto notevolmente. Infatti, questi non devono sforzarsi di creare un modello mentale che rappresenti lo spazio dell’interfaccia (dove si trova questo elemento? Dietro, davanti, di lato? Ora dov’ è finito?) e nemmeno porsi domande sul perché l’interfaccia sia cambiata. Hanno assistito in questo modo al processo di cambiamento.

Usare l’animazione per rendere graduale il cambio di contesto riduce la possibilità di disorientare l’utente poiché il cambiamento di contesto può essere seguito visualmente. Mantenere gli oggetti principali visibili durante il cambio di contesto rende il cambiamento più comprensibile.

Attenzione e focus

Le animazioni sono incredibilmente utili quando è necessario attirare l’attenzione. La peggiore manifestazione di questa caratteristica è rappresentata dalle centinaia di banner pubblicitari che infestano il web. Questo potere di attirare l’attenzione può anche essere sfruttato a fin di bene.

• Animare gli elementi più importanti


Associare una specifica animazione a determinati elementi, aiuta a rinforzarne l’importanza e aumenta le possibilità che questi vengano notati.

• Guidare lo sguardo


Usare la direzione del movimento di un elemento, per indicare dove l’utente dovrebbe guardare, ci dà la possibilità di guidare lo sguardo attraverso la gerarchia dei contenuti.

• Creare contrasto


Animare un oggetto in contesto statico o utilizzare parametri di animazione differenti (easing o direzione), ci aiuta a creare contrasti per attirare l’attenzione dell’utente.

Mostrare causa ed effetto

Il binomio causa-effetto è molto legato al concetto di feedback. Mentre quest’ultimo consiste nel far sapere all’utente che, a seguito di una sua azione, qualcosa è successo o sta succedendo dietro le quinte, il concetto di causa-effetto consiste nel mostrare i potenziali effetti di un’azione prima che questa sia conclusa o durante l’interazione.

Con un’animazione possiamo suggerire le modalità di interazione con un elemento, oppure possiamo mostrare gli effetti immediati di un’azione. In questo modo l’utente avrà maggiore visibilità e controllo su ciò che accade nell’interfaccia.

Fornire feedback 

Fornire feedback è fondamentale nella realizzazione di una buona interfaccia. Sfruttare le animazioni nella progettazione dei feedback ci aiuta a renderli più funzionali in diversi contesti.

• Animare messaggi di errore 

Prendiamo ad esempio gli errori nella compilazione di un form. Incappare in errori di questo tipo è già abbastanza frustrante di per sé, ma lo diventa ancora di più quando l’errore non si riesce a trovare. Un feedback animato attira l’attenzione dell’utente nel punto giusto aiutandolo ad individuare l’errore.

• Confermare lo svolgimento di un task

Animare cambiamenti di stato nell’interfaccia può aiutarci a fornire all’utente indizi di ciò che accade “dietro le quinte”.

• Creare loader animati contestuali 

Inserire piccole animazioni durante il caricamento della pagina è ormai una pratica diffusa. Spesso, però, ci troviamo a fissare un’anonima gif animata (il classico spinner) che non ci fornisce nessun tipo di informazione reale su ciò che sta accadendo. Arricchire questi momenti di attesa, sfruttando animazioni contestuali e meno generiche, fa sì che l’utente si senta più coinvolto e più propenso ad aspettare.

Esprimere il brand 

Ogni animazione in un’interfaccia contribuisce a dare una specifica personalità al brand. Stabilire un insieme di regole di animazione per un progetto ci aiuta a creare una coreografia più coerente e a definire i tratti della personalità del brand.

Possiamo partire dagli aggettivi che più descrivono il brand o il prodotto, per poi tradurli in movimento. Quello che applichiamo è lo stesso principio usato per altri elementi di design (font e colori).

Conclusioni 

Abbiamo visto come le animazioni non si limitino ad essere uno strumento decorativo e facoltativo per migliorare un design da un punto di vista prettamente estetico. Includerle nella progettazione ci dà l’opportunità di costruire interfacce più funzionali e usabili.

Come designer, abbiamo il dovere di iniziare a pensare alle animazioni fin da subito, nella fase iniziale di sketching. Dobbiamo includerle nel processo di progettazione come parte fondamentale e non come funzionalità aggiuntive facoltative.