4 modi per utilizzare l'animazione funzionale nella progettazione dell'interfaccia utente
Solo un decennio fa le interfacce utente che utilizzavano le animazioni venivano evitate, essendo più spesso associate a popup e annunci lampeggianti, ma questo è cambiato. Oggi i dettagli del design e dell'animazione dell'interazione fanno una differenza fondamentale sui siti Web moderni e nelle app moderne. Questo spostamento mentale è chiaramente espresso nella dichiarazione di Zurb:
Non stiamo più solo progettando schermi statici. Stiamo progettando per come l'utente ottiene da quegli schermi per visualizzare effettivamente i contenuti.
Se vogliamo progettare prodotti digitali migliori, allora abbiamo bisogno di abbracciare la natura interattiva dell'app e dei siti web fin dall'inizio.
Perché funziona l'animazione
Il movimento, per sua natura, ha il più alto livello di risalto in un'interfaccia utente. Né la copia di testo né le immagini statiche possono competere con il movimento. I nostri occhi sono cablati per prestare attenzione agli oggetti in movimento: è quasi un riflesso. Possiamo approfittarne con questa animazione funzionale.
Cos'è l'animazione funzionale?
L'animazione funzionale è un'animazione sottile incorporata nell'interfaccia utente come parte della funzionalità di tale design. Ha scopi molto chiari e logici:
- Ridurre il carico cognitivo
- Prevenire il cambiamento di cecità
- Stabilire un richiamo migliore nelle relazioni spaziali
In un approccio di progettazione centrato sull'uomo, in cui l'utente è l'obiettivo principale, un'interfaccia utente deve essere intuitiva, reattiva e umana. L'animazione funzionale ti aiuta a raggiungere questi obiettivi.
Come l'animazione funzionale migliora UX
La nostra esperienza e l'impressione di un'app o di un sito sono modellate da una combinazione di fattori e l'interazione gioca un ruolo fondamentale. Aggiungere movimento al nostro design può essere significativo e funzionale, quando troviamo le giuste circostanze. Un'animazione funzionale ben ponderata e testata ha il potenziale per soddisfare molteplici funzioni, tra cui:
1. Feedback visivo
Il buon design dell'interazione fornisce feedback. Il feedback riconosce che il sistema ha ricevuto un'azione da parte dell'utente e dimostra il risultato dell'interazione indipendentemente dal fatto che abbia avuto successo o meno. L'animazione in questo gruppo deve essere molto sottile e deve essere progettata in modo reattivo.
Pulsante Feedback
Nella vita reale, i pulsanti rispondono alla nostra interazione, ed è così che ci aspettiamo che le cose funzionino. Per essere prevedibile per l'utente, l'interfaccia digitale dovrebbe agire allo stesso modo.
Fonte: Jaron Pulver
Visualizza il risultato di un'azione
Seguendo lo spettacolo principale, non dire , puoi usare il feedback animato per evidenziare che qualcosa è andato storto. Ad esempio, animazione di scuotimento visuale su una passcode errata. È come scuotere la testa come per dire "no, riprova". L'utente nota l'animazione e capisce immediatamente lo stato corrente.
Puoi anche rinforzare le azioni che un utente sta eseguendo. Nell'esempio seguente, quando l'utente fa clic su "Invia", appare brevemente uno spinner prima che l'app mostri lo stato di successo. L'animazione del segno di spunta fa sentire l'utente come se il processo fosse terminato con successo.
Credito immagine: Colin Garven
2. Modifiche allo stato ammorbidente
Altri buoni posti per aggiungere animazioni nel design sono i momenti di cambiamento. I cambiamenti di stato nell'interfaccia utente, in particolare sul web, spesso comportano tagli duri che possono renderli difficili da seguire. Niente è più innaturale di un cambiamento improvviso. Le modifiche brusche in un'interfaccia sono difficili da elaborare per gli utenti. Questi momenti di cambiamento dovrebbero essere attenuati aggiungendo alcune animazioni all'interfaccia utente.
Stabilire collegamenti
Le transizioni animate dovrebbero fungere da intermediari tra i diversi stati dell'interfaccia utente, aiutando gli utenti a capire cosa sta succedendo quando lo stato dello schermo cambia. L'utente segue semplicemente il movimento e comprende in che modo i due stati dell'interfaccia utente sono correlati.
Crediti immagine: Anish Chandran
Funziona bene anche per associare le viste delle miniature e dei dettagli:
La carta si anima dalla sua posizione originale in una posizione nel modale, rendendo chiaro che si tratta dello stesso oggetto, solo con maggiori dettagli.
Crediti immagine: Charles Patterson
Chiama l'attenzione ai cambiamenti
L'animazione può aiutare l'occhio a vedere da dove proviene un nuovo oggetto alla sua rivelazione o dove un oggetto nascosto va e può essere trovato di nuovo. Possiamo usarlo per richiamare l'attenzione sui cambiamenti che nascondono o rivelano informazioni, come l'apertura di cassetti laterali del contenuto. Nell'esempio seguente, la navigazione principale scivola via facendo clic sull'icona dell'hamburger. Quel movimento ti fa sapere che il menu principale non è scomparso.
Crediti immagine: Tamas Kojo
3. Visibilità dello stato del sistema
Come una delle prime euristiche di Jakob Nielsen per l'usabilità, la visibilità dello stato del sistema rimane tra i principi più importanti nella progettazione dell'interfaccia utente. Per gli utenti, è molto importante conoscere e comprendere il loro contesto attuale nel sistema in qualsiasi momento.
Indicatori di progresso
I processi di caricamento e scaricamento dei dati sono grandi opportunità per un'animazione funzionale. Le barre di caricamento animate stabiliscono un'aspettativa per la velocità con cui l'azione verrà elaborata. L'animazione può essere utile in caso di guasti. Anche una notifica non gradita, come un download di dati fallito, dovrebbe essere consegnata in un modo carino.
Crediti immagine: xjw
Tirare per aggiornare
Il tempo di attesa di un utente inizia nel momento in cui inizia un'azione, e il caso peggiore è quando non hanno alcuna indicazione che il sistema lo abbia ricevuto. L'azione di rinnovamento dovrebbe avere una reazione immediata . È essenziale fornire un feedback visivo subito dopo aver ricevuto la richiesta dall'utente per indicare che il processo è stato avviato. L'animazione ti aiuterà in questo.
Crediti immagine: Tony Babel
4. Animazione esplicativa
A volte gli utenti hanno bisogno di un piccolo aiuto in più per capire il flusso dell'utente o come interagire con determinati elementi dell'interfaccia. Ciò è particolarmente vero per le interfacce utente che contengono funzionalità o interazioni nuove o sconosciute per l'utente.
onboarding
L'onboarding degli utenti richiede una UX impeccabile e le animazioni in un flusso di onboarding hanno un enorme impatto sul modo in cui gli utenti che si avventureranno per la prima volta interagiranno con un'app. L'animazione ti dà la libertà illimitata di trasmettere qualsiasi cosa, non importa quanto sia complessa o asciutta l'argomento, in modo divertente.
Crediti immagine: Anastasiia Andriichuk
Suggerimenti visivi
L'animazione può offrire alcuni utili segnali visivi. L'animazione esplicativa viene spesso vista quando una pagina viene aperta per la prima volta e l'animazione mostra come devono essere usati determinati elementi della pagina. Questo tipo di animazione può essere trovato in giochi che spesso si adattano molto bene alla rivelazione progressiva, rivelando meccaniche di gioco man mano che ci si sposta in un gioco. Tali suggerimenti vengono attivati solo quando l'utente raggiunge il punto appropriato nella propria esperienza.
Conclusione
L'animazione è uno strumento potente se utilizzata in modo sofisticato.
Abbiamo bisogno di abbracciare il movimento fin dall'inizio e pensarlo come una parte naturale del nostro design, perché il design è più che una semplice presentazione visiva. Come ha detto Steve Jobs sul design: non è solo quello che sembra e sembra. Il design è come funziona.