Principi di gerarchia visiva per i progettisti

I principi della gerarchia visiva per i designer sono un concetto di design utilizzato per guidare il modo in cui gli occhi dello spettatore si muovono attraverso un progetto e determinare quali elementi sono più importanti o visivamente accattivanti.

All'inizio c'erano tavolette di pietra, rotoli di papiro e carta. Poi sono arrivati ​​gli schermi dei computer e i tablet elettronici. Con l'evolversi della tecnologia di visualizzazione delle pagine, ai progettisti rimane un modo chiaro per organizzare i contenuti. Ma quale è meglio? In breve , gerarchia visiva.

Ecco la definizione di gerarchia visiva: la gerarchia visiva è la disposizione elementi grafici nel design in ordine di importanza di ciascun elemento. Determina il peso visivo importanza dell'elemento nella gerarchia del disegno, dicendo allo spettatore su cosa concentrarsi e in quale ordine.

Risorse per i progettisti. 50 gratuiti

Questa sta diventando una questione sempre più importante poiché i framework reattivi costringono i progettisti a pensare a molte pagine diverse contemporaneamente. Di fronte a un testo denso e con tempi di attenzione brevi, i designer hanno sviluppato 6 principi per indirizzare l'occhio del lettore verso le informazioni più importanti.

Questi 6 principi di gerarchia visiva ti aiuteranno a progettare qualsiasi cosa, dalle brochure alle app, garantendo all'utente finale un'esperienza di lettura positiva per i designer.

Tutte le culture vengono lette dall'alto verso il basso e la maggior parte delle culture viene letta da sinistra a destra. Ma sebbene questa conoscenza sia importante per progettazione della pagina, i progettisti sanno che il compito è molto più difficile.

Studi recenti hanno dimostrato che le persone scansionano prima una pagina per vedere se sono interessate prima di leggerla. I modelli di scansione tendono ad assumere una delle due forme, "F" e "Z", e puoi trarne vantaggio nel tuo progetto.

Modelli F. Principi di gerarchia visiva

Modelli F si applicano a pagine di testo tradizionali come articoli o post di blog. Il lettore esegue la scansione del lato sinistro Pagina cerca parole chiave interessanti nei titoli allineati a sinistra o nelle frasi iniziali dell'argomento, quindi si ferma e legge (a destra) quando incontra qualcosa di interessante. Il risultato assomiglia a una F (o una E, o qualcosa con ancora più strisce orizzontali; ma il termine "F" è rimasto).

Come puoi usarlo? Allinea le informazioni importanti a sinistra e utilizza titoli brevi e in grassetto, elenchi puntati e altri elementi simili che attirano l'attenzione per suddividere i blocchi di paragrafo.

Modello Z. Principi di gerarchia visiva

Motivi a Z si applicano ad altri tipi di pagine, come annunci pubblicitari o siti Web, in cui le informazioni non sono necessariamente presentate in paragrafi in blocco. Il lettore prima scansiona la parte superiore della pagina, dove è probabile che si trovino informazioni importanti, poi si sposta diagonalmente nell'angolo opposto e fa lo stesso in fondo alla pagina.

I web designer in genere progettano le loro pagine in modo che corrispondano esplicitamente a questo comportamento, posizionando le informazioni più importanti negli angoli e orientando altre informazioni importanti lungo le barre superiore e inferiore e collegando la diagonale.

Nel sotto Nella progettazione dell'assemblea della conferenza 2010, elementi importanti sono il logo (in alto a sinistra), un pulsante "registrati ora" (in alto a destra) e un elenco di relatori (in basso), posizionati strategicamente in bei punti a Z.

2. Le dimensioni contano. Principi di gerarchia visiva
_

È abbastanza semplice: le persone leggono prima le cose grandi. Se i tuoi occhi sono attratti dalla "performance" prima di "dividerti" nella pubblicità qui sotto per lo Young Vic, dovresti contattare immediatamente uno psicologo della percezione: probabilmente potresti guadagnare bene facendoti testare come una rara anomalia.

Ciò che è interessante è che questa tendenza è in realtà abbastanza forte da respingere la regola top-down. Nell'immagine sopra, "hack" sovrascrive "time to act" perché è più grande e a sinistra (quindi la regola da sinistra a destra aiuta).

Ma nella pagina successiva del Rapporto Annuale: Campagna sui Diritti Umani 2012 (sviluppato nella quinta rubrica media) leggiamo in grande font “La lotta per l’uguaglianza in campagna elettorale” prima del testo direttamente sopra “Elezioni 2012”. Principi di gerarchia visiva

"Elezioni 2012" è l'ordine di informazione di livello più alto: ci indica il tema generale a cui si riferiscono le informazioni seguenti. Ma il designer ha deciso che il titolo dell'articolo era più interessante per i lettori e quindi lo ha valutato in modo che venisse letto per primo.

3. Spazio e consistenza. Principi di gerarchia visiva

Un altro modo per attirare l'attenzione è dare ai contenuti abbastanza spazio per respirare . Se attorno al pulsante è presente uno spazio negativo significativo o le righe nel blocco di testo sono ampiamente seguite, questi elementi saranno più facilmente visibili ai lettori.

