Die optimale mobile Navigation? 3 Navigations-Konzepte im Vergleich – Teil 1

Immer wieder stellen wir im Rahmen unserer RapidUsertests fest, dass die Navigation von Online-Shops nicht optimal auf die mobilen Bedürfnisse der Nutzer (Smartphone, Tablet) angepasst ist: Entweder ist sie viel zu umfangreich, schlecht positioniert oder gar nicht erst als solche zu erkennen (Zu unserem Artikel über das “Hamburger” Icon geht es hier).
Aus diesem Grunde stellen wir Ihnen in den nächsten Wochen einige Navigationskonzepte vor, die sich besonders gut für mobile Anforderungen eignen. In diesem Artikel beleuchten wir zunächst die grundsätzlichen Herausforderungen, die sich aus der Anpassung an mobile Geräte ergeben.

Herausforderungen für die mobile Navigation

Die meisten Besucher Ihres Online-Shops werden die Navigation nutzen, um auf der Seite zu stöbern oder schnellstmöglich zum gewünschten Produkt zu gelangen. Wollen Sie Ihren Online-Shop auch auf die mobile Nutzung zuschneiden, sollten Sie der Navigation daher besondere Aufmerksamkeit widmen.
Sucht ein Nutzer beispielsweise nach einem TV-Gerät, ist er es von Desktop-Seiten gewohnt, dass die Navigation optisch anspruchsvoll ausklappt, sobald er darüber fährt. Dieser als “Mouseover” bekannte Effekt ist bei der mobilen Darstellung nicht einsetzbar, da die Bedienung mit den Fingern – anders als bei der Bedienung durch die Maus – keinen Mouseover simulieren kann. Ein solches Overlay wird auf Smartphones zudem als überladen und störend empfunden, da es aufgrund des kleineren Displays viel zu viel Platz einnimmt.
Eine horizontale Anordnung der Navigation ist aufgrund des kleineren Displays ebenfalls wenig empfehlenswert, weil nur sehr wenige Kategorien nebeneinander platziert werden können.

Die richtige Navigationsstruktur finden

Wie an den Beispielen deutlich wird: Für die mobile Navigation müssen andere Lösungen her. Nehmen Sie die mobile Anpassung auch als Chance wahr, Ihr Navigationskonzept generell zu überprüfen, denn:

1. Ihre Navigationsstruktur sollte ausbalanciert sein. Das heißt: Verwenden Sie maximal drei Hierarchieebenen, bestehend aus Haupt- und Unterkategorien.
2. Verwenden Sie höchstens sechs Hauptkategorien, um Übersichtlichkeit zu bewahren und um den Nutzer schnell zum Ziel zu führen.
3. Verwenden Sie ein- und ausklappbare Kategorien. Bei einer Navigation mit mehreren Hierarchieebenen sollte berücksichtigt werden, dass Mouseover-Effekte mobil nicht darstellbar sind.
4. Achten Sie darauf, dass die Navigation nicht zu lang wird. Aufgrund der geringen Displaygröße von Smartphones und Tablets ist eine vertikal angeordnete Navigation der Kategorien unabdingbar. Aber auch hier ist Vorsicht geboten: Viele Nutzer haben keine Lust auf mobilen Webseiten zu scrollen.
5. Verwenden Sie großzügige Buttons und Formularfelder (mindestens 1x1cm), da die Bedienung per Finger auf den kleinen Displays nicht so genau ist wie mit dem Mauszeiger.

Neben diesen grundsätzlichen Eigenschaften mobiler Navigationen gibt es viele verschiedene Konzepte für attraktive Navigationen, die sich vor allem hinsichtlich Positionierung und Struktur unterscheiden. Je nach Komplexität der Website passt die eine oder andere Variante besser. Grundsätzlich sollten jedoch Aspekte wie die Übersichtlichkeit und die Bedienbarkeit immer eine wesentliche Rolle spielen.
Welche unterschiedlichen Navigationstypen es gibt und welche eine optimale Variante für Ihre individuellen Bedürfnisse sein kann, verraten wir Ihnen in den nächsten Ausgaben.