Information architecture struttura, etichette e navigazione
Migliorare l'information architecture del tuo sito web
L’information architecture decide come sono organizzati, etichettati e collegati i contenuti di un sito. Quando è progettata bene, il visitatore trova ciò che cerca senza pensarci; quando manca, anche il sito più curato viene abbandonato.
Perché vi riguarda
A cosa serve l'information architecture in un sito aziendale
Un sito può avere tutte le informazioni giuste e restare inutile se sono nel posto sbagliato. L'information architecture decide dove si trova ogni contenuto e come ci si arriva.
- 01
«Il menu rispecchia il nostro organigramma, non ciò che cerca il cliente»
Sezioni divise per reparti o con nomi interni costringono il visitatore a indovinare. Un'architettura dell'informazione costruita su bisogni, settori e applicazioni lo porta dove serve.
- 02
«Abbiamo più pagine che dicono le stesse cose con nomi diversi»
Contenuti duplicati e categorie sovrapposte confondono utenti e motori di ricerca. Classificare e dare a ogni contenuto un solo posto rende il sito più chiaro e più facile da posizionare.
- 03
«I clienti cercano per applicazione, il sito elenca per codice prodotto»
Il buyer arriva con un problema o un settore in mente, non con il vostro catalogo. Strutture a matrice ed etichette chiare offrono più strade per arrivare allo stesso prodotto.
- 04
«Ogni nuova linea di prodotto rende il sito più disordinato»
Senza una struttura pensata per crescere, le pagine nuove finiscono dove capita. Un'information architecture solida accoglie prodotti, mercati e lingue senza dover rifare tutto.
Prima di aggiungere pagine, disegnate la mappa del sito dal punto di vista di chi lo usa: il resto diventa più semplice. Progettazione di siti web B2B: struttura, contenuti e UX →
Information architecture: creare esperienze web intuitive e funzionali
L'information architecture
Progettare una solida Information Architecture per un sito web significa pensare come i tuoi utenti. La struttura deve riflettere le loro aspettative e comportamenti di navigazione. Ad esempio, le informazioni più importanti devono essere facilmente raggiungibili dalla homepage, mentre i contenuti correlati dovrebbero essere collegati per favorire l'esplorazione. La categorizzazione chiara e coerente delle pagine aiuta a evitare confusione e frustrazione, garantendo un’esperienza fluida. L'information architecture non solo organizza le informazioni, ma influenza direttamente la percezione del sito, rendendolo più user-friendly e aumentando la probabilità di conversioni.
Una buona Information Architecture è essenziale per la riuscita di un sito web, poiché definisce come le informazioni sono strutturate e presentate agli utenti. Un’information architecture ben pianificata permette di organizzare il contenuto in modo gerarchico, facilitando la comprensione e l'accesso alle diverse sezioni del sito. Questo include la progettazione di menu di navigazione efficaci, percorsi di clic intuitivi e una chiara suddivisione dei contenuti per argomenti o temi. L'obiettivo è rendere il sito web non solo visivamente piacevole, ma anche funzionale e facile da usare, migliorando così l'esperienza complessiva degli utenti.
Come rivedere le informazioni di un sito per migliorarne la navigabilità
Migliorare l'information architecture di un sito
- 01
information architecture
Organizzazione logica e semantica dei contenuti
L’information architecture (architettura dell'informazione) è la struttura organizzativa logica e semantica delle informazioni, dei contenuti, dei processi e delle funzionalità di un sistema o ambiente informativo. Una buona architettura delle informazioni deve consentire la rintracciabilità delle informazioni offrendo accessi multipli ai contenuti; deve evitare, cioè, di vincolare la consultazione dei dati a un’unica modalità di interazione.
L’information architecture si basa su diverse attività di organizzazione dei contenuti: classificazione, struttura, etichette, navigazione, link e tag.
- 02
organizzazione
Classificazione
La classificazione può essere mista, alfabetica, per argomento, cronologica, geografico spaziale, per compiti, per task, per target...
- 03
gerarchia
Struttura
La struttura può essere gerarchica o a matrice.
Le strutture gerarchiche si basano su una disposizione dei contenuti per livelli di profondità e di ampiezza. Una gerarchia è costituita da categorie di alto livello (macro-categorie o categorie principali) e categorie di livello sottostante (sottocategorie). Al livello più basso troviamo le cosiddette "foglie di contenuto", che rappresentano i contenuti veri e propri del sito: notizie, schede prodotto, eventi e così via.
Le strutture a matrice si basano su una disposizione in cui ogni informazione del sito può essere inquadrata da diverse angolature. È composta cioè da molte facce attraverso cui poter essere conosciuta e usata. Il termine "a matrice" sottolinea l'aspetto di un approccio multidimensionale all’architettura: è una struttura che si può percorrere in molteplici direzioni e non solo nel senso verticale-orizzontale, tipico delle strutture gerarchiche.
- 04
intestazioni
Etichette
Quando parliamo di etichette ci riferiamo a tutte le intestazioni, le voci di menù e i link del sito. Una buona etichettatura deve guidare l’utente a orientarsi facilmente nell’offerta informativa del sito, aiutandolo a distinguere fra contenuti principali e secondari. All’interno di un sito web le etichette svolgono una doppia essenziale funzione: comunicare rapidamente il contenuto dell’intero sito (così come è possibile farsi una prima idea di un libro scorrendo i titoli dei capitoli, lo stesso vale per la navigazione); permettere all’utente di individuare con rapidità i contenuti di interesse. Per assegnare etichette efficaci ai rami principali e secondari dell’alberatura di un sito è necessario essere descrittivi e distintivi. Le etichette possono essere costituite anche solo da un simbolo grafico. Contrariamente a quanto si potrebbe pensare, però, adottare un sistema di etichette basato esclusivamente su immagini e icone, anziché su testo o una combinazione dei due, presenta spesso più rischi che vantaggi. Un rischio è quello di risultare ambigui. Per non creare ambiguità le immagini usate devono essere poche (questo facilita la riconoscibilità e la memorizzazione del loro significato) e devono essere icone ben conosciute e già metabolizzate dall’utente.
- 05
menu
Navigazione
Sul web come nella realtà i bisogni sono sempre gli stessi: capire dove siamo, capire cosa c’è nelle vicinanze, capire quale percorso dobbiamo fare per raggiungere quello che ci interessa. Ecco perché nella progettazione di un sito web bisogna tenere sempre a mente il "dove siamo", il "cosa c’è nelle vicinanze" e il "quale percorso dobbiamo percorrere per raggiungere quello che ci interessa". Nel "dove siamo" rientrano: ID del sito (dominio), marchio del sito, nome della pagina, titolo pagina, breadcrumb. Le breadcrumb (letteralmente "briciole di pane") sono una tecnica di navigazione usata nelle interfacce utente. Lo scopo è quello di fornire agli utenti un modo di tener traccia della loro posizione in documenti o programmi. Il termine è tratto dalla popolare fiaba in cui Hansel lasciava una scia di briciole di pane lungo il suo cammino per poterlo ripercorrere all'indietro. Nelle pagine web le breadcrumb, solitamente, appaiono orizzontalmente nella parte superiore della pagina, al di sotto delle barre dei titoli o degli header. Rappresentano un "sentiero" composto di link utili agli utenti per tornare indietro alla pagina iniziale del sito web o a pagine visitate in precedenza per arrivare all'attuale.
- Navigazione primaria La navigazione globale (principale o primaria) è, in genere, il menu di primo livello con l’alberatura dei contenuti. Le voci di livello inferiore compongono la navigazione secondaria o locale. Di solito, la navigazione principale è visualizzata nella parte alta della pagina attraverso il menu orizzontale in modo da poter essere sempre integralmente visualizzata. Oggi è comune anche il menu che resta visibile mentre si scorre la pagina, il cosiddetto floating menu ("menu galleggiante").
- Navigazione secondaria La navigazione secondaria o locale. Nelle home è spesso presentata con menu a comparsa, o fisso, per le sottocategorie del primo livello. Nelle altre pagine rimane sotto il primo livello o a volte diventa verticalizzata a sinistra. La funzione della navigazione locale è quella di dirci che cosa è presente nelle immediate vicinanze.
- Navigazione contestuale La navigazione contestuale, facendo leva sul paradigma più antico del Web, l’ipertesto, usa i link per favorire un tipo di consultazione e di ragionamento associativo, suggerendo all’utente percorsi di navigazione alternativi a quelli previsti dalla struttura architettonica originaria. La navigazione contestuale, in realtà, pur agendo fuori dagli schemi, deve essere sempre pertinente rispetto al contenuto di origine proponendo associazioni significative fra i diversi contenuti.
- 06
collegamenti
Link
Il link (in inglese hyperlink) è un collegamento ipertestuale, cioè un rinvio da un'unità informativa su supporto digitale ad un'altra. È ciò che caratterizza la non linearità dell'informazione propria di un ipertesto. Un collegamento ipertestuale ha lo scopo di condurre ad ulteriori unità informative (documenti, immagini, ecc.) a partire da una prima unità ad esse correlata. Un collegamento ipertestuale normalmente può essere distinto dal resto del documento per qualche sua peculiarità grafica, la più tipica è una sottolineatura. Nell'architettura dell'informazione anche per i link vale la regola della predittività, cioè il nome del link deve fare capire a chi naviga verso quale tipo di contenuto rimanderà. Il link deve avere un colore diverso rispetto a quello usato per il testo che lo contiene. Bisogna, inoltre, linkare solo poche e significative parole (massimo quattro). È infine buona cosa non disporre i link su due righe. I link possono essere strutturali, topici o associativi.
- Strutturali. Link usati per connettere tra di loro livelli diversi della struttura del sito. Usati anche per connettere una data pagina con altre allo stesso livello gerarchico.
- Topici. Si tratta dei link che usano un testo sottolineato che conduce a ulteriori informazioni riguardo all’argomento.
- Associativi. Link usati per indicare altre pagine dal contenuto simile o correlato a quella attuale che l’utente potrebbe perciò trovare interessanti.
- 07
tag
Tag (navigazione complementare)
I tag sono sistemi di navigazione complementare. Altri sistemi di navigazione complementare sono "i più..." (i più visti, i più commentati, ecc.), i footer (sezioni poste a piede di una pagina web) e le sitemap o mappe del sito (pagine web che elencano gerarchicamente tutte le pagine di un sito). Il tag è diventato un mezzo di classificazione delle informazioni fra i più adottati e conosciuti. Si tratta di uno strumento che deve essere usato con oculatezza e misura, evitando il rischio dell’iper-taggatura. Troppi tag infatti possono indebolire la robustezza dei criteri di classificazione. I tag generalmente vanno collocati al termine degli articoli (o foglie di contenuto in generale) oppure raggruppati all’interno delle tag-cloud (in italiano "nuvola di etichette").
Come si progetta l’information architecture di un sito
L’architettura dell’informazione non si inventa a tavolino: si costruisce a partire dai contenuti che esistono e da come li cercano gli utenti. Il percorso tipico ha cinque passaggi.
- Inventario dei contenuti. Si elencano tutte le pagine e i documenti esistenti, indicando che cosa tenere, unire, aggiornare o eliminare.
- Analisi degli utenti e delle ricerche. Interviste a commerciali e assistenza, dati di Google Search Console, parole cercate nel motore interno del sito: servono a capire con quali termini e per quali bisogni si cerca.
- Card sorting. Si chiede a un gruppo di utenti di raggruppare su cartoncini, fisici o digitali, gli argomenti del sito e di dare un nome ai gruppi. È il modo più diretto per scoprire categorie ed etichette che per loro hanno senso.
- Alberatura. Si disegna la mappa del sito: categorie principali, sottocategorie e pagine, con i nomi definitivi delle etichette.
- Verifica. Prima di passare alla grafica si controlla, con un test sull’alberatura o un prototipo navigabile, che gli utenti trovino i contenuti dove li cercano.
Il risultato è un documento condiviso, la mappa del sito con le etichette, che guida grafica, sviluppo e scrittura dei contenuti. Va aggiornato ogni volta che entrano nuove linee di prodotto, nuovi mercati o nuove lingue, per evitare che il sito cresca per aggiunte successive e perda coerenza. È anche il modo più semplice per evitare pagine doppie che si contendono le stesse ricerche su Google.
Information architecture per un catalogo B2B: un esempio
Immaginiamo un’azienda che produce pompe industriali, con alcune centinaia di modelli venduti in settori diversi: trattamento acque, alimentare, chimico, edilizia. Il catalogo interno è organizzato per famiglie tecniche e codici, ma i clienti arrivano sul sito con domande diverse.
- Il progettista cerca per caratteristiche: portata, prevalenza, materiali.
- Il responsabile di stabilimento cerca per applicazione: «pompe per fluidi viscosi».
- Il manutentore cerca per codice, per trovare un ricambio.
- Il buyer di un altro settore cerca per settore: lavorate per aziende come la sua?
Una struttura solo gerarchica, per famiglie di prodotto, risponde bene soltanto al primo. Una struttura a matrice, come quella descritta sopra, offre più ingressi alla stessa scheda: il menu principale per famiglie, una sezione per settori e applicazioni che rimanda alle stesse schede, filtri tecnici nelle pagine di categoria e una ricerca interna che riconosce i codici. Ogni scheda ha un solo indirizzo, ma si raggiunge da strade diverse.
Le etichette fanno il resto: «Soluzioni per l’industria alimentare» è più chiaro di «Food», «Ricambi» è più chiaro di «After sales». La regola è usare le parole dei clienti, verificate con i dati delle ricerche, e non quelle dell’organigramma. Lo stesso principio vale per un negozio online: nella pagina sulla user experience e-commerce trovate come trasformare queste categorie in pagine di listing e schede prodotto.
Perché quando diventiamo tutti uguali diventa solo una questione di prezzo! What Studio facciamo la differenza.
Esempi pratici
