UI Animation e UX: un’amicizia malcelata

Usare insieme le parole “animazione” e “web” rievoca in molti di noi ricordi di ricerche frenetiche del pulsante “skip intro” per risparmiarci un terribile assalto sensoriale. L’animazione sul web ha toccato livelli piuttosto bassi, su questo non si discute, ma aggiungere delle animazioni al nostro lavoro può essere utile e funzionale, se troviamo le circostanze appropriate.

Se usate come più di un semplice dettaglio del design, le animazioni possono dare dei suggerimenti, guidare l’occhio e ammorbidire quelli che a volte sono dei tratti spigolosi delle interazioni web. Possono migliorare la user experience e possiamo ottenere tutto questo usando semplicemente CSS.

Un ripasso delle animazioni CSS#section1

Questo articolo usa le animation e le transition CSS negli esempi collegati. Se è passato un po’ di tempo dall’ultima volta che le avete usate, ecco cosa state guardando:

Le animazioni CSS sono quelle che associamo più da vicino alle animazioni tradizionali. Ogni cambiamento in uno stato (come il movimento) in un’animazione viene definito da una lista di keyframe identificata da un nome all’interno della regola CSS @keyframes. Fate riferimento a un insieme di keyframe, assegnate una durata, una funzione di timing e qualche altra proprietà opzionale et voilà! Avete un’animazione CSS.

.animation {
	…
	animation: bounceAround 1.1s ease-in-out infinite;
}

@keyframes bounceAround {
	0% {transform:translateY(0);}
	20% {transform:translateY(-60px) rotate(0deg);}
	25%{transform:translateY(20px) rotate(0deg);}
	35%, 55%{transform:translateY(0px) rotate(0deg);}
	60% {transform: translateY(-20px) rotate(0deg);}
	100%{transform: translateY(-20px) rotate(360deg);}
}

In CSS ci sono anche le transition, che possono essere usate, come in effetti avviene, per far muovere degli oggetti. (Giusto per non creare confusione). Per creare una transition, si contrassegna una proprietà (o più proprietà) che si vogliono veder cambiare in maniera morbida nel tempo, si imposta una durata e altri parametri per tale cambiamento e poi si cambia la proprietà per far partire la transizione tra i due stati.

.transition{
	…
	transition: .4s background ease-out;
}

.transition:hover {
	background:#e65445;
}

In pratica, le animazioni e le transizioni vengono spesso usate insieme, quindi userò il termine animazione in senso generale per indicarle entrambe. Questo esempio mostra una semplice versione di ciascuna per un rapido ripasso del codice.

Smussare gli angoli#section2

I posti più adatti in cui aggiungere le animazioni nel nostro lavoro sono i momenti di cambiamento. Di default i cambi di stato sul web implicano tagli netti, che possono renderli difficili da seguire. Questi momenti di cambiamento hanno il potenziale per essere ammorbiditi, ma anche di essere migliorati, aggiungendo delle animazioni alle UI.

Molti di questi momenti sono centrati sull’aiutare una persona ad orientarsi nell’interfaccia, a trovare la propria strada o a stabilire una relazione visuale. Eccone alcuni esempi comuni:

1. Da dove siete venuti? Dove siete andati?#section3

Il nostro cervello e i nostri occhi sono programmati per prestare attenzione agli oggetti in movimento: si tratta quasi di un riflesso. I maghi utilizzano i movimenti per fare i loro trucchi di prestigio, i concessionari d’auto lavorano per catturare il vostro sguardo con uomini gonfiabili che danzano all’aria. Possiamo usare questa cosa per richiamare l’attenzione sui cambiamenti che nascondono o rivelano l’informazione, come l’apertura di cassetti di contenuto o l’esposizione di un sotto menu.

L’animazione può aiutare l’occhio a vedere da dove arriva un nuovo oggetto quando viene mostrato o dove va un oggetto nascosto (e dove probabilmente lo si potrà ritrovare). E, ovviamente, possiamo usare entrambe per un potente “uno-due”.