Come puoi vedere nell'immagine qui sotto (parte del sito di DrawtoClick), la spaziatura può essere un'alternativa elegante o un complemento all'uso delle dimensioni. Qui, il punto vendita, “Notre agence vouscompagne...”, è scritto in caratteri molto piccoli, ma è circondato da ampi spazi bianchi, che ne indicano l’importanza. In basso, le frasi “Le Compendre”, “Le Réaliser” e “Le Partager” ricevono ulteriore risalto, essendo staccate dallo spazio circostante.

Quando si parla di "texture" in relazione alla gerarchia visiva, non si intendono gli effetti grafici della texture. Piuttosto, questo tipo di "trama" si riferisce alla disposizione generale o alla struttura dello spazio, del testo e di altri dettagli su una pagina. Questo esempio di Bright Pink illustra bene il concetto:

Nella prima immagine, la parola "Sport" è più alta nella gerarchia rispetto a "badminton" perché è più alta, più grande e più audace. Nell'immagine 2 le due parole sono più o meno equivalenti, grazie al rettangolo nero che fa risaltare “badminton” e lo colloca nel proprio spazio.

Nella terza immagine, lo scarabocchio sullo sfondo interrompe lo spazio "Sport" ma non lo spazio "badminton", e quindi si traduce in un'inversione in cui "badminton" è il più alto nella gerarchia. Questo sviluppo è difficile da prevedere, quindi i designer spesso lo associano a un senso olistico di "trama".

4. Peso e abbinamento dei caratteri. Principi di gerarchia visiva

La selezione dei caratteri è fondamentale per stabilire una gerarchia visiva. Tra gli attributi più importanti di un carattere ci sono il peso, la larghezza dei tratti che compongono le lettere e lo stile, come serif e sans serif. Anche altre modifiche, come il corsivo, possono avere un ruolo.

Nota come cuffia influenza l'ordine della gerarchia delle parole nel web design qui sotto per The Tea Factory: "tè perfetti per aiutarti a riscaldarti" è il nome del gioco, ma le differenze nel peso del carattere e nel corsivo, oltre alla posizione delle parole, creano un effetto più esperienza di lettura dinamica, meno lineare. "://azbyka.com.ua/foto/tea-factory.jpg" />

In alcuni casi, l’obiettivo è presentare una varietà di informazioni altrettanto urgenti. Impostare tutti sulla stessa taglia e peso garantirà l’equivalenza, ma lo farà anche sembrare monotono. La differenziazione dei caratteri è un modo per evitare questo, come la copertina della rivista Trendi qui sotto. Principi di gerarchia visiva

Preparazione di una brochure per la stampa.

Qui, i cinque teaser attorno alla periferia della pagina sono gli stessi nella gerarchia, ma ottengono varietà cambiando due caratteri ben accoppiati: uno un serif di peso medio e l'altro un sans-serif leggero ma alto.

5. Colore e sfumatura. 

Ecco un altro gioco da ragazzi: i colori vivaci si distinguono dai colori tenui o dalle sfumature di grigio, mentre le tonalità più chiare appaiono più "distanti" e quindi cadono più in basso nella gerarchia rispetto alle tonalità più ricche e scure. Il sito web Where Are They contrappone la luce brillante e la retroilluminazione colorata con un effetto griglia in bianco e nero all'effetto di luminosità:

Il sito web del Guggenheim utilizza i colori per enfatizzare informazioni importanti come la selezione della sede, un elenco delle mostre attualmente in corso e collegamenti a mostre speciali. Principi di gerarchia visiva

Il miglior carattere per il packaging personalizzato

Il sito web del Whitney Museum, invece, stabilisce una gerarchia all’interno di un font, peso e tono (nero) utilizzando la tinta (che significa aggiungere bianco al tono di base, rendendolo più chiaro). "Cory Archangel on Pop Culture" è chiaramente sotto "New on Whitney Stories" nella gerarchia visiva, non solo perché è più basso, ma anche perché la sua tonalità è più chiara, rendendolo meno evidente sullo sfondo bianco. Principi di gerarchia visiva

Il colore ha un significato speciale in progettazione mobile applicazioni in cui le dimensioni ridotte dello schermo limitano la capacità di utilizzare altre strategie come la variazione delle dimensioni e l'ampia spaziatura. Nell'app Grainger Industrial Supply, il pulsante "Procedi al pagamento" è colorato di rosso, facendolo risaltare su qualsiasi pagina in cui appare. Il pannello dei risultati di ricerca ristretti, al contrario, è grigio, rendendolo più o meno equivalente nella gerarchia ad altri elementi come la barra di ricerca e i collegamenti ai prodotti.

6. Direzione per i progettisti.

I layout di pagina sono generalmente progettati per seguire una griglia di linee verticali e orizzontali, sia per convenzione sia perché è il formato più leggibile. In un sistema del genere esiste un nuovo modo di stabilire la gerarchia: rompere la griglia.

Il testo posizionato lungo una curva o una diagonale risalta automaticamente rispetto al testo circostante bloccato nella griglia, occupando il centro della scena. Questa è stata a lungo una strategia efficace nella pubblicità, come nel caso del poster della fermata dell'autobus di Frost Design.