L’argomento “struttura e navigazione del sito” è di fondamentale importanza qualora si sia deciso di dar vita a un proprio sito Internet. Infatti, l’essenza della missione di un sito web è di fornire dati all’utente: ben si comprende dunque come sia fondamentale organizzare i contenuti del sito e semplificare la loro consultazione. In questa sede ci occuperemo quindi di tre elementi relativi all’organizzazione e alla consultazione dei contenuti di un sito web:

  1. La struttura informativa del sito web
  2. La navigazione del sito web
  3. La ricerca all’interno di un sito web.

La struttura informativa riguarda i metodi e gli approcci per organizzare le pagine web, con due obiettivi precisi:

  • semplificare la consultazione dell’utente del contenuto del sito web
  • semplificare l’aggiunta costante di contenuto nel sito web.

La navigazione riguarda tutti i metodi impiegati per consentire all’utente di visualizzare le diverse parti del sito web, dai menu di navigazione ai collegamenti ipertestuali.

L’ultimo elemento è rappresentato dalla funzionalità di ricerca, un tool indispensabile soprattutto nei siti web di grandi dimensioni, in cui potrebbe non essere immediato capire come trovare un determinato argomento.

La struttura informativa

Con la locuzione struttura informativa ci riferiamo al modo in cui decidiamo di pianificare, strutturare e costruire le pagine di contenuto del nostro sito web. Ovviamente si deve porre maggiore attenzione a questo aspetto soprattutto in siti di grandi dimensioni, con centinaia o anche migliaia di pagine. In pratica, bisogna decidere come presentare visivamente la suddivisione delle pagine di contenuto ai nostri utenti e come legarle tra loro mediante il sistema di menu di navigazione e i link interni.

Vediamo alcune possibilità:

  • a differenza di un libro cartaceo o di una rivista, non possiamo adottare un metodo di consultazione “lineare” delle pagine web che risulterebbe limitante perché presuppone un legame concettuale tra ogni pagina e quella successiva, dall’inizio alla fine. Ma un sito web non è un libro…
  • Scartata l’ipotesi della struttura sequenziale, scartiamo anche quella di una struttura libera, in cui ogni pagina è collegata a molte altre pagine, ma senza una organizzazione rigida generale.
  • La soluzione ottimale è quella dell’organizzazione gerarchica delle pagine del sito: a partire dalla home page, tutte le altre pagine sono collocate in gruppi di pagine ben definiti dal punto di vista dell’argomento. Per esempio, un sito sulle birre potrà avere una home page, poi una serie di sezioni principali dedicate a diverse aree geografiche (Germania, Italia, Olanda ecc.) e ciascuna area geografica potrà essere suddivisa in sezioni con diverse tipologie di birra (lager, weisse, birra di frumento ecc.). Questo esempio mostra subito un problema: se creo troppe aree geografiche il menu di navigazione risulterà troppo “lungo”, se creo meno sezioni con più livelli, risulterà troppo “profondo”. È necessario trovare il giusto equilibrio per non fare impazzire il nostro utente.

In pratica, una volta che siete riusciti a scegliere l’argomento principale del vostro sito web, armatevi di carta e penna e fate rapidamente qualche schema di prova sulla ipotetica struttura del vostro sito. Potete seguire una procedura simile a questa:

  1. Individuate le diverse aree in cui potete dividere l’argomento principale (al massimo una decina).
  2. Create una gerarchia che parta dalla home page, preveda un primo livello di aree collegate direttamente alla home page (le aree del punto 1) e un secondo livello costituito dalle pagine web, ciascuna dedicata a un argomento specifico.
  3. Verificate l’eventuale necessità di creare una maggiore profondità, con un secondo livello costituito da sottoaree e un terzo livello costituito da pagine, ma non esagerate con il numero dei livelli.

Dovete riuscire a creare una struttura che:

  • rispecchi la percezione generale dell’argomento che trattate sul sito;
  • sia facile da capire per gli utenti;
  • vi permetta di collocare con efficienza i nuovi contenuti nelle aree esistenti, senza dover creare orribili sezioni dal titolo “Varie”, né dovere continuamente creare nuove sezioni o rimescolare quelle esistenti.

La navigazione

Il sistema di navigazione del sito web ha un obiettivo: permettere all’utente di spostarsi nelle pagine del sito e trovare le informazioni che cerca. L’efficacia del sistema di navigazione è aumentata dalla presenza di una struttura informativa coerente, omogenea e chiara. Se tutte le cose sono al posto giusto, trovarle sarà più facile.

