Breadcrumbs Web Design Examples and Best Practices

Inspiration – Websites ExamplesAndrian Valeanu – June 14, 2013 – 6 minutes READ

Breadcrumbs are a very important element in websites design. Per farlo, puoi implementare le briciole di pane nel tuo design web. Aumenta lo standard del vostro sito web e quindi attira gli spettatori al sito. Fondamentalmente, questi sono collegamenti basati sul testo. Normalmente, il carattere delle briciole di pane è pochi punti più piccolo della dimensione del testo originale del contenuto del sito web.

Quando costruite un sito web, quale dovrebbe essere il vostro obiettivo principale? Naturalmente, è l’usabilità del sito. Che si tratti di un sito educativo, un sito eCommerce o un sito informativo, non si può ignorare l’importanza dell’usabilità del sito web.

I visitatori devono usufruire delle informazioni dal sito in modo senza problemi. Se si tratta di un sito di eCommerce, gli spettatori non devono avere difficoltà a trovare i loro prodotti preferiti. Se trovano che richiede tempo per ottenere informazioni pertinenti dal vostro sito, non esiteranno a lasciare il sito e andare di nuovo alla pagina di ricerca per trovare un altro sito concorrente che è più utile per loro. Quindi è importante rendere il sito utile ed efficace per i visitatori.

Breadcrumbs, come suggerisce il nome, lascia una traccia per gli spettatori del sito per tornare alla loro destinazione in modo più semplice. Il nome è preso dalla fiaba “Hansel e Gretel”. Le briciole di pane sono conosciute come i link di testo che si trovano generalmente sui siti web in cima al corpo principale della pagina; sotto l’intestazione e/o qualsiasi banner grafico della pagina, ma sopra il contenuto. Le briciole di pane sono pianificate in base alla struttura della pagina del vostro sito web.

Per esempio, se avete un negozio eCommerce e uno spettatore si trova su una pagina per i frigoriferi, la struttura delle briciole di pane mostrerà le categorie principali che portano alla pagina e tornano alla home page secondo il loro giusto ordine di apparizione sulla pagina. Quindi, gli spettatori troveranno il breadcrumb qualcosa come “Home>Dispositivi elettronici>Elettrodomestici>Frigoriferi”. Questo percorso è tipicamente basato sulla struttura specifica delle cartelle nel sistema di backend del sito web. L’utente può andare a qualsiasi pagina del percorso cliccando sul testo. Per esempio, se si vuole andare alla homepage ci si può andare direttamente cliccando sul link “home” sul percorso breadcrumb.

I breadcrumb sono usati principalmente come menu di navigazione. Ci sono diversi modi attraverso i quali un utente può navigare tra le diverse pagine di un sito web. I menu di navigazione devono essere user-friendly e semplici. Quindi breadcrumb è un’idea brillante come menu di navigazione.

Non solo come menu di navigazione ma anche per l’ottimizzazione dei motori di ricerca questo è vantaggioso. Soprattutto nell’eCommerce, dove la concorrenza può essere alta, ottenere un alto posizionamento nei motori di ricerca è importante. Dato che le briciole di pane sono basate sulla struttura delle cartelle del sito web, mette le parole chiave in più posti in tutto il sito web. Quindi, se “poncho di lana” è un termine di ricerca popolare nel vostro settore, il breadcrumb creerà un link interno in più alla parola chiave pertinente all’interno del vostro sito web.

Tuttavia, mentre avete a che fare con i menu breadcrumb, una cosa che dovete tenere a mente è che questo tipo di navigazione dovrebbe essere considerato come una caratteristica extra per migliorare l’attrazione del sito e non dovrebbe sostituire gli utili menu di navigazione principali.

Nella ricerca dei vari tipi di menu breadcrumb su internet si possono trovare menu di navigazione breadcrumbs basati sulla posizione, sugli attributi e sul percorso.

Il componente è realizzato in colore nero per distinguersi naturalmente dallo sfondo chiaro ed essere messo a fuoco. La tela testurizzata collabora piacevolmente con il design artistico generale. I link sono rapidamente percepiti grazie alla tipografia nitida e formale e i piccoli spazi tra ogni elemento contribuiscono alla leggibilità.

Order

