Share
La gerarchia visiva è uno dei principi più importanti alla base del web design efficace. Questo articolo esaminerà perché lo sviluppo di una gerarchia visiva è cruciale sul web, la teoria alla base e come è possibile utilizzare alcuni esercizi di base nei propri progetti per mettere in pratica questi principi.
Alla base, il design riguarda la comunicazione visiva: per essere un designer efficace, devi essere in grado di comunicare chiaramente le tue idee agli spettatori o perdere la loro attenzione. Le persone sono mutevoli; se dai loro un enorme blocco di informazioni, è possibile che 99 persone su 100 non si preoccupino di leggerlo. Perché? Perché la maggior parte delle persone sono intrinsecamente pensatori visivi, non processori di dati.
Per capire perché questo è vero, è importante capire un po 'il modo in cui vediamo le cose. Le persone non sono quelle che chiameresti "spettatori di pari opportunità". Piuttosto che prendere informazioni visive e elaborarle in modo uniforme, le persone organizzano ciò che vedono in termini di "relazioni visive". Consideriamo la seguente immagine di due cerchi ordinari:
Le probabilità sono, non vedi "due cerchi"; Invece, hai visto "un cerchio nero e un cerchio rosso più piccolo".
Il motivo è piuttosto semplice: quando viene presentato con qualcosa di semplice come due cerchi, una persona non vedrà solo due cerchi ordinari, troverà un modo per differenziare tra i due. Un cerchio potrebbe essere più grande, o più piccolo, o colorato, o qualsiasi altra varietà di differenze. Queste differenze ci permettono di distinguere tra oggetti e dare loro significati unici.
Vediamo ora un'immagine più complessa:
La complessità aggiunta rafforza in realtà il nostro desiderio di "classificare" gli oggetti in termini di relazioni. Le somiglianze e le differenze diventano la cornice attraverso cui vediamo le forme. Le differenze di scala suggeriscono che un oggetto è più vicino a noi di un altro o che uno è più dominante dell'altro; Variazioni di colore potrebbero suggerire che un oggetto abbia una personalità unica che lo distingue dall'altro oggetto. Molte informazioni possono essere fornite in una singola immagine utilizzando alcuni strumenti molto rudimentali.
? Capire che le persone vedranno i nostri progetti in termini di relazioni è fondamentale per diventare un designer più efficace.
Prendiamo questo esempio per il web design; Poiché il web design è interamente basato sulla comunicazione di informazioni visive, capire che le persone vedranno i nostri progetti in termini di relazioni è fondamentale per diventare un designer più efficace. Mentre potrebbe sembrare che sia sufficiente solo per dare risalto alle informazioni, come web designer, il nostro compito è quello di abbattere quelle informazioni grezze in deliziosi piccoli pezzi di informazioni visivamente rilevanti che sono facili per gli occhi e, soprattutto, efficaci nel comunicare il messaggio dietro una pagina web.
Ci sono un centinaio di spiegazioni sul perché le persone vedono in termini di relazioni; Se dovessi risalire ad un punto di vista antropologico, potresti concludere che una mentalità da cacciatore-raccoglitore costringeva gli umani a riconoscere a un punto che vedere le relazioni è un'abilità di sopravvivenza.
Vedi, anche l'uomo preistorico aveva un sano rispetto per il contrasto visivo.
Forse una spiegazione più pratica è che è semplicemente il modo in cui i nostri cervelli classificano le informazioni: raggruppare elementi visivi simili e organizzarli in modelli significativi è intrinseco alla nostra natura umana come mangiare o bere. In ogni caso, il fatto è che anche nella sua forma più elementare, le informazioni organizzate con una gerarchia in mente saranno sempre più efficaci nella comunicazione rispetto alle informazioni non organizzate.
Considera la seguente immagine di due blocchi di testo:
Nell'esempio sopra, vediamo la forma più rudimentale di un sistema di gerarchia visiva applicato al testo. Le informazioni in ciascuno dei due esempi non sono diverse, ma il modo in cui è stato suddiviso cambia radicalmente il modo in cui il lettore lo vedrà e lo recepirà. Quando parliamo di gerarchia visiva in termini di tipografia, questo è ciò che intendiamo . La prossimità, la scala e la somiglianza della formattazione del testo consentono al lettore di organizzare l'esempio inferiore in titoli e paragrafi. La gerarchia conferisce ai titoli un significato maggiore rispetto alle altre informazioni e facilita la scansione.
Va bene, quindi questa è tutta roba di base, giusto? Facciamo un tuffo in alcuni esempi più profondi di come è possibile applicare questo molto di base principio ad alcuni molto sofisticato disegni:
Capire che la gerarchia visiva è importante va benissimo, ma come può effettivamente crearlo un designer? Gli "strumenti" che vedremo sono semplici come il set di strumenti di un falegname: martello, chiodo, sega, ecc. È quello che fai con loro è ciò che conta!
Gli oggetti più grandi richiedono più attenzione. Usare la dimensione come strumento gerarchico è un modo efficace di guidare l'occhio di chi guarda su una particolare porzione della pagina. Poiché la dimensione è una delle forme più potenti di organizzazione, è importante correlare taglia con importanza in un design. Gli elementi più importanti dovrebbero essere i più importanti nella maggior parte dei casi; gli elementi più piccoli dovrebbero essere i meno importanti.
L'uso di BIG, grassetto aggiunge un livello di ordine a questo design altrimenti caotico. L'occhio dovrebbe naturalmente spostarsi dai grandi elementi agli elementi più piccoli.
Il colore è uno strumento interessante perché può funzionare sia come strumento organizzativo che come strumento di personalità. Colori audaci e contrastanti su un particolare elemento di un sito Web richiederanno attenzione (ad esempio con pulsanti o messaggi di errore o collegamenti ipertestuali). Se usato come a personalità strumento, il colore può estendersi oltre a tipi più sofisticati di gerarchia; Usare colori lussureggianti e confortanti può portare un appello emotivo a una pagina. Il colore può influenzare tutto da un marchio di siti Web (ad esempio: CocaCola Red) al simbolismo (es .: colori freddi e tenui). Le applicazioni avanzate di colore possono anche essere utilizzate per "classificare" le informazioni all'interno di una gerarchia, come nell'esempio seguente:
Il sito di Spectra Viewer utilizza i colori per rappresentare diverse categorie di notizie, quindi è facile trovare un particolare tipo di informazioni in base alla chiave di colore.
Il contrasto mostra un'importanza relativa. Cambiamenti drammatici nella dimensione del testo o nel colore daranno un messaggio che qualcosa è diverso e richiede attenzione. Il passaggio da un colore di sfondo chiaro a un colore di sfondo scuro può separare rapidamente il contenuto principale di una pagina dal piè di pagina.
Il contrasto tra la sezione di intestazione leggera e ariosa e il footer scuro e terroso crea una gerarchia di informazioni distinta.
L'allineamento crea l'ordine tra gli elementi. Può essere semplice quanto la differenza tra una "colonna del contenuto" e una "colonna della barra laterale", ma l'allineamento può anche assumere ruoli gerarchici più complessi. Si consideri, ad esempio, la potenza delle informazioni collocate in alto a destra di una pagina web. Poiché gli utenti in generale si aspettano che le informazioni in quella parte dello schermo siano associate a profili, account, carrelli della spesa, ecc., Danno a tutti i luoghi in quell'area un senso di "ufficiale". L'allineamento può anche suscitare interesse se usato in modi unici, come nei seguenti esempi:
Il Template Stuff utilizza un esclusivo sistema di allineamento orizzontale per separare il marchio e la navigazione dai contenuti dei post dei blog.
Il modello Flex utilizza un layout ispirato alla griglia per sviluppare l'interesse visivo e una gerarchia visiva guidata dalla tassonomia.
La ripetizione assegna il significato relativo agli elementi; Se tutto il testo di "paragrafo" è grigio, quando un utente vede un nuovo blocco di testo grigio, può presumere che sia un altro paragrafo di base; quando lo stesso utente incontra un link blu o un titolo nero, può tranquillamente presumere che sia diverso e unico dal testo grigio.
Il sito Virgin crea elementi ripetitivi come testo di paragrafo, quindi interrompe la ripetizione quando vuole attirare l'attenzione (come il testo di citazione rosso).
La prossimità separa gli elementi l'uno dall'altro e crea sotto-gerarchie. All'interno di una pagina potrebbero esserci dei widget separati l'uno dall'altro dallo spazio; all'interno di questi widget c'è una nuova gerarchia di titoli, sottotitoli e contenuti. La prossimità è anche il modo più rapido per associare contenuti simili. Nell'esempio seguente, è facile trovare determinati tipi di contenuti semplicemente in base alla loro vicinanza reciproca.
I siti Tuts + lo fanno davvero bene (non per trombare il nostro corno!). La colonna sinistra "contenuto" è chiaramente separata in prossimità dello spazio del widget della barra laterale. Inoltre, i meta-dati all'interno di un particolare post del blog sono collocati in prossimità di quel post e più lontano da altri post, rafforzando il senso di "appartenenza".
L'imballaggio denso di elementi in uno spazio lo fa sentire "pesante" e ingombra; Quando gli elementi sono troppo distanziati, potrebbero perdere le relazioni l'uno con l'altro. Quando una pagina è progettata "giusto", l'occhio riconoscerà facilmente quando gli elementi sono correlati e quando non lo sono.
Distanziando gli elementi e mantenendo molti spazi bianchi sulla pagina, questo design rende più facile per le persone vagare e trovare le scatole di contenuto piccole e ricche di contenuti.
Forse lo strumento più aperto nella Toolbox Gerarchici, lo stile può essere usato per impartire una forma di gerarchia che abbraccia e trascende gli altri strumenti. Ad esempio: uno sfondo grigio piatto si "sentirà" diverso da uno sfondo di asfalto strutturato. Questo stile o personalità dato dal designer giocherà naturalmente un ruolo nel modo in cui vengono fatte le diverse relazioni visive.
Vale la pena ricordare che lo stile è anche uno degli strumenti più pericolosi che un designer può utilizzare. Proprio come un falegname che taglia il dito su una sega a nastro, un designer può facilmente ingannare la gente sottolineando in modo eccessivo certi elementi attraverso lo stile. Immagina un elemento del sito pesantemente strutturato e pesantemente progettato che richiede così tanta attenzione che distrae invece di informare. Questa stessa idea si estende a caratteri tipografici, pulsanti, schede e altri elementi. Presta attenzione all'impatto su un design generale quando scegli di aggiungere uno stile e uno stile extra a un elemento.
Il sito di Jeff Finley fa un ottimo lavoro nel combinare molti degli strumenti che abbiamo discusso qui, ma il suo uso di elementi in stile originale rispetto al foraggio UI standard è ciò che conferisce all'intero senso del design della gerarchia intenzionale. Jeff riesce ad aggiungere abbastanza stile per rendere il suo sito personale personale senza esagerare.
Una buona gerarchia visiva non riguarda la grafica sfrenata e folle o i nuovi filtri di Photoshop, ma l'organizzazione delle informazioni in un modo utilizzabile, accessibile e logico per il visitatore del sito di tutti i giorni.
Come ho appena suggerito nell'ultima sezione, è importante notare che la gerarchia può essere usata sia per il bene che per il male. Pensa a tutte le fastidiose pubblicità Flash, alle finestre popup, ai banner glitter, ecc. Con cui il web è stato tormentato nel corso degli anni! Mentre questi annunci riescono a catturare l'attenzione, alla fine falliscono il proprietario del sito e il visualizzatore rompendo la gerarchia visiva all'interno di un sito. Allo stesso modo, se un progettista costruisce una gerarchia visiva tale che alcune informazioni chiave sono quasi impossibili da trovare, il progettista avrà fallito nel suo compito. Una buona gerarchia visiva non riguarda la grafica sfrenata e folle o i nuovi filtri di Photoshop, ma l'organizzazione delle informazioni in un modo utilizzabile, accessibile e logico per il visitatore del sito di tutti i giorni.
?I designer possono creare la normalità dal caos; possono comunicare chiaramente le idee attraverso l'organizzazione e la manipolazione di parole e immagini.?-Jeffery Veen, The Art and Science of Web Design
Jeffrey Veen ha scritto queste parole nel 2001, ma detengono ancora un sacco di potere oggi dove "sovraccarico di informazioni" sembra essere un luogo comune. Come persone, abbiamo sempre avuto un acuto senso per l'organizzazione visiva. Tuttavia, come società ci siamo imbacuccati con un vero e proprio tsunami di informazioni visive negli ultimi vent'anni; di conseguenza, le persone oggigiorno sono ipersensibili alla gerarchia visiva. Questo è particolarmente vero sul web dove gli studi hanno dimostrato che i normali navigatori del web hanno imparato a "scansionare" i contenuti in modo innato; ricerca automatica di informazioni che siano rilevanti per i loro interessi e scartando / ignorando le informazioni che non lo fanno.
Per questo motivo, diventare un maestro della gerarchia visiva non è facoltativo, è obbligatorio. Poiché le tipiche piattaforme di navigazione sul Web si espandono dal monitor tradizionale a telefoni, tablet e persino televisori, sta diventando sempre più importante utilizzare sistemi visivi forti e chiari per comunicare con i navigatori del Web.
Per concludere, mi piacerebbe finire con un esercizio molto semplice. Come esempio, utilizzeremo un sito web che frequenti o un progetto su cui hai lavorato di recente; L'esercizio va così:
Nella maggior parte dei casi, la risposta includerà sfumature di "no". Ci sono molte ragioni per questo: richieste dei clienti, designer inesperti, design-by-committee - o un centinaio di altri motivi che probabilmente hai letto. Diamine, in alcuni casi, il progettista potrebbe voler indurre in errore il visualizzatore (si consideri un sito "gratuito" che sta tentando di guidare gli utenti verso i contenuti a pagamento). Qualunque sia la ragione, capire la gerarchia visiva e provare a interpretarla è un modo per migliorare il modo in cui vedi il web design in una luce completamente nuova. Spero che contribuirà a informare anche il tuo lavoro!
Accentsconagua