9 suggerimenti breadcrumb per rendere il tuo sito più facile da navigare [+ esempi]

Pubblicato: 2022-09-13

Hai mai perso il telefono, le chiavi o il portafoglio? Se è così, probabilmente ti è stato consigliato di tornare sui tuoi passi. La navigazione breadcrumb aiuta i visitatori del tuo sito a fare proprio questo, ma invece di cercare la cucina, il bagno e l'area della porta d'ingresso solo per trovare le chiavi nel frigorifero, la navigazione breadcrumb mostra agli utenti la loro posizione attuale e i passaggi compiuti per arrivarci.

La navigazione breadcrumb prende il nome dalla fiaba Hansel e Gretel, in cui i due fratelli e sorelle lasciano dietro di sé una scia di briciole di pane mentre attraversano la foresta per mostrare il percorso di ritorno a casa. La navigazione breadcrumb implementata in modo efficace sul tuo sito Web assicurerà che i tuoi visitatori non si perdano mai nei boschi.

Accedi a centinaia di temi e modelli di siti Web su HubSpot

Che cos'è la navigazione breadcrumb?

I breadcrumb sono un aiuto alla navigazione che consente agli utenti di tenere traccia della loro posizione corrente su un sito Web o un'interfaccia. Un percorso breadcrumb mostra la pagina in cui si trova attualmente un utente e la sua relazione con le pagine che ha visitato prima o la gerarchia delle pagine padre di livello superiore sopra la pagina corrente. La navigazione breadcrumb offre all'utente la possibilità di tornare rapidamente al punto di partenza o alle pagine precedenti della visita.

I breadcrumb vengono generalmente visualizzati come un elenco orizzontale di pagine di siti Web con collegamenti ipertestuali separati da un segno maggiore di (>). La navigazione breadcrumbs è spesso situata nella parte superiore della pagina da qualche parte sotto la navigazione principale del sito web. Prima di passare a suggerimenti e buone pratiche, è importante notare che il pangrattato ha diversi gusti.

Tipi di navigazione breadcrumb

Breadcrumb basati sulla posizione o sulla gerarchia

La navigazione breadcrumb basata su posizione o gerarchia è il tipo che incontrerai più spesso. Un breadcrumb basato sulla posizione mostra all'utente la pagina corrente in cui si trova e la sua relazione con la gerarchia del sito Web sopra di essa. Pensalo come le cartelle in cui memorizzi i documenti sul tuo computer. La prima cartella è la più ampia e ogni cartella all'interno diventa più specifica fino a quando non arrivi al tuo documento.

esempio di breadcrumb della gerarchia dalla Knowledge Base HubSpot

Nell'esempio precedente, il breadcrumb mostra la pagina corrente in cui si trova l'utente e ogni pagina padre successiva che riporta a casa alla Knowledge Base. La navigazione breadcrumb basata sulla gerarchia consente all'utente di tornare facilmente alla pagina principale o a una qualsiasi delle pagine principali sopra dove si trova la pagina corrente.

Pangrattato basato sul percorso o sulla storia

La navigazione breadcrumb basata sul percorso rappresenta il percorso univoco seguito da un utente prima di arrivare alla pagina corrente. Sebbene il percorso non sia in genere visualizzato nella sua interezza, i breadcrumb basati sul percorso sono spesso implementati come una forma di pulsante Indietro, che porta l'utente alla pagina precedente della sua visita.

un esempio di navigazione breadcrumb basata sul percorso sul sito Web di Bloomingdales

L'esempio sopra mostra il collegamento "Torna ai risultati" sul sito Web di Bloomingdale, che è un breadcrumb basato sul percorso che consente all'utente di tornare alla pagina precedente con la query univoca intatta. I breadcrumb basati sulla cronologia sono comuni sui siti di e-commerce con molte categorie e varietà di elementi diversi da cercare.

Pangrattato basato sugli attributi

