Cerca:

27/01/2010

Il layout del sito web ideale

Come navigano e cosa guardano i visitatori di un sito Internet? Come si possono distribuire i testi e gli elementi grafici in maniera ottimale per offrire la migliore esperienza di navigazione? Come si fa a dare la giusta gerarchia ai contenuti di una pagina web?

Noi navigatori analizziamo i contenuti di qualsiasi sito più o meno come faremmo con quelli di un giornale. Li scansioniamo cioè molto rapidamente partendo dall’angolo in alto a sinistra, oppure dall’ultimo punto in cui stavamo guardando nella pagina precedente , per poi cercare di individuare le aree o i testi di nostro maggior interesse.

L’obiettivo che si pone il navigatore è fondamentale per prevedere il modo in cui si “muoverà” nella pagina. Peccato però che il focus nel nostro interesse cambi spesso e sia rapidamente influenzato dagli stimoli che riceviamo attraverso l’interfaccia stessa e dalle “distrazioni” che, più o meno consapevolmente, il web designer ha posto sulla nostra strada.

Se il sito ci è già noto e vogliamo sfruttarne una funzionalità, la nostra attenzione andrà senza indugio alla zona in cui sappiamo esserci la nostra “porta d’ingresso”, altrimenti cercheremo testi o elementi grafici collegati al nostro obiettivo originale o in grado di farcelo cambiare: immagini accattivanti, testi con parole chiave di nostro interesse, oppure, elementi grafici in forte contrasto con il resto del layout.

A meno che non ci si trovi di fronte a interfacce estremamente creative o a siti già ben noti all’utente, lo schema di analisi seguirà di solito un percorso ad “F”, che parte dall’estremità superiore sinistra della pagina (oppure da quella destra per chi legge da destra verso sinistra).

La scansione nella generalità dei casi seguirà i trend evidenziati nell'immagine seguente.

Il colore più rosso e la dimensione delle frecce indicano la forza e la profondità della scansione.

I riquadri rossi o arancioni simboleggiano le aree di potenziale attrattività isolate.

La linea trasversale indica la suddivisione tra l’area di massima visibilità e quella in cui diventa necessario inserire elementi di richiamo sempre più marcati per sottolineare l’importanza dell’elemento ed attrarre l’attenzione del visitatore.

La linea orizzontale arancione, posta nell’esempio a circa metà della pagina, mostra invece la demarcazione tra l’area visibile sopra la piega (senza cioè azionare le barre di scorrimento) e quella molto meno visibile al di sotto (4 persone su 10 usano raramente o non sono in grado di usare le barre laterali durante la navigazione web).

Considerato che oltre il 90% degli utenti ha ormai schermi con risoluzione minima 1024x768px, e che nei browser esiste sempre qualche barra di menù orizzontale, si può contare su circa 600px di visibilità verticale relativamente certi (a parte alcuni dispositivi mobile, ovviamente). Tutto il resto della pagina ha buone possibilità di non essere mai visualizzato dai navigatori.

Questi discorsi valgono soprattutto per la home page, che spesso è la prima pagina di accesso dei nostri utenti, tuttavia, i motori di ricerca hanno ormai di fatto reso importanti questi concetti anche per tutte le altre pagine interne (che devono sempre essere pensate considerando che potrebbero essere le prime pagine di ingresso al sito).

Per scegliere come posizionare al meglio gli elementi che compongono un layout web è quindi necessario fare un elenco dei contenuti che si hanno a disposizione per ogni pagina e poi metterli in ordine di importanza. Una volta fatta la lista, si dovrà capire in che modo rendere raggiungibile ogni contenuto e distribuire il tutto dando a ogni oggetto la giusta rilevanza gerarchica.

I contenuti prescelti possono essere rappresentati con:

  • testo esteso in cui si propone direttamente tutto il contenuto (magari evidenziando le frasi chiave);
  • testi di sintesi con link di approfondimento, in cui si propone una breve introduzione con link di approfondimento che punta a una pagina interna;
  • voce di menù o link testuale;
  • link grafico, collegamento con immagine o mappa di immagini o con altri elementi grafici (principalmente box animati o statici, banner e icone);
  • box interattivo, offre normalmente video o contenuti multimediali ed è caratterizzato da segni grafici che identificano il player (sostanzialmente il triangolo di play e la barra di scorrimento in basso), si differenzia dai precedenti link grafici perché gli utenti sanno che cliccandoci sopra vedranno o sentiranno qualcosa rimanendo nella stessa pagina.

Il tempo (e le analisi di usabilità) hanno dimostrato che tutti questi elementi trovano di solito collocazione ottimale in strutture a 3 colonne (come quella dell’esempio evidenziato qui sotto).

Naturalmente le proporzioni delle varie aree sono puramente indicative, e, anche eventuali sovrapposizioni tra le zone che compongono il layout non cambierebbero la sostanza del discorso. Tuttavia, a meno che non abbiate davvero molti contenuti diversi da proporre, andrebbero decisamente evitate interfacce a 4 o più colonne (è ormai verificato che risultano più difficili da navigare per la generalità degli utenti web).

