Bei den wenigstens Online Shops ist die Startseite die Einstiegsseite der meisten Besucher. Entsprechend wichtig ist die Navigation, welche diesen Besuchern hilft, passende Produkte zu finden sowie einen Überblick über das gesamte Sortiment verschafft.
In diesem Praxisguide stellen wir Anforderungen. an eine gute Navigation für Online-Shops vor und zeigen, verschiedene Möglichkeiten der Umsetzung auf. Außerdem stellen wir Testideen für A/B-Tests vor und zeigen, welche weiteren Methoden zur Analyse der Navigation eingesetzt werden können.
Bei den wenigstens Online Shops ist die Startseite die Einstiegsseite der meisten Besucher. Entsprechend wichtig ist die Navigation, welche diesen Besuchern einen Überblick über das gesamte Sortiment bietet und hilft, passende Produkte zu finden.
Hier wird viel falsch gemacht. In diesem Praxisguide stellen wir deshalb diese Themen vor:
Anforderungen an eine gute Navigation für Online-Shops (siehe 2. Kapitel)
Was aber meinen wir genau mit Navigation? Alle rot markierten Elemente dieses Screenshots. Elemente wie die Suchmaske, das Logo oder den Warenkorb-Button diskutieren wir an anderer Stelle.
Zusätzlich zu den Best-Practice-Empfehlungen und Testvarianten dieses Dokuments empfehlen wir Ihnen diese Dokumente, um die tatsächliche Verwendung Ihrer Navigation zu verstehen:
Viele Shopbetreiber versuchen ihre Navigation völlig neu zu denken und speziell auf ihr Angebot zuzuschneiden. Manche vergessen dabei, dass Besucher sich auch auf anderen Websites bewegen und daher Erwartungen an Navigationselemente haben. Versuchen Sie nicht das Rad neu zu erfinden. Besucher sollten nicht zu lange benötigen, um die Navigation zu verstehen.
Gestalten Sie die Navigation erwartungskonform. Halten Sie sich an diese Richtlinien:
Die gelernte Position der Hauptnavigation ist horizontal unter dem Logo. Halten Sie sich daran, sonst werden Besucher ggf. verwirrt. Bei interaquaristik.de findet man beispielsweise die eher unwichtigen Navigationselemente „Kontakt“, „Versand“, oder „Über uns“ prominent horizontal platziert.
Falls die Navigation zu viele Elemente enthält, um horizontal dargestellt zu werden, kann sie in zwei Zeilen aufgeteilt werden (siehe schwab.de):
Alternativ können seltener verwendete Element auch erst nach einem Klick eingeblendet werden:
Stellen Sie sicher, dass Besucher die Navigation auch als solche wahrnehmen. Eine durchgängige Hintergrundfarbe über die ganze horizontale Leiste ist empfehlenswert. Bei babyzeiten.de scheinen die vielen bunten Rechtecke nicht sofort wie eine Navigationsleiste:
Besser macht es zum Beispiel SportScheck. Die orange Leiste wird unmittelbar als Navigation erkannt.
Halten Sie ihre Navigation einfach und reduzieren Sie die Anzahl der nötigen Navigationselemente in jeder Ebene. Entscheidende Navigationselemente sind nicht Themen, die Sie Kunden möglicherweise mitteilen möchten (zum Beispiel „Über Uns“ oder das Impressum), sondern eine Gliederung des Angebots.
Bei lace.de scheinen zum Beispiel die Elemente „BH finden“, „Hilfe“ und „Newsletter“ nicht in der obersten Ebene notwendig zu sein:
Erhalten Sie die Navigation immer am gleichen Ort und in der gleichen Reihenfolge. Der Benutzer lernt den Umgang mit der Website in wenigen Sekunden. Diese Lernerfahrung sollte er möglichst nur einmal machen und sich nicht auf anderen Seitentypen, auf eine neue Navigation einstellen müssen.
Sie können die Navigation auf weiteren Seiten durch Subnavigation, Kategorielisten und Filter erweitern. Die Hauptnavigation sollte aber konstant bleiben.
Für die Hauptnavigation ist die Empfehlung eindeutig: Ordnen Sie die Navigationselemente nach der Wichtigkeit, nicht alphabetisch. Ein Blick in die Webanalyse-Daten hilft, die am häufigsten gewählten Kategorien zu identifizieren.
Eine beliebte Kategorie und damit ein beliebtes Navigationselement ist die Angebots- bzw. Sale-Kategorie. Setzen Sie diese Kategorie nach rechts, um den Bick der Besucher an den anderen Kategorien vorbeizuführen. Die Sale-Kategorie findet jeder Besucher.
Auch für Flyouts oder Dropdowns sollte natürlich eine sinnvolle Sortierung verwendet werden. Bei triumph.de scheint es zum Beispiel innerhalb des Unterpunktes „Themen und Anlässe“ keine für den Besucher ersichtliche Sortierung zu geben.
Bei solchen langen Listen bietet sich eine alphabetische Sortierung an, die von Besuchern recht schnell erkannt wird. Entsprechend müssen sie nicht alle Elemente lesen.
Wenn Sie sichergehen möchten, dass Besucher verstehen, dass die Elemente alphabetisch sortiert sind, können Sie auch darauf hinweisen (siehe roller.de):
Haben Sie dagegen relativ kurze Listen (weniger als zehn Elemente), dann können diese nach der Wichtigkeit sortiert werden, wie es home24.de tut:
Hier werden außerdem lange Listen dadurch gekürzt, indem nur die wichtigsten Elemente angezeigt und die restlichen Elemente erst durch einen Klick auf „…alle Kategorien“ erreichbar sind.
Unabhängig davon, welche Sortierung zum Einsatz kommt: Verwenden Sie durchgängig die gleiche Sortierung Gerade bei sogenannten „Mega-Menüs“ werden für verschiedene Kategorien verschiedene Sortierungen verwendet. Hier müssen Besucher für jede Kategorie neu herausfinden, wie sie sortiert sind. Ersparen Sie Besuchern diesen kognitiven Aufwand.
Neben einer intuitiven Sortierung könnte die Navigation auf triumph.de (siehe oben) auch von einer besseren Gruppierung profitieren. Eine Gruppierung mit 18 Elemente ist schwierig zu verstehen. Sie sollte also besser noch weiter unterteilt werden.
Bei Zalando gibt es zum Beispiel solche kleineren – und damit sinnvolleren – Gruppierungen:
Zielen Sie auf einen Mittelweg zwischen Gruppierungen mit zu vielen Elementen und viele kleine Gruppierungen. Beide Extreme haben den Nachteil, dass sie nur langsam zu erfassen sind und der Kunde zu lange braucht um sie zu verstehen.
Gruppierungen müssen nicht in jedem Fall eine eigene Überschrift erhalten. Schon etwas mehr Weißraum oder eine Trennlinie machen es Besuchern einfach, die Elemente schnell zu erfassen.
Dropdowns bzw. Flyouts sind auf sehr vielen Shops zu finden. Oft sind sie jedoch schlecht zu bedienen. Überprüfen Sie, ob das Flyout auf Ihrer Website diese Bedingungen erfüllt.
Sollte sich das Flyout erst bei einem Klick oder schon beim MouseOver öffnen? Die meisten Shops haben sich für letztere Variante entschieden und Besucher haben sich daran gewöhnt.
Falls Sie jedoch eine ältere oder wenig Internet affine Zielgruppe ansprechen, empfiehlt es sich, das Flyout erst nach einem Klick anzuzeigen.
Das Flyout sollte sich so schnell wie möglich öffnen, damit Besuchern das Gefühl vermittelt wird, dass die Aktivität das Ergebnis seines Handelns ist. Alles andere fühlt sich nach Kontrollverlust an. (Auf manchen Shops öffnet sich das Flyout langsam, da es erst geladen wird. Auf anderen wird es absichtlich mit einer Verzögerung dargestellt. Vermeiden Sie beides.)
Idealerweise wird das Flyouts jedoch nicht sofort beim MouseOver, sondern erst nach einigen Millisekunden angezeigt. Besucher bewegen ihre Maus nämlich über die Hauptnavigation, wenn sie zum Beispiel zum Suchfeld navigieren. Wenn sich bei diesem sehr kurzen MouseOver über die Navigation ein Flyout öffnet, ist dies für Besucher störend.
Wenn sich der Mauszeiger jedoch schon „in“ der Navigation befindet (siehe Screenshot von home24.de), sollte das Verhalten anders aussehen. Dann kann das neue Flyout direkt angezeigt werden.
Viele Shops machen es Besuchern schwierig, Links im Flyout anzuklicken, die diagonal weiter rechts platziert sind. Dies ist frustrierend und sollte vermieden werden.
Angenommen ein Besucher hält den Mauszeiger über das Element „Wohnbereiche“ und möchte jetzt den Link „Sitzen & Essen“ anklicken. Dann bewegt sich der Mauszeiger für einen kurzen Moment über das Element „Möbel“ (siehe eingefügte rote Linie) – entsprechend wird dieses Flyout geöffnet.
Dies führt dazu, dass Besucher die Maus erst vorsichtig nach unten und dann erst nach rechts bewegen müssen. Für Besucher mit weniger Interneterfahrung oder motorischen Einschränkungen ist dies besonders schwierig.
Die Lösung dieses Problems besteht darin, dass für jedes Element der Hauptnavigation Bereiche definiert werden (in Gelb markiert), in denen sich das Flyout der anderen Elemente nicht unmittelbar öffnet.
Wie auch beim Öffnen des Flyouts gilt: Bei MouseOut sollte das Flyout nicht sofort geschlossen werden. Vielleicht hat der Besucher die Maus aus Versehen aus dem Flyout bewegt. Wenn es sich nicht sofort schließt, hat er noch die Möglichkeit, die Maus schnell wieder zurückzubewegen.
Markieren Sie das Navigationselement, der gerade aktiven Kategorie. So wissen Besucher sofort, wo sie sich befinden und wie sie die Unterkategorien der Hauptkategorie finden.
Achten Sie bei der Darstellung insbesondere auf die Lesbarkeit der Navigationselemente.
In der ersten Ebene ist eine Darstellung in Großbuchstaben akzeptabel, da es nicht viele Elemente zu verstehen gilt. In der zweiten Ebene sollten Sie jedoch auf Großbuchstaben verzichten. Der kognitive Aufwand ist zu hoch.
Natürlich sollte auch die Schriftartgröße groß genug gewählt sein, um die Elemente problemlos lesen zu können.
Stellen Sie außerdem sicher, dass die Abstände zwischen den Elementen groß genug sind.
In diesem Kapitel stellen wir Testvarianten der Navigation für A/B-Tests vor. Die meisten sind mit relativ wenig Aufwand umzusetzen und daher schnell durchzuführen.
Wenn eine Seite (zum Beispiel eine Produktdetailseite) als Zielseite für Werbekampagnen dient, blenden Sie die Navigation in einer Testvariante aus.
Welchen Einfluss hat dies auf das Besucherverhalten? Führt es zu mehr Verkäufen des ursprünglichen Produkts? Verwenden Besucher statt der Hauptnavigation die verwandten Artikel (Produktempfehlungen)? Oder springen sie schnell ab, da sie keine Möglichkeit finden, alternative Produkte anzusehen?
Besonders bei langen Seiten gerät die Navigation schnell aus dem Blick. Erstellen Sie deshalb eine Testvariante, in welcher die Navigation dauerhaft angezeigt wird.
Ein aktueller Trend in der Navigation von Online-Shops sind Symbole neben den Namen der Produktkategorie. Ziel ist es auch hier, den kognitiven Aufwand für den Besucher zu minimieren.
Symbole auf apple.de
Testen Sie in einem A/B-Test, ob solche Symbole dazu führen, dass Besucher Produkte besser finden.
Voraussetzung für den Einsatz solcher Symbole scheinen eindeutige Symbole zu sein. Verzichten Sie zum Beispiel auf Symbole, wenn bereits eine gelernte Funktion in der Navigation von Webseiten haben. Ein Haussymbol neben der Kategorie Haushaltsgeräte ist beispielsweise unpassend. Das Haussymbol wird generell als Symbol für die Startseite verwendet.
Außerdem sollten die Symbole groß genug dargestellt werden. Bei Mirapodo scheint es sehr viel aufwendiger zu sein, die Symbole zu entziffern als die Namen der Kategorien zu lesen.
Haben Sie in umfassende Contents investiert, um Besuchern bei der Auswahl der passenden Produkte zu helfen? Dann platzieren Sie Hinweise darauf in der Navigation, wie es beispielsweise SportScheck tut:
Falls ein sogenanntes Mega-Menü zum Einsatz kommt, ist dort oft noch weiterer Platz frei. Hier können Sie in einer Testvariante auf bestimmte Aktionen wie Sales oder Produktneuheiten hinweisen.
