Quante volte smettete di leggere un articolo di un blog perchè i vostri occhi faticano troppo? Il titolo è accattivante e i contenuti sono quelli giusti ma i modi in cui sono impaginati bloccano il fluire della lettura. Spesso la colpa è del content design.

Per content design si intende l’organizzazione degli elementi grafici presenti nella pagina.
Una volta capito come l’occhio umano “legge” le informazioni, si potranno organizzare gli elementi in modo da permettere una fruizione efficace e priva di fatica.

I graphic designer dovrebbero organizzare i contenuti in modo che sia subito chiaro quale elemento abbia la priorità sugli altri. Occorre impostare una chiara gerarchia visiva.
La presentazione dei contenuti deve aiutare a capire all‘istante quale elemento è il più importante e quindi deve essere “visto” per primo. Si trova cioè in cima alla gerarchia.
L’ elemento che attira l’attenzione per secondo è subordinato a quello prima e così via fino all‘ elemento meno significativo.

PRINCIPI FONDAMENTALI

Non siamo computer che elaborano tutte le informazioni in modo uguale. Dobbiamo continuamente “sottostare” al volere dell’occhio e del cervello che preferiscono prestare più attenzione ad alcuni elementi grafici piuttosto che ad altri.
Il modo in cui percepiamo le informazioni è influenzata da diversi fattori alcuni innati e altri appresi dal contesto culturale in cui siamo immersi.
Alcuni elementi che influenzano la gerarchia sono:

– Dimensione. Più grande è l’elemento e più sarà visibile per primo.

– Colore. Colori vivaci hanno più probabilità di attirare l’attenzione di toni grigi. Molto spesso nei siti web moderni è presente testo con alcune parole che sembrano “evidenziate”. In questo caso il colore rompe la monotonia dei toni grigi, attribuendo maggior valore alla parola evidenziata.

– Contrasto. I colori con forte contrasto attirano di più l’attenzione rispetto a quelli che hanno dei toni molto simili.

– Vicinanza. Quando poniamo due elementi molto vicini l’utente tende a considerarli simili e comunque correlati tra loro.

– Spazio (bianco). È possibile utilizzare lo spazio intorno al contenuto (che è spesso lo spazio bianco della pagina) per attirare l’attenzione su alcuni parti del contenuto. Lo spazio bianco ha così la funzione di isolare e quindi esaltare determinate parole

SCHEMA DI LETTURA

La progettazione di una buona gerarchia dei contenuti deve inoltre tenere conto di alcuni modelli di lettura.
Questi modelli si basano sui movimenti che i nostri occhi tendono a fare quando devono leggere una pagina per la prima volta. Il graphic designer deve fare particolare attenzione al contesto culturale in cui è immerso l’utente finale. Infatti se il lettore è un occidentale il testo verrà letto da sinistra a destra. I lettori inglesi hanno un proprio modello di “scansione” di fronte ad una pagina di testo. Le cose cambiano per i lettori arabi che invece hanno un modello diverso. Infatti l’utente arabo legge da destra verso sinistra.

IL PATTERN “Z”

In siti web con pochi contenuti di testo (ad esempio, le landing page pubblicitarire o minisiti dedicati ad solo un prodotto), la lettura avviene rispettando il modello Z.
L’occhio legge la pagina partendo dalla parte superiore sinistra in alto a sinistra (posizione ideale posizionare il logo), poi lo sguardo si sposta velocemente verso destra. Poi lo sguardo è attiravto verso il basso attraverso il contenuto (seguendo una diagonale) in basso a sinistra, prima di trasferirsi in basso a destra.
Conoscendo questo modello un buon progettista posizionerà le informazioni più importanti lungo i punti del movimento a forma di Z.

IL PATTERN “F”

Gli ux designer di solito applicano il modello F ai siti web che presentano una grande quantità di contenuti testuali.

Con il modello F, gli utenti iniziano a scansionare da sinistra a destra lungo la parte superiore, ma poi la scansione si interrompe e scende di nuovo giù lungo il lato sinistro della pagina.
Gli utenti cercano informazioni visive che interessa loro. Quando le trovano,scansionano di nuovo il testo da sinistra a destra. Questo processo viene ripetuto fino alla fine della pagina.

In questo modello di lettura sembra che l’occhio “disegni” la lettera “F”, da qui ne deriva il nome.

Ux e ui designer spesso utilizzano il pattern Z e il pattern F all’interno dello stesso sito web.
Ad esempio, si potrebbe avere una home page molto pulita che utilizza il solo pattern Z;. Tuttavia, quando l’utente scende più in profondità nel sito, si potrebbero presentare molti più dati e utilizzare un modello F.

Saper utilizzare ognuno di queste tecniche è un requisito fondamentale per web designer e digital art director. Sapere quando usarne una nello specifico e, anche meglio, come usarle insieme è quello che fa la differenza tra un professionista e chi si improvvisa.

PER APPROFONDIRE

Jones, B. (2011) Understanding Visual Hierarchy in Web Design. Web Design Tuts Plus. Retrieved from: http://webdesign.tutsplus.com/articles/understandi… [2015, May]

Bradley, S. (2015). “Design Principles: Dominance, Focal Points And Hierarchy”. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/

Cao, J. (2015). ”The 5 Pillars of visual hierarchy in Web design”. The Next Web/TNW. Retrieved from: http://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/

Discussion

Leave a reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *