Le animazioni UI hanno fatto molta strada nel mondo del design digitale.

In principio, era tutto per divertimento: le animazioni UI venivano usate per far ridere, sorridere o semplicemente meravigliare qualcuno.

Da pochi anni, invece, con l’avvento di strategie digitali più aggressive ed il ruolo determinante che ha assunto l’user experience design, l’animazione è diventata uno strumento al servizio della funzionalità ed un fattore essenziale dell’esperienza utente complessiva.

Per diventare UX designer è importante conoscere bene anche questo aspetto che riguarda l’area del visual design.

Quindi diamo un’occhiata al motivo per cui l’animazione conta così tanto e come puoi usarla per migliorare l’esperienza dell’utente sul tuo sito web.

Animazioni UI: come crearle con 12 esempi 2

Perché l’animazione conta?

Potremmo non esserne pienamente consapevoli, poiché è una di quelle cose che spesso percepiamo a livello non interamente cosciente.

Questo, tuttavia, fa sembrare l’animazione come uno spettacolo di magia.

Quando si tratta di UX, per deliziarci davvero, le animazioni UI devono svolgere una funzione. 

Ad esempio, può mostrarci quando un processo è completato o può farci sapere che stiamo facendo qualcosa di giusto.

Ed è quello che chiamiamo animazione funzionale.

[Se vuoi imparare a creare animazioni UI per il tuo progetto, iscriviti al nostro corso di visual design, abbiamo un capitolo con esercizi dedicato a questo tema]

Animazione Funzionale

È chiaro che l’animazione è disponibile in molte forme e con molti scopi. Le animazioni UI create per l’intrattenimento sono una cosa, ma ciò di cui stiamo parlando qui è un’animazione che ha un particolare scopo per la UX.

Serve una funzione molto specifica, quindi la chiameremo animazione funzionale.

Questo tipo di animazione è sottile, discreto, non occupa tutta la concentrazione su se stesso e ha uno scopo chiaro. O meglio: diversi scopi, poiché l’animazione è spesso multifunzionale.

Nel web design, l’animazione funzionale aiuta il visitatore a comprendere le regole intrinseche della pagina.

Promuove la navigazione della pagina e aiuta gli utenti a svolgere piccole e semplici attività come passare da una posizione all’altra o completare un processo, come la compilazione di un modulo.

Le animazioni UI non sono essenziali per un sito Web. Diverso, invece, se si parla di app design, dove l’ottimizzazione degli spazi potrebbe nascondere molti componenti e le animazioni UI potrebbero aiutarci a riproporle in versione molto più semplificata e di facile intuizione.

Immagina qualcosa di “base” come un preloader (l’icona animata che vedi sullo schermo mentre una pagina viene caricata). Ormai la maggior parte dei siti Web hanno un preloader.

Ora, immagina se non utilizzassero più quest’animazione.

Ogni volta che il caricamento di una pagina Web richiede più tempo del previsto, potresti pensare che si sia arrestato in modo anomalo o che la tua connessione sia andata persa.

animazioni UI

Il preloader è un modo sottile e immensamente efficiente di dire che tutto è a posto, il contenuto si sta caricando e ti verrà consegnato in pochi secondi.

Esistono molti tipi di animazione che possono essere utilizzati per migliorare l’esperienza dell’utente e rendere i siti Web più dinamici e coinvolgenti.

Alcuni tipi di animazioni sono particolarmente comuni e popolari e probabilmente li hai già visti migliaia di volte, ma forse fino ad ora non hai prestato molta attenzione

Caricamento

Il più delle volte, quando carichiamo una pagina, ci sarà un’animazione di qualche tipo, di solito un’icona leggermente animata che gira o esegue un movimento altrettanto semplice e ripetitivo – come il preloader che abbiamo menzionato nel capitolo precedente.

animazioni UI

Progress

Analogamente al caricamento, le animazioni UI che indicano l’avanzamento di un’azione (che può anche includere il caricamento) servono per informare l’utente quanto sono lontane dal completamento.

Ciò è importante poiché, senza tali informazioni, l’utente potrebbe pensare che qualcosa non vada nel sito Web o che il caricamento si sia bloccato.

animazioni UI

Azione completata

Premere un pulsante, aprire o chiudere un menu, caricare un file, inviare un modulo … sono tutte azioni che richiedono un rapido suggerimento visivo che informa l’utente che l’azione è stata completata con successo.

Questo è importante perché queste interazioni avvengono in un mondo virtuale, non fisico, e non possiamo fare affidamento sui nostri sensi per capire se hanno avuto successo o meno.

animazioni UI

Navigazione

Le animazioni di navigazione aiutano gli utenti a orientarsi nel sito Web.

Ci dicono cosa è cliccabile e cosa no, cosa richiede lo scorrimento e così via.

Ad esempio, l’animazione al passaggio del mouse fornisce un indizio su ciò che sta sotto e migliora la comprensione dell’utente della gerarchia dell’interfaccia.

animazioni UI

Transizioni

Le transizioni promuovono il coinvolgimento degli utenti e fanno risaltare il tuo sito Web per originalità e creatività.

