NOONIC GUIDES. Animazioni nel Web Design: come e perché usarle

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "NOONIC GUIDES. Animazioni nel Web Design: come e perché usarle"

Beniamino Colombo
5 anni fa
Visualizzazioni

1 NOONIC GUIDES Animazioni nel Web Design: come e perché usarle

2 ANIMAZIONI NEL WEB DESIGN Le origini: perché usare le animazioni in un sito web? 2

PERCHÈ USARE LE ANIMAZIONI? Per dare "vita" ai vari elementi dei siti web L esistenza delle animazioni nel web design nasce dal bisogno di dare vita al proprio sito web.

3 PERCHÈ USARE LE ANIMAZIONI? Per dare "vita" ai vari elementi dei siti web L esistenza delle animazioni nel web design nasce dal bisogno di dare vita al proprio sito web. Grazie agli elementi animati è possibile conferire diversi significati e comunicare con l utente tramite movimenti e trasformazioni. In origine, prima che le animazioni arrivassero allo stadio attuale, le.gif sono state le prime forme di animazioni inserite nei siti web, sostituite o affiancate, in seguito, dalle animazioni in Flash. Oggi, grazie a migliori connessioni e browser, navigare significa vivere un esperienza dinamica e divertente in cui le animazioni, da un lato aiutano l utente ad arrivare al suo obiettivo e dall altro, rendono la sua esperienza piacevole. 3

4 PERCHÈ USARE LE ANIMAZIONI? Le animazioni sono la base dell Interaction Design. Grazie ad esse l utente è agevolato nell interagire in modo facile e intuitivo con i touchpoint digitali progettati per soddisfare i suoi bisogni 4

5 ANIMAZIONI NEL WEB DESIGN 4+1 tipologie di animazioni 5

6 4+1 TIPOLOGIE DI ANIMAZIONI 1. Animazioni degli elementi dell interfaccia 6

ANIMAZIONI DEGLI ELEMENTI DELL INTERFACCIA Questione di feedback Le animazioni ci permettono di comunicare all utente attraverso un feedback per lo più visivo che l azione che ha compiuto, per

7 ANIMAZIONI DEGLI ELEMENTI DELL INTERFACCIA Questione di feedback Le animazioni ci permettono di comunicare all utente attraverso un feedback per lo più visivo che l azione che ha compiuto, per esempio un click su una call to action, è stata registrata e ha prodotto degli effetti. Quante volte avete cliccato più volte una call to action perché il sito pareva non stesse funzionando? Molti siti web non considerano i tempi, dati per esempio, da una connessione lenta o dal caricamento degli asset della pagina, creando così frustrazione nell utente che non sa e non può aspettare. Le animazioni che generano un feedback visivo al click sono probabilmente le più usate, e così deve essere. 7

8 Esempio: Nell esempio l animazione ci aiuta a capire qual è la sezione che abbiamo aperto all interno della pagina. L espansione e la trasformazione dell area selezionata ci fanno percepire che siamo entrati in quella sezione. Il contenuto al suo interno viene visualizzato senza ricaricare la pagina rendendo la navigazione chiara e veloce. 8

9 4+1 TIPOLOGIE DI ANIMAZIONI 2. Animazioni di caricamento 9

10 ANIMAZIONI DI CARICAMENTO Ancora feedback L animazione di caricamento è nata insieme all'interfaccia grafica. Tutto è iniziato con il cursore che si trasforma in clessidra, per poi passare ai documenti volanti di Windows e infine alla "spinning beach ball of death" di Apple. Ancora una volta si tratta di fornire un feedback all'utente e informarlo che l'azione richiesta sta venendo eseguita. Ci sono diversi utilizzi di questa funzione a seconda dei casi: si possono trovare progress bar, percentuali di caricamento o anteprime del contenuto. Prima di queste animazioni gli utenti non vedendo riscontri immediati continuavano a cliccare per la frustrazione chiedendosi cosa stesse accadendo. 10

11 ANIMAZIONI DI CARICAMENTO Esempio: In questo caso, nell esempio a destra, la nostra azione richiede del tempo per essere completata. Fornendo una semplice animazione di caricamento informiamo l utente che essa è in fase di processo. 11

12 ANIMAZIONI DI CARICAMENTO Esempio: Nell esempio a destra il caricamento ci mostra una preview del contenuto che sta caricando. Questa tipologia di animazione, magari non ci avete fatto mai caso, viene utilizzata anche da Facebook. 12

13 4+1 TIPOLOGIE DI ANIMAZIONI 3. Animazioni per creare Storytelling 13

14 ANIMAZIONI PER CREARE STORYTELLING Il racconto tramite le animazioni In alcuni casi capita che l'animazione sia il fulcro del sito e che venga usata per raccontare una storia, un prodotto o un brand. In alcuni casi viene utilizzata l azione scroll, oppure semplicemente dei click per far si che la navigazione e di conseguenza la storia continui. Fondamentale in questo caso creare stupore e curiosità, attraverso immagini e video coinvolgenti, in modo da spingere l utente a proseguire nella navigazione e conoscere tutta la storia. La maggior parte di questi siti vengono usati per illustrare un singolo prodotto, un evento o una causa in modo tale da poter suscitare emozioni oltre che fornire informazioni. Esempio: Nel sito web Rendezvous with Death possiamo scoprire la vita di Kennedy grazie al semplice scroll down. Immagini e video interagiscono con i movimenti del mouse dell utente rendendo tutto coinvolgente. 14

