Praxisguide
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.
Autor
Julian Kleinknecht
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:
Die weiteren Praxisguides zu anderen Elementen mobiler Shops finden Sie hier:
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
Burger-Icon ohne Zusatz bei s.Oliver
Einfaches Ausblenden der Navigation durch Link „Startseite“ und großes X
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:
Weiterbildung per eLearning.
Keine Anmeldung notwendig
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
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
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:
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:
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
Ob ein Link direkt auf eine Seite führt oder sich zunächst ein Untermenü öffnet, signalisieren Sie am besten über Pfeile:
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.
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.
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:
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“.
