Coerenza Visiva: Come Catturare l’attenzione degli Utenti

Curare la Coerenza Visiva, significa fare attenzione all’uso della tipografia, agli elementi UI ed al colore, ma soprattutto, significa ottimizzare il proprio sito per catturare l’attenzione degli utenti.

Nell’immenso e caotico web, essere riconoscibili alla prima occhiata è una qualità vitale per ogni brand!

Infatti, questo elemento dimostra tutta la sua importanza quando dobbiamo conquistare l’attenzione dell’utente in pochi secondi.

Come è possibile farlo? Creando un’esperienza coerente in ogni touchpoint tra utente e brand.

Siccome nel mondo del web il senso più usato è la vista, allora questa coerenza deve essere visiva e si organizza in tre elementi.

I 3 elementi della coerenza visiva:

1. Tipografia
2. Elementi UI
3. Colore

Scopriamoli uno per uno!

Tipografia

Sentiti pure libero di sperimentare con font e stili differenti, ma non esagerare!

Di certo vorrai creare un contenuto caratterizzato dalla diversità per ogni elemento che userai, come titolo, contenuto, link, ecc.

Mentre puoi selezionare diversi caratteri, stili e pesi per le diverse categorie di contenuto, il modo in cui li gestisci deve rimanere coerente. Sempre.

Ad esempio, se usi un font serif in grassetto per tutte le intestazioni H1, assicurati che tutte le intestazioni H1 del tuo sito ricevano lo stesso trattamento.

Per assicurare la coerenza, dovresti impostare le proprietà del font globalmente attraverso CSS.

La tipologia del carattere, dimensione, colore e l’altezza della linea possono essere tutti impostati su CSS come nel seguente esempio:

body { font: 1em/1.5em Cambria, Arial, serif; color: #151; }

Oltre ai caratteri coerenti, assicurati che l’allineamento sia coerente e che l’interlinea sia corretta, in rapporto alla dimensione del carattere.

Il rapporto deve essere approssimativamente 1.4 – 1.6 x la dimensione del tuo carattere.

Tutti questi piccoli accorgimenti permettono di infondere armonia tra tutti i tuoi contenuti, migliorando la leggibilità e la familiarità.

Eccoti una Checklist per analizzare la coerenza del tuo sito

• Headers – Qui vanno usati una grande dimensione del carattere e va applicato il grassetto per le parole che si vogliono mettere in risalto.
• Subhead – Maiuscole miste, niente grassetto
• Testo – Misto maiuscolo e minuscolo, grassetto solo per le parole importanti che si vogliono mettere in risalto

Elementi UI

L’uso degli elementi grafici, delle icone, della texture, della spaziatura del layout e delle immagini devono essere utilizzati per creare un’unica e coerente atmosfera visiva dell’interfaccia.

In particolare, fai attenzione a questi elementi:

• Relazioni spaziali – Assicuratevi che il contorno intorno agli elementi grafici sia coerente, altrimenti romperai il flusso visivo. Controlla anche di aver inserito volutamente lo spazio per separare elementi con funzioni diverse.

• Immagini – Visivamente, le tue immagini dovrebbero riflettere lo stesso look, sensazione e consistenza. In termini di implementazione, assicurati che di non far aprire alcune immagini in nuove schede mentre altre appaiono in lightbox. Scegli uno stile e attieniti ad esso.

• Dimensione – Gli elementi correlati dovrebbero essere della stessa dimensione ed avere un aspetto simile (cioè, tutti circolari o tutti quadrati). Secondo i principi della Gestalt, qualsiasi variazione nell’aspetto suggerirà una diversa funzione. Infatti, gli elementi più grandi appaiono più importanti e se due elementi sono correlati, dovrebbero essere più simili come dimensione.

Colore

Fai molta attenzione nella scelta dei colori del tuo sito web. Ogni tonalità di colore, dove questa viene mostrata e gli altri colori con cui interagisce, tutto insieme crea grande impatto emotivo sul tuo utente.

Il tema del colore è molto ampio e variegato. In questo Blog Post ci limiteremo a dire che colori diversi evocano emozioni diverse nei tuoi utenti (il verde suggerisce prosperità e serenità, il blu suggerisce fiducia, il rosso suggerisce passione, ecc.).

Seleziona una tavolozza fissa di colori per il tuo sito e rimani coerente.

I colori che scegli dipendono da te, in base allo stato d’animo che vorresti suscitare nei tuoi utenti. A meno che tu non stia evidenziando elementi specifici, i colori su ogni pagina dovrebbero completarsi a vicenda.

Per un esempio di coerenza dei colori, guardiamo il sito web per il negozio d’arte Michael’s.

Il loro sfondo cremoso accentua il nero dominante per il loro logo e i menu – questo uso ripetuto del nero aderisce alla coerenza di colore.

La semplice combinazione di colori bianco-nero (circa) fa sì che l’uso coerente del verde risalti davvero, enfatizzando le loro offerte di vendita.

L’uso occasionale del rosso (il pulsante di ricerca, la posizione del carosello di immagini) attira l’attenzione su di sé, ma il suo uso sporadico lo mantiene per lo più sullo sfondo.

Conclusioni

Hai appena scoperto come creare un’esperienza coerente in ogni touchpoint tra utente e brand e come restare a galla nel mondo del web grazie alla Coerenza Visiva.

Se ti è piaciuto questo articolo e non vuoi perderti i prossimi contenuti, iscriviti alla nostra Newsletter!