Pimp my Breadcrumb – Bessere Usability durch Surfpfade mit Navigations-Dropdown

Breadcrumbs haben sich inzwischen zu einem Standard im Web entwickelt – ein Großteil der umfangreicheren Seiten verwendet sie. Die eResult Imagery-Studie 2012 stuft Breadcrumbs als Leistungsfaktor ein, eine bessere Umsetzung bewirkt also eine höhere Zufriedenheit der Nutzer. Meine Kollegin Katja Brand-Sassen zeigte hier im Blog bereits Best Practices und Empfehlungen zur Verwendung und Gestaltung von Breadcrumbs.

Aber müssen Breadcrumbs immer nur auf die Anzeige des Surfpfades beschränkt sein? Können sie nicht auch eine größere Rolle bei der Navigation spielen, statt nur bei der Orientierung? Ich denke ja – etwa durch die Kombination mit Dropdown-Menüs, die ich in diesem Artikel näher beleuchten möchte.

Ein Dropdown-Menü kann die Navigation ergänzen oder sogar ersetzen

Die Idee ist, bei Mouseover eines Breadcrumb-Teiles weitere Links in einem Dropdown anzubieten. Diese erweiterten Breadcrumbs finden sich bereits auf einigen Seiten, etwa der in Abb. 1 gezeigten Cranfield University. Hier ist das Dropdown schön in das Design der Breadcrumbs integriert und ermöglicht jeweils den Zugriff auf alle Unterseiten des mit der Maus angewählten Navigationspunktes.

Abb. 1: Die Breadcrumbs der Cranfield University bieten ein Dropdown-Menü für weitere Navigationsmöglichkeiten.

Abb. 1: Die Breadcrumbs der Cranfield University bieten ein Dropdown-Menü für weitere Navigationsmöglichkeiten.


Durch ein solches Dropdown-Menü kann die bestehende Navigation durch die Breadcrumbs besser ergänzt, vielleicht sogar ersetzt werden. Anstatt nur rückwärtsgerichtet in der Hierarchie nach oben navigieren zu können, hat der Nutzer so die Möglichkeit, direkt wieder eine Seite tiefer einzusteigen. Es kann auf diese Weise jedes Mal ein Klick gespart werden. Zusätzlich erleichtern die angezeigten Unterpunkte das Verständnis für den Nutzer, indem sie einen inhaltlichen Kontext bilden.

Die angezeigte Navigationsebene muss ersichtlich sein

Eine interessante Frage ist, welche Navigationsebene beim Mouseover angezeigt werden sollte: Die aktuelle, mit der Maus angewählte (siehe Abb. 2) oder die darunter liegende (siehe Abb. 3)? Aufgrund der Seltenheit von Breadcrumb-Dropdowns scheint sich hier noch kein Standard etabliert zu haben, auch wenn eine Tendenz zur Unterebene erkennbar ist. Die tatsächlichen Erwartungen der Nutzer lassen sich nur durch empirische Studien feststellen, etwa mit einen Usability-Test im Labor .

Abb. 2: Die Links im Dropdown von Siemens sind eingerückt, um sie als Unterseiten zu identifizieren.

Abb. 2: Die Links im Dropdown von Siemens sind eingerückt, um sie als Unterseiten zu identifizieren.


Egal welche Variante Sie wählen – das wichtigste ist, dass klar erkennbar ist, welche Ebene angezeigt wird. Ein guter Ansatz ist eine Einrückung, wie sie von Siemens verwendet wird (siehe Abb. 2). So erscheinen die Links im Dropdown als Unterpunkte der markierten Seite.

Die aktuelle Seite muss markiert werden

Ein weiteres Mittel, um dem Nutzer das Verständnis des Breadcrumb-Dropdowns zu erleichtern, ist die Hervorhebung der aktuellen Seite. Dieser Usability-Standard hat sich in normalen Navigationen bereits durchgesetzt und sollte auch bei dieser neuartigen Form beherzigt werden. Wowhead setzt dies auf eine sehr klare Weise in Form eines Hakens um (siehe Abb. 3). So ist direkt ersichtlich, wo der Nutzer sich aktuell befindet.

Abb. 3: Das Breadcrumb-Dropdown von Wowhead kennzeichnet die aktuelle Seite durch einen Haken und bietet verschachtelte Menüs zur Navigation über mehrere Ebenen.

Abb. 3: Das Breadcrumb-Dropdown von Wowhead kennzeichnet die aktuelle Seite durch einen Haken und bietet verschachtelte Menüs zur Navigation über mehrere Ebenen.





















