In dieser Artikelreihe „Design Pattern“ stelle ich den Einsatz und Nutzen von einzelne Elementen oder Funktionen einer Website vor. Heute schauen wir uns Breadcrumbs mal genauer an. Bei Breadcrumbs handelt es sich um ein Navigationselement, welches aus dem Bereich UX (User Experience) Design kommt und dem Nutzer aber auch Suchmaschinen (Breadcrumb SEO) die Orientierung innerhalb einer Website vereinfachen soll. Wie eine Breadcrumb Navigation aufgebaut ist und dargestellt wird erfahren Sie in diesem Artikel.
Breadcrumbs als Navigationshilfe für bessere Usability
Heute geht es um das Thema: Breadcrumbs
Doch zuerst möchte ich kurz erläutern, warum die Breadcrumb-Navigation unter dem Fachwissen Thema Design Pattern zu finden ist.
Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.
Was sind Design Pattern?
Design Pattern sind einzelne Elemente oder Funktionen einer Website. Sie bilden sozusagen einen Homepage Baukasten, der je nach Bedürfnis der jeweiligen Zielgruppe individuell konfiguriert werden kann. Die Artikelreihe stellt einzelne Elemente wie auch Funktionen einer Website vor und gibt Einblick in guten Tipps und Tricks zur Integration und zur richtigen Nutzung.
Doch kommen wir endlich zum Thema: Breadcrumb
Was ist eine Breadcrumb?
Breadcrumbs (dt. Brotkrümmel) werden als Navigationshilfe innerhalb der Benutzeroberflächen UI (User Interface) eingesetzt.
Sie ermöglicht dem Nutzern einer Webseite Überblick über seinen aktuellen Standort zu behalten.
Der Name stammt aus dem Märchen “Hänsel und Gretel”, die auf dem Weg durch den Wald eine Spur aus Brotkümmeln hinterlassen haben, um später den Weg nach Hause wiederzufinden.
Breadcrumb Design: Wie werden Breadcrumbs dargestellt?
Die Breadcrumb Navigation wird wie ein Navigationspfad mit Verlinkungen zu den einzelnen Ordners bzw. den einzelnen Struktur Elementen einer Webseite und deren Hierarchie (Aufbau) dargestellt.
Das Breadcrumb Design: Eine Breadcrumb Navigation kann bspw. folgendes Aussehen haben…
Sie sind hier: Startseite → Blog → Kategorie → Beitrag
Jedes dieser einzelnen Elemente ist verlinkt, sodass der Nutzer leicht wieder zurück zur Ausgangsposition findet.
Breadcrumb Usability: Warum ist die Integration von Breadcrumbs wichtig?
Die Integration von Breadcrumbs ist insofern wichtig, da der Nutzer einer Webseite immer genau aufgezeigt bekommt, wo er sich aktuell befinden und auch wie er wieder zurück zu Seiten wie z.B. der Home Page gelangen kann.
Breadcrumb SEO: Warum ist die Breadcrumb für die Suchmaschinen wichtig?
Breadcrumb SEO bedeutet, daß neben den Nutzern auch die Suchmaschinen eine Orientierung mit Hilfe der Breadcrumb Navigation erhalten. Und so ist die Breadcrumb Navigation ein wichtiges Element für erfolgreiche Suchmaschinenoptimierung geworden.
Breadcrumb WordPress: Gutes Breadcrumb SEO mit WorPress
Bei WordPress Webseiten sind die einzelnen Breadcrumb-Navigaitonselemente bspw. Kategorien, Beiträge oder eben die einzelnen Seiten einer Internetpräsenz. Mit WordPress Breadcrumb einzusetzen ist übrigens sehr leicht möglich! Oft sind Breadcrumbs schon in WordPress Themes integriert und bilden einen absoluten Mehrwert, wenn diese auch aktiviert werden. Ich benutze am liebsten das Genesis Framework, da dieses von Haus aus schon mit Breadcrumbs SEO optimiert ist und durch die saubere Programmierung auch von Suchmaschinen geliebt wird. Im Genesis Framework wie auch in Genesis Childthemes sind Breadcrumbs fester Bestandteil.
Weblinks:
Zum Thema Design Pattern gibt es ganz viel gute Artikel in englischer Sprache. Hier eine kleine Übersicht:
UI Design – Pattern Breadcrumbs
UI Design – Pattern Breadcrumbs Beispiele
Artikel von Smashing Magazine: Breadcrumbs in Web Design
