Come utilizzare la tipografia cinetica per rendere interattivo il tuo sito Web?

La tipografia cinetica si riferisce a una forma di animazione. Qui facciamo vivere le parole.

Dico parole, ma può essere qualsiasi cosa, da una singola lettera a un intero paragrafo. Dipende da cosa vuoi ottenere attraverso quel movimento. Con questo in mente, il tuo tipo in movimento deve essere premuroso e intenzionale. Non puoi semplicemente far saltare e rimbombare le tue parole per il gusto di farlo.

Bene, puoi, ma questo uso superficiale non avrà lo stesso impatto.

Perché quando usi il linguaggio del movimento nel web design, sia creando un'animazione di design del logo che attraverso la tipografia cinetica, stai rendendo il design aperto agli utenti.

In altre parole, stai aiutando gli utenti a dimenticare che stanno semplicemente toccando uno schermo e presentare invece il tuo sito Web come qualcosa di vivo in grado di rispondere. Può sorridere, dirti cosa fare dopo, ballare quando fai clic sul pulsante destro e esplodere in stelle quando ci riesci.

Quando gli utenti possono interagire con il tuo progetto, possono decidere di dedicarci più tempo, apprezzarlo, comprenderlo in modo più completo e, infine, provare un'affinità con esso.

https://dribbble.com/shots/14187210-Behance

5 modi in cui gli elementi interattivi migliorano l'esperienza del sito web

Eleva l'estetica

L'estetica è tutto quando si tratta del tuo sito per fare la sua prima impressione. Se il tuo sito sembra squallido e mal messo insieme, quell'impressione verrà trasferita anche al tuo marchio, facendo soffrire i tuoi profitti.

D'altra parte, se un sito ha un bell'aspetto e offre funzionalità che non molti hanno visto prima sulla maggior parte dei siti, ad esempio di tipo cinetico, è una grande vittoria.

Poiché il tipo cinetico rende anche più viva l'estetica, l'impatto aumenta. Ora hai un bellissimo sito Web che le persone possono toccare, parlare, rispondere e ottenere feedback.

Questo è qualcosa che un buon vecchio sito Web statico non può fare.

Permettiti di distinguerti

Per lasciare il tuo segno indelebile nel mondo digitale, devi avere cose che gli altri non hanno.

Per qualsiasi ragione incomprensibile, nessun grande marchio sta beneficiando di ciò che può fare il tipo cinetico. Dimentica i grandi marchi, anche le startup sono cieche davanti alle meraviglie di questa bellissima meraviglia.

È qui che puoi eliminare.

Includi effetti di tipo cinetico sottili, coinvolgenti e on-brand sul tuo sito Web per rivendicare l'esperienza come unicamente tua. Mostra alle persone cosa sai fare.

Le persone guarderanno alla tua innovazione, vedranno come l'hai gestita in modo impeccabile e come aiuta la tua azienda a trasmettere il suo messaggio e inizieranno a fidarsi di te. Ti guarderanno come qualcuno che sa cosa stanno facendo. Quando viene stabilita tale fiducia, segue presto una transazione monetaria.

Mantieni l'utente coinvolto

L'intera premessa di Internet e dei social media si basa sul coinvolgimento. I tuoi contenuti devono offrire alle persone qualcosa che possa tenerli coinvolti con il contenuto, il creatore e la piattaforma.

L'utilizzo delle funzionalità di tipografia cinetica sul tuo sito Web consente di ottenere le valutazioni di coinvolgimento che puoi solo sognare.

Invece di costringerli a leggere una copia statica, stai dando loro parole dal vivo che si trasformano, cambiano, si adattano e si esibiscono per rendere il viaggio dell'utente più comprensibile e divertente.

Migliora la gerarchia visiva

La gerarchia visiva si riferisce all'ordine organizzativo in cui le cose vengono presentate all'utente. Il testo con il carattere più grande è il più importante, poi quello più piccolo e così via. Allo stesso modo, i caratteri con colori vivaci attirano la nostra attenzione più rapidamente dei caratteri in grigio o azzurro, ad esempio.

Utilizzando questi segnali visivi, aiutiamo le persone a guidare la loro attenzione su varie parti della pagina in un ordine organizzato.

Il tipo in movimento può essere di immenso aiuto qui. Invece di segnali statici, possiamo usare una tipografia fluida e trasformare le nostre lettere e parole in icone e forme che aiutano a guidare l'attenzione dell'utente.