I criteri principali per definire l’importanza che si vuole conferire a ogni elemento prescelto per la pagina sono invece i seguenti:

  • Posizione, più si è vicini all’angolo superiore sinistro, più il contenuto sarà messo in evidenza e reso visibile.
  • Prominenza rispetto al contesto che circonda l’elemento, si ottiene grazie a:
    • dimensione (più gli elementi sono grandi e più gli si conferisce importanza);
    • segni grafici (loghi, icone, riquadri di delimitazione, ecc.), immagini (in particolar modo i visi femminili) e animazioni (se usate senza eccessi, sono anche in grado di migliorare l’impatto emozionale del sito);
    • cambio di caratteri (font) ed evidenziazione del testo;
    • punti elenco (favoriscono anche l’approfondimento della lettura);
    • colore (dell’elemento stesso o dello sfondo che lo circonda);
    • isolamento (un elemento “immerso” in uno spazio vuoto, attrae molto di più l’attenzione rispetto alla stessa cosa mischiata in mezzo ad altro).

I contenuti che consideriamo più importanti (ed interessanti per l’utente) dovrebbero quindi sempre essere posizionati nella zona di massima visibilità, rendendoli prominenti rispetto a ciò che li circonda, oppure dovranno essere debitamente evidenziati in una zona a minore visibilità.

La massima visibilità si ottiene quindi attraverso elementi grafici posti nelle vicinanze dell’angolo in alto a sinistra e resi prominenti attraverso il contrasto con il contesto che li circonda. Il minimo livello di evidenza lo hanno invece testi estesi, non evidenziati in alcun modo, vicini all’angolo in basso a destra.

Ecco perché nel corso del tempo il logo identificativo dell’azienda e il pay-off (cioè la descrizione breve della sua attività) sono stati spesso collocati in alto a sinistra. Sono infatti le risposte naturali e più immediate alle prime domande del visitatore: “chi sei?”, “cosa fai?”.  Anche il menù di navigazione principale, svolge da questo punto di vista un’insostituibile azione chiarificatrice e di orientamento, e, per questo, dovrebbe sempre essere in una posizione di massima visibilità e prominenza (compatibilmente con l’impostazione grafica del resto del sito).

Nel corpo centrale andrebbero invece inseriti elementi che richiamano i contenuti, i prodotti o i servizi più importanti, adeguatamente evidenziati. E’ qui che gli utenti cercheranno tracce di qualcosa di interessante subito dopo aver registrato inconsciamente una prima impressione emozionale complessiva del sito ed aver guardato il logo e il pay off. Le parole evidenziate e eventuali immagini o altri elementi prominenti inseriti in quest’area sono le cose su cui si appunterà immediatamente la loro attenzione.

Più si va verso destra e verso il fondo della pagina e più sarà necessario utilizzare elementi di contrasto per sollecitare l’interesse dell’utente e spingerlo ad usare la barra di scorrimento per continuare l’esplorazione.

Nella spalla laterale destra dovrebbero essere inseriti invece contenuti meno sostanziali o scorciatoie verso aree interne del sito che non siano presenti nel menù di primo livello e che riteniamo di particolare interesse per i visitatori (prodotti o servizi in offerta, news, ecc.). Più in alto saranno collocati questi elementi e maggiore sarà l’importanza che gli diamo. Dato che comunque siamo in un aria di visibilità non primaria è bene usare qui box grafici o altri accorgimenti in grado di rendere maggiormente evidenti i contenuti (più si scende verso il basso è più ciò sarà necessario, se si vuole favorirne la visibilità).

In quest’area potrebbero trovare posto anche i richiami ad eventuali servizi del sito, come ad esempio il login ad aree riservate (molto cercato nell’angolo in alto a destra), oppure, banner pubblicitari, contenuti multimediali, e, infine, i link di servizio (ritorno alla home page, mappa del sito, dichiarazione privacy, copyright, crediti di chi ha realizzato il sito, dati di contatto dell’azienda, ecc.), che sono però anche molto cercati nel piè di pagina.

Ovviamente i meccanismi di evidenziazione e prominenza funzionano però se non se ne abusa e se ci sono gli indispensabili spazi vuoti di compensazione e respiro tra le varie aree che compongono la pagina.

Le animazioni e le immagini attirano bene l’attenzione, anche se inserite nella parte bassa o a destra, solo se non se ne è fatto un uso eccessivo nel resto della pagina e se non sembrano dei banner pubblicitari (molti utenti in questo caso tenderanno ad ignorarle). Stesso dicasi per le evidenziazioni all’interno del testo (troppi caratteri differenti o differenti colori e/o evidenziazioni troppo estese, vanificheranno infatti qualsiasi effetto sull’attenzione degli utenti).

Inoltre, più gruppi di elementi  si inseriscono in ogni area del sito e meno attenzione si otterrà per ognuno di essi.

Più testo si usa e meno saranno le probabilità che il navigatore lo legga fino in fondo. Per questo, soprattutto nelle home page, è necessario selezionare solo i contenuti che si presumono più interessanti, presentandoli con brevi testi che mirino a far approfondire la navigazione all’interno del sito (cosiddetta struttura “progressiva”).

Se vuoi segnalare risorse utili collegate a questo tema o suggerire modifiche al testo puoi farlo commentando questo post. Sei assolutamente benvenuto.


Autore: Gianpaolo Lorusso

Il tuo voto sta per essere inserito
Giudizio: 4.6 su 5. 5 voti.
layout-sito-web-ideale.pdf440 K
stampa l'aggiornamento
NICOLA, 26-09-13 11:27:
ho letto la sua riflessionepensata,studiate ed esposta in maniera eccellente. A vole pero' il navigatore entra nel......labirinto e va..................cosa ne pensa di questa mia risposta molto ermetica?Un cordiale saluto da Nicola MAVIGLIA
Marita, 22-06-17 14:56:
Complimenti, articolo completo ed esauriente.

Commenta

* - campo obbligatorio

*





*
*
rights.jpg, 3 kB space.gif, 0 kB