Un esempio comune dell’uso di transizioni animate nel web design sarebbe una pagina o una diapositiva che gira come una pagina in un libro.

animazioni UI

Scroll

Oltre al clic, lo scorrimento è l’interazione dell’utente più comunemente eseguita in un sito Web o app.

Nella maggior parte dei casi, uno scroll animato è una soluzione migliore di una “semplice”, perché imita le nostre interazioni naturali con il mondo. Crea anche un’illusione di profondità e più spazio di quello che realmente esiste.

animazioni UI

Schermate iniziali (o Splash) 

Una schermata iniziale è la schermata che un utente vede subito dopo aver aperto un’app.

Di solito, contiene il logo dell’azienda o dell’app.

Gli utenti si aspettano che le app vengano caricate all’istante, ma con app mobili complesse non è sempre possibile. Poiché la schermata iniziale non ha elementi funzionali, serve solo come forma di intrattenimento.

Le animazioni UI della schermata iniziale possono distrarre gli utenti e far apparire il tempo di caricamento più breve di quello che è.

Inoltre, la schermata iniziale costituisce la prima impressione dopo che un utente ha scaricato l’app.

Animazioni UI: come crearle con 12 esempi 3 

Image source: BehanceIn questo esempio, l’elemento animato offre un’esperienza di caricamento senza interruzioni, facendo sembrare che la schermata iniziale non esista nemmeno. Allo stesso tempo, fornisce una transizione graduale alla pagina di accesso.

Animazioni di feedback

Un’animazione di feedback indica agli utenti che sono sulla strada giusta e che un’azione è riuscita o fallita.

È importante mostrare all’utente che l’app risponde alle loro azioni in modo che non si chiedano: “ho premuto il pulsante correttamente?”

Le animazioni UI riguardanti i feedback rendono confortevole il viaggio dell’utente e l’esperienza dell’utente positiva.

Puoi ottenere un’ottima UX con l’aiuto di notifiche pop-up animate, pulsanti e segni di spunta, cambiamenti di colore e dimensioni, retroilluminazione dei campi, ecc.

Un’animazione di feedback è un must per le piattaforme di e-commerce.

Ad esempio, puoi visualizzare le modifiche alle dimensioni e al colore di un articolo, rendendo reale l’esperienza di acquisto online.

Animazioni UI: come crearle con 12 esempi 4 

Image source: Dribbble

In questo concetto, puoi vedere come ogni interazione con il modello e il colore viene visualizzata sulla scarpa. È molto più piacevole fare acquisti online con una UX del genere.Animazioni UI: come crearle con 12 esempi 5

Animazioni per l’onboarding

Al momento del download, gli utenti si aspettano di vedere subito quali siano le istruzioni su come utilizzare le funzionalità principali della tua app.

Dovresti utilizzare la fase di onboarding per fare una buona impressione che convincerà gli utenti a continuare a utilizzare la tua app.

Questa straordinaria animazione onboarding incorpora un design puro con una procedura dettagliata completa. La transizione è naturale e dimostra come interagiscono i componenti dell’app.

animazioni UI

Elementi nascosti

La tendenza minimalista ha portato a design semplici che nascondono tanti elementi, specialmente sui dispositivi mobili.

Molte app hanno una gerarchia complessa che gli utenti non vedono. Grazie alle animazioni, puoi presentare elementi nascosti agli utenti.

Un’app può nascondere la sua ampia funzionalità dietro i gesti di un utente. Pinterest, ad esempio, non rivela le opzioni finché non tocchi e tieni premuto un post nel feed.

Di seguito, puoi vedere un menu nascosto simile a Pinterest. In questa animazione di app mobili, il designer ha utilizzato un menu circolare per nascondere tre opzioni principali per interagire con lo schermo.

Animazioni UI: come crearle con 12 esempi 6 

Image source: Dribbble

Suggerimenti visivi

Negli ultimi anni, si è visto un incremento di interfacce UI molto semplici, con pochi elementi e senza testi, specialmente su dispositivi mobili, in modo da apparire fluide e naturali, senza disturbare la percezione dell’utente.

A volte però, le icone senza didascalie confondono gli utenti, motivo per cui ha senso aggiungere didascalie a comparsa con l’aiuto delle animazioni.

I suggerimenti sono particolarmente importanti se l’app è utilizzata attraverso le gestures (o gesti) e gli utenti potrebbero essere confusi dall’interfaccia senza pulsanti o elementi interattivi.

animazioni UI

 

Animazioni Marketing 

Un altro modo per aumentare la consapevolezza del tuo marchio e attirare l’attenzione degli utenti è applicare animazioni al tuo marchio.

Ad esempio, puoi dare vita alla tua mascotte e posizionarla sulla schermata iniziale, animare il tuo logo e usarlo in una barra di avanzamento o incorporare il tuo motto in un’immagine. Le animazioni di marketing hanno due scopi: attirare l’attenzione e intrattenere.

animazioni UI

[Se vuoi imparare a creare animazioni UI per il tuo progetto, iscriviti al nostro corso di visual design, abbiamo un capitolo con esercizi dedicato a questo tema]

Risorse Extra

Per avere tanti altri contenuti come questo: