La Grafica di un sito internet è uno degli elementi più importante in ogni progetto web.
Quello che tecnicamente definiamo il layout grafico influenza, spesso in modo determinante, il comportamento dell’utente nella nostra pagina, e influenzare il comportamento dell’utente è fondamentale per centrare gli obiettivi per cui il sito web è stato realizzato.
E’ quindi fondamentale in ogni progetto web curare nei minimi dettagli i mockup grafici e la progettazione delle varie versioni del sito internet: desktop e mobile.
Partiamo da una considerazione semplice, in “occidente” leggiamo da sinistra a destra, questo è quindi, mediamente, il modello di lettura e visualizzazione dell’utenza in una pagina web, il cd modello f (pattern F):
Lo studio e l’analisi, di come l’utente muove il mouse nella nostra pagina e di come visualizza i nostri contenuti grafici è fondamentale per capire come posizionare gli elementi più importanti all’interno del layout grafici delle nostre pagine web.
A maggior ragione è importante per capire come “posizionare” nella pagina le così dette CALL TO ACTION (letteralmente chiamate all’azione), quei pulsanti FONDAMENTALI e centrali in una determinata pagina web, l’obiettivo principale che vogliamo ottenere dall’utente in quella pagina. Banalmente pensiamo ad un e-commerce, in una scheda prodotto il pulsante di CALL TO ACTION sarà il bottone AGGIUNGI AL CARRELLO.
Le call to action, variano ovviamente da pagina a pagina e da sito web a sito web, alcuni esempi:
- pulsante che rimanda al modulo dove compilare una richiesta di informazione,
- pulsante aggiungi al carrello,
- richiesta di iscrizione alla newsletter ecc.
questi degli esempi di obiettivi che possiamo avere nelle nostre pagine web.
Ma per fare questo devo attrarre l’attenzione dell’utente che visita il sito, ma la sua attenzione in quale parte della pagina si focalizza?
Molti studi hanno ipotizzato che l’utente ponesse la sua attenzione formando una sorta di “F” sullo schermo:
Nei giorni scorsi ho trovato questo interessante articolo di Marino Fadda che si occupava del modello comunemente chiamato “diagramma di Gutemberg”. per spiegare come la grafica del sito influenza i risultati, in termini di “conversione”
Il diagramma di Gutenberg di lettura di una pagina:
Il diagramma di Gutenberg prende in considerazione come un lettore di cultura occidentale esamina una pagina, dividendola in quattro quadranti ed iniziando a leggere in alto a sinistra. Le successive “mosse” sono:
- dal quadrante in alto a sinistra mi sposto orizzontalmente verso destra
- mi sposto in basso a sinistra
- proseguo orizzontalmente verso destra
- La seconda e la terza area sono quelle che ricevono minore attenzione, a meno che non siano enfatizzate in qualche modo tramite il design. Comunque, l’area 2 riceverà più attenzione dell’area 3. In queste zone si dovranno posizionare elementi di minore importanza, come link di navigazione secondaria.
Ma in quali zone dello schermo l’utente pone più attenzione? Dove dovrò porre gli elementi determinanti nella mia progettazione grafica del sito?
La zona ottica primaria (in alto a sinistra) è quella dove gli occhi si concentrano automaticamente ma mentre la quarta area
La seconda e la terza area ricevono minore attenzione, (l’area 2 riceverà più attenzione dell’area 3.)
Questa teoria modifica il modello “F” introducendo un modello “Z” come si può facilmente verificare da questa immagine che ripercorre il percorso visivo, che secondo questa teoria, compie l’utente
Lo sguardo tenderà a partire dalla “Primary Area” per andare a concludere la sua “corsa” alla “Terminal Area”.
Queste due aree sono quindi quelle più importanti dove inserire gli elementi del sito internet che devono portare all’azione da parte dell’utente.
La collocazione naturale della “call to action” è quindi secondo questo modello in basso a destra (nel quarto quadrante). Inserirla nel secondo o nel terzo quadrante significa collocarla in un’area “di passaggio” dove l’attenzione sarà minore in quanto l’utente dopo essersi soffermato rapidamente va a concludere la propria “lettura” nel quarto quadrante (in basso a destra)
Concludendo, non siamo davanti ad una teoria assoluta ma in fase di progettazione del layout grafico del nostro sito internet è necessario valutare tutte le ipotesi di comportamento dell’utente per scoprire poi che per arrivare ai risultati era sufficiente spostare il pulsante in una zona del sito che “naturalmente” riceve l’attenzione da parte del nostro visitatore e lo trasforma in lead o in cliente. Fare la scelta giusta in fase di progettazione grafica del sito può fare la differenza.