Le transizioni sono un modo efficace per comunicare una modifica nell'interfaccia utente. Possono essere utilizzati nelle app per scaricare un sacco di lavoro cognitivo nella corteccia visiva: aiutano a trasportare gli utenti tra i contesti di navigazione, spiegano i cambiamenti nella disposizione degli elementi su uno schermo e rafforzano la gerarchia degli elementi. Di conseguenza sono un elemento essenziale del design dell'interazione.

La transizione animata di successo possiede le seguenti cinque caratteristiche:

1. La buona animazione dell'interfaccia utente è naturale

I cambiamenti di stato nell'interfaccia utente comportano spesso tagli di default, che possono renderli difficili da seguire. Nel mondo reale, molte cose non appaiono o scompaiono immediatamente. Quando qualcosa ha due o più stati, i cambiamenti tra stati saranno molto più facili per gli utenti per capire se le transizioni sono animate invece di essere istantanee. Diamo un'occhiata a un esempio qui sotto in cui l'utente seleziona un elemento in un elenco per ingrandire la sua vista dettagliata. Durante l'espansione, la piccola carta si muove in un arco verso la sua destinazione mentre si espande in una carta più grande. Questo movimento è ispirato alle forze del mondo reale.

7

2. Viene attivata l'animazione dell'interfaccia utente effettiva

Una transizione animata ben organizzata guida l'attenzione dell'utente e chiarisce il cambiamento di stato. Questa caratteristica è direttamente correlata alla focalizzazione dell'utente e alla continuità. Una buona transizione aiuta a indirizzare l'attenzione dell'utente verso il punto giusto al momento giusto, mette l'accento sugli elementi giusti a seconda di quale sia l'obiettivo. Nell'esempio seguente, il pulsante di azione mobile (FAB) si trasforma in elementi di navigazione dell'intestazione composti da tre pulsanti. L'utente alla prima esperienza non può realmente prevedere un'interazione che sta per accadere, ma una transizione correttamente animata aiuta l'utente a rimanere orientato e a non sentire che il contenuto è improvvisamente cambiato. Questa transizione aiuta a guidare l'utente verso il prossimo passo di un'interazione.

2

3. Le migliori animazioni UI sono associative

Le transizioni dovrebbero illustrare come gli elementi sono collegati. Le transizioni buone associano le superfici appena create all'elemento o all'azione che le crea. La logica alla base della connessione associativa è quella di aiutare l'utente a comprendere la modifica appena avvenuta nel layout della vista e ciò che ha attivato la modifica.

Di seguito puoi vedere due esempi di una transizione di livello. Nel primo esempio, il nuovo livello appare lontano dal punto di contatto che lo ha attivato, interrompendo la sua relazione con il metodo di input.

3

Nel secondo esempio, il nuovo livello viene visualizzato direttamente dal punto di tocco. Così legando l'elemento al punto di contatto.

4

Un altro esempio può essere trovato in Mac OS che utilizza una transizione animata quando si minimizza una finestra. Questa animazione collega il primo stato al secondo stato.

5

4. L'animazione UI popolare è veloce

Se c'è un solo principio dell'animazione a cui tieni a cuore, dovrebbe essere il momento giusto. Il tempismo è probabilmente una delle considerazioni più importanti quando si progettano le transizioni. L'animazione dovrebbe essere veloce e precisa, con un intervallo di tempo minimo o nullo tra l'azione di avvio dell'utente e l'inizio dell'animazione. Inoltre, un utente non deve attendere la fine dell'animazione. Nell'esempio seguente, l'animazione lenta crea un ritardo non necessario e allunga la durata.

6
1

Quando gli elementi si spostano tra gli stati, il movimento dovrebbe essere abbastanza veloce da non causare alcuna attesa, ma abbastanza lento da consentire la comprensione della transizione. Affinché un'animazione trasmetta in modo efficace una relazione causa-effetto tra gli elementi dell'interfaccia utente, l'effetto deve iniziare entro 0,1 secondi dall'azione dell'utente iniziale per mantenere la sensazione di manipolazione diretta. Cerca di mantenere la durata dell'animazione uguale o inferiore a 300 ms, poiché le transizioni veloci fanno perdere meno tempo per gli utenti. Provalo con i tuoi utenti per vedere cosa è tollerabile.

5. La migliore animazione UI è chiara

È un errore comune sovraccaricare le interfacce utente con animazioni o creare interazioni troppo complesse. Troppe modifiche nell'interfaccia utente possono lasciare un utente disorientato e ci vuole tempo per riprendersi. Ricorda che ogni movimento sullo schermo attira l'attenzione, quindi troppa animazione crea allo stesso tempo il caos.

Le transizioni dovrebbero evitare di fare troppo in una volta perché possono creare confusione quando più elementi devono spostarsi in direzioni diverse. Ricorda, meno è più per quanto riguarda l'animazione e le transizioni in particolare. Qualsiasi cosa che, se rimossa, renderebbe una UI più pulita è quasi sicuramente una buona idea. Quando una superficie cambia forma e dimensione, devi mantenere un percorso chiaro per la vista successiva. Le transizioni complesse dovrebbero mantenere visibile un singolo elemento. Questo aiuta a mantenere l'utente orientato.

Transizioni e accessibilità

Poiché le transizioni riguardano la comunicazione visiva, per impostazione predefinita non sono accessibili agli utenti con disabilità visive. Dovresti fornire contenuti alternativi per questo gruppo di utenti. webacessibility.com Le migliori pratiche per l'animazione offrono suggerimenti su quando fornire contenuti alternativi per la tecnologia assistiva.

Conclusione

Quando progetti le transizioni, concentrati solo sulle cose pratiche che fanno per l'utente. Se la tua app o il tuo sito è divertente e giocoso o serio e diretto, l'utilizzo di transizioni significative può aiutarti a fornire un'esperienza di coesione chiara e veloce.