Nella favola di Hansel e Gretel, due bambini lasciano cadere delle briciole di pane nel bosco per trovare la strada di casa.
Al giorno d’oggi, probabilmente non vivete troppe esperienze di perdita nel bosco, ma sono pronto a scommettere che vi siete sentiti frustratamente disorientati su siti web mal progettati.
Nel design dei siti web, la navigazione con briciole di pane è un modo per mostrare agli utenti la loro posizione e come ci sono arrivati (simile alle briciole di pane di Hansel). Aiuta anche gli utenti a trovare più velocemente le pagine di livello superiore se sono arrivati sul tuo sito da una ricerca o da un link profondo.
- Cos’è la navigazione breadcrumb?
- Punte ed esempi di navigazione breadcrumb
- Utilizza la navigazione breadcrumb solo se ha senso per la struttura del tuo sito.
- Non rendere la tua navigazione breadcrumb troppo grande.
- Includete il percorso di navigazione completo nella vostra navigazione breadcrumb.
- Progresso dal livello più alto al più basso.
- Mantieni i tuoi titoli di breadcrumb coerenti con i titoli delle tue pagine.
- Siate creativi con il design.
- Mantienilo pulito e ordinato.
- Considera quale tipo di navigazione breadcrumb ha più senso per il tuo sito.
- Conosci il tuo pubblico.
La navigazione breadcrumb è un modo per gli utenti di visualizzare la loro posizione su un sito web. Si tratta di una barra di navigazione secondaria che di solito appare come collegamenti di testo orizzontali, separati dal simbolo “maggiore di” (>). La navigazione breadcrumb migliora la reperibilità delle vostre pagine di destinazione, e aiuta gli utenti a raggiungere più velocemente le pagine di livello superiore se inizialmente hanno trovato il vostro sito dalla ricerca o da un link profondo.
Jakob Nielsen, co-fondatore del Nielsen Norman Group, raccomanda la navigazione breadcrumb dal 1995, e fa un punto forte per loro: “Tutto ciò che le briciole di pane fanno è rendere più facile per gli utenti muoversi nel sito, supponendo che il suo contenuto e la struttura generale abbiano senso. Questo è un contributo sufficiente per qualcosa che occupa solo una riga nel design.”
Se il sito web della tua azienda è a più livelli, potresti considerare l’implementazione della navigazione breadcrumb per rendere il tuo sito più facile da navigare. Tuttavia, come ogni elemento di design, c’è un modo giusto e uno sbagliato di farlo. Qui esploreremo nove consigli ed esempi per assicurarci che tu stia creando la navigazione breadcrumb più efficace per i tuoi utenti.
La navigazione breadcrumb ha una struttura lineare, quindi vuoi usarla solo se ha senso con la gerarchia del tuo sito. Se hai pagine di livello inferiore che sono accessibili da diverse landing page, usare la navigazione breadcrumb confonderà solo i lettori che continuano ad accedere alle stesse pagine da diversi punti di partenza. Inoltre, se il tuo sito è relativamente semplice, con solo poche pagine, probabilmente non hai bisogno della navigazione breadcrumb.
La tua navigazione breadcrumb è uno strumento secondario alla tua barra di navigazione primaria, quindi non dovrebbe essere troppo grande o prominente sulla pagina. Per esempio, sul sito di DHL, la loro barra di navigazione primaria è grande e riconoscibile, con colonne come “Express” “Parcel & eCommerce” “Logistics”, ecc. La loro navigazione breadcrumb è la sezione più piccola sotto che recita “DHL Global | > Logistica | > Trasporto merci”. Non volete che i vostri utenti confondano la vostra navigazione breadcrumb con la barra di navigazione primaria.
Ho cercato su Google “Elon University Non-Degree Students” per raggiungere questa landing page, ma Elon è intelligente a includere il percorso di navigazione completo, incluso “Home” e “Admissions”. Se lasciate fuori alcuni livelli, confonderete gli utenti e il percorso breadcrumb non sarà così utile. Anche se gli utenti non hanno iniziato dalla homepage, vuoi dare loro un modo semplice per esplorare il tuo sito dall’inizio.
Progresso dal livello più alto al più basso.
È importante che la tua navigazione breadcrumb si legga da sinistra a destra, con il link più vicino a sinistra che è la tua homepage, e il link più vicino a destra è la pagina corrente dell’utente. Uno studio di Nielsen Norman Group ha scoperto che gli utenti passano l’80% del loro tempo a visualizzare la metà sinistra di una pagina e il 20% a visualizzare la metà destra, il che rende un caso forte per il design da sinistra a destra. Inoltre, il link più vicino alla sinistra apparirà come l’inizio della catena, quindi vuoi che sia la tua pagina di livello più alto.
Per evitare confusione, vorrai rimanere coerente con i titoli delle tue pagine e breadcrumb, in particolare se stai puntando a certe parole chiave in quei titoli. Si vuole anche collegare chiaramente i titoli delle briciole di pane alla pagina. Se il titolo delle briciole di pane non ha un link, rendilo chiaro. Nestle etichetta efficacemente i suoi titoli breadcrumb per abbinare i titoli delle pagine. “Aree di impatto & impegno”, per esempio, si legge allo stesso modo nella navigazione breadcrumb come nella pagina.
Nestle fa anche un buon lavoro differenziando i link dai non-link con colori diversi – i link sono blu, mentre i non-link rimangono grigi.
Siate creativi con il design.
La navigazione breadcrumb tradizionale appare così: Home > Chi siamo > Carriere. Tuttavia, non è necessario seguire il percorso tradizionale se ritenete che un design diverso possa attrarre di più il vostro pubblico, o apparire meglio sul vostro sito.
Per esempio, Target usa la navigazione breadcrumb nelle sue pagine dei prodotti (perché chi non si perderebbe nella sezione virtuale delle scarpe?), ma usa i simboli “/” e un semplice testo nero e grigio. In questo caso, la sottile variazione di design ha senso per l’estetica del loro sito.
Mantienilo pulito e ordinato.
La tua navigazione breadcrumb è semplicemente un aiuto per l’utente, e idealmente non dovrebbe essere notata a meno che l’utente la stia cercando. Per questo motivo, non vuoi ingombrare la tua navigazione breadcrumb con testo non necessario.
Eionet, per esempio, potrebbe fare a meno del loro testo “Sei qui”. Anche se dovrebbe essere utile, il testo ingombra la pagina. Con il giusto design, una navigazione breadcrumb dovrebbe essere abbastanza evidente senza un’introduzione.
Ci sono alcuni tipi diversi di breadcrumb che potresti usare — basati sulla posizione, basati sugli attributi e basati sulla storia. Le briciole di pane basate sulla posizione mostrano all’utente dove si trova nella gerarchia del sito. Le briciole di pane basate sugli attributi mostrano agli utenti in quale categoria rientra la loro pagina. Infine, le briciole di pane basate sulla storia mostrano agli utenti il percorso specifico che hanno fatto per arrivare alla pagina corrente.
Bed Bath & Beyond usa la navigazione a briciole di pane basata sugli attributi per mostrare agli utenti in quale categoria rientra la pagina del loro prodotto, così gli utenti possono cliccare di nuovo su “Kitchen” o “Small Appliances” per esaminare articoli simili. Questo tipo di navigazione breadcrumb è più efficace per i clienti di Bed Bath & Beyond. Quando crei una navigazione breadcrumb, considera ciò che è più utile per i visitatori del tuo sito.
Conosci il tuo pubblico.
Le migliori pratiche nella navigazione breadcrumb spingono i web designer a posizionare la navigazione nella parte superiore della pagina — ma Apple, una delle aziende di maggior valore di tutti i tempi, sfida questa logica mettendo la loro navigazione breadcrumb nella parte inferiore del loro sito. In definitiva, è fondamentale conoscere il proprio pubblico. I clienti di Apple sono tipicamente esperti di tecnologia, e probabilmente troverebbero la navigazione se ne avessero bisogno. Considera i bisogni dei tuoi clienti e implementa un test A/B se non sei sicuro.
In definitiva, la navigazione breadcrumb è uno strumento efficace per rendere il tuo sito più facile da navigare, ma vuoi seguire le best practice di design per assicurarti di sfruttare l’utilità dello strumento. Per ulteriori consigli UX, controlla “The Ultimate Guide to UX Design”.