15 15

16 16

17 4+1 TIPOLOGIE DI ANIMAZIONI 4. Animazioni decorative 17

ANIMAZIONI DECORATIVE Keep it simple! Spesso vengono aggiunte animazioni per dare dinamicità al sito senza tenere conto del loro impatto rispetto al contenuto.

18 ANIMAZIONI DECORATIVE Keep it simple! Spesso vengono aggiunte animazioni per dare dinamicità al sito senza tenere conto del loro impatto rispetto al contenuto. Se la nostra animazione è troppo invasiva e staccata dal messaggio che vogliamo dare essa provoca distrazione e confusione nell utente. Queste animazioni sono preferibilmente da evitare perché creano uno sbilanciamento tra messaggio che si vuole comunicare e animazioni, che in questo caso prendono il sopravvento. Esempio: Nel sito brightmedia.pl le animazioni sono troppo invasive creando lo sbilanciamento sopra citato. In questo esempio l utente viene distratto dalle troppe animazioni a scopo decorativo, perdendo così il messaggio che il sito vuole veicolare. 18

19 ANIMAZIONI DECORATIVE Le migliori animazioni sono fondamentali ma non si notano Google, Material Design Guide 19

20 4+1 TIPOLOGIE DI ANIMAZIONI +1. Animazioni per le ads 20

21 ANIMAZIONI PER LE ADS Catturare l attenzione Le ads e pubblicità che troviamo online ottengono un maggiore tasso di conversione se animate. In una pagina web gli utenti vengono attratti maggiormente dai banner animati rispetto a quelli statici, in quanto il loro movimento attira la loro attenzione. N.B.: Molti siti iniziano a ostacolare l inserimento di banner animati per evitare di perdere visitatori. Le animazioni vanno usate con intelligenza e non devono risultare invasive e ostacolanti la lettura. Ad esempio su Facebook, video o gif hanno un impatto maggiore rispetto ai post statici. Fonte: Clicca qui 21

22 ANIMAZIONI NEL WEB DESIGN Per i più esperti: alcune regole per le microinterazioni 22

23 ALCUNE REGOLE PER LE MICROINTERAZIONI Curve di animazione All uomo piace ciò che sembra naturale. Anche le animazioni devono rispettare alcune regole della fisica, per non sembrare forzate, o apparire strane e innaturali all occhio umano. Le curve di accelerazione e decelerazione dovrebbero essere morbide per non rendere meccanico il movimento come nell esempio 1. Per rendere più naturale l'animazione è opportuno rendere tali curve asimmetriche come illustrato nell esempio 2. 23

ALCUNE REGOLE PER LE MICROINTERAZIONI Durata delle animazioni Le animazioni nelle versioni mobile impiegano solitamente 300 ms per completarsi, con queste varianti: Animazioni lunghe e complesse

24 ALCUNE REGOLE PER LE MICROINTERAZIONI Durata delle animazioni Le animazioni nelle versioni mobile impiegano solitamente 300 ms per completarsi, con queste varianti: Animazioni lunghe e complesse possono avere durata maggiore fino a 375ms Elementi che entrano nella visuale hanno una durata minore sopra i 225ms Elementi che lasciano la visuale hanno una durata dai 195ms In generale, le animazioni che superano i 400 ms risultano troppo lente. In schermi più grandi, come tablet, le animazioni hanno una durata maggiore (circa 30% più lenta del mobile) per coprire una distanza più lunga e non risultare troppo veloci. 24

25 ALCUNE REGOLE PER LE MICROINTERAZIONI Durata delle animazioni Nelle versioni desktop le animazioni assumono regole differenti. A differenza di quanto accade su tablet, le animazioni desktop sono più veloci e vengono semplificate. Questo perché in schermi grandi le animazioni possono essere non notate e le nostre azioni necessitano di una risposta rapida. N.B.: Spesso animazioni complesse causano dei cali di frame: riducendo la durata dell animazione è possibile rendere meno evidente questo problema. 25

26 ALCUNE REGOLE PER LE MICROINTERAZIONI Per concludere: segui la natura In natura un oggetto che si solleva diagonalmente fa una certa fatica, dovuta alla forza di gravità e compie una traiettoria ad arco. 26 Lo stesso si applica agli elementi del nostro sito che vogliamo spostare verso l'alto o verso il basso diagonalmente.

27 Grazie.

Documenti analoghi

Facebook Advertising 5 Workshop - Made in Italy: Eccellenze in Digitale. Camera di Commercio Macerata 03/03/2016

Facebook Advertising 5 Workshop - Made in Italy: Eccellenze in Digitale. Camera di Commercio Macerata 03/03/2016 5 Workshop - Made in Italy: Eccellenze in Digitale Camera di Commercio Macerata 03/03/2016 Cosa vediamo: - che cos è e come funziona Facebook ADS Fb Ads vs Google AdWords: differenze Fb Ads nel piano di