Praxisguide

Navigation für mobile Online-Shops

Damit sich Ihre Nutzer schnell und einfach im Online-Shop zurecht und den Einstieg ins Sortiment finden, kommt der Navigation im mobilen Bereich eine besondere Bedeutung zu.

In diesem Praxisguide zeigen wir, welche verschiedene Möglichkeiten es bei der Konzeption der mobilen Navigation gibt, welche Fallstricke es zu vermeiden gibt und wie die Navigation am besten strukturiert werden kann.

 

1. Einleitung

War der Anteil an mobilen Nutzern vor zwei Jahren noch unter 5 %, nutzen heute immer mehr Kunden ihr Smartphone, um sich von unterwegs über Produkte oder Dienstleistungen zu informieren oder Preisvergleiche anzustellen. Ein Trend, der in den nächsten Jahren weiter zunehmen wird. [1] Ist Ihr Online-Shop darauf schon vorbereitet und über mobile Endgeräte schnell und einfach zugänglich?

In diesem (und weiteren) Praxisguides stellen wir alle Anforderungen an mobile Shops vor – egal ob Sie gerade am ersten mobile Shop arbeiten oder einen schon bestehenden überarbeiten. Der Fokus liegt auf Konzeption, Design und Funktionen, nicht auf der technischen Umsetzung. Die hier definierten Anforderungen gelten für beide Umsetzungsmöglichkeiten gelten unabhängig davon, ob der mobile Shop per responsive Design oder als eigene Shop-Version unter m.shop.de umgesetzt wird.

Damit sich Ihre Nutzer schnell und einfach im Online-Shop zurecht und den Einstieg ins Sortiment finden, kommt der Navigation im mobilen Bereich eine besondere Bedeutung zu. Das Navigationskonzept sollte daher hinsichtlich einer optimalen Bedien- und Nutzbarkeit auf kleineren Displaygrößen optimiert werden.

Wir besprechen hierzu diese Themen:

  • Aufruf der Navigation (2. Kapitel)
  • Auswahl und Organisation der Navigationselemente (3. Kapitel)
  • Funktionsweise der Navigation (4. Kapitel)

Die weiteren Praxisguides zu anderen Elementen mobiler Shops finden Sie hier:

2. Aufruf der Navigation

Die Schaltfläche für die Hauptnavigation sollte im sofort sichtbaren, oberen Bereich des Headers platziert werden und genügend Abstand zu umliegenden Elementen aufweisen. Nur so wird die Hauptnavigation vom Nutzer schnell aufgefunden und als klickbares Element wahrgenommen.

Um allen Nutzern die Funktion verständlich zu machen, ergänzen Sie das Menü-Symbol (drei Querstreifen, auch „Burger-Icon“ genannt) mit dem Zusatz „Menü“. Je weniger internet-affin die Zielgruppe, desto wichtiger ist dieser Zusatz.

Beim Tap auf das Menü-Symbol öffnet und schließt sich das Menü. Zusätzlich geschlossen werden, kann es auch

  • durch Tap außerhalb des Menüs,
  • durch Wischen nach links oder
  • durch ein „X“-Symbol.

Burger-Icon ohne Zusatz bei s.Oliver

Einfaches Ausblenden der Navigation durch Link „Startseite“ und großes X

3. Auswahl der Elemente

3.1 Sortiment übersichtlich darstellen

Damit sich Besucher nicht durch ein unübersichtliches Menü wühlen müssen, überlegen Sie gut, welche Menüpunkte tatsächlich wichtig sind und auf welche verzichtet werden kann. Schauen Sie im Webanalyse-Tool nach, welche Elemente nicht angeklickt werden und entfernen Sie diese.

Falls alle Elemente bleiben müssen, überlegen Sie, wie diese besser gegliedert werden können. Hierfür können diese Methoden zu Einsatz kommen:

  • Gruppierung durch mehr Platz zwischen Elementen,
  • Gruppierung in verschiedene Drilldowns
  • Verwenden von Einrückungen und Hervorhebungen der wichtigsten Navigationselemente
  • eine nicht-alphabetische Sortierung (wichtigste zuerst)
  • Trennlinien

3.2 Weitere Elemente

Neben dem Sortimentseinstieg sollte die Hauptnavigation noch Zugang zum Kontobereich sowie optional zum Storefinder bieten. Sind Sie auch offline mit mehreren Läden präsent, dann lohnt sich eine prominentere Platzierung des Storefinders in der mobilen Version. Viele Besucher informieren sich schließlich auch von unterwegs über Ihre Produkte.

Wenn sich der Online-Shop unter anderem über den Service definiert, dann können Sie in der Hauptnavigation auch Kontaktmöglichkeiten so wie Einsprünge zu Lieferzeiten, Zahlungsmöglichkeiten, usw. bieten. Diese Elemente sollten gegenüber der eigentlichen Navigation aber deutlich in den Hintergrund rücken.

Prominente Platzierung der Telefonnummer und der Vorteile bei AboutYou

4. Funktionsweise der Navigation

4.1 Ausklappend oder Drilldown?

