A volte guardi un sito che potrebbe essere abbastanza attraente, ma manca qualcosa. Ha grandi colori, una bella grafica, un perfetto allineamento e una copia intelligente, ma c'è solo qualcosa di blando. Anche se tutto sembra bello, niente sta veramente attraversando vividamente a un livello più grande di qualsiasi altra cosa. Questa soluzione a questo problema è la gerarchia visiva.
I progettisti sono spesso abbastanza intuitivi da dare agli elementi della pagina una gerarchia chiara senza nemmeno pensarci, altre volte la mancanza di intenzione in quest'area porta a un progetto come quello descritto sopra. Questo articolo esaminerà alcuni dei principi di base della progettazione con una gerarchia visiva delle informazioni in mente.
Principi al lavoro
La ragione per cui la gerarchia visiva è così importante è che, grazie alla sua padronanza, puoi avere un controllo immenso sul modo in cui un visitatore legge la tua pagina. In un mondo ideale, ogni spettatore leggerebbe tutte le informazioni della pagina a fondo, permettendoti di avere tempo e spazio infiniti per far passare il tuo messaggio. Tuttavia, la realtà è che probabilmente avrai solo pochi secondi per attirare l'attenzione di qualcuno e dirgli di cosa tratta il sito prima che si allontanino e si rechino altrove.
Stabilendo una chiara gerarchia di grafica e informazioni, i lettori quasi non possono fare a meno di seguire inconsciamente il percorso che hai impostato per loro. Tecnicamente, non due persone leggeranno una pagina esattamente nello stesso modo, ma puoi creare forti tendenze nel modo che preferisci.
Questo gioca su un certo numero di diverse aree e metodi. La gerarchia visiva può essere stabilita attraverso la posizione, la dimensione, il colore e la complessità di un elemento in relazione agli altri elementi della pagina.
Per strutturare correttamente il tuo messaggio, dovrai considerare tutto dai caratteri che utilizzi agli spazi bianchi attorno a un dato oggetto. Sii sempre consapevole di ciò che attira l'attenzione sulla tua pagina e assicurati che sia intenzionale.
Posizione
La posizione è uno dei modi più basilari per stabilire la gerarchia. Considera il seguente esempio:
Le probabilità sono, al primo sguardo a questa immagine, non eri abbastanza sicuro di cosa stesse succedendo. Probabilmente i tuoi occhi sfrecciavano un po ', cercando un modello distinguibile. Ora guarda questo esempio, usando le stesse lettere.
Improvvisamente, sebbene il messaggio sia ancora distorto dallo spazio fisico e dalle forme non necessarie, diventa molto più facile da decifrare quando invertiamo l'ordine. Sebbene entrambi i messaggi inducessero i tuoi occhi a vagare intorno all'immagine, la seconda ha reso molto più facile vedere le lettere che si univano per formare parole rispetto alla prima. Questo perché sei abituato a leggere da sinistra a destra. Quando c'è un caos visivo incerto su una pagina, il primo modo in cui il tuo cervello vuole provare a organizzare le informazioni è nell'ordine in cui ti è stato insegnato a leggere: da sinistra a destra, dall'alto in basso.
Questo non ha lo scopo di scioccarti, è ovvio che leggiamo da sinistra a destra. Tuttavia, diventare consapevolmente consapevoli di questa tendenza ti aiuterà a strutturare il tuo contenuto in modo appropriato. Ricorda che questo principio si estende oltre le parole in elementi grafici su una pagina. Se presenti i tuoi utenti con una griglia di oggetti, abbastanza simili per dimensioni, forma e colore, avranno la tendenza a leggere la griglia da sinistra a destra se non richiesto diversamente.
Non è noioso?
Potresti chiederti come sarebbero i tuoi progetti se aderissi fortemente al principio di lettura z sopra riportato. La risposta è incredibilmente noiosa e poco originale.
L'obiettivo è quindi essere in grado di allineare gli oggetti su una pagina in modo più attraente, facendo sì che il lettore trascuri la loro tendenza al subconscio di leggere in a? Z.? Ciò si ottiene attraverso l'uso degli altri principi della gerarchia visiva discussi di seguito.
Taglia
Nel mondo del design, le dimensioni contano sicuramente. Variando le dimensioni degli oggetti su una pagina, puoi facilmente rompere la tendenza del modello z.
Nonostante il fatto che la domanda scritta sia più alta del quadrato, le dimensioni e l'audacia della piazza attirano la tua attenzione prima delle parole. Diamo un'occhiata a questo principio applicato praticamente al web design.
Questa è una pagina estremamente semplice che utilizza una chiara gerarchia visiva. La citazione al centro della pagina è abbastanza grande per essere il primo oggetto che attira la tua attenzione. Dopodiché, il logo in alto a sinistra non è solo il luogo naturale in cui ripristinare le tendenze di lettura, ma è anche il prossimo elemento di contrasto nella pagina. Il progettista ha strutturato il sito in modo che se passi solo pochi secondi sulla pagina, leggi? Pensa in grande. Sii agile.? seguito da? Hobson Dungog + Davis.?
Questa è la classica manipolazione della gerarchia visiva al lavoro (si noti che anche gli spazi sono pesantemente in gioco). Sarebbe stato facile impostare la citazione in alto a sinistra, seguita dal logo, ma il layout non sarebbe stato altrettanto interessante o flessibile.
Colore
L'uso intelligente del colore può essere uno dei modi più visivamente interessanti per differenziare gli elementi di una pagina e attirare l'attenzione dove lo si desidera. L'ossessione del tuo cervello per il contrasto farà sì che i tuoi occhi si focalizzino su oggetti che risaltano semplicemente per la loro differenza di colore in relazione agli oggetti circostanti. Considera il seguente esempio:
Questo designer ha utilizzato diverse tonalità di colori contrastanti e complementari per stabilire una gerarchia visiva in quello che altrimenti sarebbe un blocco monotono di testo. Le sezioni più luminose attirano la tua attenzione e ti consentono di ottenere facilmente l'essenza del paragrafo senza prendere il tempo di leggerlo.
Anche qui il contesto entra pesantemente in gioco. Se questo fosse un disegno di stampa, non penseresti a nulla del testo colorato più luminoso al di là di quello che avrebbe dovuto attirare la tua attenzione. Tuttavia, sul web, il tuo cervello si aspetta che queste aree ovviamente intenzionali di attenzione significino qualcosa di più significativo: in questo caso, un link.E trasformare il testo più luminoso in link è esattamente ciò che questo designer ha fatto. Nonostante la formattazione non tradizionale rappresentata dalla mancanza di un'area di navigazione, è possibile capire rapidamente come funziona il sito a causa dell'uso, immaginato, della gerarchia visiva.
Complessità visiva
L'ultimo modo che esamineremo per controllare la gerarchia visiva è attraverso la complessità visiva e gli schemi distinguibili. Il principio qui è che se vuoi che qualcosa risaltino sulla tua pagina più degli oggetti che lo circondano, rendilo considerevolmente più o meno complesso. Anche se gli oggetti hanno dimensioni e colori simili, la maggiore complessità aumenterà l'interesse visivo.
Questo principio è fortemente legato a modelli riconoscibili. Come accennato in precedenza, il tuo cervello cerca costantemente di dare un senso e forzare l'ordine sul caos dei pixel che vedi sullo schermo. Si aggrapperà quindi alle aree che non sono solo le più interessanti a causa della loro complessità, ma anche quelle che possono imporre uno schema familiare.
L'esempio di base sopra può insegnarci molto su come focalizziamo la nostra attenzione. Ci sono due aree dell'immagine che si distinguono maggiormente. La prima e più ovvia area sono le due forme particolari nella riga superiore. Non solo sono visivamente più complessi degli oggetti che li circondano, ma ricordano anche qualcosa di familiare: un paio di occhi. Nonostante il caos attorno a loro, queste forme attirano la tua attenzione perché i volti sono tra gli oggetti più familiari, amichevoli o persino minacciosi che incontriamo. Se si desidera impostare una determinata area in alto nella gerarchia visiva, non importa dove si trova su una pagina, non si può sbagliare con una faccia.
Dopo aver rinunciato al paio di occhi, il tuo prossimo probabile bersaglio sono i due triangoli ripetuti nella fila in basso. Qui di nuovo il tuo cervello sta cercando di imporre l'ordine. Comprende quest'area un po 'più degli altri a causa dell'elemento ripetuto. Usare la ripetizione selettiva nei tuoi progetti è un modo eccellente per aggiungere interesse visivo, connettere oggetti distanti e condurre lo spettatore lungo il percorso che vuoi che vada. Per utilizzare efficacemente la ripetizione, è sufficiente implementare le variabili che abbiamo appena discusso (dimensioni, colore e complessità) come base per l'elemento ripetuto.
Conclusione
L'obiettivo di questo articolo era di rendervi più consapevoli di come utilizzare i concetti di gerarchia visiva per controllare la prominenza degli oggetti in una pagina e guidare gli spettatori nella direzione in cui vorreste che fossero. Spero di essere riuscito a farvi applicare consapevolmente una gerarchia chiara e intenzionale in ogni elemento che progettate.
Usa i commenti qui sotto per dirci cosa hai pensato dell'articolo e se hai mai pensato molto al tuo uso delle gerarchie visive informative.