PARLA CON NOI

Animazioni siti web

Animazioni sul sito web quando, perché e come usarle al meglio.

In questo articolo scopriremo tutto sulle animazioni applicate al web design, soprattutto approfondiremo i migliori trucchi per impiegarle al meglio.

Essendo un articolo dedicato alla comunicazione ed al marketing, eviteremo di parlare degli aspetti tecnici legati al codice che risulterebbero difficili da digerire per i non addetti ai lavori, per concentrarci esclusivamente sui loro aspetti più importanti, quelli visivi.

Partiamo dalle basi...

Cosa sono le animazioni su un sito web?

Le animazioni sono un effetto visivo applicato ad un testo, un pulsante, un'icona, un'immagine, ad un qualsiasi "oggetto", in grado di renderlo dinamico attraverso l'impiego di un movimento.

Rappresentano uno strumento molto potente del web motion design, consentendo di modificare gradualmente lo stile di un preciso elemento della pagina.

Come si attivano le animazioni di un sito web?

Cominciamo col dire che alcune animazioni partono in automatico al caricamento della pagina mentre altre si attivano solo attraverso determinate interazioni tra l'utente e precisi elementi del sito internet.

Tra le animazioni attivate dall'utente abbiamo:

  • le "hover" quelle che si attivano al passaggio del mouse,
  • le "active" quelle che si attivano solo se cliccate,
  • le "scoll" quelle attivate dallo scrolling (scorrimento) della pagina web.

Mentre tra le animazioni "automatiche" le più utilizzate sono:

  • lo spostamento di elementi da una parte all'altra dello schermo, su è giù o destra e sinistra e viceversa,
  • la comparsa di banner o pop-up che appaiono all'improvviso sullo schermo,
  • lo scorrere continuo di immagini o di scritte,
  • il fluttuare di oggetti che sembrano sospesi,
  • il lampeggiare o il cambiamento di forma e colore in modo ritmico, ad esempio di elementi come pulsanti, testi riquadri ecc...

Quali animazioni si possono applicare agli elementi del proprio sito web?

Sono decine ormai le animazioni che si possono implementare nel proprio sito internet, le più utilizzate sono quelle legate ai link (testi con dei collegamenti URL) o ai pulsanti delle CTA (call to action) ovvero alle chiamate all'azione.

A cosa servono le animazioni?

Le animazioni hanno fondamentalmente due scopi principali:

  • uno scopo prettamente estetico facendo apparire il proprio sito internet più accattivante, dinamico e moderno,
  • uno scopo prettamente psicologico rendendo l'esperienza emotiva dell'utente meno noiosa, più coinvolgente ed interattiva.

Inoltre le animazioni hanno anche lo scopo di fornirci dei feedback importanti  a conferma che determinate interazioni sono state correttamente attivate.
Per esempio capita spesso che quando clicchiamo su un bottone, questo cambia forma o colore confermando che la nostra azione è stata presa in carico.

Tra tutti questi, uno degli scopi più importanti dell'uso delle animazioni è sicuramente quello legato alle neuroscienze, ed è anche quello che mi interessa di più utilizzare quando realizziamo la comunicazione dei nostri siti web.

Animazioni e neuroscienze un connubio vincente!

Le animazioni giocano un ruolo fondamentale nella comunicazione digitale poiché sono in grado di catturare il nostro sguardo.

Questo perché siamo naturalmente attratti dagli oggetti in movimento, è un riflesso involontario ed antico come l'origine dell'uomo che abbiamo installato indelebilmente nella parte più primitiva del cervello, quella che conserva ancora tutti gli istinti legati alla sopravvivenza.

Quando i nostri antenati erano nella savana, tutto ciò che si muoveva poteva rappresentare il pericolo di un predatore o l'opportunità di trovare del cibo come una preda.

Anche se ci siamo evoluti per migliaia di anni, sappiamo che alcuni degli istinti primordiali sono rimasti immutati.

La paura ad esempio ha ancora l'esatto compito di garantire la nostra incolumità.

Certo oggi nelle nostre città occidentali il rischio di essere sbranato da un leone è pressoché inesistente, ma abbiamo altri pericoli da cui guardarci, come ad esempio un'auto o una moto che ci può investire, sempre "cose" in movimento.

Ed è proprio per questo motivo che tutto ciò che si muove attrae così straordinariamente bene la nostra attenzione. 

Sono stati fatti numerosi studi riguardo al eye-tracking.

Infatti oggi il tracciamento oculare viene impiegato in vari campi della psicologia e delle neuroscienze per comprendere il perché muoviamo i nostri occhi per raccogliere le informazioni visive.

Gli studi sulle neuroscienze legate al marketing ed applicate al proprio sito web ci suggeriscono alcuni straordinari segreti per rendere questi movimenti veramente irresistibili.

Il segreto principale è quello di utilizzare le animazioni esclusivamente sugli oggetti su cui vogliamo attirare l'occhio di chi guarda.

Infatti in uno schermo pieno di contenuti statici, come il testo e le immagini di una pagina web, l'unica cosa che si muove è una vera e propria calamita per il nostra attenzione.

Il troppo storpia

Abbiamo visto come le animazioni possono decisamente migliorare la nostra esperienza utente ma attenzione a non esagerare finendo per generare troppa confusione.

Se gli oggetti in movimento diventano diversi l'attenzione si disperde e con essa l'indiscutibile vantaggio di portare l'occhio del nostro utente proprio dove vogliamo che guardi.

Il caos è nemico della nostra attenzione, pertanto riempire il proprio sito web di animazioni, non solo è inutile, ma come abbiamo visto è anche controproducente.

Da un punto di vista del marketing incasinare l'attenzione dei nostri potenziali clienti è una pratica che va esattamente al contrario dei suoi principi cardine.

Per concludere possiamo consigliare l'utilizzo di animazioni nella realizzazione dei propri siti web per renderli moderni ed accattivanti, facendo attenzione a non esagerare.

Hai bisogno di realizzare un sito web moderno e performante in grado di coinvolgere i tuoi utenti?

Beh sei nel posto giusto.

Sede per il Nord
Milano

Via Santa Maria Valle, 3
20123 Milano
Italia
Sede per il Centro-Sud
Caserta

P.zza Madonna di Pompei, 5
81100 Caserta
Italia

WebProgetti.it
Siti Web e Marketing

Copyright© 2023
PIVA 11599390967 | Tutti i diritti riservati
Illustration by Freepik Storyset