Breadcrumbs ci riporta alla vecchia fiaba che potresti aver letto negli anni dell’asilo. Due bambini Hansel e Gretel sono costretti a lasciare la loro casa nel bosco quando Hansel decide di tracciare una scia di pangrattato per tornare a casa. Sebbene le briciole di pane vengano mangiate dai fastidiosi uccelli della foresta, sono riuscite a lasciare un’impressione molti anni dopo che la storia è stata scritta.

Nel web design, i breadcrumb hanno uno scopo simile a quello che aveva in mente Hansel. I breadcrumb fungono da navigazione secondaria all’interno della navigazione del tuo sito Web per aiutare i visitatori a stare tranquilli dal perdere la strada dopo essere passati da una pagina all’altra. Come la vecchia fiaba, aiuta a mostrare all’utente dove è atterrato e qual è stata la sua ultima posizione.

Una volta che i breadcrumb sono integrati nella struttura gerarchica del sito Web, gli utenti possono approfondire le categorie di prodotti e tornare al punto di partenza senza andare in una frenesia del pulsante "Indietro".

I breadcrumb fungono anche da elemento di controllo grafico per aiutare i visitatori meno esperti a navigare sui siti di e-commerce. Per tali siti web la struttura interna deve essere progettata in modo intelligente. Con i breadcrumb diventa imperativo per le piattaforme di shopping online non solo fornire facilità d’uso ai propri visitatori, ma anche impedire ai potenziali clienti di abbandonare le loro pagine a causa della perdita.

Navigazione breadcrumb

I breadcrumb sono un mezzo efficace per guidare i visitatori determinando la loro posizione attuale e i luoghi che hanno visitato lungo il loro percorso. Servono come aiuto visivo all’interno della gerarchia del sito. Ma in termini di esperienza utente del cliente, i breadcrumb li aiutano a rispondere a queste 3 domande.

Dove sono?

I breadcrumb tengono gli utenti informati sulla loro posizione nel sito che inizia il loro viaggio.
Dove posso andare?

Serve come aiuto agli utenti suggerendo loro dove andare dopo. Poiché la struttura è già posta davanti a loro, gli utenti non devono più cercare e trovare le categorie o le sezioni del sito.
Devo andare lì?

I breadcrumb aiutano a promuovere una migliore navigazione e mostrano il valore del contenuto all’utente. Ad esempio, se un cliente arriva su una pagina Web alla ricerca di un prodotto, potrebbe trovare altri prodotti che potrebbero rivelarsi una buona corrispondenza per le sue esigenze. Questo aiuta a ridurre la frequenza di rimbalzo del sito web.

Benefici

Riduce le azioni

Per raggiungere una pagina di livello superiore, i breadcrumb aiutano a ridurre il n. di azioni richieste dal visitatore del sito per arrivarci. I visitatori possono semplicemente utilizzare i breadcrumb per tornare indietro invece di utilizzare incessantemente il pulsante "Indietro" o la navigazione principale del sito web.

Richiede spazio minimo

Ci vuole solo una linea orizzontale piena di link testuali. Ciò facilita una sana struttura di web design occupando uno spazio minimo e consentendo agli altri elementi del sito di respirare. Questo aiuta anche a ottenere migliori velocità di caricamento per il sito web.

Ogni utente sa come utilizzare i breadcrumb

È facile da capire e non richiede alcuna conoscenza tecnica per interagire con loro. Il testo spiega dove l’utente era, è e può andare. È un sistema di navigazione autoesplicativo universale per la comprensione di ogni utente.

Quando usare i breadcrumb?

Costruire una mappa del sito per visualizzare la struttura di navigazione del tuo sito web è uno dei mezzi migliori per determinare se il tuo sito web può beneficiare dei breadcrumb. Puoi quindi analizzare per prova e testare se la navigazione breadcrumb aiuta o meno gli utenti attraverso il contenuto del tuo sito web.

I breadcrumb sono utilizzati al meglio quando c’è un contenuto sostanzialmente più grande che deve essere organizzato all’interno di categorie e in una struttura lineare pulita. Nella maggior parte dei siti di e-commerce, lo stesso criterio viene utilizzato per raggruppare una grande varietà di prodotti in categorie logiche.
I breadcrumb non devono essere utilizzati per siti Web privi di qualsiasi gerarchia logica per il raggruppamento di contenuti o prodotti.

