Im heutigen digitalen Zeitalter sind Websites zu einem primären Mittel der Kommunikation und Interaktion zwischen Unternehmen und ihren Kunden geworden. Mit der zunehmenden Komplexität von Websites wird es immer wichtiger, den Nutzern intuitive Navigationsmöglichkeiten zu bieten, und Breadcrumbs UX spielt dabei eine wichtige Rolle. Eine solche wichtige Komponente der Website-Navigation ist die Breadcrumbs UI.
Breadcrumbs UI ist eine Art Navigationshilfe, die dem Benutzer zeigt, wo er sich in der Hierarchie einer Website befindet, und es ihm ermöglicht, durch zuvor besuchte Seiten zurückzugehen. In diesem Artikel werden wir die Bedeutung von Breadcrumbs im Webdesign untersuchen und erörtern, wie Sie effektive Breadcrumbs für Ihre Website gestalten können.
Was sind Breadcrumbs in der UI?
Breadcrumbs, auch bekannt als Breadcrumb-Navigation, ist eine Art von Benutzerschnittstellenelement, das den Benutzern einen Pfad zu ihrer aktuellen Position innerhalb einer Website oder Anwendung bietet. Sie werden in der Regel am oberen Rand der Seite angezeigt und enthalten hierarchische Links zu zuvor besuchten Seiten, die die Struktur der Website widerspiegeln.
Breadcrumbs UI ist zu einem wesentlichen Bestandteil des modernen Webdesigns geworden, da es den Nutzern hilft, leicht zu navigieren und die Struktur einer Website zu verstehen. Dies ist besonders nützlich bei komplexen Websites mit mehreren Inhaltsebenen, da es den Besuchern ermöglicht, schnell zwischen verwandten Seiten zu navigieren, ohne die primären Navigationsmenüs verwenden zu müssen.
Ein effektives Breadcrumb-Design kann erheblich zu einer nahtlosen Benutzererfahrung beitragen, indem es den Besuchern das Auffinden der benötigten Informationen erleichtert und gleichzeitig ein Gefühl für den Kontext und den Ort innerhalb der Website vermittelt.
Arten von Breadcrumbs
Breadcrumbs lassen sich anhand ihres Designs und ihrer Funktionalität in drei Haupttypen einteilen: ortsbasiert, attributbasiert und pfadbasiert. Schauen wir uns die einzelnen Typen genauer an:
1. Standort-basierte Breadcrumbs
Ortsbezogene Breadcrumbs zeigen den aktuellen Standort des Nutzers innerhalb der Website-Hierarchie an, indem sie die Seite, auf der er sich gerade befindet, und ihre übergeordnete Kategorie anzeigen. Diese Art von Breadcrumbs wird am häufigsten auf Websites mit einer tiefen Hierarchie verwendet.
Ein standortbezogener Breadcrumb auf einer E-Commerce-Website könnte zum Beispiel so aussehen:
Startseite > Damenbekleidung > Kleider > Abendkleider
In diesem Beispiel ist der Benutzer von der Startseite zum Abschnitt für Damenbekleidung, dann zur Kategorie Kleider und schließlich zur Seite für Abendkleider navigiert.
Auf mobilen Geräten wird oft empfohlen, den Breadcrumbs-Pfad so zu verkürzen, dass er nur die letzte(n) Ebene(n) enthält und den Zugriff bis zur unmittelbar übergeordneten Kategorie ermöglicht.
2. Attribut-basierte Breadcrumbs
Attributbasierte Breadcrumbs zeigen Attribute oder Eigenschaften der aktuellen Seite an und nicht ihre Position innerhalb der Hierarchie der Website. Diese Art von Breadcrumbs wird häufig auf Websites mit Filteroptionen verwendet, wie z. B. E-Commerce-Sites oder Verzeichnisse.
Ein attributbasierter Breadcrumb auf einer Website mit Stellenangeboten könnte beispielsweise so aussehen:
Home > Jobs > Vollzeit > Marketing Manager
In diesem Beispiel hat der Benutzer Vollzeitstellen ausgewählt und dann weiter gefiltert, um nur Stellen für Marketingmanager anzuzeigen.
3. Pfad-basierte Breadcrumbs
Pfadbasierte Breadcrumbs zeigen die Schritte an, die der Nutzer unternommen hat, um zu seiner aktuellen Position auf der Website zu gelangen. Diese Art von Breadcrumbs wird häufig in mehrstufigen Prozessen oder Workflows verwendet, z. B. bei der Anmeldung für einen Dienst oder dem Abschluss eines Kaufs.
Ein pfadbasierter Breadcrumb auf einer Online-Shopping-Website könnte zum Beispiel so aussehen:
Startseite > Warenkorb > Versandinformationen > Zahlungsdetails
In diesem Beispiel hat der Benutzer Artikel in den Warenkorb gelegt, ist zur Kasse gegangen und hat seine Versandinformationen eingegeben, bevor er auf die Seite mit den Zahlungsdetails gelangt.
Brotkrümel können auch kombiniert oder angepasst werden, um den spezifischen Anforderungen einer Website gerecht zu werden. So kann eine Website beispielsweise sowohl standortbasierte als auch attributbasierte Breadcrumbs verwenden, um den Nutzern mehrere Möglichkeiten zu bieten, durch die Website zu navigieren.
Außerdem können Websites benutzerdefinierte Symbole oder Farben für ihre Breadcrumbs verwenden, um sie optisch ansprechender zu gestalten und mit dem Gesamtdesign der Website in Einklang zu bringen.
Wie gestaltet man UI-Breadcrumbs?
Bei der Gestaltung der Breadcrumb-Bar UI für Ihre Website sind einige wichtige Faktoren zu beachten, um sicherzustellen, dass sie effektiv und benutzerfreundlich sind.
Einfach und klar halten
Brotkrümel sollten leicht verständlich und nachvollziehbar sein, daher ist es wichtig, sie klar und prägnant zu halten. Vermeiden Sie komplexe oder technische Ausdrücke und halten Sie sich an einfache, leicht erkennbare Begriffe.
Wenn Sie beispielsweise eine E-Commerce-Website betreiben und ein Benutzer ein bestimmtes Produkt anschaut, könnte der Brotkrumenpfad folgendermaßen aussehen: Startseite > Elektronik > Mobiltelefone > iPhone 12. Diese Krümelspur ist klar und einfach zu verfolgen, so dass der Benutzer weiß, wo er sich auf der Website befindet und wie er zu weiter gefassten Kategorien wie "Elektronik" oder der Startseite zurückkehren kann.
Würde der Breadcrumb-Trail eine komplexe oder mit Jargon gefüllte Sprache verwenden, wie z. B. Home > Kategorie-1 > Unterkategorie-B > Produkt-12345, wäre es für den Benutzer viel schwieriger zu verstehen und zu navigieren, was möglicherweise zu Frustration und einer schlechten Benutzererfahrung führen würde.
Indem Sie die Breadcrumbs einfach halten und vertraute Begriffe verwenden, helfen Sie den Nutzern, sich auf Ihrer Website besser zurechtzufinden, und verbessern deren Gesamterlebnis.
Verwenden Sie eine logische Hierarchie
Wie bereits erwähnt, sollten die Breadcrumbs einer logischen Hierarchie folgen, die die Struktur Ihrer Website widerspiegelt. Das bedeutet, dass jeder Breadcrumb zu der Seite oder dem Abschnitt führen sollte, der in der Hierarchie der Website direkt darüber liegt.
Wenn Ihre Website beispielsweise ein Hauptnavigationsmenü mit Kategorien wie "Startseite", "Produkte" und "Über uns" hat, sollte Ihr Breadcrumb-Trail dieselbe Struktur widerspiegeln. Die Verwendung von Kategorien wie "Home" > "Über uns" > "Produkte" würde keinen Sinn ergeben und könnte die Benutzer verwirren.
Wenn Sie eine klare und konsistente Hierarchie einhalten, helfen Sie den Benutzern, die Organisation Ihrer Website zu verstehen und sich darin zurechtzufinden.
Benutzerbedürfnisse berücksichtigen
Obwohl Breadcrumbs für die meisten Benutzer sehr hilfreich sein können, sind sie nicht für alle Websites oder Benutzerdemografien notwendig. Wenn Ihre Website zum Beispiel hauptsächlich von technisch versierten Personen genutzt wird, die mit der Navigation auf Websites vertraut sind, sind Breadcrumbs möglicherweise nicht so nützlich.
Wenn Ihre Website hingegen ein weniger technisch versiertes Publikum anspricht oder eine komplexe Navigation und eine tiefe Inhaltshierarchie aufweist, dann können Breadcrumbs die Benutzerfreundlichkeit erheblich verbessern.
Es ist wichtig, dass Sie Ihre Zielgruppe und deren Bedürfnisse berücksichtigen, wenn Sie entscheiden, ob Sie Breadcrumbs auf Ihrer Website einführen wollen oder nicht. Sie können auch Benutzertests durchführen, um Feedback zu sammeln und zu sehen, wie Benutzer mit Breadcrumbs auf Ihrer Website interagieren.
Anpassen für Mobilgeräte
Angesichts der zunehmenden Verbreitung von Mobilgeräten ist es wichtig, dass Sie sich Gedanken darüber machen, wie Breadcrumbs auf kleineren Bildschirmen angezeigt werden und funktionieren. Auf mobilen Geräten müssen Breadcrumbs möglicherweise einen horizontalen Bildlauf ermöglichen, um den gesamten Breadcrumb-Pfad anzuzeigen, wenn der Platz in einer einzelnen Zeile nicht ausreicht.
Während herkömmliche Breadcrumbs auf dem Desktop gut funktionieren, lassen sie sich möglicherweise nicht gut auf eine mobile Schnittstelle übertragen. Lange mobile Breadcrumb-Trails können sich über mehrere Zeilen erstrecken, was wertvollen Platz auf dem Bildschirm beansprucht und die Benutzer möglicherweise verwirrt.
Erwägen Sie den Einsatz von Responsive Design-Techniken, um sicherzustellen, dass die Breadcrumbs auf allen Geräten gut lesbar und nutzbar sind. Möglicherweise sollten Sie auch den Breadcrumb-Trail für Mobilgeräte anpassen, indem Sie ihn verkürzen oder Symbole anstelle von Textlinks verwenden.
Verwenden Sie visuelle Anhaltspunkte
Zusätzlich zu den Textlinks können Sie auch visuelle Hinweise wie Pfeile oder Symbole verwenden, um den Nutzern zu helfen, den Breadcrumb-Trail besser zu verstehen. Diese visuellen Hilfen können die Hierarchie und den Navigationspfad klarer und leichter nachvollziehbar machen.
Es ist jedoch wichtig, diese Hinweise auf der gesamten Website einheitlich zu verwenden und sicherzustellen, dass sie leicht von anderen Elementen auf der Seite zu unterscheiden sind.
Machen Sie sie anklickbar
Damit Breadcrumbs wirklich nützlich sind, sollten sie anklickbar sein und den Benutzer zur vorherigen Seite oder Ebene in der Hierarchie zurückbringen. Auf diese Weise können Benutzer leicht zurückkehren, wenn sie sich verirrt haben oder eine frühere Seite erneut besuchen möchten.
Achten Sie darauf, dass der Link gut sichtbar ist und sich von anderen Elementen auf der Seite abhebt. Sie können auch Hover-Effekte hinzufügen oder die Farbe des Breadcrumb-Links ändern, wenn er aktiv ist.
Nur Seiten der Website einbeziehen
Bei der Implementierung von Breadcrumbs ist es wichtig, dass Sie nur Seiten innerhalb Ihrer eigenen Website einbeziehen. Die Einbeziehung externer Links kann die Benutzer verwirren und die Hierarchie unübersichtlich machen.
Achten Sie außerdem darauf, welche Seiten Ihrer Website tatsächlich Breadcrumbs benötigen. In einigen Fällen kann es vorteilhafter sein, andere Navigationstechniken wie eine Suchleiste oder Vorschläge für verwandte Inhalte zu verwenden.
Ergänzen Sie die globale Navigation
Es ist wichtig, daran zu denken, dass Breadcrumbs ein zusätzliches Navigationsinstrument sind und nicht die globale Navigationsleiste Ihrer Website ersetzen sollten.
Während die globale Navigation einen breiten Überblick über die Struktur der Website bietet, stellen Breadcrumbs einen lokalisierten, kontextbezogenen Pfad dar, der die allgemeineren Navigationsstrukturen ergänzt. Durch diesen mehrschichtigen Ansatz wird sichergestellt, dass die Nutzer mehrere Möglichkeiten haben, Ihre Website zu verstehen und zu navigieren. Die Aufnahme der Homepage in den Breadcrumb-Pfad kann überflüssig sein, wenn sie in der globalen Navigation der Website an prominenter Stelle zu finden ist.
Eindeutige Anzeige der aktuellen Seite
Ein wichtiges Element der Breadcrumbs ist die klare Angabe der aktuellen Seite oder Ebene in der Hierarchie. Dies hilft den Nutzern zu verstehen, wo sie sich gerade befinden und wie sie dorthin gelangt sind.
Es gibt verschiedene Möglichkeiten, dies zu erreichen, z. B. durch Fettdruck des aktuellen Seitentitels oder durch ein Pfeilsymbol, das die Richtung angibt. Welche Methode Sie auch immer wählen, achten Sie darauf, dass sie auf Ihrer gesamten Website einheitlich ist, damit sie leicht zu erkennen ist.
Bewährte Praktiken für eine effektive Brotkrümelnavigation
Vermeiden Sie auffällige oder kontrastreiche Farben
Bei der Gestaltung von Breadcrumbs ist es wichtig, dass Sie sich für dezente, nicht aufdringliche Farben entscheiden. Auffällige oder kontrastreiche Farben können unangemessene Aufmerksamkeit erregen und die Benutzer von den primären Navigationselementen und dem Hauptinhalt ablenken.
Wählen Sie stattdessen Farben, die sich nahtlos in das allgemeine Designthema Ihrer Website einfügen. So wird sichergestellt, dass die Breadcrumbs ein hilfreiches, aber unaufdringliches Navigationsinstrument bleiben. Um Farben klug auszuwählen, sollten Sie mehr über Farbschemata erfahren.
Berücksichtigen Sie Zugänglichkeitsstandards
Barrierefreiheit ist ein wichtiges Kriterium bei der Gestaltung von Webseiten. Achten Sie bei der Erstellung von Breadcrumbs darauf, dass sie den Web Content Accessibility Guidelines (WCAG) entsprechen.
Dazu gehört die Verwendung eines angemessenen Farbkontrasts, um den Text für Benutzer mit Sehbehinderungen lesbar zu machen, die Bereitstellung klarer visueller Hinweise und die Gewährleistung der Navigierbarkeit über die Tastatur. Indem Sie diese Richtlinien befolgen, machen Sie Ihre Website inklusiver und verbessern die Benutzerfreundlichkeit für alle.
Mobile und polyhierarchische Websites
Auf Mobiltelefonen können Breadcrumbs zu viel Platz einnehmen oder schwer zu ertasten sein; erwägen Sie, den Breadcrumb-Pfad zu verkürzen, wenn die Aufgaben Ihrer Benutzer dies zulassen. Ein kompakter Breadcrumb-Trail kann Unordnung verhindern und die Benutzerfreundlichkeit verbessern. Stellen Sie sicher, dass jeder Breadcrumb-Pfad groß genug ist, um leicht angetippt werden zu können, und erwägen Sie die Verwendung von Symbolen oder Abkürzungen, um Platz zu sparen und gleichzeitig die notwendigen Informationen zu vermitteln.
Eine Lehrmeinung besagt, dass Breadcrumbs auf einer polyhierarchischen Website nicht mehrere Pfade anzeigen sollten. Dieser Ansatz bewahrt die Einfachheit und vermeidet es, die Benutzer mit zu vielen Optionen zu verwirren. Konzentrieren Sie sich auf einen einzigen, klaren Breadcrumb-Trail, der die Benutzer durch den logischsten Pfad führt. Diese Strategie sorgt für eine unkomplizierte Navigation und verbessert die Benutzererfahrung, indem sie die kognitive Belastung reduziert.
Beispiele für effektives Breadcrumb-Design
Adidas
Adidas verwendet Breadcrumbs, die:
Mobilfreundlich: Durch die Verwendung von Schrägstrichen (/) zur Trennung von Kategorien werden die Breadcrumbs für mobile Benutzer übersichtlich gehalten. Dieses kompakte Format minimiert den Platzbedarf und stellt sicher, dass die Breadcrumbs den Bildschirm nicht dominieren und auch auf kleineren Geräten leicht zu navigieren sind.
Leicht zu verstehen: Die Beschriftungen verwenden einfache Begriffe, die die Nutzer leicht verstehen können. Durch die Vermeidung von komplexem Fachjargon und die Verwendung einer klaren, einfachen Sprache stellt Adidas sicher, dass die Nutzer ihre aktuelle Position auf der Website schnell erfassen und mühelos zu den vorherigen Seiten zurück navigieren können.
Harristeeter
Harristeeter.com setzt Breadcrumbs effektiv ein. Ihre Breadcrumb-Leiste ist :
Klar und prägnant: Die Beschriftungen sind kurz und prägnant und spiegeln die Hierarchie der Website wider. Dies hilft den Nutzern, ihren Standort zu verstehen und den Weg zurück zu finden.
Optisch deutlich: Farbe (blau für inaktiv, schwarz für aktiv) und dezente Unterstreichungen der Links machen deutlich, was angeklickt werden kann. Dies hilft den Nutzern, die aktuelle Seite und andere Links leicht zu erkennen.
Gut platziert: Die Brotkrümel befinden sich im oberen Bereich der Seite, direkt unter dem Hauptnavigationsmenü. Diese Platzierung macht sie sichtbar und zugänglich und verbessert die Benutzererfahrung durch eine vertraute Navigationshilfe.
Abschließende Überlegungen
UI-Breadcrumbs sind eine zusätzliche Form der Navigation, die den Benutzern hilft, Seiten innerhalb der Struktur einer Schnittstelle zu erreichen. Sie können besonders nützlich sein, wenn es darum geht, die Navigation in mehrschichtigen, hierarchischen Websites zu unterstützen, sind aber auf einstufigen Webseiten sinnlos.
Durch die Bereitstellung eines klaren Pfades verbessern Breadcrumbs die allgemeine Benutzerfreundlichkeit, indem sie den Benutzern ein unmittelbares Gefühl für ihre Position innerhalb der Website-Hierarchie vermitteln. Dies ist für komplexe Websites mit mehreren Kategorien und Unterkategorien von entscheidender Bedeutung, da es den Nutzern ermöglicht, mühelos zurückzuspringen, ohne sich auf die Zurück-Schaltfläche des Browsers oder das Hauptnavigationsmenü verlassen zu müssen. Daher kann die Implementierung von Breadcrumbs in eine gut strukturierte Website die Benutzernavigation und die allgemeine Benutzererfahrung erheblich verbessern.
