SteviesWebsite

Webdesign: Die optimale Breadcrumb

Die Breadcrumb (oder auch Brotkrumen) Navigation ist ein beliebtes Element auf einer Website. Durch sie weiß ein Benutzer immer wo er gerade ist und wie er wieder zurück kommt. 

Ich habe mal Breadcrumb-Navigationen großer Seite analysiert und berichte euch hiermit, wie man eine Breadcrumb optimal gestalten kann. 

Kombinierte Breadcrumb

Mir ist aufgefallen, dass auf großen Websites immer weniger Standard-Breadcrumbs gebraucht werden. Sie bauen die Breadcrumb einfach in die Navigation mit ein. Viele blenden diese aber auch einfach in einer anderen Art ein: Durch die normale Navigation sieht man durch eine Baumstruktur trotzdem wo man ist. Ein gutes Beispiel bietet Amazon (obwohl die zusätzlich auch noch die normale Breadcrumb einblenden). Dort sieht die Navigation so aus: 

Breadcrump in der Navigation

Breadcrumb in der Navigation

Unscheinbare Breadcrumbs

Breadcrumbs sind unscheinbar, wenn sie auf den ersten Blick gar nicht auffällt. Wenn der Benutzer sie sucht, findet er sie aber dennoch. Denn sie ist immer über dem Content. Das ist meiner Meinung nach eine gute Lösung. So wirkt die Seite nicht so überfüllt. 

Hier ein paar Beispiele: 

Breadcrump von Bild.de

Breadcrumb von Bild.de

Breadcrump Immobilien Scout

Breadcrumb Immobilien Scout

Breadcrump MSN

Breadcrumb MSN

Breadcrump PC Welt

Breadcrumb PC Welt

Breadcrump T-Online

Breadcrumb T-Online

RSS-Breadcrumb

Eine Breadcrumb ist mir bei der Analyse besonders positiv aufgefallen: Die Breadcrumb von Spiegel.de. Sie benutzen die Breadcrumb umRSS-Feeds der einzelnen Kategorien zu promoten. Was hierbei natürlich wichtig ist, dass man für jede Kategorie-Seite auch ein RSS-Feed anbietet. 

RSS-Breadcrump vom Spiegel

RSS-Breadcrumb vom Spiegel

Sie sind hier

In einigen Breadcrumb-Navigationen steht voran ein Sie sind hier. Dieses ist meiner Meinung nach überflüssig, denn eine Breadcrumb-Navigation braucht normalerweise keine Beschreibung. Ein paar Beispiele: 

Breadcrump von Chip

Breadcrumb von Chip

Breadcrump von Web.de

Breadcrumb von Web.de

Startseite oder Seitenname?

Wenn ihr euch die oberen Beispiele mal ansehen, werde ihr feststellen, dass der erste Eintrag oft Home, Startseite oder der Name der Seite ist. Meiner Meinung nach ist der Name der Seite die beste Wahl. Denn so prägt sich nebenbei noch der Seitenname ein. Wenn man auf die ganz sichere Seite geht nennt man einfach Beides z.B. ‘SteviesWebsite Startseite’. 

Fazit

Man sollte mit der Breadcrumb-Navigation mal ein bisschen experimentieren. Das ganze Testet man am besten mit Usability-Tests: Usability Tests mit Google Analytics

RSS Feed für Kommentare zu diesem Artikel. TrackBack URL

6 Kommentare »

  1. Ich finde diese Navigationsform auch besser als überfrachtete. So kann man auch geziehlt Leute auf andere Unterseiten bringen. Also eine in der Art wie bei Amazon.

    Kommentar von Matthias — 4. Januar 2010 @ 11:50

  2. Joa, so eine Breadcrumb wie die von Google ist natürlich schon toll, aber wie macht man so was eigentlich?

    Kommentar von Tobias — 6. März 2010 @ 19:44

  3. Um eine Breadcrumb bei Google bekommen solltest Du natürlich auch eine auf deiner Seite haben. Als ich meine Breadcrumb auf > statt auf -> umgestellt habe, wird diese nun nach und nach auch mit Breadcrumb bei Google angezeigt.

    Wenn Du etwas über die Technische Umsetzung wissen möchtest, ist vielleicht dieser Artikel für dich interessant:
    http://blog.stevieswebsite.de/2009/05/php-breadcrumb-erstellen/

    Kommentar von Stefan Wienströer — 6. März 2010 @ 23:49

  4. Interessanter Beitrag. Ich hätte mir noch einen Hinweis auf eventuelle Plugins gewünscht, mit deren Hilfe Breadcrumbs realisierbar sind.

    Gruss Jürgen Schnick

    Kommentar von Jürgen Schnick — 25. Juni 2010 @ 16:28

Hinterlasse einen Kommentar

Trackbacks/Pingbacks

  1. [...] des Tests komme ich später. Eine weitere Testidee könnte zum Beispiel das Herausfinden der optimalen Breadcrump [...]

    Pingback von Usability Tests mit Google Analytics — 3. Januar 2010 @ 17:41

  2. [...] los, die mit einem Favicon präsentiert werden kann. In der Kopfleiste zeigt neben dem Datum die breadcrumb, wo sich der Leser gerade auf der Seite befindet. Rechts oben ermöglicht der „Suchen“-Button [...]

    Pingback von Schulhomepage (Teil 5)- Was kann Joomla? — 7. April 2010 @ 17:01

LiveEditor - Kostenloser WebEditorDer kostenlose WebEditor hilft dir dabei, deine Website besser zu entwickeln. Mit dem Syntax-Highlighting fällt geht alles viel schneller. Download jetzt! [mehr...]

Webservice erstellenWebservices sind oft die Schnittstelle zwischen Server und Client. Wie man mit PHP einen WebService erstellt, lernt ihr in diesem Tutoial. [mehr...]

Code & Blog LogoErstelle dein eigenes CMS mit PHP. Dieses Tutorial wird dir zeigen wie das geht. Also lies dir es durch und frische deine PHP Kenntnisse auf. [mehr...]

Facebook LogoErstelle deinen eigenen virtuellen PC. Das ist bereits mit leichten Mitteln möglich, welche Du in diesem Tutorial lernst.[mehr...]

  • RSS
  • Blogverzeichnis - Blog Verzeichnis bloggerei.de
Ich biete mich als Lektor für deine Blog-Artikel an.
Sende mir einfach deinen Artikel und ich korrigiere ihn.
© SteviesWebsite.de - Kontakt | Impressum