11 Ways Brotkrumen Bolster UX Design
Website Brotkrumen Verbesserung der Benutzererfahrung Ermutigung der Nutzer, tiefer in die Hierarchie Ihrer Website einzutauchen und den Besuchern genau zu sagen, wo sie sich auf einer bestimmten Seite befinden. Google's Brotkrumen-Schema ist ein weiterer wertvoller Grund, Paniermehl einzurichten. Aber der Design-Faktor ist immer schwierig, so dass es hilft, Beispiele zu studieren und Ideen zu sammeln.
Dies sind einige meiner bevorzugten Breadcrumb-Stile und sie sollten einen guten Ausgangspunkt für neue Design-Projekte bieten.
1. Wayfair
Die Website von Wayfair macht viel richtig und ihr gesamtes UX ist phänomenal von Seite zu Seite. Eine Sache, die ich wirklich mag, ist ihre Breadcrumb-Stil, weil es nicht zu groß, aber auch nicht zu klein und nicht aufdringlich.
Sie finden diese Krümel auf den Produktseiten und Kategorieseiten so folgen sie dir auf der ganzen Seite. Auf diese Weise können Sie eine oder zwei Kategorien von einer Detailseite springen.
Und die Breadcrumb-Leiste erhält unter der Navigation einen eigenen kleinen Bereich mit einer anderen BG-Farbe. Nicht aufdringlich, aber auch nicht schwer zu finden. Ein toller Design-Stil und einer meiner persönlichen Favoriten.
2. Google-Support
Eine andere offensichtliche Erwähnung ist Google, seit sie dafür bekannt sind unglaubliche UX-Arbeit . Bei den meisten Google-Produkten mit mehrstufigen Seiten finden Sie Brotkrümel. Einer der besten ist der Google-Support Seite? ˅.
Ihre Support-Seiten bieten Ratschläge für alles, vom Schema über die Analyse bis hin zum Search Console-Tool. Jede Seite hat Breadcrumbs und diese Krümel belegen einen ähnlichen Platz wie die Seitenüberschrift, so dass sie deutlich sichtbar sind.
Erneut beachten Sie, wie diese Links gut ineinander übergehen, ohne von der Seite zu springen. Sie fühlen sich sehr natürlich im Design und das sollte immer das Ziel sein mit Ihren Brotkrumen.
3. MSDN-Dokumente
Es gibt eine wirklich einzigartige Breadcrumb-Funktion in der MSDN-Dokumente das mag ich wirklich. Es hat alle typischen Design-Funktionen wie Pfeil-Icons und kategorische Links, aber der letzte Link in der Kette hat eine benutzerdefinierte Dropdown-Liste mit zusätzlichen Seiten.
Ich habe das noch nie bei einem Breadcrumb-Design gesehen, aber es ist unglaublich wertvoll für den Benutzer. Normalerweise würde ein anderes Navigationsmenü erforderlich sein, um auf diese Links zuzugreifen, aber bei einer Site wie Microsoft gibt es so viele Seiten zu durchlaufen.
Nicht zu vergessen, Dokumentation kann ziemlich komplex sein, also ist es nicht das einfachste Zeug, um Brotkrumen zu erstellen. Diese Technik ist brillant und lohnt sich, wenn Sie eine komplexe Hierarchie auf Ihrer Website haben.
4. Apple
Auf der Apple-Website habe ich Tonnen von Brotkrumen auf vielen Seiten wie den Online-Shop-Seiten und Produktseiten gesehen. Aber ein kleines Detail, das meine Aufmerksamkeit erregt hat, ist das Fußzeilenlinkbereich mit einem kleinen Breadcrumb über ihren unteren Links.
Apple ist eine riesige Firma mit vielen Seiten und Ressourcen. Dieser Breadcrumb wäre es wert, auch oben auf der Seite hinzugefügt zu werden, aber es tut sicherlich nicht weh, in der Nähe des Bodens zu sein.
Ich würde Designer ermutigen, dies auszuprobieren und zu sehen, wie es funktioniert. Footer Breadcrumbs sind sicherlich nicht die Norm, aber sie helfen bei der visuellen Navigation.
5. TechRadar
Die meisten Brotkrumen, die ich finde, sind normalerweise auf Firmenseiten oder E-Commerce-Shops. Aber Blogs haben oft auch ihre eigenen Brotkrumen und ein gutes Beispiel ist die TechRadar Artikelseite .
Jeder Breadcrumb ist ziemlich klein und enthält einen Link direkt zur Kopfkategorie und eine Kopie des Titel des Artikels. Für diese Art von Blog ist es schwer, Breadcrumbs zu rechtfertigen, da es nicht viel von einer Hierarchie gibt.
Aber das funktioniert gut, wenn Sie keinen anderen Ort haben, um die Kategorie des Artikels auf der Seite hinzuzufügen.
6. TutsPlus
Für ein detaillierteres Breadcrumb - Design besuchen Sie bitte die TutsPlus Blog . Jeder Artikel enthält einen kleinen Breadcrumb ganz oben auf der Seite, einschließlich der primären und sekundären Kategorien.
Ich mag dieses Design sehr, weil es sich natürlich in die Überschrift der Seite einfügt. Anstatt also die Überschrift in einem Breadcrumb und in einem Überschrift - Tag zu duplizieren, kombiniert dies alles zu einem Element, so dass das
Überschrift ist Teil des Breadcrumb.
Beachten Sie, dass das richtige Google-Schema nicht verwendet wird, sodass es bei der Suche nicht mit Breadcrumbs angezeigt wird. Aber wenn man bedenkt, dass die Klickrate kaum beeinflusst wird, dann schätze ich das Design und die Benutzerfreundlichkeit auf der Seite viel mehr als SEO-Vorteile (oder deren Fehlen).
7. Coolspotters
Herkömmliche Semmelbrösel haften normalerweise mit einigen Textsymbolen wie dem Schrägstrich oder der rechten Pfeilklammer (>). Diese funktionieren, weil sie seit Jahrzehnten verwendet werden und die Benutzer mit ihnen vertraut sind.
Aber ich mag es immer, andere Breadcrumb Designtrends zu sehen Coolspotter . Sie verwenden benutzerdefinierte Breadcrumb-Links, bei denen Pfeile in die Link-Elemente integriert sind.
Sie können viel finden Open-Source-Breadcrumb-Stile genau wie diese für Ihre eigene Website. Es ist eine großartige Möglichkeit, dieses sehr traditionelle Seitenelement aufzupeppen.
8. Marktbeobachtung
Zurück zu den Grundlagen ist die Online-News-Site Marktbeobachtung . Alle von ihnen interne Beiträge Feature Breadcrumb Navs mit Rechtspfeil Icons ziemlich kleinen Text.
In diesem Fall denke ich, dass der kleine Text gut funktioniert. Es ist nicht gerade schwierig , die Brotkrümel zu verwenden, aber sie fühlen sich kleiner und weniger bedeutend als der Rest der Seite an.
Blogs und Nachrichtenwebsites funktionieren besser mit kleineren Brotkrumen, weil der eigentliche Schwerpunkt auf dem Inhalt liegt. Trotzdem ist es schön, sie irgendwo anzubringen und dieses Design ist ein großartiges Beispiel.
9. Amazon
Jeder liebt Amazon wegen seines riesigen Inventars und des kostenlosen Versands. Aber sie haben auch eine fantastische Seite und es gibt keine Möglichkeit, dass ich ihr Breadcrumb-Design weitergeben könnte.
Viele Produktseiten habe eine Reihe von Brotkrumen in der Nähe der obersten Navigation. Das ist immer sehr lang, weil Amazon-Kategorien tief gehen. Dies ist für die Verbraucher wertvoll, um zu sehen, für welche Kategorien es sich lohnt, zu surfen, und für Designer / Webmaster wertvoll, um die enorme Produktstruktur von Amazon zu studieren.
Wenn Sie jedoch auf jeder Produktseite nach unten blättern, finden Sie im Abschnitt "Produktinformationen" oder "Produktdetails" die Bestsellerliste.
Diese Funktion verwendet Breadcrumb-Links, um zu zeigen, wo sich das Produkt am besten verkauft hat, und ermutigt Besucher, sich durch die entsprechenden Kategorien zu klicken.
Amazons Breadcrumbs sind bewundernswert lang, so dass sie es wert sind, studiert zu werden, wenn Sie eine Site mit einer sehr tiefen Hierarchie haben.
10. Etsy
Die riesige Online-DIY / Handwerk-E-Commerce-Website Etsy entwickelt ihr Design ständig weiter. Es wurde im Jahr 2005 gegründet und mit Blick auf die Website können Sie sehen, dass sie in den letzten 10 Jahren einige große Veränderungen vorgenommen haben.
Wenn Sie irgendwelche auschecken Kategorieseite In der oberen linken Ecke findest du kleine Brotkrumen. Diese sind nicht so prominent im Vergleich zu der Sidebar-Navigation, die wirklich wie der primäre Weg zu suchen scheint.
Aber ein schöner addierter Effekt ist die Gesamteinzelteilauflistung innerhalb der Kategorie. Etsy listet auf, wie viele Artikel in jedem Subcat zum Verkauf angeboten werden, wenn Sie tiefer in die Site einsteigen.
Eine Sache, über die ich mich beschweren werde, ist der Mangel an Brotkrumen auf den Produktseiten. Dies scheint ein echtes Versehen für die Benutzeroberfläche zu sein, und ich hoffe, dass sie das hinzufügen.
11. LinuxInsider
Diese Breadcrumb-Design ist nicht besonders schön, aber es hat eine Funktion, die meine Aufmerksamkeit erregt.
Sie werden einen "Nächster Artikel" Link in der Nähe von jedem oben bemerken LinuxInsider-Post . Dies erscheint direkt neben dem Breadcrumb, so dass es sich wie ein Teil der Navigation anfühlt.
Benutzer, die mit Breadcrumbs interagieren, möchten in der Regel in diesen Krümeln Kategorien suchen, so dass dieser zusätzliche Link sinnvoll ist. Jeder, der an Linux-Software interessiert ist, möchte vielleicht direkt zum nächsten Artikel in dieser Kategorie springen.
