Principi di animazione dell'interfaccia utente: Disney is Dead

La fotografia era considerata la morte della pittura (primo Dagherrotipo)

(Se desideri ricevere i miei articoli sull'animazione dell'interfaccia utente via email e essere aggiunto alla mia newsletter, fai clic qui.)

Un nuovo mezzo

Quando Paul Delaroche incontrò un Daguerreotype intorno al 1839, dichiarò famoso: "Da oggi, la pittura è morta!"

Fino a quel momento, l'unico modo per documentare visivamente il mondo esterno era attraverso l'uso di un mezzo applicato su una superficie a mano. Secoli di artigianato in varie discipline hanno portato alla scoperta di numerosi principi e tecniche su vari media. In tutte le culture, e con il passare delle epoche, lo stile e il linguaggio visivo di come "devono apparire" le rappresentazioni visive si sono evoluti: i modelli di design originali.

I primi fotografi, tentando di far assomigliare le loro immagini ai dipinti popolari del giorno, usavano spesso una combinazione di tecniche di illuminazione e stampa per ammorbidire le loro immagini e creare un aspetto pittorico. La loro comprensione di ciò di cui era capace il mezzo fotografico era intimamente collegata, influenzata e limitata dalla loro comprensione del mondo della pittura.

Ci sono voluti quasi cento anni prima che fotografi come Ansel Adams, Imogen Cunningham, Edward Weston e altri nel "Gruppo f / 64" facessero importanti passi avanti nel linguaggio visivo che distingue la fotografia dalla pittura come un mezzo unico - con il suo proprio visual linguaggio e principi e così facendo hanno rivoluzionato il dominio della fotografia.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney ha risolto un problema diverso

Fortunatamente, ci troviamo a una tale rivoluzione nell'animazione dell'interfaccia utente.

Nel 1981 Ollie Johnston e Frank Thomas pubblicarono Disney Animation: the Illusion of Life e introdussero quelli che ora sono conosciuti come i "12 principi base dell'animazione". Questi principi risolvono il problema di come creare un "movimento realistico" che si verifica quando i corpi organici muoversi e reagire nello spazio fisico (i principi coprono anche cose come il tempismo emotivo e il fascino del personaggio).

L'animazione dell'interfaccia utente, come parte dell'esperienza utente, ha appena 20 anni e è ancora agli inizi. Man mano che il dominio dell'animazione dell'interfaccia utente è emerso, gli unici strumenti disponibili per descrivere il comportamento dell'interfaccia utente nel tempo sono stati i 12 principi di animazione. Proprio come i primi fotografi hanno tentato di capire la fotografia attraverso le regole della pittura, i designer hanno cercato di capire l'animazione dell'interfaccia utente attraverso le regole dell'animazione Disney.

In superficie, questo è comprensibile in quanto vi è un certo grado di sovrapposizione. Il movimento facilitato, uno dei 12 principi di animazione, rafforza il senso di "correttezza" attraverso il movimento, qualcosa di fondamentale per l'esperienza dell'utente. Senza rallentamento, l'animazione dell'interfaccia utente sembra goffa e bizzarra.

Il dettaglio completo è evidente quando si esaminano più da vicino i 12 principi nel contesto dell'interfaccia utente.

Squash e Stretch danno un peso e una flessibilità agli oggetti, qualcosa che è l'eccezione piuttosto che la regola nelle interfacce utente.

L'anticipazione crea la sensazione che qualcosa sta per accadere ed è anche quasi inutile quando si tratta delle esperienze degli utenti. Funziona solo in modo limitato per selezionare micro interazioni e stati dei pulsanti.

La stadiazione si riferisce al layout dell'animazione, che ha senso per un cartone animato Disney perché i personaggi sono costantemente in movimento, ma in un'esperienza utente, questo è solo pensato come "il design".

Straight Ahead Action e Pose to Pose sono meno principi che approcci al processo di disegno / animazione reale: puoi creare un'animazione più fluida se disegni fotogrammi continui o usa la posa per posare per impostare alcuni fotogrammi chiave e colmare le lacune . Nelle esperienze degli utenti, questo processo non si traduce nemmeno, a meno che non si stia verificando un'animazione fotogramma per fotogramma reale. Per impostazione predefinita, indipendentemente dallo strumento che stai utilizzando, quasi tutta l'animazione dell'interfaccia utente viene creata utilizzando i fotogrammi chiave.

L'azione di follow-up e sovrapposizione ha a che fare con il seguire le leggi della fisica e dell'inerzia e il modo in cui i corpi fisici rispondono, entrambi i quali hanno poco a che fare con le interfacce utente, a meno che non si faccia affidamento sul principio successivo, che è il più utile nel gruppo .

Slow In e Slow Out dicono che gli oggetti hanno bisogno di tempo per accelerare e rallentare. Ciò è estremamente rilevante poiché il 100% dell'animazione dell'interfaccia utente dovrebbe utilizzare questo principio. Viene comunemente definito "allentamento" ed è estremamente importante.

L'arco (necessario per riprodurre il movimento fisico) è quasi inutile per l'animazione dell'interfaccia utente ed è anche l'eccezione piuttosto che la regola.

L'azione secondaria è utile ed è ottima per le transizioni dello schermo e l'impostazione della gerarchia visiva.

Il tempismo è rilevante quando si disegnano personaggi, ma nelle interfacce utente, dove il movimento deve essere nitido per sentirsi reattivo, trovo meglio fare affidamento sull'allentamento per progettare la sensazione dell'interazione, piuttosto che la durata.

L'esagerazione si riferisce al grado di realismo o caricatura, ancora una volta, poco rilevante per l'animazione dell'interfaccia utente, poiché il design è predeterminato.

Allo stesso modo il disegno solido è per lo più discutibile poiché l'animazione dell'interfaccia utente si occupa del comportamento degli oggetti dell'interfaccia nel tempo, non della progettazione effettiva degli oggetti stessi.

L'appello parla anche del trattamento visivo, ancora una volta non rilevante per il comportamento dell'interfaccia nel tempo.

In conclusione

Quindi la domanda rimane: perché i 12 principi di base dell'animazione descrivono accuratamente l'animazione dell'interfaccia utente?

La scomposizione può essere meglio compresa dalla semplice osservazione: l'animazione dell'interfaccia utente non obbedisce alle stesse regole né ha gli stessi principi dei corpi organici che si muovono nello spazio fisico. L'animazione dell'interfaccia utente è un mezzo distinto, distinto come la fotografia dalla pittura - con caratteristiche sovrapposte (sia la fotografia che la pittura sono composizioni visive statiche che si basano su luce e composizione) ma sono fondamentalmente diversi mezzi.

In poche parole, i 12 principi di base dell'animazione non si applicano all'animazione dell'interfaccia utente perché stanno risolvendo un problema diverso.

Nei prossimi articoli, esplorerò quali sono questi principi di animazione dell'interfaccia utente, quali problemi risolvono i principi di animazione dell'interfaccia utente, in che modo i principi sono diversi dalle tecniche e come è possibile progettare e utilizzare l'animazione dell'interfaccia utente nei progetti attuali e futuri per influire sull'usabilità e creare esperienze utente più convincenti ed efficaci.