Best practice di navigazione Breadcrumb ed esempi

La navigazione Breadcrumb viene spesso trascurata nel processo di progettazione e sviluppo. Alcune persone potrebbero vederlo come non necessario, mentre altri potrebbero ritenerlo un problema troppo grande per quello che vale. In effetti, la navigazione breadcrumb aumenterà notevolmente l'usabilità di un sito web.

I breadcrumb forniscono agli utenti un metodo alternativo di navigazione, consentono loro di vedere dove si trovano nella gerarchia di un sito Web e ridurranno il numero di passaggi necessari per raggiungere un livello superiore all'interno di un sito Web.

Qui sono delineati i diversi tipi di navigazione breadcrumb utilizzati oggi, perché sono importanti e come dovrebbero essere implementati al meglio online. Anche incluso qui per il vostro riferimento sono oltre 30 esempi di come i breadcrumb vengono utilizzati online oggi.

Ricorda che, mentre è probabile che la navigazione con breadcrumb non crei o romperà un sito web, fornirà un ulteriore vantaggio ai tuoi utenti aumentando l'usabilità e la funzionalità generali del tuo sito web.

Tipi di breadcrumb

Sentiero

I breadcrumb basati sul percorso indicano i passaggi o il percorso, che un utente ha intrapreso per arrivare alla pagina corrente di un sito web. Inoltre, gli utenti vedranno i collegamenti alle pagine che hanno precedentemente visitato per raggiungere la pagina corrente. Tra i tre tipi di navigazione breadcrumb, la navigazione breadcrumb basata sul percorso è meno diffusa online. Essendo il motivo, la navigazione breadcrumb basata su Path fornisce la funzionalità simile a “Inoltrare” e “Indietro” pulsanti su un browser. Per la maggior parte dei siti Web, la navigazione breadcrumb basata su ubicazione e attributo offre una migliore funzionalità.

Posizione

I breadcrumb basati sulla posizione indicano all'utente dove si trova la pagina corrente nella gerarchia del sito web. Questo tipo di navigazione breadcrumb è più comunemente visto su siti Web con più di due livelli di profondità o contenuto. Dopo essersi trasferiti in un sito Web, gli utenti sono dotati di collegamenti a pagine o categorie che fungono da “genitore” o un livello superiore rispetto alla pagina che stanno attualmente visualizzando. Ad esempio, un utente potrebbe essere sul “Parlare” pagina, tuttavia, il “Cosa facciamo” pagina è un genitore di “Parlare” pagina mentre il “Casa” pagina è un genitore di “Cosa facciamo” pagina.

Clearleft Ltd

Attributo

I breadcrumb basati su attributi indicano all'utente gli attributi o le categorie attribuiti alla pagina corrente all'interno di un sito web. Spesso visti sui siti di e-commerce, i prodotti possono non solo rientrare in una categoria ma anche in determinati attributi. Ad esempio, un veicolo può essere classificato come SUV, quindi avere gli attributi di essere di colore nero e rilasciato nell'anno 2010.

Cars.com

Perché usare breadcrumb?

• Grande usabilità

  I breadcrumb forniscono un ulteriore strumento grazie al quale gli utenti possono navigare facilmente in un sito web. Se un utente atterra su una pagina interna del tuo sito web da un'altra fonte, i breadcrumb consentiranno all'utente di vedere esattamente dove si trovano all'interno della gerarchia del sito. L'utente ha anche la possibilità di salire a un livello più alto del sito web in qualsiasi momento senza problemi.

• Facile da backtrack

  Le navigazioni primarie non sono progettate per essere seguite a ritroso se ci sono le briciole di pane. Poiché il backtracking è estremamente popolare online, fornire un piccolo aiuto aggiuntivo può fare molto.

• Elimina clic aggiuntivi

  I breadcrumb consentono agli utenti di passare da un livello di un sito Web all'altro senza dover utilizzare il “inoltrare” o “arretrato” pulsanti sul browser. Inoltre, i breadcrumb eliminano la necessità per gli utenti di ricorrere continuamente alla navigazione principale.

• Mostra la gerarchia degli utenti

  La navigazione principale di un sito Web non riflette la gerarchia di ogni pagina all'interno del sito. Dare ai breadcrumb degli utenti permetterà loro di vedere la gerarchia di una pagina all'interno di un sito web.

• Visivamente piacevole

  Non solo i breadcrumb forniscono agli utenti un'usabilità aggiuntiva, lo fanno senza occupare troppo spazio o spazio sulla pagina. I breadcrumb sono facili da implementare nella progettazione visiva del tuo sito web e offrono un grande vantaggio agli utenti.

• Fornisce ulteriore aiuto

  È del tutto possibile che alcuni utenti non capiscano come funziona una navigazione primaria del sito Web e in alcuni casi gli utenti potrebbero anche non sapere cosa stanno cercando. Dare ai breadcrumb degli utenti permetterà loro di vedere il progresso generale e la struttura di un sito Web, consentendo loro di navigare meglio nel sito web.