Educare gli utenti

Quando avvii un nuovo sito Web, può essere difficile per le persone capirlo. Ma le funzionalità interattive possono aiutare.

Secondo uno studio di marketing dei contenuti, il 93% degli esperti di marketing ritiene che i contenuti interattivi siano "molto efficaci nell'educare i potenziali clienti".

Ora, questo contenuto interattivo potrebbe essere qualsiasi cosa: un post sul blog, un video, un'infografica, qualsiasi cosa, ma quando introduci il movimento in varie aree del tuo sito Web attraverso il tipo in movimento (navigazione, menu, barra di ricerca, ecc.), aumenti l'istruzione e la comprensione di un nuovo layout dieci volte.

Ecco come il tipo cinetico può rendere interattivo il tuo sito web

1. Rendi più divertente il tempo di attesa per il caricamento della tua pagina

https://dribbble.com/shots/6189182-Counter-01

Nessuno di noi è fan delle pagine Web che impiegano un'eternità a caricarsi. In effetti, secondo Google, il caricamento lento delle pagine è uno dei principali motivi per cui alcuni siti hanno una frequenza di rimbalzo più elevata rispetto ad altri.

Ma l'attività dei caratteri può aiutare qui.

Pensa a una pagina in cui le modifiche alla dimensione del testo ti informano su quanto tempo di attesa è rimasto.

Man mano che il tipo passa da una dimensione più piccola a una più grande, può avvisare gli utenti di quanto tempo potrebbero dover aspettare. Anche se le persone potrebbero non rispondere positivamente ai tempi di caricamento della pagina, quando dici loro quanto presto potrebbe finire l'attesa, è probabile che rimangano più a lungo.

Puoi rendere il tempo di attesa ancora più divertente rendendo la copia più interessante, l'animazione più accattivante e gli effetti più naturali.

2. Attira l'attenzione dell'utente e suggerisce il passaggio successivo

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

Per coloro che potrebbero non avere molta familiarità con il tuo sito Web, trovare il passaggio successivo nel percorso dell'utente può creare confusione.

Il tipo di spostamento può aiutarti ad attirare l'attenzione degli utenti sull'area giusta del sito Web al momento giusto. Ad esempio, spostare il testo sul menu digitale di un ristorante può aiutarti a guidare la tua attenzione sulle dimensioni delle porzioni mentre finalizzi i tuoi piatti. Oppure, quando prenoti un viaggio, la tipografia cinetica sul calendario integrato può aiutarti ad assicurarti di aver scelto le date giuste.

Quando rendi il percorso dell'utente facile da seguire e più prevedibile, è un segno che hai creato un'interfaccia intuitiva che la maggior parte delle persone capirà facilmente.

https://dribbble.com/shots/17559699-Move-On-Up

3. Dì alle persone su cosa concentrarsi

https://dribbble.com/shots/9287077-hop

Un'altra area chiave in cui i caratteri mobili possono migliorare un sito Web è quando devi dire alle persone su cosa concentrarsi.

Pensa a una pagina I miei servizi. Mentre una pagina statica tradizionale può fare il suo lavoro, attraverso il tipo cinetico puoi dire alle persone quale servizio è il tuo prodotto principale, quale è il secondo e così via. In questo modo, il tipo cinetico ti aiuta a stabilire e promuovere la tua nicchia.

Oltre al movimento, puoi anche convertire il tipo in forme diverse pertinenti ai tuoi servizi per rendere il tuo messaggio più visivo. Ad esempio, se sei uno scrittore, un'icona a forma di penna può fare riferimento alle tue capacità di editore mentre un simbolo a forma di lampadina può indicare una consulenza creativa.

Man mano che lettere diverse nella tua copia si trasformano in queste nuove icone, non solo sembra incredibilmente giocosa e coinvolgente, ma mostra anche un po' della tua personalità - e nel marketing, questo è (soprattutto) sempre un vantaggio.

https://dribbble.com/shots/13945869-My-Services

4. Preparare gli utenti per un cambio di stato o una transizione

https://dribbble.com/shots/11258557-Creative-Coding-5

L'e-commerce o un'esperienza di navigazione web è inondata di transizioni. Vai sempre dal punto A a B a C e così via. Le transizioni hard-cut creano un'esperienza utente fastidiosa. A nessuno piace sentirsi sbalzato da un posto all'altro. La tipografia fluida e simile a un liquido aiuta a mantenere tutto liscio.

