9 Suggerimenti e esempi di breadcrumb per rendere il tuo sito più facile da navigare

Nella fiaba Hansel e Gretel, due bambini lasciano cadere il pangrattato nei boschi per trovare la strada di casa.

Al giorno d'oggi, probabilmente non hai esperienza di troppe esperienze perse nel bosco, ma sono pronto a scommettere che ti sei sentito frustrato disorientato su siti web mal progettati.

Nella progettazione di siti Web, la navigazione breadcrumb è un modo per mostrare agli utenti la loro posizione e il modo in cui sono arrivati ​​lì (simile al breadcrumb di Hansel). Inoltre, aiuta gli utenti a trovare più velocemente pagine di livello superiore se sono atterrato sul tuo sito dalla ricerca o da un link diretto.

Jakob Nielsen, co-fondatore del Nielsen Norman Group, raccomanda la navigazione con breadcrumb dal 1995 e rappresenta un punto di forza per loro: "Tutto ciò che fa il pane grattugiato è più facile per gli utenti di muoversi nel sito, assumendo il suo contenuto e la struttura ha un senso: è un contributo sufficiente per qualcosa che occupa solo una linea nel design. "

Se il sito web della tua azienda è a più livelli, potresti prendere in considerazione l'implementazione della navigazione breadcrumb per rendere più semplice la navigazione del tuo sito. Tuttavia, come ogni elemento di design, c'è un modo giusto e sbagliato di farlo. Qui, esploreremo nove suggerimenti ed esempi per assicurarti di creare la navigazione breadcrumb più efficace per i tuoi utenti.

Suggerimenti ed esempi di navigazione con breadcrumb

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

La navigazione breadcrumb ha una struttura lineare, quindi la vuoi utilizzare solo se ha senso con la gerarchia del tuo sito web. Se si dispone di pagine di livello inferiore accessibili da pagine di destinazione diverse, l'uso della navigazione breadcrumb non farà altro che confondere 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 di navigazione breadcrumb.

2. Non rendere troppo grande la navigazione breadcrumb.

La navigazione breadcrumb è uno strumento secondario della barra di navigazione principale, quindi non dovrebbe essere troppo grande o prominente nella pagina. Ad esempio, sul sito Web di DHL, la barra di navigazione principale è ampia e riconoscibile, con colonne come "Express" "Parcel & eCommerce" "Logistica", ecc. La loro navigazione con breadcrumb è la seguente sezione più piccola: "DHL Global |> Logistics |> Trasporto merci ". Non vuoi che i tuoi utenti confondano la tua navigazione breadcrumb come barra di navigazione principale.

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

Ho cercato su Google "studenti universitari di non università di Elon" per raggiungere questa pagina di destinazione, ma Elon è intelligente a includere il percorso completo di navigazione, tra cui "Home" e "Ammissioni". Se ometti determinati livelli, confonderai gli utenti e il percorso di breadcrumb non ti sarà di grande aiuto. Anche se gli utenti non sono entrati nella home page, vuoi dare loro un modo semplice per esplorare il tuo sito dall'inizio.

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

È importante che la navigazione con breadcrumb sia letta da sinistra a destra, con il link più vicino a sinistra sulla tua home page e il link più vicino a destra sulla pagina corrente dell'utente. Uno studio condotto da Nielsen Norman Group ha rilevato che gli utenti trascorrono l'80% del loro tempo visualizzando la metà sinistra di una pagina e il 20% la visualizzazione della metà destra, creando un valido esempio di design da sinistra a destra. Inoltre, il link più vicino a sinistra apparirà come l'inizio della catena, quindi desideri che sia la pagina di livello più alto.

5. Mantieni i tuoi titoli di breadcrumb coerenti con i titoli delle tue pagine.

Per evitare confusione, ti consigliamo di rimanere coerente con la tua pagina e i titoli di breadcrumb, in particolare se stai mirando a determinate parole chiave in quei titoli. Vuoi anche collegare chiaramente i tuoi titoli breadcrumb alla pagina. Se il titolo breadcrumb non ha un link, chiariscilo. Nestle etichetta in modo efficace i suoi titoli breadcrumb in modo che corrispondano ai titoli delle pagine. "Aree di impatto e impegno", ad esempio, si legge nello stesso modo nella navigazione breadcrumb come nella pagina.

Nestle fa anche un buon lavoro differenziando i collegamenti da non-link con colori diversi – i collegamenti sono blu, mentre i non-link rimangono grigi.

6. Diventa creativo con il design.

La navigazione breadcrumb tradizionale si presenta come segue: Home> About Us> Carriere. Tuttavia, non è necessario seguire il percorso tradizionale se si ritiene che un design diverso possa attrarre maggiormente il pubblico o avere un aspetto migliore sul proprio sito.

Ad esempio, Target utilizza la navigazione breadcrumb nelle pagine dei prodotti (perché chi non si perderebbe nella sezione della scarpa virtuale?), Ma utilizza i simboli "/" e il semplice testo nero e grigio. In questo caso, la sottile variazione del design ha senso per l'estetica del proprio sito.

7. Mantenerlo pulito e ordinato.

La navigazione breadcrumb è semplicemente un aiuto per l'utente e idealmente non dovrebbe essere notato a meno che l'utente non lo stia cercando. Per questo motivo, non si vuole ingombrare la navigazione breadcrumb con testo non necessario.

Eionet, ad esempio, potrebbe fare a meno del loro testo "Sei qui". Pur essendo pensato per essere utile, il testo ingombra la pagina. Con il giusto design, una navigazione con breadcrumb dovrebbe essere abbastanza visibile senza un'introduzione.

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

Esistono alcuni tipi diversi di breadcrumb che è possibile utilizzare: basati sulla posizione, basati sugli attributi e basati sulla cronologia. I breadcrumb basati sulla posizione mostrano all'utente dove si trovano nella gerarchia del sito. I breadcrumb basati sugli attributi mostrano agli utenti in quale categoria cade la loro pagina. Infine, i breadcrumb basati sulla cronologia mostrano agli utenti il ​​percorso specifico che hanno intrapreso per arrivare alla pagina corrente.

Bed Bath & Beyond utilizza la navigazione breadcrumb basata sugli attributi per mostrare agli utenti a quale categoria appartiene la loro pagina di prodotto, in modo che gli utenti possano fare clic su "Cucina" o "Piccoli elettrodomestici" per esaminare elementi simili. Questo tipo di navigazione con 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.

9. Conosci il tuo pubblico.

Le migliori pratiche nella navigazione breadcrumb invitano i web designer a posizionare la navigazione nella parte superiore della pagina, ma Apple, una delle aziende più preziose di tutti i tempi, sfida questa logica mettendo la navigazione breadcrumb nella parte inferiore del loro sito. In definitiva, è fondamentale che tu conosca il tuo pubblico. I clienti Apple sono tipicamente esperti di tecnologia e probabilmente troverebbero la navigazione se ne avessero bisogno. Prendi in considerazione le esigenze dei tuoi clienti e implementa i test A / B se non sei sicuro.

In definitiva, la navigazione breadcrumb è uno strumento efficace per rendere più semplice la navigazione del sito, ma si desidera seguire le migliori pratiche di progettazione per assicurarsi di sfruttare l'utilità dello strumento. Per ulteriori consigli su UX, consulta "The Ultimate Guide to UX Design".