La guida completa alla progettazione di animazioni Web

Che ci crediate o no, non hai molto tempo per convincere i visitatori del tuo sito a stare in giro. La tua finestra è in realtà molto più breve di quanto pensi.

In sostanza, ci vuole solo secondi 0.05 dopo che la pagina carica i visitatori per formare un'opinione. Più specificamente, questo si traduce in millisecondi 50. Sorprendentemente breve, giusto?

Ok, alcuni di loro se ne andranno. Ma altri potrebbero scegliere di rimanere.

Poi arriva lo stadio delle impressioni, che fondamentalmente dura solo per 10 secondi. Se il tuo sito non è in grado di gestirne uno solido, perderai la maggior parte del tuo traffico prima ancora che inizi il processo di conversione. Devono solo continuare a premere i pulsanti indietro o chiudere.

E se hai qualche speranza di recuperarli, ecco la dura verità. 88% di loro non è probabile che ritorni su un sito Web dopo una brutta esperienza.

Ma aspetta un minuto. Di chi è il lavoro per mantenere il traffico web una volta che atterrano sul sito?

Ok, ovviamente, è naturale dare la colpa al content manager del sito. E potresti avere ragione. Ma solo parzialmente.

Si scopre che tutto inizia con il web designer. Di fatto, uno studio che ha ampiamente esaminato una vasta gamma di feedback dei consumatori ha stabilito che 94% di quelli negativi erano legati al design.

Cosa significa?

Per i principianti, non c'è modo di sfuggire a questo. La principale responsabilità ricade su di te. Oltre a implementare tutte le migliori pratiche di progettazione che abbiamo trattato nei nostri pezzi del passato, devi indossare un cappello PR e considerare elementi che si collegano efficacemente con il traffico.

Sto parlando di cose come le animazioni web.

E perché lo stiamo specificamente suggerendo?

Bene, è qualcosa che ho intenzione di rivelare a breve. Questa guida ti guiderà attraverso tutti gli aspetti critici delle animazioni web. Ma prima, esploriamo le basi ...

Le basi delle animazioni Web

Immagina il tuo personaggio dei cartoni animati preferito che passeggia sullo schermo. O forse il logo del tuo telefono che danza sullo schermo quando riavvii il dispositivo. Cosa hanno in comune?

Bene, sono entrambi esempi di base di animazioni.

L'animazione si verifica essenzialmente quando un elemento immobile viene "riportato in vita". Inizia quindi a mostrare una qualche forma di movimento.

Non sappiamo esattamente quando è iniziata questa pratica. Ma abbiamo un'idea che il primo film d'animazione nella storia è stata fatta oltre un secolo fa. La tendenza si è sviluppata abbastanza estesamente da allora, grazie ai progressi progressivi della tecnologia.

Tuttavia, una cosa è rimasta costante: i principi dell'animazione. In effetti, la Disney Ollie di Johnston e Frank Thomas in seguito ne scrissero nel loro libro "The Illusion of Life: Disney Animation". Ecco la lista completa:

  • Appello
  • Disegno solido
  • Esagerazione
  • Sincronizzazione
  • Azione secondaria
  • Arco
  • Rallenta e rallenta
  • Seguire e sovrapporre l'azione
  • Azione dritta e posa per posa
  • Staging
  • Anticipazione
  • Squash e stretch

I dodici forniscono ancora oggi il framework per la progettazione di animazioni, incluse quelle pubblicate sul Web come video, WebGL, SVG, CSS e GIF.

Ora, le animazioni web possono essere semplici come evidenziare quando si passa con il mouse su una lettera, in una complessa serie multistrato di video a schermo intero. In altre parole, puoi adottare un approccio sottile o scegliere di fare il tutto con animazioni dominanti che urlano per attirare l'attenzione. Tutto dipende dalla situazione.

E questo solleva la domanda: quando si suppone di usare le animazioni?

Quando dovresti usare le animazioni web?

Certo, sono carini. E sarebbero certamente aggiunte interessanti al layout del tuo sito.

Ma sai una cosa? I loro successivi livelli di efficacia sono una cosa completamente diversa. Quindi, è ovvio che le animazioni non sono adatte a tutti i progetti di siti web. E, soprattutto, sarebbe una cattiva idea adottarli a casaccio.

Succede proprio così 46% dei consumatori online giudicare la credibilità di un sito sulla base del suo aspetto estetico e dell'estetica generale. Semplicemente non puoi permetterti di comprenderlo con un framework di animazione mal progettato. Allo stesso tempo, sarebbe sfortunato perdere persistentemente opportunità di conversione d'oro non riuscendo a sfruttare le animazioni.