See the demo: Esempio di mostra/nascondi

Seleziona le voci sul menu di navigazione principale per far vedere i sotto-menu.

In questo esempio, la navigazione principale scivola via quando ci si sposta sopra, rivelando un livello di sottomenu. Quel movimento permette all’utente di sapere che il menu principale non è scomparso e, hey, la prossima volta che ne avrò bisogno, saprò che ci sono delle opzioni aggiuntive sotto la barra blu scuro. Il movimento contribuisce alla creazione di un modello mentale della posizione degli oggetti, anche quando questi non possono stare tutti insieme sullo schermo. Se questo fosse stato fatto solo con un passaggio brusco tra gli stati, quel suggerimento sarebbe andato perso.

Parte della bellezza di questa soluzione risiede nel fatto che l’interazione non ha bisogno dell’animazione per funzionare. L’animazione vi aggiunge qualcosa, dando degli ulteriori indizi visuali e comunicando la personalità del sito senza intromettersi.

2. Questi due (o più) stanno insieme#section4

Stabilire delle connessioni e delle relazioni nel contenuto è un altro momento di cambiamento per il quale risulta particolarmente utile l’animazione, sia funzionalmente sia stilisticamente.

See the demo: Esempi di relazione modale

Cliccate sull’icona per attivare lo stato modale.

In questo esempio, l’icona del documento si muove dalla sua posizione originale a una posizione nella modale, rendendo chiaro che si tratta dello stesso oggetto, semplicemente più dettagliato. Quando si chiude la modale, si vede l’icona che fa ritorno alla sua posizione originaria. Questo movimento aiuta e aggiunge stile a questo semplice esempio, ma lo stesso concetto ha un impatto ancor più grande quando entrano in gioco più oggetti.

Funziona bene anche per associare le thumbnail con le viste dettagliate. Un indizio visuale sulla provenienza di un box rende meno irritante o disorientante l’esperienza.

Si può vedere questa stessa tecnica quando si visualizza o si chiudono i documenti all’interno di Basecamp, oppure ne troviamo una variazione di zoom 3D quando apriamo o chiudiamo le app in iOS7. Comunque, i risultati hanno un look and feel decisamente differente (e generalmente hanno anche reazioni diverse nell’audience!).

3. Un reminder di quello che è stato, un suggerimento su quello che accadrà#section5

A volte il task che si sta svolgendo implica qualche azione in più del semplice cliccare o fare “tap” su degli oggetti. Quando è necessario aggiungere, spostare o riordinare del contenuto, l’animazione può offrire delle indicazioni utili.

Si veda la demo: Aggiungere cose

Premere i pulsanti Add e Remove per cambiare gli oggetti della lista.

Per esempio, consideriamo l’aggiunta o la rimozione di voci da un elenco. (Per i nostri scopi, in questo caso ho semplificato l’azione necessaria per l’aggiunta o la rimozione di oggetti). Quando si aggiunge un nuovo oggetto alla lista, ci sono varie animazioni che indicano che l’azione ha avuto successo e offrono un’indicazione visuale della sua nuova posizione: oggetti adiacenti si spostano per far spazio al nuovo item, che scivola al suo nuovo posto e il cambio di colore di sfondo animato sottolinea la nuova aggiunta. Il colore si dissolve nel tempo, man mano che l’oggetto diventa meno nuovo, così che il focus può essere spostato su nuove azioni, se necessario.

Animazioni simili forniscono delle indicazioni quando si rimuove un oggetto, rendendo più semplice da seguire l’interazione e rinforzando quello che è successo. In una interazione più complessa sulla lista, per esempio una in cui si può liberamente prendere un oggetto e spostarlo per riordinarlo, l’animazione potrebbe aiutare indicando dove si può rilasciare un oggetto, quali item sono attivi e così via.

