Breadcrumbs Web Design Beispiele und Best Practices

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

Breadcrumbs sind ein sehr wichtiges Element in Websites Design. Um dies zu tun, können Sie die Breadcrumbs in Ihre Web-Designs zu implementieren. Sie erhöhen den Standard Ihrer Website und ziehen somit die Besucher auf die Website. Im Grunde handelt es sich um textbasierte Links. Normalerweise ist die Schriftart der Breadcrumbs einige Punkte kleiner als die ursprüngliche Textgröße des Inhalts der Website.

Wenn Sie eine Website erstellen, was sollte Ihr Hauptaugenmerk sein? Natürlich auf die Benutzerfreundlichkeit der Website. Ob es sich nun um eine Bildungsseite, eine eCommerce-Seite oder eine Informationsseite handelt, Sie können die Bedeutung der Benutzerfreundlichkeit der Website nicht ignorieren.

Besucher müssen die Informationen auf der Website problemlos abrufen können. Wenn es sich um eine eCommerce-Website handelt, sollten die Besucher keine Schwierigkeiten haben, ihre bevorzugten Produkte zu finden. Wenn sie feststellen, dass es zeitaufwändig ist, relevante Informationen von Ihrer Website zu erhalten, werden sie nicht zögern, die Website zu verlassen und die Suchseite erneut aufzurufen, um eine andere konkurrierende Website zu finden, die für sie nützlicher ist. Daher ist es wichtig, die Website für die Besucher nützlich und effektiv zu gestalten.

Brotkrümel hinterlassen, wie der Name schon sagt, eine Spur, die die Besucher der Website auf einfache Weise zu ihrem Ziel zurückführt. Der Name ist dem Märchen „Hänsel und Gretel“ entnommen. Als Brotkrümel werden die Textlinks bezeichnet, die auf Websites in der Regel oben im Hauptteil der Seite zu finden sind; unterhalb der Kopfzeile oder/und etwaiger Bannergrafiken der Seite, aber oberhalb des Inhalts. Brotkrümel werden entsprechend der Seitenstruktur Ihrer Website geplant.

Wenn Sie zum Beispiel einen eCommerce-Shop haben und ein Betrachter sich auf einer Seite für Kühlschränke befindet, zeigt die Brotkrümelstruktur die Hauptkategorien, die zu der Seite und zurück zur Startseite führen, entsprechend ihrer richtigen Reihenfolge an. Der Betrachter findet den Brotkrumenpfad also etwa so: „Home>Elektronikgeräte>Haushaltsgeräte>Kühlschränke“. Dieser Pfad basiert normalerweise auf der spezifischen Ordnerstruktur im Backend-System der Website. Der Benutzer kann durch Anklicken des Textes zu jeder beliebigen Seite des Pfades gelangen. Wenn Sie zum Beispiel zur Homepage gehen wollen, können Sie direkt dorthin gehen, indem Sie auf den „Home“-Link auf dem Brotkrumenpfad klicken.

Brotkrumen werden hauptsächlich als Navigationsmenüs verwendet. Es gibt mehrere Möglichkeiten, mit denen ein Benutzer durch die verschiedenen Seiten einer Website navigieren kann. Die Navigationsmenüs müssen benutzerfreundlich und einfach sein. Daher ist Breadcrumb eine brillante Idee als Navigationsmenü.

Nicht nur als Navigationsmenüs, sondern auch für die Suchmaschinenoptimierung ist dies von Vorteil. Gerade im eCommerce, wo die Konkurrenz groß sein kann, ist eine gute Platzierung in den Suchmaschinen wichtig. Da die Breadcrumbs auf der Ordnerstruktur der Website beruhen, werden die Schlüsselwörter an mehreren Stellen auf der gesamten Website platziert. Wenn also „Wollponcho“ ein beliebter Suchbegriff in Ihrer Branche ist, wird Breadcrumb einen weiteren internen Link zu dem relevanten Schlüsselwort innerhalb Ihrer Website erstellen.

Beim Umgang mit den Breadcrumb-Menüs sollten Sie jedoch eines bedenken: Diese Art der Navigation sollte als zusätzliches Feature betrachtet werden, um die Attraktivität der Website zu erhöhen, und sollte nützliche primäre Navigationsmenüs nicht ersetzen.

Bei der Suche nach den verschiedenen Arten von Breadcrumb-Menüs im Internet finden Sie ortsbasierte, attributbasierte und pfadbasierte Breadcrumbs-Navigationsmenüs.

Die Komponente ist in schwarzer Farbe gestaltet, um sich natürlich vom hellen Hintergrund abzuheben und in den Fokus zu rücken. Die texturierte Leinwand arbeitet schön mit dem gesamten künstlerischen Design zusammen. Die Links werden dank der scharfen und formalen Typografie schnell wahrgenommen und kleine Lücken zwischen den einzelnen Elementen tragen zur Lesbarkeit bei.

Order

