Gerarchia visiva sul web: capiamola per sfruttarla al meglio

Sul web leggiamo in maniera differente rispetto alla carta stampata, senza rendercene conto seguiamo una gerarchia visiva. Ancora prima di leggere un contenuto il nostro cervello analizza la struttura della pagina, resta colpito dai contrasti, dai colori, dal font e, in generale, da tutte le componenti visive. Ma non solo: la pagina web viene guardata secondo una gerarchia visiva, infatti, ci sono dei punti che catturano la nostra attenzione più di altri. Molti studi sono stati effettuati a riguardo anche perché bisogna tenere conto che quasi mai una “regola” vale per tutti gli esseri umani. Analizziamo oggi tre diversi schemi che possono migliorare la user experience e, di conseguenza, il successo di un sito internet: posizionare gli elementi in maniera strategica può fare una sostanziale differenza.

Via Flickr, Antonello Tanteri

GERARCHIA VISIVA SUL WEB, IL DIAGRAMMA DI GUTENBERG:

Come già detto ci sono diversi studi che provano ad analizzare il movimento degli occhi sul web, questo particolare diagramma, che divide il layout in 4 quadranti, è adatto a pagine ricche di testo e prevede che l’attenzione dello sguardo sia così catturata e suddivisa:

Bisognerebbe quindi inserire i punti di forza nell’area in alto a sinistra ed invitare all’azione gli utenti del nostro sito web in basso a destra. Le altre zone possono essere utilizzate per contenuti di minor valore.

GERARCHIA VISIVA SUL WEB, IL LAYOUT A Z:

Questo layout è tipico di moltissimi volantini ma anche di poster di film ed è utilizzato per guidare l’occhio degli utenti seguendo la forma della lettera Z.

In questo caso il soggetto principale, sia esso il logo della nostra azienda, il titolo del film, il nome del prodotto, va posizionato in alto a sinistra. Nell’angolo in alto a destra bisognerebbe posizionare link, strumenti aggiuntivi come lo spazio riservato al log-in o alle ricerche. Lungo la diagonale bisognerebbe inserire immagini o elementi visivi perché l’occhio sfugge in questa zona. L’angolo in basso a sinistra è perfetto per le informazioni aggiuntive ed il suo opposto, ancora una volta, può essere dedicato alle call to action.

Ricorda qualcosa questo layout? 😉

GERARCHIA VISIVA SUL WEB, IL LAYOUT A F:

Questo tipo di layout è nato proprio studiando i comportamenti delle persone sul web e ritenendo che online le persone difficilmente leggono, si limitano a “scansionare” la pagine percorrendo, appunto, una F con il proprio sguardo.

Ancora una volta il logo viene posizionato in alto a sinistra, e nella prima riga delle F andranno gli elementi capaci di orientare il visitatore, la seconda riga sarà dedicata al nome del prodotto e alla call to action e la parte inferiore potrà essere divisa su due colonne dove troveranno posto gli elementi meno importanti.