Credito: Unsplash

Come aumentare di livello le tue abilità di progettazione

Parte 4: Fondamenti nell'animazione dell'interfaccia

La rete moderna consente ai progettisti di giocare con un'ampia gamma di motion design. Ecco alcuni principi guida per lavorare con l'animazione dell'interfaccia.

Principio 1: torna all'animazione tradizionale

Una risorsa di riferimento per gli animatori si trova nei 12 Principi di base dell'animazione, introdotti per la prima volta nel libro The Illusion of Life: Disney Animation. È stato creato dagli animatori della Disney Ollie Johnston e Frank Thomas, due membri di una squadra di animatori principali definiti da Walt Disney come i "Nove vecchi" che hanno creato i cartoni animati più famosi della Disney.

Anche se i principi dell'animazione tradizionale possono essere esplorati in modo più dettagliato nel libro, sono un ottimo punto di partenza per passare all'animazione digitale. I principi includono Timing, Anticipation, Follow Through e altro ti aiutano a ottenere un movimento credibile, naturale e fluido.

Principio 2: Motion dovrebbe essere legato a un obiettivo dell'utente

Pensa al movimento è solo un altro strumento di progettazione nella tua casella degli strumenti UX: deve essere realizzato in modo da aiutare il tuo utente a raggiungere i propri obiettivi. Il motion design non deve essere invadente o eccessivo. In altre parole, se ostacola l'utente nello svolgere un compito o impiega più secondi per quello che dovrebbe essere un compito rapido, allora diventa inutile e fastidioso.

Il movimento dell'interfaccia utente complementare a un'interazione è un buon esempio di movimento eseguito correttamente.

Ad esempio, è necessario un indicatore di caricamento e parte inevitabile di una transizione di pagina, il movimento potrebbe essere utilizzato per creare una versione più coinvolgente o marcata dell'indicatore di pagina. Questa interazione non richiede più tempo di quanto avrebbe altrimenti (senza movimento).

Oltre a ciò che l'utente sta cercando di realizzare, i progettisti dovrebbero riconoscere gli obiettivi di un'efficace motion design.

Cosa può realizzare un motion design efficace?

1. Fornire contesto

Il movimento può aiutare a fornire un contesto durante le transizioni. Può attirare l'attenzione su una particolare posizione o aiutare l'utente a concentrarsi su un'area della pagina come là come transizione altrove.

Ad esempio, quando si minimizza un browser Web, l'interazione si riduce letteralmente all'icona che si trova sul dock. Ciò consente all'utente di sapere dove può espandere nuovamente la finestra una volta che è stata ridotta a icona.

2. Comunica (uno stato, cosa accadrà dopo, ecc.)

Il movimento può comunicare uno stato o preparare il terreno per ciò che accadrà dopo.

Ad esempio, la schermata di accesso per macOS si scuoterà visibilmente se si digita male la password. Ciò indica un errore nel campo del modulo riportato nella schermata di accesso dell'iPhone. Ciò comunica un errore nella convalida del modulo che richiede agli utenti di riprovare.

3. Cambia percezione

Un dettaglio di movimento ben posizionato su un'interazione può dare l'impressione di velocità e fluidità.

Mentre il tempo effettivo per un caricamento dello schermo può essere lo stesso, l'animazione aiuta a smussare gli spazi vuoti e fornisce transizioni ponderate su come si spostano gli elementi della pagina, il che dà una percezione della velocità.

Il motion design può aiutare a rendere le cuciture / le transizioni più piacevoli in quanto spesso non è possibile avere una vera esperienza "continua".

Un esempio può essere trovato nei pulsanti rialzati del design del materiale, quando toccato, il movimento mostra come sono organizzati gli elementi e suggerisce cosa accadrà dopo. Rafforza anche la gerarchia degli elementi della pagina e focalizza la tua attenzione su dove puoi svolgere più facilmente il tuo prossimo compito.

Principio 3: consentire la disattivazione del movimento

Non tutti potranno apprezzare il motion design. Coloro che sono ipovedenti o che hanno problemi innescati dal movimento potrebbero non essere in grado di apprezzare i segnali visivi presenti nell'interfaccia utente interattiva. Pertanto, è importante utilizzare il testo alternativo al posto dei segnali visivi o avere qualche altra opzione di esclusione se l'intero pezzo di design utilizza molto movimento. Per i tuoi utenti su screen reader, il testo alternativo potrebbe essere l'unico modo per trarne significato dalle immagini o dai dettagli di movimento (se questi sono legati ad azioni / attività chiave) e renderà il tuo design più inclusivo per tutti.

Conclusione

Motion è un altro strumento coinvolgente e potente per aiutarti a migliorare la tua esperienza utente e rendere più avvincente la narrazione. Progetta per un movimento più accessibile e mirato utilizzando i principi di cui sopra e realizza animazioni interattive ponderate che funzionano con i tuoi utenti e non contro di loro.