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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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 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.
[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:
- accedi al gruppo esclusivo, e gratuito, di User Experience Italia
- seguici su Instagram
- seguici su Telegram