I breadcrumb basati sugli attributi mostrano gli attributi o i tag che un utente ha selezionato per filtrare la sua ricerca su una pagina web. I breadcrumb basati sugli attributi sono utili sui siti Web di e-commerce in cui gli utenti possono selezionare attributi diversi per restringere gli articoli su una pagina e trovare il perfetto paio di jeans, ad esempio.

un esempio di navigazione breadcrumb sul sito web di Gap

I breadcrumb basati sugli attributi possono anche essere implementati come tag per classificare i post del blog e i tipi di contenuto.

Ora che abbiamo trattato le diverse varietà di navigazione breadcrumb, passiamo a 9 suggerimenti per implementare la navigazione breadcrumb sul tuo sito per migliorare la navigabilità del sito e ridurre la frequenza di rimbalzo.

Suggerimenti ed esempi di navigazione breadcrumb

1. Usa la navigazione breadcrumb solo se ha senso per la struttura del tuo sito.

La navigazione breadcrumb è appropriata solo se la struttura del tuo sito lo richiede. Se hai pagine di livello inferiore accessibili da più pagine di destinazione diverse, l'utilizzo della navigazione breadcrumb potrebbe confondere i lettori che accedono alle stesse pagine da diversi punti di partenza. Inoltre, la navigazione breadcrumb potrebbe non essere affatto necessaria se si dispone di un piccolo sito Web con solo poche pagine di primo livello.

un esempio di navigazione breadcrumb sul sito web di Goshi

Goshi è un esempio di un sito Web che non ha bisogno di implementare la navigazione breadcrumb. Offrono un unico prodotto e il loro sito Web contiene solo alcune pagine essenziali. In questo caso, la navigazione principale copre tutto ciò che il sito ha da offrire e non ci sono pagine aggiuntive annidate all'interno delle pagine principali.

2. Non rendere la navigazione breadcrumb troppo grande.

La navigazione breadcrumb è secondaria rispetto alla navigazione principale del tuo sito web. La migliore pratica è che i tuoi breadcrumb appaiano più piccoli e da qualche parte al di sotto della navigazione principale del tuo sito. Se i tuoi breadcrumb appaiono troppo grandi, potrebbero rovinare l'equilibrio visivo della pagina e causare confusione durante la navigazione nel sito.

Il sito web di OXO è un buon esempio. La loro barra di navigazione principale è grande e situata in modo pulito nella parte superiore della pagina, con categorie come "Cucina e prodotti da forno", "Bevande" ecc. La loro navigazione breadcrumb si trova sotto la navigazione principale in un carattere più piccolo e sottile.

un esempio di navigazione breadcrumb sul sito web di Oxo

Nell'esempio di Oxo, è chiaro che il percorso breadcrumb è secondario rispetto alla barra di navigazione principale del sito sopra di esso. Anche la barra grigia in cui vive la navigazione breadcrumb è un bel tocco.

3. Includere il percorso di navigazione completo nella navigazione breadcrumb.

È probabile che alcuni visitatori scoprano le pagine del tuo sito tramite la ricerca invece di iniziare dalla home page e navigare attraverso. Ho cercato su Google "Studenti non laureati della Elon University" per raggiungere questa pagina di destinazione. Elon è intelligente per includere l'intero percorso di navigazione, inclusi "Home" e "Ammissioni" nella navigazione breadcrumb.

Se escludi determinati livelli, confonderai gli utenti e il percorso breadcrumb non ti sembrerà utile. Anche se gli utenti non hanno iniziato nella home page, vuoi offrire loro un modo semplice per esplorare il tuo sito dall'inizio.

un esempio di navigazione breadcrumb sul sito web dell'università elon

4. Progressi dal livello più alto al più basso.

È importante che la navigazione breadcrumb si legga da sinistra a destra, con il link più a sinistra che è la tua home page e il link più a destra è la pagina corrente dell'utente. Uno studio di Nielsen Norman Group ha rilevato che gli utenti trascorrono l'80% del loro tempo a visualizzare la metà sinistra di una pagina e il 20% a visualizzare la metà destra, il che rappresenta una valida argomentazione per il design da sinistra a destra. Inoltre, il collegamento più vicino a sinistra apparirà come l'inizio della catena, quindi vuoi che sia la tua pagina di livello più alto.

