L'eterna ricerca della fluidità
In un mondo in cui i video ci offrono 120 fps, con schermi che superano i 240 Hz, siamo più che mai alla ricerca della fluidità. E questo in tutte le aree, quindi il web va lì. Un sito fluido sia nel caricamento che nella navigazione stessa sarà necessariamente molto più piacevole.
Quindi, che gioia quando sono arrivate le funzionalità CSS3! Transizioni tra stati, animazioni, ecc. Ma avidi che siamo, volevamo andare oltre con webGL e altre tecniche misteriose per far accadere le cose. Fantastico, non siamo sul web per visualizzare pdf statici. Così perfetto, qui siamo attrezzati per fare twerking tutti i div delle nostre pagine web.
Ognuno sperimenta a poco a poco, prende in mano nuovi codici, si appropria dei principi di animazioni più avanzate. È bellissimo. Come per molte cose, devi sperimentare in modo eccessivo per realizzare ciò che sembra equilibrato. E questo è ancora il caso oggi. È indiscutibile (o aprire il dibattito sul ns Twitter) quell'animazione porta molto all'esperienza dell'utente.
Animazione guidare, informare, attendere, supportare alcuni elementi senza glitter o altre grandi frecce rosse.
Sublimare in attesa...
Esistono diversi modi per attendere, a seconda del contesto, ma con un caricatore (grado 0) o una barra di avanzamento, un ridimensionamento del contenitore per visualizzare tutto il contenuto, un caricamento e quindi una visualizzazione progressiva del contenuto... è possibile riuscire a: accompagnare o intrattenere l'utente durante l'attesa, oppure dargli informazioni sulla sua attesa.
Animare uno stepper, realizzare un effetto focus che si muove, slider automatico, sono alcune soluzioni che possono guidare l'utente nel suo viaggio. O pre-masticando il lavoro per lui, o accompagnandolo.
A volte, viene utilizzato anche per acquisire credibilità: alcuni comparatori fingono un carico per visualizzare i risultati per far credere così a una complessità nel loro compito.
Consumare con moderazione?
Abbiamo anche il passaggio del mouse, che viene aggiunto alle animazioni. Per quanto sia importante capire su quali pulsanti stai passando con il mouse, non è necessario vedere l'animazione di ritorno, che in qualche modo costringe il tuo sguardo a rimanere su un pulsante che hai già lasciato.
Gli effetti di aspetto di modali, pagine, carte, ecc., sono spesso buoni esempi di animazioni che non portano nulla, tranne un ritardo prima di accedere al contenuto.
L'occhio umano (e il cervello) è forte, ma non riuscirà a concentrarsi se ci sono 7 movimenti simultanei sulla pagina, o se considera che certe animazioni sono inaspettate (in senso anomalo per questo scatto -questo). Se l'occhio si sposta ovunque, l'utente non trova rapidamente le sue informazioni e torna rapidamente ai concorrenti (niente più afterwork pagati dalla tua startup).
trova l'equilibrio, dà significato
Al contrario, penso che dobbiamo accettare anche alcune animazioni che possono sembrare libere.
#1 Quelli che fungono da “effetto Wow” (non i pancake)
Ma riguardano alcuni tipi di siti, che devono giocare sull'emozione per catturare l'utente (principalmente siti di eventi, portfolio). Se la tua banca inizia a darti casa con animazioni di movimento 3D del mouse, potresti spaventarti.
#2 Quelli che aggiungono una dimensione emotiva alle animazioni di base
Facciamo un esempio, sarà sicuramente più eloquente: un aggiornamento di un elenco che viene attivato durante lo scorrimento verso l'alto. Che si tratti di una ruota che gira o di un lancio di un razzo, sai che l'azione richiesta è stata intrapresa e che qualcosa sta accadendo. Il lavoro è fatto in termini di comprensione, ma penso che il razzo avrà più impatto, è una piacevole piccola sorpresa, che può fare eco all'identità. La pepita, la ciliegia, scommetto quasi che la ricaricherai una seconda volta per recensirla.
Sembravano liberi, perché il valore aggiunto non è nel significato che possono portare (sebbene), ma nell'emozione che portano.
L'animazione ha senso, non è questo “nuovo” giocattolo che vogliamo assolutamente utilizzare e testare in tutti i progetti e situazioni. Questo è anche il motivo per cui troviamo linee guida sulle animazioni con materiale. Le animazioni presentate sono semplici e supportano il significato o il significato della lettura, la gerarchia. È anche la prima categoria del loro sito nella scheda animazione: “capire il movimento” (“animazioni comprensibili”).
È quindi parte della buona pratica avere un significato. Ma Google non ci dice di non fare troppo. Questo non mi sembra un motivo per abusare in questa direzione. Google rimane anche nell'aspetto dell'utente, e non parla dell'aspetto emotivo che alcune animazioni possono portare.
PORTA VIA
Per la maggior parte, le animazioni dovrebbero accompagnare l'esperienza, supportare una gerarchia, dare significato, aiutare a comprendere la navigazione senza avere la precedenza sulla funzionalità. Ma non bisogna trascurare l'aspetto emozionale di un sito, di un'identità. È importante riuscire a distinguersi anche attraverso le sue animazioni.
Andremo piano, come il peperoncino che viene a insaporire la tua nuova creazione culinaria. Ci vuole un po', ma un po' troppo ed è il terribile mal di pancia.
- Le animazioni devono accompagnare l'esperienza, sostenere il soggetto e dare significato
- Non dimenticare l'aspetto emotivo che le animazioni possono portare
- Quando ce ne sono troppi, o quando sono troppo marcati, hanno la precedenza sul contenuto, sull'azione. L'occhio è distratto e questo rompe la fluidità dell'esperienza, disturbando le funzionalità principali ed essenziali.
Julien, progettista dell'interfaccia utente @UX-Republic