In Abb. 3 ist ebenfalls erkennbar, dass die Idee des Breadcrumb-Dropdowns auf Wowhead noch einen Schritt weiter getrieben wird – durch geschachtelte Menüs ist der direkte Zugriff auf alle Ebenen möglich und die Breadcrumb wird zur eigentlichen Hauptnavigation. Diesen Ansatz finde ich sehr interessant, allerdings nicht universell einsetzbar. Verschachtelte Menüs sind aus Usability-Sicht bedenklich und sollten bei Wowhead vor dem Hintergrund der Zielgruppe gesehen werden: Sehr involvierte Computerspieler mit meist hoher Internetaffinität.

Mein Vorschlag optimiert die Darstellung des Breadcrumb-Dropdowns

Die gezeigten Beispiele bieten alle gute Ansätze, um Breadcrumb-Dropdowns nützlich und verständlich zu gestalten. Ich denke aber, dass man es noch etwas besser machen kann. Deshalb habe ich meine Idee als Wireframe umgesetzt, um sie Ihnen zu zeigen und zur Diskussion zu stellen.

Abb. 4: Meine Idee zur Dropdown-Gestaltung verdeutlicht die angezeigte Ebene und die aktuelle Seite.

Abb. 4: Meine Idee zur Dropdown-Gestaltung verdeutlicht die angezeigte Ebene und die aktuelle Seite.

Wie in Abb. 4 zu sehen ist, öffnen sich bei Mouseover eines Breadcrumb-Teils die Punkte derselben Ebene. Diese werden jedoch nicht als einfaches Dropdown angezeigt, sondern um die aktuelle Seite herum. Anstatt die aktuelle Seite zweimal zu zeigen – in der Breadcrumb und im Dropdown – wird beides vereint. Dem Nutzer wird so der kognitive Aufwand erspart, den Zusammenhang herzustellen. Gleichzeitig wird auch unmissverständlich klar, welche Ebene angezeigt wird.

Erweiterte Breadcrumbs verbessern die Usability von umfangreichen Websites

Wie ich gezeigt habe, kann eine Breadcrumb mit Dropdown-Menü die Navigation einer Website ergänzen oder sogar ersetzen. Den Einsatz sollten Sie im Einzelfall prüfen – sie eignet sich eher bei Websites mit komplizierter und tiefer Struktur.
Wenn Sie folgende Grundsätze beachten, sind Sie aber auf jeden Fall auf dem richtigen Weg:

  • Zeigen Sie eindeutig, welche Navigationsebene geöffnet wird.
  • Heben Sie die aktuelle Seite hervor.
  • Testen Sie mit Nutzern!

Kennen Sie vielleicht noch weitere Beispiele für solche erweiterten Breadcrumbs? Nutzen Sie dafür die Kommentare. Auch Ihre Meinung zu meinem eigenen Entwurf interessiert mich sehr.

