Gerarchia visiva per principianti

La gerarchia visiva è l'organizzazione degli oggetti in un ordine specifico per attirare l'attenzione sulle aree previste.

Comunemente utilizzata nella progettazione UX, la gerarchia visiva offre al lettore una navigazione più facile e aiuta a dirigere la sua attenzione dove vuoi che sia.

L'uso improprio o la mancanza di gerarchia visiva possono lasciare i visitatori del sito web confusi e persi.

La gerarchia visiva è prevalente nei poster e negli annunci pubblicitari per aiutare a dirigere l'attenzione sugli elementi previsti.

Questo blog fornirà ai principianti le basi della gerarchia visiva.

Gerarchia visiva scomposta

Scomporre la gerarchia visiva in blocchi più semplici aiuta a spiegare come i designer affrontano il concetto di design.

Tre sono i tre ruoli principali nella gerarchia visiva, due dei quali sono fortemente correlati.

Dimensione

Modificare le dimensioni degli oggetti può aiutare ad attirare l'attenzione su di essi o ad allontanarli.

È essenziale lasciare la dimensione più grande per le informazioni più importanti che desideri esprimere. L'uso di troppi elementi di dimensioni simili eliminerà questo effetto, poiché nulla risalta così tanto.

Il ridimensionamento delle dimensioni è fondamentale per mostrare come si confronta con altri oggetti. Creare un senso di equilibrio aiuta a ridimensionare per enfatizzare il confronto tra il tuo oggetto più grande e quello più piccolo.

Se hai informazioni che non sono importanti, averle di piccole dimensioni le manterrà fuori mano e le lascerà dove gli utenti le vedranno per ultime.

Colori e contrasto

I colori più luminosi catturano l'attenzione meglio di altri. Questo effetto aumenta quando si combinano colori brillanti con sfondi più scuri. Il risultato fa risaltare maggiormente le tue informazioni e attira l'attenzione con facilità.

Colore e contrasto sono due parti della gerarchia visiva, ma entrambi lavorano insieme in modo impeccabile per catturare l'attenzione.

Un modo per utilizzare questo metodo è cambiare il colore di un testo evidenziandolo con un colore appariscente; attirerà l'attenzione prima di qualsiasi altro testo dai colori sbiaditi.

Maggiore è il contrasto, più forte sarà l'attenzione. L'aggiunta di differenze di colore drastiche come uno sfondo scuro con un carattere rosso brillante attirerà l'attenzione dell'utente e lo renderà la prima cosa che noterà su qualsiasi immagine o pagina web.

Quando si creano colori contrastanti per attirare l'attenzione, è meglio ridurli al minimo. Troppi oggetti contrastati confondono il lettore e creano un effetto indesiderabile e scoraggiante.

Un altro modo per utilizzare i colori è scegliere tavolozze simili per creare una correlazione tra oggetti specifici.

È meglio riservare questa tattica solo agli elementi più necessari in una pagina, poiché è lì che vuoi che tutta l'attenzione sia diretta prima.

Un buon design UX include molto contrasto, con la maggior parte dell'estetica che utilizza un forte contrasto per creare opere straordinarie.

I modelli F & Z

Quando si tratta di fornire informazioni principalmente attraverso il testo, ci sono due modelli principali che sfruttano al meglio il modo in cui elaboriamo le informazioni visive.

Questi schemi funzionano per la maggior parte delle lingue, ma funzionano alla grande per l'inglese poiché le parole vengono lette da sinistra a destra e dall'alto verso il basso.

Il modello F

Il motivo F è la scelta perfetta per i disegni che contengono testo esteso. Il disegno segue la lettera che porta il suo nome, partendo dall'alto a sinistra e proseguendo verso destra.

Dopodiché, lo spettatore esegue la scansione lungo la spina dorsale alla ricerca di sottotitoli o titoli.

Il motivo è alternativamente chiamato motivo E, sebbene il motivo F sia più iconico.

Per utilizzare il modello F, devi inserire tutte le informazioni vitali sul lato sinistro in piccoli titoli per attirare l'attenzione.

Questo design è eccellente nell'eliminare la noia associata alla lettura del testo da grandi blocchi di paragrafi.

Gli utenti possono scansionare i titoli per individuare titoli accattivanti o punti elenco, poiché servono ad attirare l'attenzione.

Il modello Z

Mentre il modello F è adatto per siti Web pesanti, il modello Z è diverso.

Il modello Z è perfetto per siti Web o annunci che non hanno diversi paragrafi di testo.

Il design inizia con le informazioni con la priorità più alta in alto a sinistra, quindi aumenta l'importanza in alto a destra, in basso a sinistra e in basso a destra.

Gli utenti navigheranno facilmente nello Z-pattern, poiché si tratta di un design di uso frequente e semplice da capire.

La sezione in alto a sinistra è solitamente riservata a un logo, poiché sarà la prima cosa che le persone noteranno. In alto a destra c'è un invito all'azione posizionato dopo che gli utenti hanno visto il logo dell'azienda. L'invito all'azione in questa situazione è solitamente una richiesta di registrazione.

La parte centrale del disegno di solito include un'immagine per riempire la parte vuota.

La parte inferiore sinistra e destra include tutto il testo o le informazioni che desideri mostrare al tuo visitatore.