Man mano che le interazioni diventano qualcosa di più di una sequenza di click, aspetta la nuova pagina, clicca sulla prossima cosa, dare indizi e idee come queste diventa sempre più importante. Sul web, manipoliamo dei dati, otteniamo (e ci aspettiamo) degli aggiornamenti più o meno in real-time e completiamo task più complessi. I touchscreen che ci portiamo in tasca ci hanno condizionato nelle nostre aspettative: vogliamo interazioni più intelligenti e sofisticate su tutti gli schermi che usiamo. Inoltre, la natura delle proprie animazioni comunica più personalità di quanto non possa fare un’interazione statica. Potenzialmente, c’è molto potere da sfruttare in questo ambito!

Ma sì, anche per puro divertimento!#section6

Parlare di animazioni in maniera seria a volte sembra strano perché, beh, l’animazione dovrebbe anche essere divertente. Non sottostimate mai l’impatto dell’aggiunta di sorpresa e piacere.

Piazzare delle animazioni nel punto giusto può farvi conquistare gli utenti, rendendo divertenti le interazioni tanto quanto è divertente progettarle. Queste piccole aggiunte potrebbero apparire senza una vera utilità, ma dicono moltissimo del brand e della sua storia. Se state lavorando ad un progetto in cui si può usare un po’ di allegria inaspettata, cercate di sfruttare al meglio questa opportunità, come fa photojojo.com, dove gli oggetti saltano nel carrello e si possono manovrare delle leve a caso per spostarsi nella pagina.

Animare le UI “like a pro”#section7

Identificare i posti in cui l’animazione ha una sua utilità è solo metà del lavoro. Se vogliamo usare le animazioni nei nostri design, dobbiamo crearle bene. Pochissimi web designer hanno anche una formazione come motion designer, ma se evitiamo questi errori comuni, saremo a buon punto nel nostro percorso per diventare esperti di animazioni della UI.

Se dovessimo animare ogni singolo momento in cui avviene un cambiamento in una data esperienza, finiremmo col creare un caos intollerabile, ma ne corre tra il non avere alcuna animazione e animare tutto. Abbiamo molto spazio per sperimentare.

Un modo per utilizzare l’animazione abilmente consiste nel riservarla per i momenti più importanti dell’interazione, quelli più critici per il messaggio principale o quelli che hanno maggior bisogno di quel poco di attenzione in più da parte degli utenti. Per esempio, la dashboard di Fitbit sul web e nella the app usa le animazioni per sottolineare gli aggiornamenti ai dati degli utenti e i nuovi “achievement” e per poco altro. È una scommessa piuttosto cauta sul fatto che queste siano le cose più importanti che chiunque controllerà sulla propria dashboard Fitbit. Ed è un buon posto da cui iniziare, perché l’animazione ha il grande potere di catturare l’attenzione quando si ha a che fare con la gerarchia.

L’animazione non dovrebbe mai ostacolare il completamento di un task. Perfino le animazioni più belle diventano rapidamente noiose se ci rallentano. Il recente redesign di Square mette la navigazione del sito in una modale che si muove verso il suo posto. Per usare la navigazione si deve aspettare che la modale si apra e poi aspettare di nuovo affinché le opzioni di menu si sistemino al loro posto con una dissolvenza. Non direi mai che la navigazione è un posto off-limits per le animazioni, ma questo particolare esempio mette una barriera troppo alta tra noi e il menu.

Ovviamente, si tratta della mia opinione, a voi potrebbe piacere l’effetto. “Troppo” è un punto di vista naturalmente soggettivo, facile da respingere. Se non sono d’accordo con la vostra visione, che vadano al diavolo, giusto? Forse, ma l’animazione è un po’ diversa perché ha il potenziale per fare davvero danni, come quando qualcuno ha detto che le transizioni in iOS7 li faceva stare fisicamente male. Mentre questi casi possono essere rari , specialmente quando progettate qualcosa di meno onnipresente rispetto a un sistema operativo, c’è una ragione per cui il WCAG include delle linee guida specifiche per le animazioni.

