Avvincente e in movimento: una guida ai principi di Motion Design
Pubblicato: 2022-03-11Il movimento ha un profondo impatto sull'esperienza utente dei prodotti digitali, ma se gli elementi dell'interfaccia non mostrano i principi di base del design del movimento, l'usabilità è minata. Nel contesto delle interfacce utente, il movimento è più di un contorno visivo. È una forza irresistibile che rafforza il coinvolgimento del prodotto ed estende la portata della comunicazione di design.
Il nostro mondo è quello del movimento. Anche nei momenti fermi, le foglie tremano e i polmoni si dilatano. Nel regno della progettazione di prodotti digitali, sembrerebbe che il movimento sia una seconda natura, un'estensione della quotidianità da sfruttare con poco sforzo. Se solo fosse vero.
Chiedi a chiunque abbia elementi animati dell'interfaccia utente per la prima volta. Ore di sforzo producono risultati amatoriali. Qualcosa di semplice come una carta che scivola sullo schermo sembra imbarazzante. Perché?
In teoria, spostare gli elementi dell'interfaccia utente è facile. Definisci punti su un percorso predeterminato e il software interpola gli spazi vuoti. In realtà, non funziona in questo modo. Gli strumenti e le tecniche sono essenziali, ma traggono il loro potere dai principi. Se il movimento deve migliorare l'usabilità dei prodotti digitali, deve basarsi su regole di comportamento immutabili che si applicano a un numero infinito di casi d'uso.
Le origini del Motion Design
Il connubio tra motion design e UX è relativamente nuovo, ma le sue radici affondano nella Disney. Frank Thomas e Ollie Johnston sono stati tra gli animatori più apprezzati di Walt Disney e hanno contribuito in modo chiave a classici come Pinnochio , Bambi e Fantasia . I loro 12 principi di base dell'animazione rimangono influenti nella grafica animata per film, televisione e contenuti digitali.
I principi Disney distillano le leggi essenziali del movimento fisico per il bene della narrazione animata. Consentono ai personaggi disegnati di muoversi ed emettere emozioni, ma non rispondono adeguatamente alle esigenze di movimento interattivo delle moderne interfacce utente.
I designer contemporanei hanno tentato di colmare questa lacuna. Uno degli esempi più illustrativi è il 10 Principles of Motion Design , un adattamento Disney dell'esperto di animazione Jorge R. Canedo Estrada. Tuttavia, i risultati richiedono una traduzione se devono essere applicati in modo olistico alla progettazione di prodotti digitali.
Il tentativo più ambizioso di riorientare i principi di movimento attorno agli elementi dell'interfaccia utente interattiva (e il loro significato UX) è UX in Motion Manifesto di Issara Willenskomer. La sua profondità è sbalorditiva, ma non è una lettura leggera.
Nello stabilire i 12 principi di UX in Motion , Willenskomer:
- Distingue il motion design dall'animazione dell'interfaccia utente
- Spiega come il movimento aiuta l'usabilità
- Decomprime il funzionamento interno dei comportamenti di movimento principali
Motion Design e UX: importanti distinzioni
Prima di affrontare i principi del motion design, è importante evidenziare le distinzioni chiave che compaiono nel manifesto di Willenskomer.
Il movimento è più di un ornamento
Il design del movimento non è sinonimo di animazione dell'interfaccia utente. Questo è fondamentale perché l'animazione dell'interfaccia utente è quasi sempre trattata come un ripensamento estetico senza alcuna influenza sull'esperienza utente (tranne per aggiungere fascino). Il movimento non è un ornamento, è un comportamento e i comportamenti possono solo aiutare o ostacolare l'esperienza dell'utente.
Due tipi di interazione: in tempo reale e non in tempo reale
Il motion design si occupa di due interazioni fondamentali: in tempo reale e non in tempo reale.
- Le interazioni in tempo reale forniscono un feedback immediato quando gli utenti manipolano gli elementi dell'interfaccia utente sullo schermo. In altre parole, i comportamenti di movimento rispondono istantaneamente all'input dell'utente.
- Le interazioni non in tempo reale si verificano dopo l'input dell'utente, il che significa che gli utenti devono fare una breve pausa e osservare il comportamento di movimento risultante prima di continuare.
Il movimento supporta l'usabilità
Il motion design deve supportare l'usabilità in quattro modi distinti.
- Aspettativa: quando gli utenti interagiscono con gli elementi dell'interfaccia utente, quali comportamenti di movimento si aspettano di vedere? Il movimento soddisfa le aspettative o crea confusione?
- Continuità: le interazioni producono comportamenti di movimento coerenti durante l'esperienza dell'utente?
- Narrativa: le interazioni e i comportamenti di movimento che attivano sono legati a una progressione logica di eventi che soddisfa le intenzioni dell'utente?
- Relazione: in che modo gli attributi spaziali, estetici e gerarchici degli elementi dell'interfaccia utente sono correlati tra loro e influenzano il processo decisionale dell'utente? In che modo il movimento influisce sulle relazioni tra i vari elementi esistenti?
12 Principi di Motion Design per prodotti digitali
1. Alleggerimento
L'allentamento imita il modo in cui gli oggetti del mondo reale accelerano e rallentano nel tempo. Si applica a tutti gli elementi dell'interfaccia utente che mostrano movimento.
L'opposto dell'andamento è il movimento lineare. Gli elementi dell'interfaccia utente che mostrano il movimento lineare vanno da stazionari a piena velocità e da piena velocità a stazionari, istantaneamente. Tale comportamento non esiste da nessuna parte nel mondo fisico e sembra fermarsi agli utenti.
2. Compensazione e ritardo
Quando più elementi dell'interfaccia utente si muovono contemporaneamente e velocità, gli utenti tendono a raggrupparli insieme e trascurano la possibilità che ogni elemento possa avere la propria funzionalità.
L'offset e il ritardo creano una gerarchia tra gli elementi dell'interfaccia utente che si muovono contemporaneamente e comunicano che sono correlati, ma distinti. Invece della sincronizzazione completa, i tempi, la velocità e la spaziatura degli elementi sono sfalsati, determinando un sottile effetto "uno dopo l'altro".
Mentre gli utenti viaggiano tra gli schermi, l'offset e il ritardo segnalano che esistono molteplici opzioni di interazione.
3. Genitorialità
Parenting collega le proprietà di un elemento dell'interfaccia utente alle proprietà di altri. Quando una proprietà nell'elemento padre cambia, cambiano anche le proprietà collegate degli elementi figlio. Tutte le proprietà degli elementi possono essere collegate tra loro.
Ad esempio, la posizione di un elemento padre può essere legata alla scala di un elemento figlio. Quando l'elemento padre si sposta, la dimensione dell'elemento figlio aumenta o diminuisce.
La genitorialità crea relazioni tra gli elementi dell'interfaccia utente, stabilisce la gerarchia e consente a più elementi di comunicare con gli utenti contemporaneamente. Per questo motivo, la genitorialità è più impattante se utilizzata nelle interazioni in tempo reale.
4. Trasformazione
La trasformazione si verifica quando un elemento dell'interfaccia utente si trasforma in un altro. Ad esempio, un pulsante di download si trasforma in una barra di avanzamento, che si trasforma in un'icona di completamento.
Dal punto di vista della UX, la trasformazione è un modo efficace per mostrare agli utenti il loro stato in relazione a un obiettivo (Visibilità dello stato del sistema). Ciò è particolarmente utile quando la progressione tra gli elementi dell'interfaccia utente è collegata a un processo con un inizio e una fine (ad esempio, il download di un file).
5. Cambio di valore
Le rappresentazioni di valore (numeriche, testuali o grafiche) sono abbondanti nelle interfacce digitali e compaiono in prodotti che vanno dalle app bancarie ai calendari personali ai siti di e-commerce. Poiché queste rappresentazioni sono legate a set di dati esistenti nella realtà, sono soggette a modifiche.
Il cambiamento di valore comunica la natura dinamica delle rappresentazioni dei dati e informa gli utenti che i dati sono interattivi e possono essere influenzati in una certa misura. Quando i valori vengono introdotti senza movimento, la disponibilità degli utenti a interagire con i dati diminuisce.
6. Mascheratura
Il mascheramento è la rivelazione strategica e l'occultamento di parti di un elemento dell'interfaccia utente. Alterando la forma e la scala del perimetro di un elemento, il mascheramento segnala un cambiamento di utilità pur consentendo all'elemento stesso di rimanere identificabile. Per questo motivo, elementi visivi dettagliati come fotografie e illustrazioni sono candidati ideali.
Dal punto di vista dell'usabilità, i progettisti possono implementare il mascheramento per mostrare agli utenti che stanno procedendo attraverso una serie di interazioni.
7. Sovrapposizione
Nello spazio 2D non c'è profondità e gli elementi dell'interfaccia utente possono spostarsi solo lungo l'asse X o Y. La sovrapposizione crea l'illusione della distinzione tra primo piano e sfondo nello spazio 2D delle interfacce utente. Simulando la profondità, la sovrapposizione consente agli elementi di essere nascosti e rivelati in base alle esigenze dell'utente.
La gerarchia delle informazioni è una considerazione importante quando si utilizza la sovrapposizione. Ad esempio, la prima cosa che gli utenti dovrebbero vedere in un'app per prendere appunti è un elenco delle loro note. Quindi, l'overlay potrebbe essere utilizzato per svelare le opzioni secondarie per ogni messaggio, come Elimina o Archivia .
8. Clonazione
La clonazione è un comportamento di movimento in cui un elemento dell'interfaccia utente si divide in altri. È un modo intelligente per evidenziare informazioni importanti o opzioni di interazione.
Quando gli elementi dell'interfaccia utente si materializzano all'interno di un'interfaccia, hanno bisogno di un chiaro punto di origine che si colleghi a un elemento già sullo schermo. Se gli elementi semplicemente esplodono o svaniscono dal nulla, agli utenti manca il contesto necessario per interazioni sicure.
9. Oscuramento
Immagina una porta in vetro satinato. Richiede interazione per aprirsi, ma è possibile discernere (in una certa misura) ciò che attende dall'altra parte.
L'oscuramento funziona allo stesso modo. Presenta agli utenti un'interfaccia che richiede l'interazione rivelando contemporaneamente un accenno dello schermo da seguire. I menu di navigazione, le schermate del codice di accesso e le finestre di cartelle/file sono esempi comuni.
10. Parallasse
Il parallasse viene visualizzato quando due (o più) elementi dell'interfaccia utente si muovono contemporaneamente ma a velocità diverse. Anche in questo caso, l'intento è stabilire una gerarchia.
- Gli elementi interattivi si muovono più velocemente e appaiono in primo piano.
- Gli elementi non interattivi si muovono più lentamente e passano in secondo piano.
Parallasse guida gli utenti verso elementi dell'interfaccia utente interattivi, consentendo al contempo agli elementi non interattivi di rimanere sullo schermo e preservare l'unità di progettazione.
11. dimensionalità
La dimensionalità fa sembrare che gli elementi dell'interfaccia utente abbiano più lati interattivi, proprio come gli oggetti nel mondo fisico. Il comportamento si ottiene facendo apparire gli elementi come se fossero pieghevoli, ribaltabili, fluttuanti o dotati di proprietà di profondità realistiche.
In quanto dispositivo narrativo, la dimensionalità implica che i diversi lati di un elemento dell'interfaccia utente siano collegati e consenta transizioni dello schermo senza interruzioni.
12. Carrello e Zoom
Dolly e zoom consentono agli utenti di "viaggiare" spazialmente attraverso gli elementi dell'interfaccia utente o di aumentare la loro scala per rivelare maggiori livelli di dettaglio.
- Dolly: Dolly si verifica quando il punto di vista dell'utente si avvicina (o si allontana da) un elemento dell'interfaccia utente. Immagina una persona con una macchina fotografica che si avvicina a un fiore per ottenere una ripresa più ravvicinata.
- Zoom: con lo zoom, il punto di vista dell'utente e l'elemento dell'interfaccia utente rimangono fissi, ma le dimensioni dell'elemento aumentano (o diminuiscono) all'interno dello schermo dell'utente. Ora immagina che la persona rimanga ferma e utilizzi la funzione di zoom della fotocamera per far sembrare il fiore più grande.
Il movimento è comunicazione
Le esperienze interattive richiedono movimento in tutte le sue forme arzillo e sottile. Quando i principi del motion design vengono rispettati, anche gli elementi dell'interfaccia utente più rudimentali diventano agenti sofisticati della comunicazione umana. Quando i principi vengono ignorati, il movimento incarna caratteristiche che non si trovano nel mondo naturale. Nessuna quantità di splendore estetico può superare la goffaggine che ne deriva.
Il rapporto tra motion design e UX dei prodotti digitali sta maturando rapidamente. Un approccio di principio al movimento impedisce l'indebito affidamento sull'utilità fugace di tendenze, strumenti e tecniche. Meglio ancora, supera il divario tra il movimento astratto degli elementi su schermi 2D e la percezione del movimento in un mondo 3D.
Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.
• • •
Ulteriori letture sul blog di Toptal Design:
- Animazione Web nell'era post-flash
- The Designer's Edge: una panoramica dei plugin di Photoshop
- UX Design Trends Retrospettiva 2019
- Familiarizzare – Una guida ai flussi di onboarding degli utenti
- Principi di progettazione dell'UX mobile