5. Mantieni i titoli breadcrumb coerenti con i titoli delle pagine.

È importante rimanere coerenti con i titoli della tua pagina e del breadcrumb. Non solo questo eviterà confusione, ma offre anche un altro posto dove ottenere le tue parole chiave mirate. Vuoi anche collegare chiaramente i tuoi titoli breadcrumb alla pagina. Se il titolo breadcrumb non ha un collegamento, chiariscilo. Sony etichetta efficacemente i suoi titoli breadcrumb in modo che corrispondano ai titoli delle pagine. "Ambiente, CSR e qualità", ad esempio, si legge nella navigazione breadcrumb come nella pagina.

Sony fa anche un buon lavoro nel differenziare i link dai non link. I collegamenti sono sottolineati, mentre i non collegamenti come l'attuale pagina "Ambiente" rimangono non decorati.

esempio di navigazione con breadcrumb sony

6. Diventa creativo con il design.

La navigazione breadcrumb è tradizionalmente definita come un elenco orizzontale di collegamenti separati da un segno maggiore di (>). Tuttavia, non è necessario seguire il percorso tradizionale se un design diverso è più coerente con l'aspetto grafico del sito.

Ad esempio, Hoka utilizza un "https://blog.hubspot.com/" per separare gli elementi nella loro navigazione breadcrumb. In questo caso, la sottile variazione del design ha senso per l'estetica del sito e del marchio.

esempio di navigazione breadcrumb hoka

7. Tienilo pulito e ordinato.

La tua navigazione breadcrumb è un aiuto per l'utente e non dovrebbe attirare l'attenzione non necessaria a meno che l'utente non la stia cercando. Per questo motivo, non vuoi ingombrare la tua navigazione breadcrumb con testo non necessario o design goffo.

Eionet, ad esempio, potrebbe fare a meno del testo "Sei qui" nella loro navigazione breadcrumb. Sebbene pensato per essere utile, il testo ingombra la pagina. Con il giusto design, la navigazione breadcrumb dovrebbe essere abbastanza evidente senza un'introduzione, ma non sporgere come un pollice dolorante.

un esempio di navigazione breadcrumb sul sito web di eionet

8. Considera quale tipo di navigazione breadcrumb ha più senso per il tuo sito.

Come discusso all'inizio dell'articolo, ci sono alcuni tipi di breadcrumb da considerare: breadcrumb basati sulla posizione, sugli attributi e sulla cronologia. I breadcrumb basati sulla posizione mostrano all'utente dove si trova nella gerarchia del sito. I breadcrumb basati sugli attributi mostrano agli utenti in quali categorie o tag rientra la loro pagina. Infine, i breadcrumb basati sulla cronologia mostrano agli utenti il percorso specifico che hanno intrapreso per arrivare alla pagina corrente.

Rolling Stone utilizza la navigazione breadcrumb basata sulla posizione per mostrare agli utenti in quale sezione del sito rientra il contenuto che stanno visualizzando. Questo tipo di navigazione breadcrumb è più efficace per gli utenti Rolling Stone, in modo che possano tornare facilmente a casa o a una pagina di categoria più ampia. Quando crei una navigazione breadcrumb, considera ciò che è più utile per i visitatori del tuo sito.

esempio di breadcrumb basato sulla posizione sul sito di Rolling Stone

Se il tuo sito web offre prodotti con molte opzioni e stili diversi, i breadcrumb basati sugli attributi sono utili per consentire ai tuoi utenti di restringere la ricerca e passare facilmente alle pagine all'interno di un attributo selezionato. Verishop utilizza breadcrumb basati sugli attributi per visualizzare le selezioni degli utenti mentre restringono la ricerca degli asciugamani per marca e colore, ad esempio.

esempio di breadcrumb basato sugli attributi sul sito di verishop

