15 Aprile 2019

In auto, in mezzo al mare e - possiamo dire - nella vita, necessitiamo di punti di riferimento. Accadeva lo stesso nei boschi ai fratelli Hansel e Gretel, a Pollicino che doveva riportare a casa i suoi fratelli, a Teseo nel labirinto del Minotauro. I protagonisti di fiabe e mitologia ci hanno insegnato che lasciare dietro di sé una traccia della strada percorsa è sempre una buona idea.

Anche all'interno di un sito Web è importante che l'utente non si senta mai perso, ma venga accompagnato passo dopo passo nella navigazione grazie ad un elemento fondamentale: i Breadcrumb.

Breadcrumb: quelle briciole essenziali per non perdersi nella navigazione

Il Breadcrumb è un elemento navigazionale che informa le persone sulla loro localizzazione all’interno della struttura gerarchica di un sito. Grazie a loro, sai sempre dove ti trovi.

I Breadcrumb sono una successione di link che rappresenta il percorso effettuato attraverso il menù di navigazione principale: dall’homepage alla pagina corrente. Solitamente si trovano nella parte superiore della pagina, separati dal simbolo ">".

Esiste qualcosa di più fastidioso che premere il pulsante “Indietro” del browser per tornare alla pagina desiderata? Ecco che i breadcrumb supportano il visitatore in questo, facilitandolo nell'operazione di "tornare indietro" alle pagine precedenti o di livello superiore (se ad esempio da una scheda-prodotto voglio raggiungere la rispettiva pagina di categoria di quell'articolo).

Le 2 tipologie di Breadcrumb più diffuse

Breadcrumb basati sulla Posizione

Localizzano la posizione corrente dell’utente e lo aiutano a comprendere e navigare la gerarchia di un sito a più livelli. Questo tipo di breadcrumb è di fondamentale importanza per chi atterra in un livello profondo del sito da un'origine esterna - ad esempio attraverso i risultati dei motori di ricerca (SERP) o da un annuncio AdWords.

Breadcrumb basati sugli Attributi

Usati nei siti di e-commerce perché aiutano l’utente ad identificare una qualità o un attributo importante del contenuto visualizzato sulla pagina.

Perché e dove utilizzare i Breadcrumb?

Immaginiamo di atterrare su una pagina interna del sito mediante un external link (un collegamento da fuori quindi - Google, Facebook o da un altro sito): come possiamo comprendere rapidamente dove ci troviamo e in quale livello siamo? Un po’ come quando l’ascensore si ferma perché chiamato da qualcuno: in che piano mi trovo? Dovrei scendere?

Allo stesso modo, quando la navigazione non inizia dall’homepage, l’utente si trova spaesato se non ha dei punti di riferimento chiari: il Breadcrumb ha il compito di orientarlo e indirizzarlo verso pagine rilevanti e coerenti con la sua ricerca. I Breadcrumb comunicano il valore del contenuto della pagina e incoraggiano la navigazione.

Jakob Nielsen, guru dell’usabilità e grande sostenitore dei Breadcrumb, motiva la necessità del loro utilizzo sottolineando la mancanza di un rovescio della medaglia:

"I breadcrumb non causano mai problemi nei test degli utenti: le persone potrebbero trascurare questo piccolo elemento di design, ma non interpretano erroneamente le tracce di breadcrumb o hanno problemi a gestirli".

7 Breadcrumb Best Practice

Nell'analisi e definizione dello User Experience Design del tuo sito o e-commerce, tieni a mente i seguenti consigli.

1. I Breadcrumb come navigazione alternativa

Il breadcrumb è una funzione aggiuntiva e non sostitutiva del menù di navigazione primaria. Esso supporta gli altri componenti della navigazione, come la barra di navigazione globale o un’eventuale barra di navigazione locale.

2. Nei siti multi-gerarchici mostra un singolo percorso

Nel caso in cui una pagina abbia più di un genitore è sconsigliabile mostrare diverse tracce di Breadcrumb che riflettono i diversi percorsi nella multi-gerarchia, perché creano disordine e occupano spazio superfluo.

3. Inserisci la pagina corrente come l'ultimo elemento nella traccia di Breadcrumb

I Breadcrumb devono essere link cliccabili, ad eccezione della pagina corrente, poiché il suo ricaricamento confonderebbe l’utente. Crea una differenza visiva tra la pagina corrente e i collegamenti precedenti per facilitare la comprensione della posizione attuale.

4. Includi nei Breadcrumb solo le pagine del sito

Ogni elemento deve rappresentare un luogo effettivo dove poter atterrare.

5. Imposta l’homepage come primo link nella traccia di Breadcrumb

6. Crea nomi alternativi per le pagine

Siti web con nomi di pagine lunghi o strutturalmente profondi tendono ad avere Breadcrumb altrettanto lunghi occupando più righe e consumando spazio. L’alternativa è usare un nome esteso e descrittivo per il titolo della pagina e un nome più breve per il Breadcrumb, l’importante è che la dicitura della pagina corrente corrisponda interamente al Breadcrumb.

• Primo clic: Home > Risorse per nuovi studenti
• Secondo clic: Home > Risorse > Articoli su lezioni e aiuti finanziari
• Terzo clic: Home > Risorse > Articoli > Come richiedere un prestito per studenti

7. Separa le singole briciole

Il simbolo separatore più riconoscibile è il "maggiore di" (>). Alternativamente puoi usare le frecce che puntano a destra (→), le virgolette ad angolo retto (») o le barre (/).

I Breadcrumb nella navigazione da Mobile

Mostra un passo indietro nel Mobile

In un sito di e-commerce, quando un utente atterra sulla pagina dei dettagli del prodotto, potrebbe voler vedere prodotti alternativi della stessa categoria per effettuare un confronto. Il Breadcrumb, a questo proposito, collega al livello genitore diventando sia strumento di navigazione che indicatore di localizzazione.

Un’unica riga di Breadcrumb va benissimo

Nella navigazione con dispositivi mobile, i Breadcrumb possono occupare rapidamente più linee consumando spazio prezioso su un display già affollato. Il trucco è renderli accessibili, ma non invadenti: l'utilizzo di font di dimensione ridotta e di una posizione prefissata, accanto o sopra il titolo della pagina, impedirà ai breadcrumb di diventare disturbo visivo.

Evita Breadcrumb troppo piccoli

Ridimensionare eccessivamente i Breadcrumb riducendo la dimensione dei link può diventare un ostacolo per gli utenti - il target dei tap negli smartphone è di 1x1 cm.

I Breadcrumb nella navigazione da Mobile sono uno spreco di spazio?

Entrando in un centro commerciale, quanto è utile il cerchio rosso che ci dice ‘Ti trovi qui’? Questo suggerimento ci fa risparmiare molti passi.

Alcuni siti web, inclusi quelli strutturalmente profondi, rimuovono tutti i suggerimenti sulla posizione corrente dai dispositivi mobili, nonostante il desktop mantenga i Breadcrumb come elemento navigazionale. Ha senso smettere di praticare una buona norma di usabilità perché lo schermo diventa piccolo? Probabilmente quanto eliminare l’indicazione del pallino rosso dalla cartina solo perché qualche negozio ha chiuso.