Capire la tipografia

La gerarchia tipografica è facile da capire ed è applicabile a qualsiasi design che coinvolga molto testo, che è la stragrande maggioranza. Può essere suddiviso in tre parti, in cui l'ordine è il titolo, i sottotitoli e infine il testo.

I tuoi titoli contengono informazioni essenziali, sono posizionati più in alto sul tuo design e sono il contenuto più visibile.

I sottotitoli funzionano per ordinare tutto il testo e fornire ordine al disordine di paragrafi. Mantieni sempre i sottotitoli più piccoli dei titoli, poiché non dovrebbero competere in priorità.

I sottotitoli forniscono una navigazione semplice per consentire agli utenti di trovare informazioni specifiche.

Il tuo ultimo pezzo è il tuo testo, che di solito prevede paragrafi. La dimensione del carattere dovrebbe essere piccola ma mantenere la leggibilità. Le due sezioni precedenti funzionano per fornire agli utenti un momento più semplice per navigare tra i tuoi testi densi.

L'importanza della spaziatura

Per i siti Web contenenti informazioni minime, lasciare uno spazio abbondante attorno a informazioni importanti attirerà l'attenzione sul centro in cui si trova tutto lo spazio.

Questo concetto dovrebbe applicarsi anche a tutti gli altri tuoi progetti, l'aggiunta di troppe informazioni ti lascerà con un'esperienza utente spiacevole.

Il contenuto circostante con lo spazio fornisce un design UX semplice e facile da seguire.

Raccogliere troppe informazioni e lasciare poco spazio intorno alle aree ti lascerà con un design che sembra travolgente e lascerà le persone perplesse. Quando gli utenti sono confusi, hanno sempre la possibilità di lasciare il tuo sito web, assicurati di ritrarre solo le informazioni importanti.

Usando l'allineamento

È importante allineare i tuoi progetti, poiché avere il testo posizionato in modo casuale creerà un'immagine frenetica da guardare.

I design con motivo a F e con motivo a Z incorporano entrambi l'uso dell'allineamento. I modelli con motivo a F utilizzano l'allineamento a sinistra, mentre i design con motivo a Z utilizzano gli allineamenti sinistro e destro e gli allineamenti centrali.

Quando crei un design visivo con il testo come focus, è meglio allineare a sinistra.

Per i progetti strettamente visivi con un focus semplicistico, l'allineamento di tutti gli elementi al centro tende a creare un design attraente.

Utilizzo delle griglie

Quando si creano progetti, le griglie sono un metodo comune per aiutare nel processo di creazione. L'uso della regola dei terzi consente di aggiungere equilibrio ai tuoi progetti.

Per usare la regola dei terzi, aggiungi una griglia al tuo disegno e lasciala riposare su due linee orizzontali e verticali. Il risultato fornisce un design piacevole e piacevole alla vista.

Gli oggetti più vicini al centro attireranno l'attenzione, mentre quelli lontani attireranno l'attenzione per ultimi.

Vicinanza e Relazione

Quando gli elementi sono più vicini tra loro, il tuo lettore presumerà che siano correlati.

Questo può aiutarti a organizzare molte informazioni e renderle più facili da capire per il tuo spettatore.

Raggruppare le immagini con il testo significa che sono entrambe correlate e i lettori le assoceranno insieme. Avere un'immagine e il testo distanti tra loro lascerà il lettore presumere che entrambi gli elementi non siano correlati e non abbiano nulla a che fare l'uno con l'altro.

Caratteri e gerarchia visiva

Modificare la dimensione del tuo carattere con caratteri più grandi riservati a informazioni importanti aiuterà a indirizzare l'attenzione su di essi.

Per un poster, i nomi dovrebbero essere uno dei caratteri più grandi, mentre elementi come un indirizzo dovrebbero essere scritti in un carattere piccolo.

Passando dalla dimensione del carattere, l'utilizzo di diversi tipi di carattere aiuterà a dirigere l'attenzione dell'utente. Utilizzare un carattere diverso per titoli, sottotitoli e testo informativo. Questo metodo di progettazione ti aiuterà a dare al tuo lavoro il pop di cui ha bisogno per raccogliere e mantenere l'attenzione del lettore.

Suggerimenti per la gerarchia visiva

Prima di iniziare a creare il tuo design, prendere alcune note può aiutarti a organizzare il tuo design e persino a creare design più estetici.

Annota le informazioni più importanti a cui devi dare la priorità e quali metodi utilizzerai per farlo.

Inoltre, prova a immaginare il viaggio del lettore e prova a migliorare il design dell'esperienza utente e a rimuovere tutti i dettagli ingombranti.

Il ROI di un buon design UX vale sempre il lavoro extra, quindi non sottovalutarne l'importanza.

Incartare

La gerarchia visiva consiste nel dettare l'ordine in cui vuoi che l'attenzione del tuo lettore vada; vuoi che le informazioni vitali vengano visualizzate per prime, seguite da tutto il resto.

L'uso del contrasto può creare colori che risaltano e diventano la prima cosa che i lettori notano in un design.

Sapere quali informazioni desideri vengano visualizzate per prime dai lettori ti consentirà di utilizzare tutti gli elementi della gerarchia visiva per fornire agli altri un buon design UX.