Breadcrumb-Navigation

Breadcrumb-Navigation

Sogenannte Breadcrumbs (dt. Brotkrümel) sollen dem Benutzer bei der Orientierung auf einer mobilen Website helfen, indem sie den Pfad durch die Seite anzeigen. Außerdem bieten sie neben der Hauptnavigation eine weitere Möglichkeit, um übergeordnete Bereiche der Website aufzurufen.

Die am häufigsten verwendete Variante von Breadcrumbs zeigt die aktuelle Position des Nutzers sowie die übergeordneten Seiten in der Hierarchie der Website.

Geeignet für:

Der Einsatz von Breadcrumbs lohnt sich vor allem bei großen Webseiten mit hierarchisch angeordneten Unterseiten. Sie machen dem Benutzer die Struktur der Seite verständlicher und unterstützen ihn bei der Orientierung. Außerdem kann er sich so auf einer Seite mit viel Inhalt schneller bewegen.

Besonders geeignet für die Verwendung sind beispielsweise Shoppingseiten, welche viele Produkte in verschiedenen Kategorien anbieten.

Vorteile

  • Der Nutzer weiß jederzeit, wo er sich befindet und verliert nicht die Orientierung

  • Es ist ein schnellerer Wechsel zu anderen oder vorher besuchten Bereichen der Seite möglich als mit der Zurücktaste des Mobiltelefons

Zu beachten

  • Mobile Websites sind meistens nicht so komplex, dass Breadcrumbs notwendig werden

  • Der Einsatz von Breadcrumbs sollte einen erkennbaren Mehrwert bieten. Diese Art der Navigation kann sonst auf mobilen Websites Platz wegnehmen, der besser für Inhalt genutzt werden könnte.

  • Breadcrumbs sollten nicht nur der Orientierung dienen und immer eine Verlinkung besitzen, damit der Nutzer nicht fälschlicherweise erwartet, damit zurück zu gelangen

  • Die Aktivierung der Links mit den Fingern kann schwierig sein, da die Begriffe eng aneinander stehen. Es muss also auf ausreichend Abstand zwischen den Wörtern geachtet werden.

  • Die Breadcrumbs sollten sinnvoll benannt sein und die tatsächlichen Inhalte wiedergeben

Empfehlungen

Die durchgeführten Benutzertests ergaben, dass sowohl Anfänger als auch Experten die Breadcrumbs als Hilfe nutzen, um sich auf der Seite zu orientieren. Besonders die Experten erwarten eine Verlinkung der Begriffe. Allerdings zeigte sich das Problem, dass Breadcrumbs auf mobilen Bildschirmen häufig sehr klein gestaltet und somit für breite Finger nur schwer zu bedienen sind.

 

Aus den Ergebnissen lässt sich ableiten, dass es vom Typ der Webseite abhängig gemacht werden sollte, ob sich Breadcrumbs für die Navigation eignen. Da sie relativ viel Platz einnehmen, kann ihr Einsatz auf mobilen Seiten mit vielen Inhalten schwierig werden. Informationen sollten allgemein so angeordnet werden, dass der Nutzer von selbst weiß, wo er sich auf der Seite befindet. Navigationselemente zur Unterstützung der Orientierung können sinnvoll sein, sollten jedoch dem Kontext der Webseite entsprechend ausgewählt werden. Breadcrumbs müssen nicht immer notwendig oder hilfreich sein und sollten auf mobilen Webseiten sehr vorsichtig eingesetzt werden.

Informationen im Internet

Gube, Jacob (2009): Breadcrumbs in Web Design. Examples and Best Practices. <http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/>

Seward, Dan (2011): Designing Usable Mobile Websites. A Practical Guide. PeakUsability, S. 14. <http://www.peakusability.com.au/__documents/pdf/peak_mobile_guidelines.pdf>

Ma, Shanshan. (2011): 10 Ways Mobile Sites Are Different from Desktop Web Sites. <http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php>

Weiterführende Literatur

  • Ballard, Barbara (2007): Designing the Mobile User Experience. Padstow: John Wiley & Sons, S. 110-112
  • Kalbach, James (2008): Handbuch der Webnavigation. Die User-Erfahrung optimieren. Dt. Übersetzung. Köln: O'Reilly, S. 62-64

Beispiele

Breadcrumb-Navigation auf der mobilen Website von Bonprix