Quando evitare di usarli

Laddove i breadcrumb sono essenziali per la struttura del sito Web, ci sono anche casi in cui dovrebbero essere evitati. Quando esiste un sito Web costituito da una struttura a livello singolo senza alcuna chiara indicazione di raggruppamento, è nell’interesse del sito Web evitare l’aggiunta di breadcrumb. Come accennato in precedenza, un diagramma o una mappa del sito può essere molto utile per determinare l’architettura di navigazione del sito web.

I breadcrumb sono utili solo se sono supportati dalla navigazione principale. Le briciole di pane agiscono come i muscoli, mentre la navigazione primaria è lo scheletro che le tiene insieme. Senza la loro locomozione completa la gerarchia del sito web non può funzionare in modo produttivo.

Tipi di pangrattato

Ci sono tre tipi di breadcrumb che dovresti conoscere, Posizione, Percorso e Attributo.

1 basato sulla posizione

I breadcrumb basati sulla posizione vengono utilizzati per mostrare la struttura di base del sito web. Consentono agli utenti di navigare in siti Web con più livelli e percorsi di contenuto completi. Questo tipo di breadcrumb è molto utile per i visitatori che arrivano su un sito Web da una fonte esterna e accedono a un livello più profondo di contenuto. Ad esempio, se stai cercando un particolare tipo di prodotto e fai clic sui risultati di ricerca mostrati da Google, ti troverai tra molte categorie una volta entrato nella pagina web. I breadcrumb ti aiuteranno a determinare la tua posizione e navigare verso le possibilità nella struttura gerarchica. Quei siti Web che contengono livelli profondi di contenuto sono molto adatti per i breadcrumb basati sulla posizione. Un esempio ideale è eBay.

Basato su 2 percorsi

Queste briciole di pane sono significative per la navigazione del percorso cronologico di un sito web. I breadcrumb basati sul percorso mostrano fondamentalmente ogni percorso visitato dall’utente per raggiungere la posizione corrente. Normalmente, tali collegamenti breadcrumb sono generati dinamicamente. Sebbene i plug-in basati sul percorso possano essere utili per gli utenti che trascorrono molto tempo a navigare sui siti Web, sono per lo più sconcertanti per la maggioranza degli utenti. Poiché la maggior parte dei visitatori naviga a propria discrezione, spostandosi da una pagina all’altra. Il pulsante "Indietro" nel browser risolve la maggior parte delle loro esigenze di cambiare percorso. Ciò lo rende inutile soprattutto per quel tipo di visitatori che arrivano sulla pagina del sito che è già all’interno del sito web.

3 Attributo Basato

I siti Web di e-commerce traggono il massimo vantaggio dai breadcrumb basati sugli attributi. Aiutano a elencare le categorie in base alla pagina o al prodotto specifico. Questo tipo di pangrattato è estremamente utile per incoraggiare gli utenti a comprendere la relazione tra i prodotti. Ad esempio, se il sito web vende jeans, utilizzerà i breadcrumb basati sugli attributi per aiutare i clienti a navigare tra vestibilità regolare, vestibilità slim o jeans skinny.

Best practice per la navigazione breadcrumb

Quando si progetta una navigazione breadcrumb, assicurarsi di tenere a mente le seguenti cose. La navigazione breadcrumb è un ulteriore aiuto per migliorare l’esperienza dei tuoi utenti sul tuo sito.

Evita elementi duplicati

Se sei davvero pronto ad aggiungere breadcrumb al tuo sito web, potresti anche farlo nel modo giusto. Prima di tutto, devi eliminare tutti gli elementi duplicati che potrebbero trovarsi tra la scia di breadcrumb. Purtroppo, l’ho visto in molti siti Web di alto livello in cui le stesse pagine rientrano in più categorie o livelli di contenuto mostrati. Questo non solo confonde il visitatore, ma si riflette anche male sul tuo sito web.

Compatibilità SEO

I breadcrumb non sono solo controlli di navigazione per i tuoi visitatori, ma anche grandi risorse per la tua pratica SEO. Puoi utilizzare le parole chiave all’interno dei breadcrumb per migliorare il tuo posizionamento sui motori di ricerca. Ti consigliamo di scegliere nomi SEO friendly per le categorie del tuo sito Web in modo che i motori di ricerca possano facilmente elencarli nei breadcrumb nei loro risultati.