Prepara le persone a un cambiamento che sta per arrivare. Dice loro di prepararsi. Li aiuta a entrare nella mentalità per prepararsi alla fase successiva di acquisto, download o semplicemente navigazione.

Una transizione graduale è efficace anche per mantenere l'attenzione dell'utente. Invece di una pagina statica che mostra un segnale di attesa, una bella copia con un movimento simbolico sarà molto apprezzata da tutti e aiuterà l'atmosfera del marchio.

5. Enfatizzare parole chiave, frasi o aree del sito web

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

Gran parte del sito web è composto da testo. Copia web, descrizioni e CTA sono alcuni esempi. Quando si decide di utilizzare il tipo cinetico, è possibile consentire l'animazione di questi elementi testuali. Evidenziare il tuo messaggio principale diventa più facile.

Pensa a un CTA che si trasforma in un'icona del carrello mentre finalizzi il tuo ordine online. O un messaggio di errore che mostra delusione trasformandosi in un cipiglio triste. Oppure, un elenco di episodi di podcast in cui ogni titolo diventa più grande quando passi il mouse sopra il suo nome.

Come parte del design del movimento, il tipo cinetico ti aiuta ad accentuare ciò che vuoi dire. Raddoppia il potere delle tue parole. Quindi, usalo con intenzione e pensiero.

6. Fornire feedback visivo quando un'attività viene completata con successo

https://dribbble.com/shots/16174668-KEEP-IT-UP

Quando un utente interagisce con la tua interfaccia utente, aiuta quando sa che lo sta facendo bene. Messaggi di errore, conferme e altre forme di feedback visivo aiutano gli utenti a capire cosa devono fare. Rafforzare l'azione dell'utente li aiuta a rimanere coinvolti e aumenta la probabilità che seguano ciò che devono fare.

La tipografia animata è una forma efficace di feedback visivo. È veloce, mantiene intatta l'emozione dell'esperienza e incoraggia l'utente a intraprendere ulteriori azioni.

Svolge in particolare un ruolo chiave quando lo usi per i tuoi messaggi di errore. Vuoi che le persone provino di nuovo, non si sentano frustrate e dicano loro esattamente cosa è andato storto. Quindi, ad esempio, quando un utente inserisce la password in modo errato due volte e la terza volta lo blocca dall'app, puoi includere un messaggio di errore animato che lo avverte del fatto in modo che possa stare più attento ora.

Come puoi vedere, non devi inondare il tuo sito Web con il tipo mobile. L'intera cosa sembrerà, francamente, bizzarra e troppo opprimente. Come continuo a dire, sii più sottile e riflessivo quando lavori con qualsiasi tipo di animazione. Fallo quando migliora l'esperienza e, anche in questo caso, mantieni l'effetto leggero e uniforme.

7. Aiuta a impostare il tono del marchio

https://dribbble.com/shots/17070314-SEMPLICE

Sebbene il testo animato possa aiutare tutti e tutti i settori, è più efficiente in alcuni rispetto ad altri. Prendi le banche o le assicurazioni, per esempio. Puoi animare la tua tipografia lì, ma dovrai essere molto sottovalutato. Perché se esageri anche un po' di più, può far sì che il carattere del tuo marchio abbia un successo.

Ma pensa a moda, stile di vita, vendita al dettaglio, immobili, abbigliamento/abbigliamento/giocattoli per bambini e tanti altri, e una buona dose di tipo cinetico per rendere l'interfaccia utente più interessante sembra avere molto più senso.

Anche se, da solo, non può stabilire l'intero marchio, ma può sicuramente funzionare come una grande risorsa insieme ad altri strumenti.

L'asporto

Ce ne sono tre:

1. Sii propositivo . Non farlo solo perché sembra carino. Fallo perché serve a uno scopo e poi rendilo bello.
2. Sii parsimonioso con il tuo tipo in movimento . Può essere molto da prendere. Quindi, aggiungilo solo nelle aree dell'interfaccia utente in cui hai lo spazio e dove otterrà il maggior numero di risultati.
3. Sii chiaro . Usa stili di carattere che non perdano leggibilità quando aggiungi l'animazione. Inoltre, stai lontano dagli stili di animazione che rovineranno stili di testo perfettamente leggibili.