Come utilizzare la navigazione breadcrumb nel modo corretto

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 gettare una scia di briciole di pane per risalire a casa. Sebbene le briciole di pane vengano mangiate dagli uccelli fastidiosi nella foresta, sono riusciti a lasciare un'impressione molti anni dopo che la storia era 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 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 sono atterrati e qual è stata la loro ultima posizione.

Una volta che i breadcrumb sono integrati nella struttura gerarchica del sito web, gli utenti possono andare in profondità nelle categorie di prodotti e tornare al punto in cui hanno iniziato 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 proprie pagine a causa della perdita.

Navigazione breadcrumb

Le 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 ausilio 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.

1. Dove sono?

   Le breadcrumb tengono gli utenti informati sulla loro posizione sul sito iniziando il loro viaggio.

2. Dove posso andare?

   Serve come aiuto per gli 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.

3. Devo andare lì?

   I breadcrumb aiutano a promuovere una migliore navigazione e mostrano valore ai contenuti per l'utente. Ad esempio, se un cliente arriva su una pagina Web alla ricerca di un prodotto, potrebbe trovare altri prodotti che potrebbero rivelarsi adatti alle 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 uno spazio minimo

Richiede solo una linea orizzontale piena di collegamenti di testo. Ciò facilita una struttura di web design sana occupando uno spazio minimo e consentendo ad altri elementi del sito web 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 si trovava, è e può andare l'utente. È un sistema di navigazione autoesplicativo universale alla comprensione di ogni utente.

Quando usare il 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ò trarre vantaggio dai breadcrumb. Puoi quindi analizzare per prova e testare se la navigazione breadcrumb sta aiutando gli utenti attraverso i contenuti del tuo sito web o meno.

• 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 e pulita. Nella maggior parte dei siti Web di e-commerce, lo stesso criterio viene utilizzato per raggruppare un'ampia 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 c'è un sito web che consiste in una struttura a livello singolo senza alcuna chiara indicazione di raggruppamento, è nel migliore interesse del sito web evitare l'aggiunta di breadcrumb. Come accennato in precedenza, un diagramma o una mappa del sito possono essere molto utili per determinare l'architettura di navigazione del sito web.

Le breadcrumb sono utili solo se sono supportate dalla navigazione principale. Le briciole di pane fungono da muscoli, mentre la navigazione principale è lo scheletro che li tiene insieme. Senza la loro completa locomozione, 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 atterrano su un sito Web da una fonte esterna e accedono a un livello di contenuto più profondo. Ad esempio, se stai cercando un particolare tipo di prodotto e fai clic sui risultati di ricerca mostrati da Google, una volta entrato nella pagina web ti ritroverai tra molte categorie. Le 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 breadcrumb basati sulla posizione. Un esempio ideale è eBay.

2. Basato sul percorso

Questi breadcrumb sono significativi per la navigazione del percorso storico di un sito web. Le breadcrumb basate 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 maggior parte 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. Questo lo rende inutile soprattutto per quel tipo di visitatori che arrivano alla pagina del sito che è già in profondità all'interno del sito web.

3. Basato sugli attributi

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 breadcrumb è estremamente utile per incoraggiare gli utenti a comprendere la relazione tra i prodotti. Ad esempio, se il sito Web vende jeans, utilizzerà breadcrumb basati sugli attributi per aiutare i clienti a navigare tra i jeans regular fit, slim fit o skinny.

Best practice per la navigazione breadcrumb

Quando progetti una navigazione breadcrumb, assicurati di tenere a mente le cose. La navigazione breadcrumb è un ulteriore aiuto per migliorare l'esperienza degli 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 le tracce 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 negativamente 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 delle breadcrumb per migliorare le tue classifiche sui motori di ricerca. Si consiglia di scegliere nomi SEO friendly per le categorie del tuo sito Web in modo che i motori di ricerca possano facilmente elencare i breadcrumb nei loro risultati.

Usa breadcrumb come navigazione alternativa

Sebbene i breadcrumb siano un'ottima fonte per aiutare gli utenti a navigare da un punto all'altro, è importante che vengano trattati solo come una fonte secondaria. Le breadcrumb sono una caratteristica in più per migliorare l'usabilità del visitatore e in nessuna condizione possono sostituire la struttura di navigazione primaria del sito web.

È inutile collegare la pagina corrente nella navigazione breadcrumb

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

Aggiungi separatori

L'uso dei separatori è un'ottima pratica per dare un aspetto pulito e apprezzabile alla navigazione dei breadcrumb. Impedisce al testo di avvicinarsi troppo se l'utente va a livelli più profondi e crea una struttura dinamica facile da capire e con cui è facile interagire.

Puoi usare il segno › per denotare la gerarchia poiché è in genere utilizzato in formati di categoria come Vestiti › Camicie › Camicie con colletto 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 l'imbottitura 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 della mollica di pane non compromettano altri elementi intorno ad esso in modo che la navigazione principale rimanga inalterata.

Non attirare mai l'attenzione sul design dei breadcrumb più del necessario

Non usare mai colori vivaci o caratteri stravaganti per rappresentare i tuoi breadcrumb. Sebbene il percorso breadcrumb sia importante per gli utenti dopo che sono atterrati sulla pagina, non dovrebbe essere la prima cosa che viene loro 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 contenuto ricercato, mostra un semplice percorso di navigazione breadcrumb privo di qualsiasi carattere o colore fantasia in modo che gli utenti possano facilmente individuare e interagire con i breadcrumb.

Quale tipo dovrebbe essere evitato?

È un argomento controverso sull'opportunità di utilizzare breadcrumb basati su posizione/attributo o breadcrumb basati su percorso per mostrare la gerarchia del sito. È una regola pratica 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 uno, non aiuta con l'UX poiché può potenzialmente creare confusione nei visitatori a causa della mancanza di gerarchia mostrata tra i diversi livelli. Ecco perché 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à Internet più elevate e tempi di caricamento ancora più rapidi, la navigazione può essere mostrata in modo più completo su livelli gerarchici più alti senza sudare. Con l'aiuto dei breadcrumb, il tuo sito Web non solo produrrà una migliore esperienza utente, ma genererà anche maggiori vendite dai suoi clienti. Una navigazione più fluida e non sofisticata significa un accesso più facile alle pagine dei prodotti e un minore processo di checkout.