Während alle Elemente der UI durch subtile Farbverläufe gekennzeichnet sind, hält sich der Brotkrümel im Gegensatz dazu an eine saubere, flache Darstellung und einen monochromen Hintergrund. Dennoch passen sie gut zu den anderen und ergänzen die Ästhetik dank der ähnlichen Farbgebung. Die Home-Taste verleiht dem Gerät einen klassischen Charakter. Helle Töne werden verwendet, um Titel besser hervorzuheben.

Breadcrumbs von Rob Dozier besticht durch ein äußerst elegantes, sauberes und frisches Erscheinungsbild. Obwohl die Navigation in einem hellen Farbschema gehalten ist, sticht sie dennoch ins Auge. Der subtile Schatten verleiht den pfeilförmigen Kästchen zusätzliches visuelles Gewicht und hilft ihnen, sich von dem lauten Hintergrund abzuheben. Um die aktuelle Position deutlich zu machen, wird das letzte Element als einfache Beschriftung dargestellt.

Breadcrumbs/Error von Jason Mayo ist eine stromlinienförmige Navigationsleiste ohne Lücken oder beeindruckende Funktionen. Sie fügt sich harmonisch in die Komposition ein und wird zu einem wesentlichen Detail der Benutzeroberfläche. Ein Prägeeffekt rettet jedoch den Tag. Er verleiht jedem Block und Titel ein klareres und schärferes Aussehen. Violett, das Teil der primären Farbpalette ist, wird verwendet, um die eigentliche Seite hervorzuheben.

Gestaltungsgrundlagen

Allison House verzichtet auf alle klassischen pfeilförmigen Details und setzt auf einfachere und elegantere Merkmale. So wirkt die Komponente natürlich und intuitiv und hat einen starken pädagogischen Stil, der für das Projekt erforderlich ist. Jeder Block enthält einen Titel, der durch ein begleitendes Symbol unterstützt wird.

Gleich dem vorherigen Beispiel ordnet Michal Vasko alle Links in einer Reihe an und verzichtet auf grafische Details zugunsten der Typografie. Die Elemente sind durch winzige, minimalistische Pfeile getrennt, die dank ihrer blauen Farbe unaufdringlich die Richtung angeben. Da sich das Element jedoch nahtlos in das Design einfügt und die graue Farbe nicht im starken Kontrast zum Hintergrund steht, kann es leicht aus den Augen verloren werden.

JomSocial Template

JomSocial Template ist eine ganz andere Sache. Die Breadcrumbs-Navigation hat ein großes visuelles Gewicht aufgrund ihrer relativ großen Größe und hellen Farbgebung. Sie sticht ins Auge, ohne die Benutzer zu überfordern. Mohd Izuddin Helmi manipuliert mit einer markanten Schrift, einem inneren Schatten, einer soliden Home-Taste und einigen sanften Farbverläufen, um ein beeindruckendes Ergebnis zu erzielen.

Dies ist ein recht einfaches Beispiel, aber es hat seine Daseinsberechtigung. Es ist die einfachste Möglichkeit, den Benutzern ihre Bewegungen im Projekt zu zeigen. Obwohl es kein schönes Aussehen hat und etwas aufgehübscht werden muss, erfüllt es seine Aufgabe ganz gut. Sie enthält alle üblichen Merkmale: Überschriften, Richtungspfeile und sogar farbliche Hervorhebungen, so dass den Besuchern ein brauchbarer Navigationsassistent zur Verfügung steht.

Bildergalerie-Verwaltung

Die Breadcrumbs-Navigation wirkt schlank und klar. Sie hat einen sauberen und detaillierten Look, der durch geschickte Arbeit mit Typografie, Weißraum und Hintergrund erreicht wird. Das letzte Element hat im Gegensatz zu den anderen größere Buchstaben, um die Aufmerksamkeit auf die entsprechende Seite zu lenken. Obwohl die Navigation ein einfaches Gefühl beibehält, hat sie dennoch Charme und passt wie die Faust aufs Auge.

Gamerscouch.com redesign

Aaron Moody hat das Front-End der Website sorgfältig gestaltet, wo die Breadcrumbs ihren rechtmäßigen Platz einnehmen und ein ordentliches, anspruchsvolles und trendiges Aussehen haben. Die Navigation ergänzt das Gesamtdesign und fängt die Stimmung des Projekts ein. Eine dunkle Farbgebung mit einem Spritzer warmen Orangetons umreißt die Komponente und ruft positive Emotionen hervor.

Fazit

Als optionale Navigationshilfe, die nicht nur das Hauptmenü unterstützt, sondern auch die Hierarchie offenbart und den Weg zum aktuellen Abschnitt anzeigt, sind Breadcrumbs ein leistungsfähiges Instrument, um die Benutzererfahrung zu verbessern.

Allerdings wird es leider oft in Bezug auf das Design übersehen, obwohl es wie jedes andere Element der Benutzeroberfläche behandelt werden sollte. Die oben aufgeführten Beispiele regen dazu an, schöne und intuitive Breadcrumbs zu erstellen, die sowohl ihre Aufgabe erfüllen als auch kein „schwarzes Schaf“ im Design sind.