Ma di cosa ha bisogno l’utente che arriva nel nostro sito per spostarsi al suo interno? Ha bisogno che lo aiutiamo a:

  • orientarsi. Dove mi trovo? Un sito web non è un ambiente fisico, è difficile orientarsi. Dobbiamo dire all’utente dove si trova.
  • Decidere dove andare. Posso arrivare dove voglio arrivare? Dobbiamo fornire all’utente gli strumenti per capire dove andare e come andarci.
  • La mappa mentale. Com’è fatto questo sito? Quanto è grande questo sito? L’utente deve capire qual è la struttura generale del sito, come sono organizzate le pagine di contenuto.
  • Voi siete qui. Sono nel posto giusto? L’utente deve capire subito se si trova proprio dove vuole trovarsi.

Ora esaminiamo i sistemi usati per consentire agli utenti di spostarsi all’interno del sito: menu di navigazione, breadcrumb (briciole di pane) e link.

I menu di navigazione

La convenzione universalmente accettata prevede di collocare i menu di navigazione nella parte alta della pagina web (anche nel caso di sito web responsive, con le pagine visualizzate sullo schermo di uno smartphone; in questo caso spesso i menu sono contratti in un’icona).

Possiamo avere un menu di navigazione principale e un menu secondario, entrambi però con valore globale per il sito, ma possiamo anche avere un menu generale e un menu locale, ossia contenente link solo per la sottosezione del sito a cui appartiene idealmente la pagina corrente.

Vediamo alcuni punti importanti sul sistema di menu di navigazione:

  • Deve essere omogeneo in tutte le pagine del sito.
  • Deve rispecchiare senza confusione il contenuto del sito.
  • Deve essere impostato in modo visivamente chiaro. Evitate sottolineature, font strampalati, etichette fantasiose e incomprensibili, colori assurdi.
  • Deve essere allineato al sistema dei breadcrumb per riaffermare agli occhi dell’utente l’organizzazione dei contenuti del sito.
  • Non deve essere eccessivamente complicato. Avrete il risultato contrario di quello sperato, cioè invece di orientare l’utente, lo disorientate.

La chiarezza del percorso: il metodo breadcrumb (briciole di pane)

Il sistema delle briciole di pane consiste nel segnalare sempre visivamente all’utente, di solito con una riga in cima alla pagina di contenuto, il punto in cui si trova all’interno del sito, indicando la via gerarchica dalla home page alla pagina corrente. I singoli elementi sono cliccabili, per cui l’utente può spostarsi verso l’alto utilizzando i breadcrumb.

La stessa struttura gerarchica a discesa verrà adottata nel menu di navigazione principale, per rinforzare la presentazione della struttura gerarchia del sito agli occhi dell’utente.

Vediamo alcuni suggerimenti sui breadcrumb ripresi dall’ottimo libro sulla web usability Don’t Make Me Think di Steve Krug:

  • Collocare i breadcrumb in cima alla pagina.
  • Usare il simbolo “>” per separare i diversi elementi.
  • Usare le parole “Voi siete qui” per comunicare con chiarezza all’utente dove si trova.
  • Mettere in grassetto l’ultimo elemento, per chiarire ulteriormente la posizione corrente.
  • Non usare i breadcrumb in sostituzione del nome della pagina.

Collegamenti in libertà: i link

I link consentono di collegare in modo più libero le pagine web fra di loro, senza sottostare all’organizzazione più rigida dei menu di navigazione e alla dipendenza dei breadcrumb dalla posizione corrente all’interno dello schema del contenuto.

Possiamo inserire i link direttamente all’interno del testo, per consentire all’utente di spostarsi in un’altra pagina che approfondisce un argomento o che tratta di un argomento correlato a quello analizzato nella pagina corrente, ma possiamo anche creare elenchi di link, sia nell’area di contenuto sia nelle barre laterali, in cui raccogliamo collegamenti a gruppi di pagine interne verso le quali vogliamo indirizzare l’utente.

L’inserimento dei link consente all’utente di spostarsi in zone magari completamente diverse del sito e questo mette ulteriormente in evidenza l’importanza di un sistema di breadcrumb: l’utente saprà sempre dove si trova nello schema generale del sito web.

La casella di ricerca: un tool indispensabile

A meno che un sito sia costituito da una manciata di pagine, tutte linkate negli elementi principali del menu di navigazione, la presenza della casella di ricerca è indispensabile. Comunque, anche se il vostro sito è di dimensioni ridotte, è utile dare all’utente la possibilità di fare una ricerca libera all’interno del contenuto del sito web. Per esempio, se non trovo subito una pagina dei contatti, potrei decidere di cercare il termine “telefono”, per capire se posso contattarvi subito.