Quindi, quando dovresti sfruttarli?

Bene, ecco la cosa. Le animazioni Web sono ideali principalmente quando è necessario aumentare l'usabilità, attirando l'attenzione o aiutando gli utenti nel processo di navigazione.

Come?

Generalmente, ci vuole secondi 2.6 per gli occhi di un visitatore di atterrare sulla sezione del sito web che influisce principalmente sulla loro prima impressione. Usare abilmente un'animazione, tuttavia, può velocizzare le cose attirando immediatamente l'attenzione sulle aree più critiche del sito.

Le animazioni sono utili anche quando cerchi di indirizzare gli utenti attraverso la canalizzazione di conversione. Un pop-up animato, ad esempio, sarebbe una strategia ponderata per la costruzione di mailing list. Quindi, quando si tratta del processo di acquisto, potresti prendere in considerazione l'incorporamento di video. Hanno dimostrato di convincere 73% degli acquirenti per procedere e acquistare un prodotto o servizio.

Infine, è possibile utilizzare le animazioni web puramente a fini estetici. Un'animazione decorativa che sia fluida e senza soluzione di continuità può migliorare in modo significativo l'impatto visivo complessivo, quindi stabilire una connessione emotiva tra gli utenti e l'interfaccia. Ed è così che aumenti progressivamente il livello di coinvolgimento degli utenti.

Strumenti di animazione Web

Pronto per iniziare a creare animazioni web? Perfezionare! Ma dove dovresti iniziare?

Beh, che ne dici di cercare uno strumento robusto per convertire le tue idee in animazioni reali? Per fortuna, sul Web sono disponibili numerose opzioni ottimizzate, ottimamente ottimizzate per vari utenti e diversi tipi di animazioni. Ciò che scegli per i tuoi progetti dipende dalle tue capacità, dagli obiettivi primari, dal budget e dal tipo di sito su cui stai lavorando.

Detto questo, ecco alcuni esempi importanti, ognuno con il suo caso d'uso unico:

  • js
  • Animazione linee 3D con Three.js
  • js
  • Flubber
  • Animazione di colore
  • jqClouds
  • Scrollissimo
  • Cel-animation
  • js
  • js
  • Animazione CSS3
  • Transform-quando
  • js
  • Rellax
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • ramjet
  • tonfo
  • MixItUp
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Zafferano
  • CSShake
  • css
  • js
  • razzo
  • Transito
  • css
  • js
  • Popmotion
  • GSAP di GreenSock
  • js
  • js
  • CSS Animate
  • È martedì
  • Equivoco
  • js
  • js
  • js
  • js
  • js
  • Aspettare! Animare
  • Motion UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • anijs
  • js
  • Animazioni magiche
  • css

Progettare animazioni Web

Effetti hover

Le animazioni al passaggio del mouse sono senza dubbio alcune delle più semplici sul web. Arrivano alla vita ed evidenziano gli elementi selezionati quando il puntatore si sposta su di essi. L'animazione stessa può verificarsi in varie forme, come lo spostamento delle dimensioni o la modifica dei colori.

Il trucco qui è di adottare gli effetti con parsimonia. Altrimenti, rischi di evidenziare troppi elementi, che potrebbero successivamente confondere gli utenti.

È anche consigliabile mantenere una qualche forma coerente con la metodologia in tutto il sito. Ad esempio, se i pulsanti della tua home page passano da verdi a rossi, ad esempio, utilizza lo stesso framework per i punti salienti aggiuntivi in ​​altre pagine web.

Animazioni di sfondo

Incorporare un'animazione in background è una strategia efficace per aggiungere eccitazione e vitalità alla tua pagina web senza necessariamente interferire con l'enfasi principale. Puoi utilizzare qualsiasi cosa, dai video alle immagini sottili che si spostano in sequenza.

L'approccio migliore qui è mantenere le cose strutturate e semplici. Se si sceglie di integrare un video, abbreviare di conseguenza e mantenere un ciclo pertinente al proprio sito. Quindi assicurati che i movimenti siano abbastanza sottili da attirare l'attenzione senza che gli utenti travolgano.

Animazioni in stile GIF

Vale la pena considerare una GIF se sei particolarmente interessato a un'animazione eccezionalmente facile da configurare. Un tipico esempio può forse essere qualcosa di simile a un testo in movimento oa un pagliaccio sorridente incorporato nel layout del contenuto.