Quando decidi quale tipo di navigazione breadcrumb è più appropriato per il tuo sito web, dovresti considerare la struttura del tuo sito, il tipo di prodotti o servizi che offri e il modo in cui ti aspetti che gli utenti interagiscano con le tue pagine.

9. Conosci il tuo pubblico.

La migliore pratica nella navigazione breadcrumb consiste nel posizionare il breadcrumb nella parte superiore della pagina, sotto la navigazione principale. Tuttavia, Apple, una delle aziende più preziose di tutti i tempi, sfida questa logica mettendo la propria navigazione breadcrumb nel footer, in fondo al sito. In definitiva, è fondamentale che tu conosca il tuo pubblico. I clienti di Apple sono in genere esperti di tecnologia e probabilmente troverebbero la navigazione se ne avessero bisogno. Considera le esigenze dei tuoi clienti e implementa i test A/B se non sei sicuro.

esempio di breadcrumb basati sulla posizione sul sito di apple iphone 13 pro

Navigazione breadcrumb in HTML e CSS

Non solo i breadcrumb sono utili, ma sono anche facili da aggiungere al tuo sito Web con un po' di codice HTML e CSS.

Cominciamo con l'HTML, che useremo per creare i link stessi. Il modo più semplice per farlo è organizzare i tuoi collegamenti in un elemento elenco non ordinato (<ul>), con ogni elemento dell'elenco (<li>) comprendente un collegamento nella serie breadcrumb fino all'elemento finale, che denota la pagina corrente.

Ecco un modello HTML per breadcrumb che puoi utilizzare:

Vedi le briciole di pane della penna in HTML e CSS di HubSpot (@hubspot) su CodePen.

Nota come ho anche racchiuso l'elenco non ordinato in un elemento HTML <nav> (navigazione) e aggiunto una classe e un'etichetta ARIA al suo tag di apertura. Questo è facoltativo, ma aiuta a rendere la tua pagina più accessibile agli screen reader e ai motori di ricerca.

Naturalmente, questo HTML da solo non è sufficiente: al momento, abbiamo solo un elenco puntato di collegamenti. Aggiungendo CSS, possiamo ottenere l'aspetto breadcrumb che stiamo cercando. Applicare il seguente CSS all'HTML sopra:

Vedi le briciole di pane della penna in HTML e CSS di HubSpot (@hubspot) su CodePen.

Insieme, questo codice genera un'area di navigazione breadcrumb di base che può essere utilizzata su qualsiasi sito: guarda il risultato finale di seguito. Ho anche aggiunto uno stile aggiuntivo per un look più pulito. Per vedere come appaiono i breadcrumb senza questo stile, commenta il codice nella parte inferiore della scheda CSS.

Vedi le briciole di pane della penna in HTML e CSS di HubSpot (@hubspot) su CodePen.

Navigazione breadcrumb in Bootstrap CSS

Bootstrap CSS offre anche un modo per creare breadcrumb senza dover aggiungere CSS personalizzati. Per fare ciò, usa il componente Breadcrumb in questo modo. Ecco un esempio dalla documentazione di Bootstrap 5:

Vedi le briciole di pane della penna in Bootstrap CSS di HubSpot (@hubspot) su CodePen.

Queste sono solo le basi della navigazione breadcrumb in Bootstrap: consulta la documentazione breadcrumb di Bootstrap per apprendere tutti i dettagli.

Design per aiutare gli utenti a navigare nel tuo sito

In definitiva, la navigazione breadcrumb è uno strumento efficace per rendere più facile la navigazione nel tuo sito, ma è importante considerare le migliori pratiche per assicurarti di ottenere il massimo dai tuoi gustosi bocconcini (breadcrumb). Per ulteriori consigli sulla UX, consulta la nostra Guida definitiva alla progettazione UX.

Nota del redattore: questo post è stato originariamente pubblicato a settembre 2018 ed è stato aggiornato per completezza.

{{slideInCta('3b85a969-0893-4010-afb7-4690