Hai mai cliccato su un sito web, dai un’occhiata e dici “Hm, sarà un no” mentre cerchi il pulsante di uscita?
Per me, di solito è per tre motivi: il sito sembra obsoleto, affollato o difficile da navigare.
Un cattivo design può impedire al tuo pubblico di destinazione di acquisire interesse per il tuo marchio.
Ecco perché è importante comprendere i principi chiave del design che ti aiuteranno ad attirare il tuo pubblico, mantenerlo sulla pagina e generare conversioni.
Ecco una semplice guida su un principio di progettazione specifico: la gerarchia visiva. Tratteremo tutti gli elementi che contribuiscono alla gerarchia visiva e analizzeremo esempi positivi e negativi.
Cos’è la gerarchia visiva?
La gerarchia visiva è il metodo per disporre gli elementi grafici in ordine di importanza. Affidandoti a principi relativi a dimensioni, colore, contrasto, bianco e altro, puoi influenzare il modo in cui gli utenti interagiscono con i tuoi progetti, dalle immagini ai siti web.
La gerarchia visiva influisce su ciò che guardi e su cui ti concentri in un design, che si tratti di un’immagine, di un design grafico o di un web design. È un attore chiave in ct (ovvero, il modo in cui le informazioni sono organizzate e visualizzate per una facile comprensione e navigazione) e può avere un grande impatto sull’esperienza utente (UX).
Quando si pensa alla gerarchia visiva, è opportuno porsi alcune domande:
- Su cosa vogliamo attirare l’attenzione?
- Quali azioni vogliamo che i nostri utenti intraprendano?
- Dove va naturalmente l’occhio e dove si ferma?
Porre queste domande ti aiuterà a utilizzare i principi delineati di seguito per creare una chiara gerarchia visiva.
Cosa costituisce una cattiva gerarchia visiva?
Quando si tratta di gerarchia visiva, c’è una regola d’oro: se ogni elemento sembra importante, niente sembrerà importante.
La gerarchia visiva serve come un modo per classificare le informazioni che stai consumando. Se non c’è modo di differenziare tra gli elementi, si considera una cattiva gerarchia.
Prendi questo esempio:
A sinistra c’è Un sacco molto da fare. I due elementi principali hanno le stesse dimensioni, ci sono molti colori diversi. Rende difficile sapere dove guardare. I tuoi occhi si velano su tutto, creando un po ‘di disagio e mancanza di direzione.
A destra, l’occhio viene automaticamente attratto dalla casella blu principale a sinistra, quindi va naturalmente agli elementi a destra prima di atterrare sull’invito all’azione (CTA) arancione.
Una scarsa gerarchia visiva:
- Confonde l’utente.
- Rende poco chiaro dove cercare.
- Crea un design blando.
Invece, crea una struttura visiva che faciliti la comprensione e guidi l’utente.
Principi di web design per la gerarchia visiva
- Considera gli schemi di lettura.
- Gli utenti notano più facilmente elementi più grandi.
- Colore e contrasto attirano l’attenzione.
- Lo spazio bianco crea enfasi.
- Prossimità e ripetizione creano unità.
1. Considera i modelli di lettura.
Durante la progettazione, vuoi prendere nota dei modelli di occhi naturali del tuo pubblico di destinazione.
In tutte le culture, leggiamo dall’alto verso il basso. Tuttavia, c’è qualche variazione nel modo in cui leggiamo in orizzontale. Le culture occidentali tendono a leggere da sinistra a destra, mentre alcune lingue semitiche e indo-ariane, come l’arabo, l’ebraico e l’urdu, vengono lette da destra a sinistra.
Con questo in mente, influisce sul modo in cui scansioniamo e comprendiamo i progetti. Ad esempio, gli utenti occidentali di solito seguono uno schema di lettura F o Z.
Conoscere queste informazioni ti aiuterà a progettare progetti che convertono, in particolare nelle pagine di destinazione.
2. Gli utenti notano più facilmente elementi più grandi.
La dimensione gioca un ruolo importante nella gerarchia visiva. È uno dei modi principali per classificare gli elementi in un design.
Prendi questo esempio da Netflix.
Fonte dell’immagine
La prima cosa che leggerai guardando questa immagine è “Film, programmi TV e altro ancora illimitati.“
Quindi leggerai la riga successiva e poi quella successiva prima di esplorare gli altri elementi della pagina.
La dimensione significa importanza. Più un elemento è grande, maggiore è l’attenzione che attira e quindi è più probabile che lo guarderai prima.
Mentre progetti la tua pagina web, considera ciò che vuoi che il tuo pubblico guardi per primo e usalo per guidare la tua strategia.
3. Colore e contrasto attirano l’attenzione.
Il secondo principio da tenere a mente è il colore.
Sappiamo che il colore può evocare emozioni e può avere determinate connotazioni culturali e sociali. Basta guardare i loghi per settore e noterai una tendenza. I marchi alimentari tendono ad avere rossi e gialli, mentre le istituzioni finanziarie tendono ad essere in blu.
Nel design, il colore è ottimo per attirare l’attenzione.
Nell’esempio sopra, vedrai che gli elementi che risaltano di più sono in arancione. È solo dopo averli guardati che scansionerai gli altri elementi sulla pagina.
Su un sito web, puoi usarlo per attirare l’attenzione sui tuoi CTA.
Nell’esempio seguente, il CTA che spicca di più è nel mezzo. Il marchio probabilmente desidera che gli utenti scelgano questa opzione. Gli altri CTA sono ancora visibili ma disattivati rispetto all’arancio.
Per creare il massimo impatto visivo con il colore, usalo con parsimonia. Ciò farà risaltare maggiormente gli elementi, come si vede nell’esempio sopra.
4. Lo spazio bianco crea enfasi.
Lo spazio bianco si riferisce allo spazio vuoto all’interno di un disegno.
Fonte dell’immagine
A volte, c’è il desiderio di riempire lo spazio con quanti più elementi possibili. Tuttavia, questo risale al concetto di importanza: se sembrano tutti ugualmente importanti, nessuno di essi è percepito come importante.
Questo è il motivo per cui aggiungere spazio bianco al tuo web design è fondamentale per attirare i tuoi visitatori.
Apple è anche nota per il suo utilizzo dello spazio bianco.
Fonte dell’immagine
Il marchio offre una semplice interfaccia utente, che crea maggiore enfasi sugli elementi della pagina. L’uso dello spazio bianco da parte di Apple riflette anche l’identità di un marchio.
5. Prossimità e ripetizione creano unità.
Quando metti insieme diversi elementi, comunica all’utente che i concetti sono correlati.
Fonte dell’immagine
Questo design offre molti esempi di prossimità.
Prendi gli elementi in “Padroneggia le basi”. Avendo tutte queste caselle raggruppate strettamente insieme, il visitatore può capire che rientrano nella stessa categoria.
Lo stesso vale per le icone sotto “Seguici”. Se le icone fossero tutte distribuite in modo casuale sulla pagina, sarebbe difficile per gli utenti comprenderne lo scopo.
Se non sei sicuro di come raggruppare determinati elementi, puoi utilizzare alcune strategie di ricerca UX, come l’ordinamento delle carte, per raggruppare gli elementi in base alle aspettative del tuo pubblico.
Esempi di buona gerarchia visiva
1. Visme.co
Fonte dell’immagine
Visme.co ha un sorprendente pop-up che incoraggia gli utenti a iscriversi alla loro newsletter.
Il marchio utilizza con successo lo spazio bianco, il colore, le dimensioni e il contrasto per far risaltare gli elementi chiave. Noterai anche che gli elementi sono progettati seguendo il modello Z, rendendo più probabile la conversione degli utenti.
2. Studio 8AD
Nella progettazione del proprio sito web, questo brand sfrutta lo spazio bianco per focalizzare l’attenzione degli utenti su tre elementi chiave: l’immagine e le due CTA situate in basso a sinistra.
Fonte dell’immagine
3. Prevalentemente nero
Questo marchio offre un ottimo esempio di prossimità per creare una gerarchia visiva. 
Fonte dell’immagine
Organizzando tutti i prodotti sotto il titolo principale e lasciando poco spazio in mezzo, i visitatori capiscono subito che questi prodotti rientrano nella stessa categoria.
La gerarchia visiva consiste nel classificare i tuoi elementi in ordine di importanza. Dopo aver ristretto ciò su cui concentrarsi e aver considerato le esigenze del pubblico, è possibile creare progetti che producano l’impatto desiderato.
