Quando decidiamo di lanciare un sito web “vetrina” per un’attività commerciale, un blog oppure un ecommerce, ci sono molti aspetti che dobbiamo considerare. Uno tra questi, spesso erroneamente ignorato dai neofiti, è la composizione del layout, ovvero come si presenta graficamente (e perciò visivamente) il sito in questione.
Poiché è un argomento controverso le opinioni in merito sono diverse: online troverete molti consigli, spesso estremamente discordanti tra loro. In questo post però, vorrei parlarvi di alcuni studi fatti in merito, per ottimizzare al meglio la user experience. Il potenziale cliente o comunque l’utente che si imbatte nel nostro sito non deve esserne solo attratto: deve restare e leggere quello che abbiamo da dire, facendoci arrivare all’obbiettivo prefissato (ad esempio la vendita di un prodotto o il raggiungimento di un determinato ranking).
F-Layout
Già qualche anno fa, l’informatico danese Jacob Nielsen, visto da molti come un vero e proprio “maestro dell’usabilità”, ha evidenziato come sia efficace posizionare i contenuti del layout a forma di lettera F.
Cosa significa? In pratica gli utenti che navigano su centinaia di siti, effettuano prima di tutto una scansione all’interno della nostra pagina web. Leggono per prima cosa la parte superiore di essa, da sinistra verso destra.
È in quest’area che le informazioni più importanti devono perciò essere posizionate. La seconda visualizzazione è più veloce, e consiste nel dare un’occhiata ai content che riempiono lo spazio sottostante. Infine, l’occhio dell’utente, sempre secondo Nielsen, percorre la parte sinistra del sito, in verticale ed in maniera più approfondita.
Se decidete di utilizzare l’F-Layout è quindi opportuno che il logo e le informazioni che vi preme far conoscere a chi visita la vostra pagina siano in alto, come se fossero la prima barra della lettera F. In un secondo momento, pensate alla descrizione di ciò che fate o della merce che vendete: questa sarà la seconda barra della vostra F. Il resto della vostra web-page può essere diviso in due colonne, dove la parte sinistra conterrà le informazioni più importanti. Poiché il potenziale cliente non deve abbandonare il vostro sito, è da considerare il fatto che i paragrafi descrittivi debbano contenere parole chiave e che al centro pagina si posizioni un elemento di interesse per acquistare la sua attenzione. Dobbiamo infatti pensare che l’utente si annoia facilmente, ed è terribilmente facile che vada a visitare un altro sito, invece di rimanere sul nostro!
Z-Layout
Come per il layout precedente, la struttura dei contenuti nella pagina si basa su una lettera dell’alfabeto: la Z.
Lo Z-Layout è molto utilizzato in quanto segue il movimento standard dell’occhio umano, che legge da sinistra a destra, scende di una riga e prosegue.
Per utilizzare questo tipo di disposizione dei contenuti basta seguire una Z immaginaria: sulla prima barra orizzontale si devono posizionare il logo (a sinistra), i link di navigazione e una form di ricerca (a destra), lungo la diagonale è possibile disporre un’immagine e sulla seconda barra orizzontale si devono aggiungere i contenuti riguardanti il prodotto/servizio (a sinistra) e una call to action (a destra).
Diagramma di Gutenberg
Tuttavia, ci sono altri metodi di impostazione per rendere il layout molto funzionale. Uno di questi è quello del diagramma di Gutenberg, che divide la pagina in 4.
La prima, in alto a sinistra, è la zona ottica primaria. Qui è dove l’utente inizia a leggere, ed è forse la parte più importante: il logo o il titolo del vostro blog vanno posizionati in tale spazio.
Ci sono poi altre tre parti: una forte area cieca (in alto a destra), una debole area cieca (in basso a sinistra) ed una zona terminale (in basso, a destra). In quest’ultima, termina la lettura del nostro potenziale cliente: è in tale quadrante che si posizionano i contatti. Al centro della pagina, che spesso egli non analizza con particolare attenzione, possiamo posizionare un’immagine.
Questi tre esempi possono essere spunti per la creazione del vostro sito web. Dobbiamo tener conto però che non tutti gli utenti sono uguali e leggono allo stesso modo. Non possiamo perciò analizzare solo l’aspetto “visivo”, ovvero il percorso che l’occhio umano può fare quando legge una pagina web. Sappiamo infatti, che ci sono molti altri fattori importanti da considerare nella costruzione di un sito web veramente efficace!