In fast allen Online-Shops gibt es mehr als eine Hierarchieebene, das heißt es gibt nicht nur eine Kategorieseite Herren, sondern auch Kategorieseiten zu Herrenschuhen, Hemden für Herren, usw. Für die Navigation innerhalb des Menüs können mehrere Hierarchieebenen entweder

  • als ausklappende Untermenüs (alles auf einer Ansicht) oder
  • als Drilldowns (die Ansicht verändert sich)

umgesetzt werden.

Zalando setzt beispielsweise auf Drilldowns, während bei Mirapodo ausklappende Untermenüs zum Einsatz kommen.


Welche der beiden Möglichkeiten die richtige für Ihren Online-Shop ist, ist von der Seitenstruktur abhängig:

  • Ausklappbare Untermenüs haben den Vorteil, dass Besucher jederzeit das gesamte Sortiment überblicken und schnell durch die Seitenstruktur klicken und wechseln können. Sie sind für kleine Sortimente mit wenig Menüpunkten und Hierarchieebenen geeignet.
  • Bei größeren Sortimenten mit mehr als sieben Menüpunkten pro Hierarchieebene sollten Sie für eine bessere Übersicht aber ein Drilldown anbieten und die Oberpunkte ausblenden.

4.2 Keine neue Seite laden

Unabhängig davon, welche der beiden Möglichkeiten gewählt wird, sollten die weiteren Navigationselemente sofort angezeigt werden. Vermeiden Sie es, für jede „tiefere“ Navigation eine neue Seite zu laden.

Die meisten Shops begehen diesen Fehler nicht. Bei Conrad ist dies jedoch besonders nervig:

4.3 „Zurück“ anbieten

Kommt der Drilldown-Ansatz zum Einsatz, bieten Sie Besuchern einen Weg zur vorigen Ansicht / einer Hierarchieebene höher an.

Setzen Sie auf jeden Fall einen Menü-Zurück-Button ein und unterstützen auch die Browser-Zurück-Funktionalitäten. Wenn ein Nutzer innerhalb des Menüs navigiert, dann kommt er über die Browser-Zurückfunktion jeweils wieder eine Hierarchiestufe höher im Menü. Insbesondere verlässt er nicht versehentlich den Shop. Technisch wird dies mithilfe der history-API in HTML5 umgesetzt.

Klar sichtbarer Zurück-Button.

Kein Weg zurück zur Oberkategorie „Dessous“ bei triumph.de

4.4 Verhalten andeuten

Ob ein Link direkt auf eine Seite führt oder sich zunächst ein Untermenü öffnet, signalisieren Sie am besten über Pfeile:

  • Pfeile nach rechts im Drilldown signalisieren dem Nutzer, dass er die jeweilige Oberkategorie noch weiter eingrenzen kann.
  • Bei aufklappbaren Untermenüpunkten werden sich öffnende Unterkategorien mit einem Pfeil nach unten angezeigt.
  • Ist ein Oberpunkt ausgeklappt, indiziert ein Pfeil nach oben, dass darüber der Oberpunkt wieder zusammengeklappt werden kann.

4.5 Auch Kategorien verlinken

Da Oberkategorien in der mobilen Version per Klick zum weiteren Ausklappen oder Drilldown der Untermenüpunkte verwendet werden, ist es notwendig Besuchern auch einen Link zur Oberkategorie anzubieten. Dieser sollte mit „alle [Oberkategorie]“ beschriftet werden.

4.6 Aktive Kategorie kennzeichnen

Befindet sich der Nutzer bereits auf einer Unterseite und öffnet von dort das Menü, sollte das Menü bereits soweit ausgeklappt sein, dass der aktive Menüpunkt sichtbar ist. Analog zur Desktop-Version ist der aktive Menüpunkt auch entsprechend farblich oder in der Textstärke hervorzuheben.

4.7 Zusätzliche horizontale Navigation

Wenn Ihr Sortiment nicht mehr als zwei, drei unterschiedliche Zielgruppen oder Themengebiete anspricht (wie in Mode-Shops Damen, Herren oder Kinder), dann kann die erste Hierarchie-Ebene wie bei zalando.de horizontal im Menü angezeigt werden. Dadurch „überspringt“ der Nutzer direkt die erste Hierarchieebene, was ihm im Folgenden die Orientierung erleichtert.

Eine andere Verwendung solch einer horizontalen zeigt zooplus.de. Hier werden zum ausgewählten Navigationselement passende Angebote angezeigt:

4.8 Durch Symbole ergänzen

Bei vielen Unterpunkten können Sie Ihren Besucher die Orientierung erleichtern, indem Sie zusätzlich mit Icons arbeiten.

Wenn Sie Icons verwenden, sollten Sie aber immer darauf achten, dass diese auch verständlich und gelernt sind. Die Verwendung von doppelten Icons ist genauso zu vermeiden, wie nicht selbst erklärende Icons, wo erst der ergänzenden Text Klarheit bringt, was sich dahinter verbirgt. Verzichten Sie in diesem Fall auf die Icons.

Relativ einfach zu verstehende Symbole bei mirapodo.de.

Mehrfach verwendete Bilder verwirren, statt die Auswahl zu erleichtern.

[1] In Google Analytics können Sie den Anteil mobiler Nutzer im Bericht „Zielgruppe > Mobil > Übersicht“.

ConversionBoosting