• Tariffe di rimbalzo più basse

  In genere, i breadcrumb forniscono una navigazione più dettagliata rispetto alla navigazione principale. In tal modo, agli utenti verranno fornite più opzioni su come navigare in un sito web. Offrendo loro l'opportunità di eseguire facilmente il back-track di alcuni livelli all'interno del sito web, la frequenza di rimbalzo diminuirà.

• Costruisce interesse

  Quando un utente atterra su una pagina interna di un sito Web, le probabilità sono già presenti in una pagina di interesse. I breadcrumb possono fornire collegamenti a pagine aggiuntive e informazioni di cui l'utente è anche interessato senza farle iniziare dal punto di partenza.

Best practice per breadcrumb

• Usa i breadcrumb nella parte superiore di una pagina

  Il posizionamento più comune e istintivo per i breadcrumb si trova nella parte superiore di una pagina. Ciò consente agli utenti di trovare i breadcrumb in modo semplice e di utilizzarli di conseguenza.

• Usa sempre il pangrattato

  Se decidi di utilizzare i breadcrumb, assicurati di utilizzarli su tutto il sito web. Dare agli utenti le briciole di pane su alcune pagine e non su altre solo confonderle e frustrarle. (Un primo esempio di questo è Amazon in quanto rimuovono le briciole di pane dalle singole pagine del prodotto.)

• I pangrattati dovrebbero degradarsi con grazia

  I breadcrumb dovrebbero sempre iniziare con la home page e degradarsi alla pagina corrente. In tal modo i tuoi breadcrumb devono passare dal livello più alto al livello più basso, un passo alla volta.

• Stilizzare i breadcrumb in modo appropriato

  Vuoi che il tuo pane grattugiato sia visto, ma non vuoi che siano il punto focale. Vuoi anche rendere evidente che le tue briciole di pane non fanno parte del contenuto principale di una pagina, ma solo un supporto aggiuntivo. Trova un mezzo felice in cui il tuo pane grattugiato sia evidente ma non invadente.

• Categorizza chiaramente le pagine

  Se hai pagine che rientrano in due o più categorie, potresti non voler utilizzare le briciole di pane sul tuo sito web. Provare a posizionare una pagina in due o più categorie probabilmente produrrà solo briciole di pane non chiare e confondere l'utente. Assicurati che il tuo sito web abbia una gerarchia organizzata e venga visualizzato di conseguenza attraverso il tuo breadcrumb.

• Separare chiaramente ogni livello

  Assicurati che gli utenti siano in grado di distinguere la differenza tra ogni livello di breadcrumb. Il separatore più comune tra i livelli è il carattere "maggiore di" (>). Altri buoni separatori includono le virgolette doppie (»), le barre (/) e le frecce (→). Se si utilizza un carattere di testo normale, utilizzarne solo uno. (»È più attraente ed efficace di >>)

• Single Out the Current Page

  Utilizzare uno stile diverso sull'ultimo elemento di un elenco breadcrumb per stabilire che si tratta della pagina correntemente visualizzata. Puoi farlo creando l'oggetto grassetto, cambiando il suo colore, o enfatizzando esso.

• Non rendere la pagina corrente un link

  Non è necessario rendere l'ultimo elemento di un elenco di breadcrumb un collegamento perché è la pagina corrente che viene visualizzata. La creazione di un link qui confonderà solo gli utenti, specialmente quando cliccano su di essi e non vengono portati a una nuova pagina.

• Non utilizzare breadcrumb come intestazione di pagina

  L'uso dell'ultimo elemento di un elenco di breadcrumb come intestazione di una pagina corrente non è efficace. Se scegli di utilizzare i breadcrumb, fallo anche con l'intestazione di una pagina.

• I breadcrumb non sostituiscono la navigazione principale

  I breadcrumb devono essere utilizzati solo come supporto per la navigazione principale, mai per sostituire completamente la navigazione principale. Devi sempre fornire agli utenti una navigazione primaria da cui possono navigare in un sito Web prima di utilizzare la navigazione breadcrumb.

Grandi esempi di pangrattato

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia e Maggie

Intridea

Design di esseri umani

Roxy

Blik

SitePoint

Bersaglio

Walmart

1-800-Flowers

Miglior acquisto

Amazon.com

Fienili e nobile

Fine delle terre

Mela

Google

Inseguire

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

AREA 17

Wufoo

Girl Scouts of Middle Tennessee

Il collettivo di Glasgow

Primogenito

Bell Canada

Grooveshark

Devlounge

Informazioni sull'autore - Shay Howe è un designer professionista di interfacce utente e web attualmente residente a Chicago, Illinois. Scrive di web design nel suo blog e lascia a te la possibilità di ascoltarti su Twitter. Per favore sentiti libero diglielo ciao!