Tutto quello che devi fare è trovare un'idea solida, ottenere un video o un'immagine pertinente e poi convertirla in una GIF perfetta usando un software di editing adatto. Caricare la creazione risultante in formato GIF genera un'animazione simile a un video che si carica velocemente come una piccola immagine.

Animazioni di transizione

Le animazioni di transizione vengono utilizzate per introdurre vigore quando gli utenti si spostano da una sezione del sito a un'altra. Sono simili alle animazioni di diapositive che appaiono mentre ti sposti da una diapositiva all'altra.

Immagine crediti: Shutterstock

Per un risultato perfetto, assicurati che le animazioni siano fluide e coerenti in tutto il sito. Dovrebbero anche essere abbastanza brevi da non ritardare l'effettivo processo di transizione.

Caricamento animazioni

Il fatto è 47% dei consumatori online aspettatevi che le vostre pagine web carichino almeno 2 secondi. Se non riesci a raggiungere questo obiettivo, ogni secondo aggiuntivo si traduce in 7% di conversioni in meno.

Andando dal tempo di caricamento medio attuale di 22 secondi, è abbastanza evidente che soddisfare le aspettative di 2-secondo è abbastanza difficile. Ma puoi salvare una parte consistente del traffico tenendoli occupati con le animazioni mentre altri elementi del sito continuano a caricare.

Concentrati sulla creazione di quelli semplici che sono abbastanza leggeri da caricare quasi immediatamente il traffico viene reindirizzato al tuo sito. Dovrebbero essere progettati per presentare sistematicamente ai visitatori il marchio e il tema generale del sito web.

Animazioni con scorrimento a scorrimento

Gli studi di eye tracking hanno stabilito che gli utenti del sito web spendono circa 57% dei loro tempi above the fold. Ma, si scopre che molti di loro sono disposti a scorrere verso il basso, purché forniscano una struttura e un meccanismo di progettazione favorevoli.

Ed è esattamente dove avvengono le animazioni a scorrimento. Entrano in azione immediatamente gli utenti iniziano a scorrere per creare l'illusione di una pagina liscia e senza fine. È un modo ponderato per eliminare le transizioni che altrimenti scoraggerebbero lo scorrimento.

Navigazione e animazioni di menu

Diciamo la verità. Le opzioni di menu occupano una considerevole quantità di spazio sullo schermo, in particolare su siti olisticamente dinamici con più livelli di selezioni. Fortunatamente, puoi sfruttare le animazioni per nascondere le opzioni, quindi rivelarle solo quando un utente fa clic o passa sopra i pulsanti corrispondenti.

Questo tipo di animazione semplifica e semplifica inoltre il processo di navigazione comprimendo l'intera struttura in opzioni di menu visivamente connesse. Il framework dovrebbe essere progettato con segmenti di sottomenu che compaiono sistematicamente ogni volta che un utente fa clic o punta sulle opzioni del menu di sovrapposizione.

Galleria e presentazioni

Forse non sorprende, il portata media di attenzione degli esseri umani è 8 secondi, almeno secondo un recente studio condotto da Microsoft. Anche un pesce rosso è capace di stare attento più a lungo di un individuo tipico. Pertanto, puoi scommettere che la maggior parte dei visitatori del tuo sito non sarà abbastanza persistente da fare clic su tutti gli elementi della galleria.

Ma indovina un po? Puoi sfruttare abilmente le animazioni di gallerie e presentazioni per mostrare automaticamente numerose immagini, senza forzare necessariamente gli utenti a navigare attraverso di esse.

La cosa più importante qui è il tempo di visualizzazione delle immagini. I display brevi con transizioni rapide si sentirebbero affrettati, mentre i display lunghi con transizioni lente risulterebbero noiosi e lenti. Con questo in mente, progetta il layout generale per mostrare ogni immagine per circa 5 a 8 secondi, prima di passare rapidamente al successivo.

Conclusione

Tutto sommato, è necessario analizzare le animazioni in base a quanto successivamente migliorano l'esperienza dell'utente. Un grande dovrebbe o innescare una connessione emotiva dagli utenti o facilitare il processo di navigazione. Un perfetto, d'altra parte, dovrebbe essere in grado di raggiungere comodamente entrambi allo stesso tempo.

Per riuscirci, prenditi il ​​tuo tempo per valutare criticamente tutti i parametri rilevanti mentre progetti e incorpora animazioni nel tuo sito. E ricorda: tienilo semplice, leggero e ben allineato al tuo marchio.

immagine di cortesia per gentile concessione di Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.