Ogni sito utilizza una struttura per organizzare il contenuto. Questo è necessario poichè il contenuto deve essere facilmente raggiungibile e comprensibile. La struttura più comune che viene utilizzata consiste nel classificare le pagine in gruppi, spesso con sottogruppi distinti. Il risultato finale è una gerarchia di contenuti, una struttura ormai divenuta familiare alla maggior parte di noi grazie alle nostre interazioni con il web.

Le decisioni su come raggruppare esattamente i contenuti possono avere conseguenze su come funziona (o non funziona) la struttura del sito per gli utenti, ma queste sfumature sono difficili da capire a prima vista. Per analizzare come funzionerà una struttura, spesso è necessario creare una visualizzazione a diagramma che mostri in un colpo d’occhio come le diverse pagine di un sito si relazionano tra loro.

Consideriamo queste 2 strutture: ognuna rappresenta la stessa quantità di informazioni e mostra una certa logica di organizzare il contenuto per un sito web. Tuttavia, l’esperienza di navigazione dell’utente finale in queste 2 gerarchie, anche se contengono esattamente le stesse informazioni, sarà molto diversa.

Entrambe queste gerarchie di siti iniziano in alto con un’unica home page, ma le informazioni sotto quella pagina sono organizzate in modo abbastanza diverso: il sito Web a sinistra ha 8 categorie principali, mentre il sito a destra ne ha solo 4. A sinistra abbiamo una gerarchia di contenuti piatta (o ampia) perché ha solo 3 livelli. La struttura a destra è profonda, con 5 livelli, ma categorie e sottocategorie ad ogni livello, e finisce per apparire più alta e stretta.

Sebbene i visitatori del sito Web non percepiscano mai questo tipo di visualizzazione, la forma della gerarchia ha un enorme impatto sull’esperienza dell’utente finale, per 2 motivi:

  1. Il contenuto è più rilevabile quando non è sepolto sotto più livelli intermedi. A parità di altre condizioni, le gerarchie profonde sono più difficili da usare.
  2. Le categorie che sono specifiche e non si sovrappongono sono le più facili da capire.

Le gerarchie profonde, quando ci sono solo poche categorie su ogni livello, tendono ad essere più generiche e, quindi, più confuse. Una gerarchia più piatta con più categorie a ogni livello di solito ha etichette più specifiche che sono più facili da capire; ma in ampie gerarchie con un numero molto elevato di elementi, c’è spesso qualche sovrapposizione concettuale tra almeno alcune delle categorie. Gli utenti possono anche essere sopraffatti da menu lunghi e disordinati. Facciamo un esempio.

Gerarchie deep

Al momento in cui scrivo, il sito istituzionale dell’INPS si presenta in questo modo:

Come si può notare il menu nell’intestazione è composto solo da 4 voci principali + il link alla Home. Questo è un tipico esempio di gerarchia profonda. Cliccando su ogni voce, apparirà un sottomenu (quindi un primo livello di profondità). Cliccando nuovamente su una sottovoce, apparirà la pagina interessata che presenterà un ulteriore livello di approfondimento, rendendo la gerarchia dei contenuti ancora più profonda:

Richiedere agli utenti di fare clic su così tanti livelli per accedere a contenuti specifici di solito non funziona bene. Gli utenti si perdono facilmente, si distraggono o semplicemente decidono che il lavoro da fare è troppo e si arrendono. E’ evidente che per cercare informazioni sul Presidente dell’INPS risulta scomodo nonostante la nostra esperienza ci porti ormai a navigare quasi correttamente sulla pagina. Quindi, per gerarchie più profonde è fondamentale fornire opzioni di navigazione alternative: scorciatoie che conducano direttamente ai livelli inferiori. In questo caso, per ovviare ad un menu eccessivamente profondo, si è pensato di spezzare la struttura posizionando un menu di servizio laterale (evidenziato in rosso) in cui poter continuare la scansione dei contenuti.

Un altro esempio di gerarchia profonda è quella del comune di Milano. Come si può notare il menu è composto da 4 sole voci. Cliccando su ciascuna voce apparirà un “megamenu” multilivello ad espansione laterale (come nel finder di Mac). Ciascuna voce apre progressivamente un dettaglio fino ad arrivare al 4 livello di dettaglio. Cliccando sull’ultima voce apparirà finalmente l’informazione richiesta.

Attenzione, utilizzare una gerarchia profonda, non significa sbagliare. A volte la gerarchia profonda rappresenta il compromesso ideale per rappresentare le informazioni su un sito, specie per quei siti istituzionali che raccolgono al loro interno una quantità non omogenea di informazioni.

Gerarchie flat (anche troppo flat…)

Dall’altro lato abbiamo le gerarchie piatte, ovvero quelle in cui si preferisce aumentare le categorie in primo livello anzichè la profondità. Il risultato, abbastanza poco fruibile, potrebbe essere come quello in figura:

Il sito ASP SR utilizza una certa gerarchia flat, poichè tutte le informazioni sono quasi tutte immediatamente reperibili dal primo livello, nonostante si sia cercato di separare in sezioni le varie voci del menu laterale. Il risultato rappresenta un sito molto confuso, e l’utente si sentirebbe altrettanto frustrato per la mancanza di indicazioni chiare e precise su come reperire il contenuto desiderato. Quindi, in questo caso, la scelta non è stata ideale.

Rappresentare le gerarchie nell’interfaccia

Con le gerarchie piatte, è relativamente facile per gli utenti capire come una determinata pagina è correlata ad altre pagine, purché ci siano alcuni menu di navigazione visibili. Più una gerarchia diventa profonda, più è probabile che i visitatori diventino disorientati. Allo stesso tempo, più la gerarchia è flat, più categorie ci sono, più è probabile che gli utenti si disorientino ugualmente.

Il consiglio quindi è quello di utilizzare dei sistemi di rappresentazione della gerarchia in una pagina web. Per i siti che non sono troppo profondi, i sistemi breadcrumb (le molliche di pane di Pollicino, che mostrano un collegamento per ogni livello del sito dalla home page alla pagina corrente) possono aiutare gli utenti ad orientarsi e a comprendere la struttura del sito. Le mappe del sito sono un altro modo utile per aiutare gli utenti a vedere la struttura di un sito web.

Deep o Flat?

Come sempre, non esiste un’unica risposta giusta. Sicuramente utilizzare gli estremi potrebbe essere controproducente. Le gerarchie piatte tendono a funzionare bene se hai categorie distinte e riconoscibili, perché le persone non devono fare clic su tanti livelli. Quando gli utenti sanno cosa vogliono, semplicemente lascia che li trovino.

Ma ci sono eccezioni a ogni regola. In alcune situazioni, ci sono troppe categorie per mostrarle tutte a un livello. In altri casi, mostrare argomenti specifici troppo presto confonderà il tuo pubblico e gli utenti capiranno meglio le tue offerte se includi alcune categorie intermedie per fissare bene il contesto.