La temporizzazione della vostra animazione può fare la differenza tra una buona interazione e una pessima. L’easing, o timing-function in termini CSS, è cruciale per il modo in cui l’animazione viene percepita. Per esempio, in CSS, “ease-in” significa che l’animazione comincia con una velocità più lenta, indipendentemente da quale sia la durata totale. Questo può far sembrare che l’animazione ci metta di più o che esiti prima di reagire, appare lenta e può creare confusione: “Quello su cui ho cliccato era un pulsante o no?”. Raccomando semplicemente di evitare il valore di “ease-in” nelle funzioni di temporizzazione di elementi come i pulsanti.

Anche la miglior animazione di UI messa nel posto giusto può non andar bene se non sta bene con il messaggio generale. Personalità contrastanti risaltano come un dito in un occhio. Per esempio: animazioni molleggiate e vivaci funzionano bene nel contesto di Dots, dove corrispondono al feeling del gioco stesso, ma risultano fuori luogo su apple.com, dove il movimento giocoso e molleggiato si scontra con il brand sofisticato e raffinato di Apple. L’animazione comprime moltissima comunicazione in un piccolo spazio. Se non prendiamo in considerazione quello che comunica il movimento che abbiamo scelto, abbiamo perso una grande opportunità.

Prototipate, prototipate, prototipate#section8

Le buone animazioni dell’UI hanno uno scopo, una personalità e sono allineate con il messaggio: praticamente, calzano a pennello. È un’asticella piuttosto alta a cui aspirare e le migliori, quelle con cui è un piacere interagire, sono fatte con stile e misura. Questo può accadere solo quando l’animazione fa parte del processo di design.

Quando aggiungete le animazioni dell’UI al vostro lavoro, la prototipazione e le iterazioni sono la vostra arma segreta. La pratica rende perfetti, ovviamente, ma ancora più importante: è davvero impossibile sapere se un’animazione sta bene nel contesto senza provarla. Più rapido è il metodo di prototipizzazione, meglio sarà. Realizzate un esempio “quick and dirty” usando quello con cui vi trovate più a vostro agio (CSS, After Effects, Edge Animate o un altro strumento). Il codice pronto per l’ambiente di produzione o un qualunque altro tipo di codice non conta in questo caso. L’obiettivo è di avere rapidamente qualcosa di concreto da guardare e provare. Mettetevi nei panni dei vostri utenti e fatevi delle domande:

• L’animazione dà informazioni utili sull’interazione?
• Vi sembra che reagisca a voi come utente?
• Che tipo di risposta emotiva scatena secondo voi?

L’animazione che vale la pena aggiungere dovrebbe rendere le cose migliori in qualche modo: pensate al “progressive enrichment” o a rendere le interazioni più ricche per i browser che le supportano. Se non aggiungono nulla, sia in termini d’uso che di stile, lasciatele perdere. È anche abbastanza probabile che una parte del vostro audience non avrà un browser in grado di gestire le animazioni, quindi dobbiamo progettare anche per quella possibilità.

In effetti, il panorama dei browser è un’altra ragione molto persuasiva per testare da subito le vostre idee. Il browser è responsabile per l’esecuzione delle animation e transition CSS. Si tratta simultaneamente del loro migliore e peggior aspetto. I diagrammi di caniuse.com sia per animations sia per transitions mostrano un impressionante numero di box verdi indicanti il supporto, il che è grandioso. Sfortunatamente, “support” non significa comportamento o performance uniformi. Sapendo quali proprietà i browser animano più efficientemente può essere un buon inizio aggirare i comportamenti strani che si possono incontrare, ma non c’è alcun sostituto ad un vero e proprio test.

Andate ed animate!#section9

L’animazione dell’UI è un potente strumento completamente a disposizione di noi web designer; ci permette di dare lo stesso livello di raffinatezza alle interazioni web a cui siamo abituati nelle app native meglio progettate.

In realtà, scommetto che possiamo rendere il web addirittura migliore di tutte quelle app. Sta a noi designer cominciare a sperimentare e ad esplorare dove e quando le animazioni siano più utili per il nostro lavoro. Abbiamo gli strumenti, adesso vediamo cosa riusciamo a tirare fuori!

Illustrazioni: {carlok}