Usa i breadcrumb come navigazione alternativa

Mentre i breadcrumb sono una fonte eccellente per aiutare gli utenti a navigare da un punto all’altro, è importante che vengano trattati solo come una fonte secondaria. I breadcrumb sono una funzionalità in più per migliorare la fruibilità del visitatore e in nessun caso possono sostituire la struttura primaria di navigazione del sito web.

È inutile collegare la pagina corrente nella navigazione breadcrumb

Sebbene la visualizzazione della posizione corrente del visitatore sul percorso breadcrumb sia facoltativa, è necessario assicurarsi che il collegamento visualizzato nella struttura lineare non sia toccabile o cliccabile. Causerebbe solo confusione per il visitatore mostrare loro il link della pagina in cui si trovano attualmente.

Aggiungi separatori

Usare i separatori è un’ottima pratica per dare un aspetto pulito e apprezzabile alla tua navigazione breadcrumb. Impedisce che il testo si avvicini troppo se l’utente va a livelli più profondi e crea una struttura dinamica facile da capire e con cui interagire.

È possibile utilizzare il segno › per denotare la gerarchia poiché è tipicamente utilizzato in formati di categoria come Abbigliamento › Camicie › Colletto Camicie ecc. Altri simboli includono frecce (→), virgolette ad angolo retto (») e barre (⁄).

Introduci la dimensione e l’imbottitura del pangrattato

Durante la progettazione dei breadcrumb, è necessario considerare il padding e la dimensione target. La distanza tra un breadcrumb e l’altro deve essere evidente, altrimenti i visitatori potrebbero non essere in grado di utilizzarli in modo efficace. Allo stesso tempo, assicurati che le dimensioni del breadcrumb non compromettano altri elementi attorno ad esso in modo che la navigazione principale rimanga inalterata.

Non attirare mai l’attenzione sul design delle briciole di pane più del necessario

Non usare mai colori vivaci o caratteri fantasiosi per rappresentare il tuo pangrattato. Sebbene la traccia del breadcrumb sia importante per gli utenti dopo che sono arrivati sulla pagina, non dovrebbe essere la prima cosa che viene notata. L’aggiunta di glam alla navigazione breadcrumb potrebbe far sì che l’utente ignori la navigazione principale del sito web. Ciò può distrarre l’utente dal reale intento di accedere alla pagina e comportare la perdita di una potenziale conversione per il negozio. Google è il miglior esempio quando si tratta di questo. Avendo così tanti livelli di contenuti cercati, mostra un semplice percorso di navigazione breadcrumb libero da qualsiasi carattere o colore di fantasia in modo che gli utenti possano facilmente individuare e interagire con i breadcrumb.

Quale tipo dovrebbe essere evitato?

È un argomento controverso se utilizzare breadcrumb basati su posizione/attributo o breadcrumb basati su percorso per mostrare la gerarchia del sito. È una regola empirica che i breadcrumb non devono mostrare la cronologia dell’utente, ma la gerarchia del sito. Secondo la nostra valutazione e opinione, probabilmente non dovresti più preoccuparti dei breadcrumb basati sul percorso. Per prima cosa, non aiuta con la UX poiché può potenzialmente causare confusione nei visitatori a causa della mancanza di gerarchia mostrata tra i diversi livelli. Questo è il motivo per cui i breadcrumb basati sulla posizione e sugli attributi sono preferiti rispetto ai breadcrumb basati sul percorso.

Pensieri finali

I breadcrumb sono importanti quanto qualsiasi altro elemento su un sito web. Ora che la tecnologia ha consentito di archiviare maggiori quantità di dati, velocità di Internet più elevate e tempi di caricamento ancora più rapidi, la navigazione può essere mostrata in modo più completo su livelli gerarchici più elevati senza sudare. Con l’aiuto del breadcrumb, il tuo sito web non solo produrrà una migliore esperienza utente, ma genererà anche maggiori vendite da parte dei suoi clienti. Una navigazione più fluida e non sofisticata significa un accesso più facile alle pagine dei prodotti e ostacola meno il processo di checkout.