Mentre tutti gli elementi dell’UI sono contrassegnati da sottili gradienti, le briciole di pane, al contrario, si attengono a uno sfondo piatto e monocromatico più pulito. Tuttavia, va abbastanza bene con gli altri e completa l’estetica grazie alla colorazione simile. Il pulsante home aggiunge un fascino classico. I toni brillanti sono usati per delineare i titoli in modo più efficace.

Breadcrumbs di Rob Dozier magnetizza con un aspetto estremamente elegante, pulito e fresco. Anche se la navigazione è fatta in una combinazione di colori chiari, tuttavia cattura ancora l’occhio. L’ombra sottile fornisce alle caselle a forma di freccia un peso visivo extra, aiutandole così a distinguersi dallo sfondo rumoroso. Per indicare chiaramente la posizione corrente, l’ultimo elemento è presentato come una semplice scritta.

Breadcrumbs/Error di Jason Mayo è una barra di navigazione snella senza lacune o caratteristiche impressionanti. Si fonde armoniosamente con la composizione, diventando un dettaglio essenziale della UI. Tuttavia, un effetto in rilievo salva la giornata. Fornisce ad ogni blocco e titolo un aspetto più chiaro e nitido. Il viola che fa parte della palette di colori primari è applicato per evidenziare la pagina vera e propria.

Fondamenti di design

Allison House abbandona tutti i classici dettagli a forma di freccia e si limita a caratteristiche più semplicistiche ed eleganti. Così, il componente appare naturale e intuitivo e ha un forte stile educativo che è richiesto per il progetto. Ogni blocco include un titolo che è sostenuto da un’icona di accompagnamento.

Molto simile all’esempio precedente, Michal Vasko dispone tutti i link in una fila abbandonando i dettagli grafici in favore della tipografia. Gli elementi sono separati da piccole frecce minimaliste che grazie al colore blu mostrano discretamente la direzione. Tuttavia, poiché l’elemento è perfettamente integrato nel design e il colore grigio non è in netto contrasto con lo sfondo, può essere facilmente perso di vista.

JomSocial Template

JomSocial Template è un’altra cosa. La navigazione a briciole di pane ha un grande peso visivo a causa delle sue dimensioni relativamente grandi e della colorazione brillante. Colpisce l’occhio senza travolgere gli utenti. Mohd Izuddin Helmi manipola con il carattere distintivo, l’ombra interna, il pulsante home solido e alcuni gradienti delicati per ottenere un risultato impressionante.

Questo è un esempio abbastanza semplice, ma ha il diritto di esistere. È il modo più semplice per mostrare agli utenti i loro movimenti attraverso il progetto. Anche se è privo di un bell’aspetto e ha bisogno di qualche ritocco, serve abbastanza bene il suo ruolo. Include tutte le caratteristiche comuni: titoli, frecce per la direzione e persino il colore di evidenziazione, fornendo così ai visitatori un valido assistente di navigazione.

Gestione delle gallerie di immagini

La navigazione a briciole di pane emana eleganza e chiarezza. Ha un aspetto pulito e dettagliato che è ottenuto da un lavoro artigianale con la tipografia, lo spazio bianco e lo sfondo. L’ultimo elemento ha forme di lettere più audaci in contrasto con gli altri per dirigere l’attenzione alla pagina pertinente. Anche se la navigazione mantiene una sensazione semplicistica, tuttavia ha fascino e si adatta come un guanto qui.

Gamerscouch.com redesign

Aaron Moody ha creato vigorosamente il front-end del sito web dove le briciole di pane prendono il loro giusto posto e hanno un aspetto ordinato, sofisticato e alla moda. La navigazione completa il design generale e cattura l’atmosfera del progetto. La colorazione scura con una spruzzata di calda tonalità arancione delinea il componente ed evoca emozioni positive.

Conclusione

Come aiuto opzionale per la navigazione che non solo supporta il menu principale ma rivela anche la gerarchia e mostra il percorso verso la sezione corrente, le briciole di pane sono un potente strumento per migliorare l’esperienza dell’utente.

Tuttavia, purtroppo, molto spesso rimane trascurato in termini di design, anche se dovrebbe essere trattato come qualsiasi elemento comune di UI. Gli esempi elencati sopra stimolano gli utenti a creare briciole di pane belle e intuitive che adempiano alla loro missione e non siano una ‘pecora nera’ nel design.