Vai al contenuto

Warren Weckesser

Sito personale

Come navigare facilmente in un sito con una mappa del sito ben organizzata

Un visitatore arriva su un sito e-commerce per trovare una gamma di carte da parati. Il menu principale mostra sei categorie, ma nessuna corrisponde…

Femme pointant un plan du site hiérarchique affiché sur un écran d'ordinateur dans un bureau moderne
6 min

Un visitatore arriva su un sito e-commerce per trovare una gamma di carte da parati. Il menu principale mostra sei categorie, ma nessuna corrisponde a ciò che sta cercando. Scorre la pagina, clicca a caso e poi se ne va. Spesso questo scenario si risolve con un elemento che molti siti relegano nel piè di pagina senza pensarci troppo: la mappa del sito.

Una mappa del sito ben organizzata non si limita a elencare link. Offre una panoramica della struttura del sito, permette di individuare una pagina in pochi secondi e compensa i limiti di un menu principale che non può mostrare tutto.

Mappa del sito HTML e sitemap XML: due file, due funzioni diverse

Spesso si confonde la mappa del sito visibile ai visitatori (una pagina HTML con link cliccabili) con la sitemap XML destinata ai motori di ricerca. Hanno lo stesso nome, ma funzioni diverse.

La mappa del sito HTML è pensata per le persone. Presenta la struttura del sito sotto forma di elenco gerarchico, accessibile dal piè di pagina o tramite un link nel menu. Chi si è perso può ritrovare la pagina che cerca senza passare dalla barra di ricerca.

La sitemap XML, invece, è un file tecnico letto dai crawler di Google o Bing. Indica gli URL da esplorare, la data dell’ultima modifica e la priorità relativa. La documentazione di Google precisa inoltre che una sitemap XML facilita la scoperta delle pagine, ma non ne garantisce l’indicizzazione.

Su un sito di arredamento d’interni, ad esempio, la mappa del sito Côté Déco raccoglie tutte le sezioni in un unico posto, evitando ai visitatori di navigare a tentoni tra le categorie del menu.

Struttura chiara: organizzare i livelli della mappa del sito

Uomo che analizza la mappa di un sito web disegnata su una lavagna in un ufficio collaborativo

Una mappa del sito che presenta duecento link in un unico elenco, senza raggrupparli, crea tanta confusione quanto l’assenza di una mappa. Il valore di una mappa del sito sta nella sua gerarchia visiva.

Raggruppare in base alle esigenze degli utenti, non alla struttura interna

Un errore frequente consiste nel riprodurre l’organigramma del back office: cartelle tecniche, categorie amministrative, nomi in codice interni. I visitatori ragionano in modo diverso. Cercano in base alle proprie esigenze (acquistare, confrontare, contattare) o agli argomenti (soggiorno, camera da letto, esterni).

Una mappa del sito efficace raggruppa le pagine in base ai percorsi degli utenti. I livelli gerarchici rispecchiano le loro scelte:

  • Primo livello: le sezioni principali del sito (catalogo, guide, contatti, note legali)
  • Secondo livello: le sottocategorie che specificano ogni sezione (carta da parati, illuminazione, mobili per un catalogo di arredamento)
  • Terzo livello, se necessario: le pagine specifiche associate a ciascuna sottocategoria

Oltre i tre livelli, la leggibilità diminuisce. Se la struttura richiede un quarto livello, spesso è un segnale che l’architettura stessa del sito va semplificata.

Testi dei link: chiarezza prima della creatività

Ogni link della mappa del sito deve descrivere chiaramente il contenuto della pagina. “Le nostre soluzioni” o “Scopri di più” non forniscono indicazioni utili. “Carte da parati viniliche per il bagno” spiega esattamente cosa si troverà cliccando.

Questa regola è in linea con una raccomandazione del W3C: le etichette di navigazione devono essere coerenti nel menu, nel breadcrumb e nella mappa del sito. Se lo stesso link è indicato con tre nomi diversi a seconda della sezione del sito, gli utenti si disorientano.

Accessibilità della mappa del sito: tastiera, dispositivi mobili e riferimenti visivi

Una mappa del sito leggibile su un grande schermo può diventare inutilizzabile su un telefono se i link sono troppo ravvicinati o se la gerarchia scompare quando vengono meno i rientri visivi. Il W3C raccomanda che la presentazione si adatti agli schermi più piccoli mantenendo intatta la struttura delle informazioni.

Due aspetti meritano particolare attenzione:

  • Navigazione da tastiera: ogni link della mappa del sito deve essere raggiungibile con il tasto Tab, in un ordine logico (dall’alto verso il basso, da sinistra a destra). L’elemento attivo, cioè il link selezionato in quel momento, deve essere riconoscibile visivamente (bordo, cambio di colore)
  • Contrasto e dimensioni delle aree cliccabili: sui dispositivi mobili, un link troppo piccolo o troppo vicino a quello accanto può causare clic involontari. Basta distanziare gli elementi dell’elenco e usare una dimensione del carattere adeguata
  • Riferimenti alle sezioni: titoli e sottotitoli nella mappa del sito (non solo elenchi) aiutano gli screen reader a passare direttamente alla categoria di interesse

Giovane donna che consulta una mappa del sito HTML sul portatile in un soggiorno in stile scandinavo

Spesso si dimentica che la mappa del sito è anche uno strumento di accessibilità. Per chi usa uno screen reader o naviga esclusivamente da tastiera, questa pagina può diventare il modo più affidabile per raggiungere un contenuto specifico.

Mappa del sito e navigazione globale: complementari, non sostitutive

La mappa del sito non sostituisce il menu principale, la barra di ricerca o il breadcrumb. Il W3C insiste su questo punto: offrire più modalità di navigazione riduce il rischio che un visitatore si trovi bloccato.

Il menu principale consente di raggiungere rapidamente le sezioni prioritarie. Il breadcrumb indica la posizione corrente nella struttura del sito. La barra di ricerca risponde a query specifiche. La mappa del sito interviene quando questi tre strumenti non bastano: per chi esplora senza un’idea precisa, per una pagina nascosta al terzo livello o quando il menu mostra solo una parte del catalogo.

Sui siti di grandi dimensioni (con diverse centinaia di pagine), la mappa del sito diventa una rete di sicurezza. Mostra l’intera struttura, mentre il menu può presentarne solo una parte. Per i siti più piccoli, bastano una ventina di link ben organizzati per includere tutte le pagine.

Il link alla mappa del sito si trova di solito nel piè di pagina, dove i visitatori abituati a navigare sul web si aspettano di trovarlo. Alcuni siti lo aggiungono anche a una pagina di assistenza o al menu secondario, aumentandone la visibilità senza appesantire la navigazione principale.

Mantenere aggiornata la mappa del sito è l’aspetto più spesso sottovalutato. Ogni nuova pagina pubblicata, ogni URL modificato o eliminato deve essere riportato nella mappa. Un link non funzionante nella mappa del sito invia un segnale negativo sia ai visitatori sia ai motori di ricerca. CMS come WordPress offrono plugin che generano automaticamente questa pagina, ma è comunque necessaria una verifica manuale periodica per individuare le incongruenze che l’automazione non rileva.

Come navigare facilmente in un sito con una mappa del sito ben organizzata