11 modi in cui i breadcrumb migliorano il design UX
Pangrattato del sito Web migliorare l'esperienza dell'utente incoraggiare gli utenti a scavare più a fondo nella gerarchia del tuo sito, raccontando anche ai visitatori esattamente dove si trovano su una determinata pagina. Google schema breadcrumb è un altro valido motivo per impostare i breadcrumb. Ma il fattore di progettazione è sempre complesso, quindi aiuta a studiare esempi e raccogliere idee.
Questi sono alcuni dei miei stili di briciole preferite e dovrebbero fornire un buon punto di partenza per nuovi progetti di design.
1. Wayfair
Il sito web di Wayfair fa molto bene e la loro intera UX è fenomenale pagina per pagina. Una cosa che mi piace davvero è il loro stile breadcrumb perché non è troppo grande, ma anche non troppo piccolo e non invadente.
Troverete queste briciole sulle pagine dei prodotti e pagine di categoria quindi ti seguono intorno all'intero sito. Ciò ti consente di saltare una o due categorie da una pagina dettagliata.
E la barra di breadcrumb ottiene la sua piccola sezione sotto la navigazione con un diverso colore BG. Non invadente ma non difficile da trovare. Un grande stile di design e uno dei miei preferiti.
2. Assistenza Google
Un'altra menzione ovvia è Google dal momento che sono noti per incredibile lavoro di UX . Nella maggior parte dei prodotti Google troverai briciole di pane con pagine a più livelli e una delle migliori è la Assistenza Google luogo.
Le loro pagine di supporto offrono consigli su tutto, dallo schema all'analisi e allo strumento Search Console. Ogni pagina ha briciole di pane e queste briciole occupano uno spazio simile all'intestazione della pagina in modo che siano chiaramente visibili.
Notate di nuovo come questi collegamenti si amalgamano bene senza saltare fuori dalla pagina. Si sentono molto naturali nel design e questo dovrebbe essere sempre l'obiettivo con il tuo pangrattato.
3. Documenti MSDN
C'è una vera e propria funzionalità di breadcrumb Documenti MSDN che mi piace davvero. Ha tutte le caratteristiche tipiche del design come icone a freccia e collegamenti categoriali, ma il collegamento finale della catena ha un menu a discesa personalizzato con pagine extra.
Non l'ho mai visto prima in nessun progetto di breadcrumb, ma è incredibilmente prezioso per l'utente. In genere richiede un altro menu di navigazione per accedere a questi collegamenti, ma con un sito come Microsoft ci sono così tante pagine da percorrere.
Per non parlare della documentazione può essere piuttosto complessa, quindi non è la cosa più semplice da fare per creare breadcrumb. Questa tecnica è brillante e vale la pena utilizzarla se hai una gerarchia complessa sul tuo sito.
4. Apple
Sul sito Web di Apple ho visto tonnellate di breadcrumb in molte pagine come le pagine del negozio online e le pagine dei prodotti. Ma un piccolo dettaglio che ha attirato la mia attenzione è il area di collegamento footer con una piccola briciola di pane sopra i loro collegamenti in basso.
Apple è una società enorme con un sacco di pagine e risorse. Questo pangrattato potrebbe valere la pena di aggiungerlo anche in cima alla pagina, ma certamente non fa male ad essere vicino al fondo.
Incoraggerei i designer a provarlo e vedere come funziona. I breadcrumb di footer non sono certamente la norma, ma aiutano la navigazione visiva.
5. TechRadar
La maggior parte dei pangrattato che trovo si trovano solitamente su siti aziendali o negozi di e-commerce. Ma i blog hanno spesso anche il loro breadcrumb e un buon esempio è il Pagina dell'articolo TechRadar .
Ogni breadcrumb è piuttosto piccolo con un collegamento diretto alla categoria principale e una copia del titolo dell'articolo. Per questo tipo di blog è difficile giustificare il breadcrumb perché non c'è molta gerarchia.
Ma questo funziona bene se non hai un altro posto per aggiungere la categoria dell'articolo sulla pagina.
6. TutsPlus
Per un disegno di pangrattato molto più dettagliato, controlla il Blog TutsPlus . Ogni articolo presenta un piccolo breadcrumb nella parte superiore della pagina, incluse le categorie principale e secondaria.
Mi piace molto questo design perché si fonde naturalmente nel titolo della pagina. Quindi, invece di duplicare il titolo in un breadcrumb e in un tag heading, questo combina tutto in un elemento in modo che il
l'intestazione è parte del breadcrumb.
Nota che questo non usa lo schema di Google corretto in modo che non venga visualizzato con i breadcrumb nella ricerca. Ma considerando che influisce a malapena sul CTR, considero il design e l'usabilità on-page molto più dei vantaggi SEO (o della loro mancanza).
7. Coolspotters
I pangrattati tradizionali di solito contengono alcuni simboli di testo come la barra o la parentesi destra (>). Questi funzionano perché sono stati utilizzati per decenni e gli utenti hanno familiarità con loro.
Ma mi piace sempre vedere altre tendenze di design come briciole Coolspotters . Usano link breadcrumb personalizzati con frecce incorporate negli elementi di collegamento.
Puoi trovare un sacco di stili breadcrumb open source proprio come questi per il tuo sito. È un ottimo modo per ravvivare questo elemento di pagina molto tradizionale.
8. MarketWatch
Tornando alle origini è il sito di notizie online MarketWatch . Tutti loro post interni funzionalità navs breadcrumb con icone freccia destra a destra testo piuttosto piccolo.
In questo caso penso che il testo piccolo funzioni bene. Non è esattamente difficile usare il breadcrumb, ma si sentono più piccoli e meno significativi rispetto al resto della pagina.
Blog e siti di notizie funzionano meglio con breadcrumb più piccoli perché il vero obiettivo è il contenuto. Comunque è bello adattarli da qualche parte e questo design è un ottimo esempio.
9. Amazon
Tutti amano Amazon per il loro enorme inventario e la spedizione gratuita. Ma hanno anche un sito fantastico e non c'è modo di passare il loro progetto di breadcrumb.
Molti pagine di prodotto avere un set di breadcrumb vicino alla navigazione in alto. Questo è sempre super lungo perché le categorie di Amazon diventano profonde. Ciò è utile per i consumatori per vedere quali categorie potrebbero valere la pena di essere consultate e utile per i progettisti / i webmaster per studiare la massiccia struttura di prodotti di Amazon.
Ma se scorri verso il basso su ogni pagina di prodotto troverai una sezione "informazioni sul prodotto" o "dettagli sul prodotto" con le schede dei venditori migliori.
Questa funzione utilizza i collegamenti breadcrumb per mostrare dove il prodotto ha venduto il meglio e incoraggia i visitatori a fare clic su tali categorie correlate.
Le briciole di Amazon sono incredibilmente lunghe, quindi vale la pena studiarle se hai un sito con una gerarchia molto profonda.
10. Etsy
L'enorme sito di ecommerce online fai-da-te / artigianato Etsy progredisce costantemente nel loro design. È stato fondato nel 2005 e guardando il sito ora puoi vedere che hanno fatto grandi cambiamenti negli ultimi 10 anni.
Se ne controlli qualcuno pagina di categoria nell'angolo in alto a sinistra troverai piccole briciole di pane. Questi non sono così importanti rispetto alla navigazione della barra laterale che sembra davvero il modo principale di cercare.
Ma un buon effetto aggiunto è la lista totale degli articoli all'interno della categoria. Etsy elenca quanti articoli totali sono in vendita in ogni sottocaso mentre scavi più a fondo nel sito.
Una cosa di cui mi lamenterò è la mancanza di breadcrumb nelle pagine dei prodotti. Questo mi sembra una vera e propria svista per l'interfaccia utente e spero che aggiungano che andare avanti.
11. LinuxInsider
Questo disegno breadcrumb non è particolarmente bello ma ha una caratteristica che attira la mia attenzione.
Noterai un link "Articolo successivo" nella parte superiore di ciascuno Post LinuxInsider . Questo appare direttamente accanto al breadcrumb, quindi sembra parte della navigazione.
Gli utenti che interagiscono con i breadcrumb in genere vogliono scavare attorno a quelle categorie di briciole, quindi questo collegamento extra ha senso. Chiunque sia interessato al software Linux potrebbe voler passare direttamente al prossimo articolo di quella categoria.