La posizione convenzionale della casella di ricerca è in alto a destra in tutte le pagine. La struttura dev’essere semplice: una casella in cui l’utente digita il testo, un’etichetta che identifica la casella di ricerca per quello che è, un pulsante per avviare la ricerca. Etichetta e pulsante possono coincidere.

Riassumiamo cosa fare e vediamo cosa non fare con le caselle di ricerca:

  • – Collocare la casella in alto a destra.
  • – Usare la casella per digitare il testo, l’etichetta e il pulsante, che possono anche essere un unico elemento.
  • NO – Non usare termini di fantasia: limitiamoci a “Cerca” oppure “Cerca nel sito” per non confondere l’utente.
  • NO – Non complichiamo le cose. Se volete dare all’utente più opzioni, cercate di non creare confusione. Eventualmente mettete un link che porta a una funzionalità di ricerca avanzata separata.
  • NO – Evitare di esplicitare istruzioni ovvie che possono creare confusione. Se la casella di testo è, con tutta chiarezza, una casella di testo, è inutile scriverci dentro “digita qui il tuo testo”. Se non è chiaro che si tratta di una casella di testo, allora bisogna modificare la casella.

Come procedere?

Le cose sembrano più complicate di quello che sono in realtà. Per riassumere, la procedura che dovreste seguire è:

  1. Sistemare il vostro contenuto in una struttura semplice e ragionevole.
  2. Creare menu di navigazione conformi alla struttura del contenuto.
  3. Progettare un sistema di link che aiuti l’utente a spostarsi liberamente nel sito.
  4. Creare i breadcrumb per aiutare l’utente a capire sempre dove si trova.

Se progettate correttamente fin dall’inizio struttura e navigazione, eviterete fastidi agli utenti e potrete fare crescere il contenuto del sito in modo omogeneo e bene organizzato.

La nostra soluzione

A quanto detto sopra vanno solo aggiunte le motivazioni delle nostre scelte. Il nostro sito è organizzato a menù a livelli (massimo 2 per sezione, cioè al massimo due menù: la sezione Azienda ha il menù di primo livello Chi Siamo che ha come sottomenù il secondo livello Regolamentazione, Privacy ecc..). Importante capire che il numero delle voci di un determinato menù deve essere ragionevole; per questo predisponiamo periodicamente un’opera di pulizia eliminando articoli che non hanno avuto particolare successo (la percentuale di eliminazione è del 5% annuo) e che appesantiscano comunque i menù. I menù vengono organizzati quando possibile per ordine alfabetico o per ordine di importanza (quando l’argomento non è suddividibile in voci equivalenti).

Non abbiamo implementato le “briciole di pane” per scelta. Se appaiono molto logiche, in realtà sono uno strumento “stupido”, informatico, che prevede una rigida struttura a livello di file. Per esempio, se salvo in modo gerarchicamente corretto un nuovo contributo il suo percorso è a posto, ma se poi per qualche motivo lo sposto in un altro menù, devo gestire anche il suo spostamento a livello di briciole di pane; la cosa con migliaia di file può diventare molto pesante e di nessuna utilità se i livelli sono pochi (2 o 3 ) e se le varie sezioni non sono tante (diciamo una decina al massimo in modo che sia chiaro il menu che le raggruppa).

Anziché le briciole di pane, può essere molto utile implementare menù sticky, cioè che allo scorrere della pagina in basso restano nella parte alta dello schermo. Se l’utente arriva in fondo all’articolo non deve tornare su per scegliere un altro articolo della sezione. La nostra esperienza dimostra che, data la pigrizia e la propensione alla consultazione veloce dei visitatori, si ha un guadagno di pagine viste di circa il 6%.

Se volete che la gente navighi nel sito, i menù devono essere gestiti redazionalmente, non informaticamente ; se vi accontentate di coloro che entrano dai motori di ricerca e vedono una sola pagina, allora una gestione completamente automatica e informatica può andare comunque bene.

Nonostante quanto detto sopra sia ineccepibile, purtroppo la casella di ricerca (peraltro estremamente necessaria!) non è usatissima dagli utenti. Lo dimostrano le statistiche del sito e le tante mail che ci chiedono “ma dove trovo informazioni su X?”: sarebbe bastato specificare X nella casella di ricerca e si sarebbe risparmiata una mail! Questo fatto deve far riflettere come una visione troppo odierna della Rete possa essere penalizzante (per esempio i feed sono usati da pochissime persone) e come sia necessario ragionare come gente comune e non come informatici avanzati.

Add a Comment