Surfpfad-Anzeige – Kleine Zeile, große Wirkung

Neckermann-Pfadanzeige

Der Einsatz von Surfpfadanzeigen hat sich mittlerweile in Online-Shops etabliert. Die genaue Darstellung ist jedoch noch sehr verschieden und längst nicht überall optimal umgesetzt. Dabei erfüllt die Pfadanzeige mehrere Funktionen – sie bietet Orientierung, wo sich der Nutzer innerhalb der Angebotsstruktur befindet, dient der Navigation oder auch der Filteraufhebung.

Wichtig ist, dass die Pfadanzeige nicht eingequetscht und versteckt wird. Dazu bedarf es einer gut lesbaren Größe, ausreichend Kontrast zwischen der Schrift und dem Hintergrund und genügend Raum ober- und unterhalb der Zeile.

Relativ klein aber insgesamt noch gut sichtbar aufgrund des Freiraums darunter, ist die Pfadanzeige auf schlecker.com.

Pfadanzeige bei Mouseover auf schlecker.com

Pfadanzeige bei Mouseover auf schlecker.com

Alle Teile der Surfpfadanzeige sind einzeln anklickbar und durch die gelbe Markierung deutlich hervorgehoben. Es fehlt allerdings der Startpunkt – die Verlinkung zur Startseite. Die Startseite ist hier lediglich über den Home-Reiter erreichbar. Nicht einmal das Logo oberhalb der horizontalen Navigation ist anklickbar – aber dies ist ein anderes Thema.

Durch Layer erweitern

Da es sich auch um ein wichtiges Navigationselement handelt, kann die Pfadanzeige um ausklappbare Layer erweitert werden. Ein sehr schönes Beispiel ist auf manufactum.de zu sehen. Hier wird fast gänzlich auf eine Navigationsleiste verzichtet. Lediglich auf der linken Seite ist eine reduzierte Navigation nur mit der aktuellen Unterrubrik und deren weiteren Verzweigungen zu sehen. Die Navigation durch den Shop erfolgt fast ausschließlich über die Surfpfadanzeige.

Good Practice manufactum.de (Layer bei Mouseover)

Good Practice manufactum.de (Layer bei Mouseover)

Filter aufheben

In einigen Online-Shops werden die gesetzten Filter zusätzlich in der Pfadanzeige aufgeführt – Beispiel von eddiebauer.de:

drei gesetzte Filter auf eddiebauer.de

drei gesetzte Filter auf eddiebauer.de

Es wurden die Filter: braun (Farbfilter), 39 (Schuhgröße) und 40-50 Euro (Preisfilter) gesetzt. Inwiefern der Nutzer die Filter mittels Pfadanzeige aufheben kann, wird in der Anzeige nicht deutlich und kann nur ausprobiert werden.

Aufheben der Filter in der Pfadanzeige (eddiebauer.de)

Aufheben der Filter in der Pfadanzeige bei eddiebauer.de

Klickt man beispielsweise den ersten Filter „braun“ an, dann werden die beiden dahinter angezeigten Filter aufgehoben. Damit der Nutzer eindeutig erkennen kann, dass das Aufheben der Filter hier und vor allem einzeln möglich ist, sollte hinter dem jeweiligen Filter ein Schließen-Symbol ergänzt (x-Symbol) werden.

Platzierung der Pfadanzeige

Jetzt ist jedoch nicht nur entscheidend, dass die Pfadanzeige richtig gestaltet ist, sondern sie muss auch erwartungskonform platziert werden. Wo genau, das haben wir in der Imagery IV-Studie ermittelt:

Erwartete Platzierung der Surfpfad-Anzeige 2010

Erwartete Platzierung der Surfpfad-Anzeige 2010

Die erwartete Platzierung in Online-Shops und Internetauftritten ist ähnlich – unterhalb der Navigation und zu Beginn des Content-Bereichs. Die Wichtigkeit dagegen ist sehr verschieden. Auf Internetauftritten handelt es sich um einen neutralen Faktor. Dies bedeutet, sie wird nicht erwartet und kann entfallen. Jeder Betreiber muss entscheiden, wie komplex die eigene Website ist und inwiefern die beschriebenen Funktionen der Surfpfad-Anzeige für eine gute Usability notwendig sind. In Online-Shops hingegen wird eine solche Anzeige erwartet. Es handelt sich um einen Leistungsfaktor, dies bedeutet, dass eine gute Umsetzung der Surfpfad-Anzeige die Zufriedenheit der Nutzer steigern kann.

Möchten Sie noch mehr erfahren, wo Elemente erwartungskonform platziert werden sollten und wie wichtig diese in Online-Shops und auf Internetauftritten sind, dann empfehle ich Ihnen die Imagery-Studie. Diese Studie liefert nicht nur die Platzierungserwartungen der Pfadanzeige sondern auch für folgende Elemente:

  • Navigationsleiste/Menü (Rubriken)
  • Logo
  • Home-Button/-Link
  • Suchfunktion
  • Kontakt-Link
  • Impressum-Link
  • Link zu anderssprachigen Versionen des Webangebots
  • Sitemap
  • Surfpfad-Anzeige
  • Schrift vergrößern/verkleinern
  • Newsletter-Link
  • Login (Anmeldebereich für registrierte Nutzer)
  • Über-Uns-Link
  • Jobangebote
  • FAQ-Link
  • Hilfe-Link
  • Werbung
  • Datenschutz-Link
  • Allgemeine Geschäftsbedingungen (AGB)
  • Versand- und Verpackungskosten
  • Kundenkonto/persönlicher Bereich
  • Warenkorb
  • Zertifizierungen (Gütesiegel)

Ein umfangreicher Forschungsbeitrag mit ausgewählten Ergebnissen der Studie ist abrufbar unter: Nutzergerechte Webseiten-Gestaltung im Längsschnitt – Imagery IV – Getrennte Betrachtung von Internetauftritten und Online-Shops.

Die komplette Studie können Sie hier bestellen: Imagery IV – Studienband.

Zuletzt angesehene Artikel

Zum Abschluss noch eine weitere Idee, dabei handelt es sich nicht direkt um eine Pfadanzeige. Stattdessen öffnet der Shop von LLOYD eine Produktdetailseite als neuen Reiter.

Zuletzt angesehene Produkte auf lloydstore.de

Zuletzt angesehene Produkte auf lloydstore.de

Der Nutzer kann bequem zur Übersicht zurück oder auch in andere Kategorien wechseln und jederzeit die drei zuletzt angesehenen Produkte noch einmal anklicken.

7 Gedanken zu „Surfpfad-Anzeige – Kleine Zeile, große Wirkung

  1. Pingback: Am Anfang das Keyword – Lesetipps | webconsul

  2. Felix

    Wer nennt denn sowas „Surfpad“? Und warum?
    Das Ding heißt seit Generationen „Breadcrumb“ oder zu deutsch „Brotkrumen“ Navigation (da ist wenigsten Nomen = Omen).
    🙂

    Antworten
  3. Pingback: 10 Lesetipps der Woche für Shopbetreiber » Von Ulrich Hafenbradl » shopbetreiber-blog.de

  4. Pingback: Positionierung der Breadcrumb-Navigation « Blog – Andreas Oettinger

  5. Pingback: Pimp my Breadcrumb – Bessere Usability durch Surfpfade mit Navigations-Dropdown | Usabilityblog.de

  6. Pingback: Links der Woche XLVII > apc, CSS3, Google, Javascript, maps, PHP, webp, Wordpress

Schreibe einen Kommentar

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