10 Gedanken zu „Pimp my Breadcrumb – Bessere Usability durch Surfpfade mit Navigations-Dropdown

  1. Jan

    Der gewählte Vorschlag gefällt mir auch am besten, da er direkt auf das bekannte
    Element (den Breadcrumb-Eintrag) aufbaut und kein davon losgelöstes Element einführt. Werde ich mir auf jeden Fall merken.

    Antworten
  2. Toni

    Ich finde es hängt halt einfach mal davon ab, wofür man Seite Seite verwendet bzw. was angeboten werden soll. In einigen Fällen ist die erste Variante praktisch, aber in anderen ebenso die Version gleich die Steuerungsleiste einzubeziehen.

    Antworten
  3. Tina

    Wie wirkt sich das auf die Ladezeiten aus? Muss dafür nicht bei jeder Unterseite der komplette Navigationsbaum mit geladen werden?

    Antworten
  4. Janna

    „Es kann auf diese Weise jedes Mal ein Klick gespart werden.“ > Wie schade, dass solch schöne Usability-Projekte zu Lasten einer (leider immer noch wichtigen werberelevanten) KPI gehen: die PIs.

    Antworten
  5. Jan Pohlmann

    @Jan: Schön, dass dir der Vorschlag gefallen hat. Falls du einmal dazu kommst, ihn (oder etwas ähnliches) einzusetzen, würde ich mich über einen Erfahrungsbericht freuen.

    @Toni: Das stimmt sicherlich, und am Ende kann man sowieso erst sagen, ob es gut funktioniert, wenn man es mit Usern testet. Gleichzeitig denke ich, dass der Vorschlag Usability-Heuristiken generell besser umsetzt als die anderen.

    @Tina: Absolut, es bracuht mehr Performance als eine normale Breadcrumb. Der komplette Navigationsbaum muss aber nicht geladen werden, sondern auf jeder Ebene die, die im aktuellen „Navigationsstrang“ liegen. Solche Dinge sollte man auch problemlos über Caching in den Griff bekommen, da die Seitenstruktur ja nur sehr bedingt dynamisch ist. Wenn es bei Siemens funktioniert (und deren Seite ist wirklich riesig), sollte es eigentlich überall machbar sein.

    @Janna: Wenn ich deinen Post richtig verstehe spielst du auf den häufigen Konflikt zwischen PIs wie Page Views und Usability an. Definitiv ein spannendes Thema. Ich denke, es ist immer wichtig, dass man sich beide Seiten einer Website klar macht: Man muss verstehen, was die Nutzer wollen, aber auch, was man selber/das Unternehmen erreichen will. Nur so kann man bei einem Tradeoff die richtige Entscheidung treffen. Wenn Werbeeinnahmen das wichtigste sind, dann ist eine Maßnahme, die die Usability zu Lasten der Page Views erhöht, natürlich nicht unkritisch.

    Antworten
  6. Olaf

    Tolle Idee, aber mal ganz ehrlich – das überfordert jeden User. Als Geek komm ich damit klar und mag es auch, aber als User finde ich das garnicht erst oder verstehe es schlicht nicht.

    Der Fehler bei solch tief gestaffelten Websites ist eher, dass der User den Baum der Website lernen soll und sich daran entlang hangeln soll. Das wird aber so nicht funktionieren, da User normalerweise nicht den Aufwand für diese eine Website betreiben, zu suchen, in welchem Level denn nun gesucht werden müsste um eventuell zu schneller zu einem Punkt zu kommen.

    Man muss die Level als nacheinander gestellte Fragen verstehen, da kommt man nach der fünften ja auch nicht auf die Idee zu sagen: „und was passiert, wenn ich bei Frage 2 jetzt B sagen würde?“

    Antworten
  7. Jan Pohlmann

    Solch ein Feature wird nicht jeder Nutzer verstehen und benutzen – keine Frage. So lange dies aber nicht zu Problemen führt, ist es auch völlig ok. Wenn es einem Teil der Nutzer hilft, sollte man trotzdem darüber nachdenken.

    Eine intuitive, auf die Zielgruppe abgestimmte Informationsarchitektur ist natürlich Grundvoraussetzung. Wenn diese nicht stimmt, können auch die Navigationselemente (die diese Struktur abbilden) nicht funktionieren.

    Der Interpretation der Navigationsstruktur als linear zu durchlaufe Fragen würde ich allerdings gerne wiedersprechen. Man denke nur an das Ankommen auf Unterseiten, durch Google schon lange ein wichtiger Teil des Traffics. Und auch sonst ist das Zurück-Navigieren eine häufige Interaktion, denn der Informationsbedarf des Nutzers wird häufig nicht nur von einer Einzelseite abgedeckt und verändert sich zudem im Verlaufe des Besuchs.

    Antworten
  8. Olaf

    Also auch wenn man von Links auf Unterseiten landet, kann man die Breadcrumbs als (bereits beantwortete) Fragen verstehen. Für Baum-ähnlich strukturierte Websites dürfte das kein Problem sein. Mit CMS sollte man auch leicht Dokumente an mehreren Stellen im Strukturbaum einklinken können, wenn dies sinnvoll ist.

    Mich erinnert dieser Vorschlag eher an die Layered Navigation von Shop-Systemen, bei denen bestimmte Produkteigenschaften als Filter über den Bestand von Artikeln angewendet werden. Allerdings wird dies eben nur mit bestimmten Eigenschaften getan, die als gleichwertig angesehen werden. Weiterhin erfolgt dies dann auch nur ab einem bestimmten Level, meist generischer Produktkategorieebene, da sich eben ab dort die Produkte nur noch über die zu filternden Eigenschaften unterscheiden.

    Wenn man also ähnliche Strukturen vorliegen hat, kann dies sinnvoll sein. Allerdings nutzen die Layered Navigations normalerweise auch deutlich mehr Platz, um ihre Möglichkeit darzustellen und zur Nutzung zu animieren und werden auch sehr schnell unübersichtlich.

    Antworten
  9. Pingback: Rückblick – Top-Themen im Dezember und im Jahre 2012 | Usabilityblog.de

  10. Pingback: Themen und Ereignisse die 2012 die Usability- und Online-Marketing Szene prägten! | Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *