Cosa sono le transizioni? come si utilizzano?
Le transizioni realizzate con CSS e Javascript sono diventate un vero e proprio trend, qui vediamo cosa sono le transizioni e come utilizzarle al meglio.
Molte volte, in questo blog ho parlato di design trends; delle mode e tendenze del web design per creare siti dal design moderno.
Oggi vi parlo di trend, che ormai e consuetudine vedere all’interno della navigazione di un sito: le transizioni.
In questo articolo descriverò cosa sono le transizioni, come utilizzarle al meglio senza disturbare troppo la navigazione.
Le transizioni sono utili per rendere il vostro sito più accattivante non solo come design interface, ma anche come esperienza utente.
Quindi se siete interessati a migliorare la vostra esperienza utente, con belle animazioni tra una pagina e l’altra; consiglio di proseguire nella lettura dell’articolo.
Di cosa sto parlando?
Prima di partire e parlare in maniera più approfondita di questo tema, è importante capire un’attimo al meglio di cosa parlo.
Poco tempo fa, ho parlato di animazioni e transizioni CSS, ma non dobbiamo fare confusione e quindi voglio spiegarmi meglio..
Le transizioni sono delle animazioni che servono per dare maggiore fluidità alla navigazione del nostro sito, quando l’utente passa da una pagina all’altra.
Queste tipologie d’animazione vengono già utilizzate nelle app che scarichiamo per i nostri smartphone.
Molte di esse, utilizzano queste animazioni per guidare l’utente all’interno del sito in maniera coerente, e migliorarne l’esperienza.
Ho voluto approfondire questo argomento, perchè vedevo molti siti premiati che le utilizzavano.
Questo mi ha spinto a fare qualche ricerca in internet per scovare le tecniche per raizzare ciò.
E da quel che mi ricordo, ho faticato un pò prima di trovare articoli interessanti e approfonditi su questo argomento.
Quindi ho deciso di scrivere questo articolo, e spiegare quello che, fino ad ora, ho capito su queste animazioni che stanno avendo successo.
La navigazione di un sito prima delle transizioni
Se siete dei web designer curiosi e sempre attenti alle ultime tendenze, avrete notato che alcuni siti hanno una navigazione fluida come caratteristica principale.
Cosa vuol dire?
Vuol dire che quando noi navighiamo un sito, notiamo che andando da una pagina all’altra, non si nota quasi mai un cambiamento a ‘scatti’.
Questo è dovuto alle transizioni, che attraverso animazioni create ad hoc, rendono la navigazione più fluida.
Invece prim dell’introduzione delle transizioni, appena si cliccava su un link per andare su un’altra pagina, notavamo un leggero scatto prima di visualizzare il contenuto.
Ecco..la transizione ha ‘eliminato’ questi stacchi così bruschi tra pagine.
Questo ha portato sicuramente dei benefici, non solo a livello di aspetto grafico, ma anche di esperienza utente.
infatti, l’utente che visita un sito caratterizzato dalle transizioni, si sentirà molto più ‘immerso’ nell’esperienza.
Andando a scorrere i migliori siti su Awwwards, si noterà sicuramente l’utilizzo di questa tecnica in modo sempre più frequente.
Le web agency più quotate, realizzano animazioni ben studiate, quasi come se fossero parte di una vera e propria scenografia.
Il risultato sono siti web, in cui la navigazione scorre veloce e con l’utente che si sente all’interno di una vera esperienza.
Inizialmente, questo tipo di animazioni e micro interazioni, non venivano molto utilizzati dai designer.
Perchè? Per quale motivo?
Perchè fino a qualche tempo fa non c’erano importanti framework o plugin che aiutavamno a sviluppare e realizzare transizioni.
Quindi on venivano utilizzate perchè sono un pò complesse da implementare e può avere delle ripercussione anche in ottica SEO.
Poi con il passare degli anni, si è arrivati a implementarle sempre più frequentemente perchè non interrompono il flusso di navigazione.
Faccio un’esempio
Prendiamo l’esempio un’ecommerce, l’utente appena trova un prodotto che gli interessa, clicca su di esso per arrivare alla pagina di dettaglio.
Prima di arrivare su quest’ultima, c’è quei pochi secondi di pausa per il caricamento, in cui a volte viene visualizzata pagina bianca.
Successivamente, arriva sulla pagina di dettaglio.
Ecco..la transizione viene implemenata per inserire un’animazione nel momento in cui c’è il quel momento in cui visualizziamo la pagina bianca perchè il sito sta caricando.
Così facendo l’utente viene guidato verso l’obiettivo finale, senza avere una navigazione a scatti.
A parole forse non è così facile a capire come sembrerebbe a primo impatto.
Quindi rimando a un’esempio presente sul sito Codepen, per darvi un’idea del movimento di una transizione.
Clicca qui, per vedere l’esempio su Codepen
Qui, appena si clicca suno dei link del menu, prima di passare alla pagina successiva, avviene un’animazione Slide-in.
Che, come spiegherò più avanti, è una delle animazioni più comuni nel web design.
Le varie tipologie
Ci sono vari tipi di transizioni, dalle più semplici alle più complesse.
In queste righe descriverò le più semplici..Anzi le più conosciute.
Perchè creare un’effetrto grafico del genere, per chi, è alle prime armi, non è assolutamente facile.
E questo, come descriverò più avanti, è uno dei motivi per cui non è un’effetto ancora ben diffuso.
Nell’immagine, qui sopra, elenco le animazioni più utilizzate nel mondo del web design.
Ques’ultime sono riutllizzabili anche per realizzare effetti grafici di transizione, per passare da una pagina diversa.
La prima è il classico effetto Fade-in/fade Out, appena clicchiamo su un link del menù, la pagina corrente avrà una diminuzione graduale dell’opacità.
Invece la pagina successiva, partirà da un’opacità a 0, per poi pian piano arrivare a un’opacità di 1.
La seconda è l’effetto Slide-in/Slide Out, con la pagina corrente che uscirà dalla pagina sul lato destro con un movimento orizzontale e con una lòeggere perdita di opacità,.
Invece la pagina successiva che dvremo renderizzare, entrerà nella pagina dal lato sinistro.
Ovviamente, nessuno vieta che essa parta dalla parte opposta, con la pagina corrente che esce di scena a sinistra.
L’altro effetto ben diffuso è l’ Overlay, in cui sopra la pagina corrente, si posiziona un box che percorre un percorso sull’asse orizzontale a ‘nascondere il contenuto.
Appena il box in sovrapposizione avrà terminato l’animazione, verrà visualizzata la nuova pagina.
Infine c’è l’effetto Slide In/Slide Out, in cui la pagina corrente effettua un’aimazione con movimento sull’asse verticale ad uscire verso il lato superiore.
Nel frattempo, entra in scena il contenuto della pagina successiva, che entra dal lato inferiore della finestra.
Come si possono utilizzare al meglio?
Come tutti gli effetti ed animazioni, bisogna sempre sapere quando e come utilizzarli per non cadere nell’errore di farne un’uso spropositato e senza senso.
Possiamo realizzare delle transizioni per guidare l’utente verso l’obiettivo; ad esempio l’acquisto di un prodotto.
Creare una esperienza immersiva, in cui l’utente si sente all’interno di un’esperienza unica, incui può navigare nel sito senza avere troppi stacchi e pause.
E non per ultimo, si possono inserire queste animazione per migliorarne il design del sito e renderlo moderno e in linea con le ultime tenenze del design.
I vantaggi sono molti, ma come detto bisogna saperli utilizzare sapientemente.
Perchè se no potremmo cadere in un’errore grave, are animazioni noiose, troppo lente, complesse e questo può annoiare l’utente che sta navigando.
Le animazioni non devono essere troppo lunghe, perchè, come detto prima, l’utente vuole un sito che non abbia troppo scatti e tempi di attesa.
Come non utilizzarle in modo sbagliato?
Nelle righe precedenti ho descritto, come utilizzarle e cosa sono.
Invece ora, descrivo come non bisogna utilizzarle, per non rovinare l’esperienza utente, e avere un sito troppo dinamico e pieno di animazioni inutili.
Perr prima cosa, bisogna utilizzare le transizioni in modo sensato, senza inserirle solo perchè rendono il sito bello.
Le transizioni devono “accompagnare” la navigazione dell’utente e non disturbarla; egli si deve essere portato ad un’azione.
Se si inseriscono troppe transizioni, si rischia di perdere l’utente che, sarà annoiato dalle continue animazioni.
E c’è il rischio che possa abbandonare il nostro sito.
Quando noi realizziamo questo tipo di transizioni, ci può essere il caso in cui coinvolgiamo tanti movimenti degli elementi.
Ecco..Anche qui, si deve cercare di non “muovere” troppi elementi dell’interfaccia, rischiando di confondere l’utente.
Infine un consiglio, di usufruire dei tanti plugin e framework Javascript che si trovano online.
Anche qui, attenzione perchè alcuni di essi sono belli pesanti e c’è il rischio che rallentino il sito.
Alcuni plugin utili
Visto che, non è facilissimo trovare plugin o pacchetti che aiutino a realizzare queste animazioni, vi elenco quelli che ho trovato e testato.
Non sono molti…Ma possono sicuramente tornarvi utili
Il primo è considerato il migliore, ed è Barba.js.
Questo script in Javascript permette di realizzare transizioni molto belle e complesse, utilizzando una sintassi del codice chiara.
Barba.js è utilizzato dai migliori web designer del settore; e sul già citato sito Awwards si possono trovare tanti bei progetti realizzati con Barba.
Devo ammettere che, personalmente, ho dovuto perderci un pò di tempo prima di capire al meglio come funzionasse.
Prima di utilizzare Barba.js consiglio di studiare bene HTML, CSS3 e Javascript, oltre ad avere una conoscenza base di Ajax.
Altro script molto utile sull’argomento è Swup.js, che a differenza di Barba.js, è molto più semplice e veloce da utilizzare.
Con Swup.js basta avviare collegare lo script al fiule html e, successivamente, gestire le animazioni con la CSS3.
Infine, come i più esperti avranno notato, cito Anime.js.
Anime è una libreria molto utilizzata e conosciuta, e permette di avere maggior controllo delle animazioni.
In questo caso, non è semplice come Swup, e ci vuole un pò di conoscenza delle nozioni di Javascript.
Conclusione
Oggi, dopo alcune settimane in cui cercavo di approfondire la tematica, ho siegato cosa sono le transizioni e come utilizzarle.
Consiglio vivamente di dare un’occhio alle librerie che ho indicato e di studiare questo argomento, perchè sta prendendo sempre più piede nel web design.
