Le animazioni sono sicuramente considerate tra le parti più complesse del design grafico per le pagine Web. Richiedono non solo software speciali ma anche elevate competenze tecnologiche. Alcune aziende infatti evitano di creare animazioni per il proprio sito per risparmiare tempo e denaro. Tuttavia questa tendenza nel design dei siti web sono un vero e proprio must al giorno d’oggi.
Parecchi anni fa realizzare un’animazione significava ricorrere all’utilizzo di Flash. Del tutto sparito perché Apple decise di non supportarlo sulle proprie macchine, oggi grazie alle nuove tecnologie nel campo della grafica web molti sviluppatori e designer sono tornati ad implementare animazioni grafiche e video all’interno dei siti con l’obiettivo di catturare l’attenzione del pubblico.
Perché usare delle animazioni nello store?
A colpi di “less is more” (meno è di più) il crescente minimalismo nella progettazione dei siti ha portato ad un vero appiattimento dal punto di vista grafico nei siti, che se da una parte è positivo perché questo aspetto ha migliorato drasticamente la leggibilità e la velocità di caricamento ne ha invece dall’altro lato appunto appiattito la loro diversità. Molti siti infatti si somigliano ed è difficile distinguersi dalla concorrenza. Le animazioni vanno in questa esatta direzione, evidenziano i tratti distintivi degli store.
Nel web esistono siti di presentazione con l’unico scopo di stupire, ma nel nostro caso non dimentichiamo che queste animazioni, non sono fine a se stesse, soprattutto negli e-Commerce l‘obiettivo è quello di catturare l’attenzione dell’utente, guidare la sua scelta, far in modo che rimanga sullo store, e dulcis in fundo farlo acquistare.
La maturità e le potenzialità di questi strumenti ha reso i designer più creativi che mai, dando vita a siti Web con animazioni molto efficaci.
Introducendo apposite animazioni si possono spiegare agli utenti concetti o idee complesse in modo più semplice e rapido, nonché accompagnare le loro azioni l’ausilio di una CTA appropriata.
L’animazione quindi non è un suppellettile inutile ma ha un ROI giustificato dal fatto che un sito web interattivo avrà un tempo di permanenza sulla pagina maggiore di una sua controparte statica.
Quali animazioni vanno di moda?
Come detto precedentemente anche se spesso richiede molto tempo implementarle, le animazioni dovrebbero far parte del design del tuo e-Commerce. Se stai pensando di aggiungere animazioni quindi al tuo sito, ci sono delle buone notizie. Negli ultimi anni sono disponibili diversi strumenti e app per semplificare la loro creazione.
Non parlerò di strumenti o tecnologie con le quali realizzarle ma mi limiterò a mostrarti quali possano essere le potenzialità di questa innovazione che migliorerà sicuramente l’appeal generale del tuo sito. Ecco alcuni esempi:
Animazione caricamento
Uno dei problemi più importanti da risolvere è il tempo di caricamento, se non può essere ridotto ulteriormente un ottimo workaround è quello di ingannare l’attesa con un’animazione. Gli utenti potranno guardarla mentre aspettano ne esistono molte e vale la pena implementarne una..
Menu e pulsanti di navigazione non scorrevoli
Una delle recenti tendenze del design del sito Web è quella di nascondere i menu di navigazione, aiutando a risparmiare spazio sullo schermo. Questi menu verranno successivamente rivelati quando l’utente fa clic su un pulsante. I due elementi sono collegati visivamente l’animazione assicura di evitare che la transizione tra i due stati sia sgradevole.
L’icona di hamburger CSS è forse quella più utilizzata per le animazioni. Molti designer stanno applicando lo stesso principio ad altri elementi di navigazione. Ormai divenuta familiare a tutti gli utenti non ha più bisogno di presentazioni questa feature.
Fonte immagine: Dribbble]
Animazione al passaggio del mouse
Le animazioni con effetti al rollover del mouse possono essere utilizzate per diversi obiettivi. Ad esempio, passando con il mouse sopra il pulsante possono scoprire se è selezionabile o cliccabile. I pulsanti possono quindi illuminarsi, cambiare forma o colore o mostrare suggerimenti.
Fonte immagine: Dribbble]
Animazione di avviso
La tua app web può avvisare visivamente gli utenti quando stanno facendo qualcosa di sbagliato. Ad esempio, le animazioni possono dire agli utenti di ripetere un’azione o di non fare più clic su un pulsante se hanno compilato un campo in modo errato. Le animazioni di avviso possono assumere la forma di croci rosse, emoji tristi o altri simboli che comunicano agli utenti azioni non valide.
Fonte immagine: Dribbble]
Sfondi Animati
Non esistono solo le slide da inserire nell’header del tuo sito. Esistono moltissime opzioni e tra queste gli sfondi animati.
Una delle animazioni di benvenuto più accattivanti è l’animazione “particles”.
Queste animazioni interattive possono essere interagite con il cursore. In altre parole, queste animazioni rispondono ai movimenti del cursore dell’utente.
Fonte immagine: Vuejs.org]
Considerazioni finali
Le animazioni se ben progettate con i loro un feedback visivi non solo garantiranno una migliore user experience ai tuoi utenti , ma daranno una grandissima profondità al design del tuo e-commerce e conferendo un posizionamento del tuo brand molto più alto. Se ritieni di dover migliore il look o riprogettare il tuo sito web o semplicemente vuoi una consulenza scrivici pure qui sotto.
Commenti recenti