UI Animation - Parte II

Una necessità, non più un optional

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.

Ubicazione del livello del menù di navigazione.
Con questa animazione diventa chiara per l'utente l'ubicazione del livello del menù di navigazione.

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.

Attenzione utente attivata da due elementi
L'attenzione dell'utente è attirata dai due elementi con le informazioni più importanti.
  • 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.

L'elemento selezionato suggerisce direzione da guardare
L'elemento selezionato suggerisce con un'animazione la direzione in cui l'utente deve guardare.
  • 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.

Il popup con l'avviso ha un'animazione contrastante con quello precedente.
Il popup con l'avviso ha un'animazione contrastante con quello precedente.

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.

Al movimento del mouse nella zona a sinistra dello schermo viene suggerita la posizione di livello di navigazione nascosto.
Al movimento del mouse nella zona a sinistra dello schermo viene suggerita la posizione di livello di navigazione nascosto.
Trascinando un elemento all'interno di una lista, questa si riordina in tempo reale e l'utente ha già un'idea di quello che sarà l'effetto della sua azione.
Trascinando un elemento all'interno di una lista, questa si riordina in tempo reale e l'utente ha già un'idea di quello che sarà l'effetto della sua azione.

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.

Il campo di input non compilato correttamente, non solo cambia colore, ma si muove per attirare l'attenzione dell'utente.
Il campo di input non compilato correttamente, non solo cambia colore, ma si muove per attirare l'attenzione dell'utente.
  • 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”.

Coofermare svolgimento di un task
Tre piccoli passaggi di stato nella cta comunicano informazioni sullo lo stato del sistema.
  • 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.

Durante il caricamento l'utente viene messo al corrente di ciò che succede dietro alle quinte.
Durante il caricamento l'utente viene messo al corrente di ciò che succede dietro alle quinte.

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

Energia
Energia
Giocosità
Giocosità
Calma
Calma
Stabilità
Stabilità

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.

Se vuoi saperne di più 👉 contattaci