Quando ci si occupa di progettare una User Experience di qualità, la conoscenza dei meccanismi cognitivi è di grande aiuto per prevenire problemi legati all’architettura dell’informazione.
La gerarchia visiva è uno dei principi fondamentali di un web design efficace ed è un insieme di regole che influenzano l’ordine in cui notiamo ciò che vediamo.
Il numero preciso dei concetti legati alla visual hierarchy varia molto a seconda del tipo di applicazione, ma esistono alcuni interessanti criteri che aiutano a porsi le corrette domande in fase di realizzazione di un interfaccia.
Modello di scansione
La maggior parte degli utenti che atterra su una pagina effettuata come prima azione una rapida analisi visiva del contenuto per capire se risponde correttamente alla ricerca delle informazioni.
Questo tipo di analisi è tipicamente rappresentabile in due modelli: “F” e “Z”.
Modello “F”
il modello F riguarda principalmente pagine di ricerca o di contenuto (come articoli di blog).
L’utente esegue una scansione prevalentemente verticale lungo il lato sinistro della pagina cercando parole chiave interessanti nei titoli o nel testo.
Quando trova qualcosa di rilevante prosegue la lettura verso destra seguendo la scrittura del testo delineando quindi con il movimento degli occhi una sorta di “F”.
Modello “Z”
Il modello Z si può applicare ad altri tipi di pagine, come landing page o più in generale siti Web, in cui le informazioni non sono necessariamente presentate con un ordine prevedibile.
In questo caso l’utente esamina prima la parte superiore della pagina, dove è più probabile che vengano trovate informazioni sulla navigazione (spesso sull’area destra) per poi spostare l’attenzione più in basso a sinistra.
Questo è l’approccio più utilizzato nella progettazione dei template dove vengono posizionate le interazioni più importanti in prossimità degli angoli e i contenuti principali lungo lo scorrimento della pagina.
Principio della prossimità
Questo concetto si basa sulla tendenza del nostro cervello a percepire gli oggetti ravvicinati come correlati, specialmente se confrontati con quelli che sono posti più lontani.
La prossimità ha la capacità di separare visivamente gli elementi l’uno dall’altro e creare insiemi di informazioni visivamente riconoscibili: in molti studi si è rivelata più efficace di altre tecniche distintive come il colore o la grandezza.
È il modo migliore per associare contenuti simili senza necessariamente utilizzare separatori grafici o titoli specifici che andrebbero ad appesantire le pagine.
Gli utenti sono poco disposti ad investire tempo nella comprensione di una pagina sopratutto se complessa.
Nelle interfacce ricche di elementi e funzionalità, aiuta ad organizzare il layout per renderlo facilmente scansionabile senza necessariamente richiede un’analisi delle informazioni testuali o descrittive.
White space o spazio negativo
Esattamente come la vicinanza crea correlazione, lo spazio “vuoto” intorno agli elementi consente di raggruppare in modo logico insiemi di informazioni separandole dalle altre.
Non solo rende i contenuti più facili da leggere ma aiuta anche ad aumentare l’attenzione consentendo agli occhi di concentrarsi maggiormente su singoli elementi ben separati.
Template privi di una corretta gestione degli spazi negativi possono risultare confusi e caotici e sono spesso la causa di tempi di permanenza brevi sulle pagine di un sito.
Al contrario se gli spazi vengono gestiti con criterio, l’utente sarà in grado di concentrarsi sugli elementi chiave che lo aiuteranno a completare una determinata azione.
Colore e contrasto richiamano l’attenzione
Il colore gioca un ruolo importante per mostrare la gerarchia visiva ed il peso delle informazioni: esistono molti studi che confermano quanto i colori possono influenzare l’impatto psicologico dell’utente.
I colori hanno una loro classificazione: quelli più forti come il rosso e il nero attirano molta più attenzione, mentre i più chiari come il bianco e il giallo sono meno identificabili.
Esattamente come gli elementi più grandi sono più percepiti, i colori brillanti di solito attirano maggiore attenzione dei colori più opachi.
Sono di particolare importanza nella progettazione di applicazioni o siti per smartphone dove le dimensioni ridotte dello schermo limitano la possibilità di utilizzare altre strategie differenti come dimensioni dei font o white space.
Le combinazioni di colori utilizzate in un template e il modo in cui si relazionano tra loro sono possono creare ritmo ed equilibrio all’interno di una pagina oltre a contrasto ed enfasi.
La dimensione è visibilità
Gli utenti leggono prima i testi più grandi: l’occhio è naturalmente attratto da tutto ciò che occupa maggiore spazio.
È il motivo per cui i titoli dei giornali sono realizzati con caratteri più grandi e le notizie più importanti hanno titoli molto visibili rispetto agli articoli sul resto della pagina.
Nel design di un’interfaccia l’utilizzo di elementi più rilevanti rende migliore la reperibilità delle informazioni principali e gli utenti sono più incentivati ad interagire.
Gli elementi o i messaggi più grandi dovrebbero essere in genere i più importanti, mentre i più piccoli dovrebbero essere quelli secondari.
Un altro importante principio relativo alle dimensioni è concetto è la scala, ovvero la dimensione di un oggetto in relazione ad un altro.
Un singolo elemento, non importa quanto grande o piccolo, non ha scala finché non viene confrontato con un altro. utilizzare dimensioni differenti consente di creare armonia ed equilibrio nel design consentendo inoltre di enfatizzare gli oggetti più importanti.
