Die optimale mobile Navigation? Teil 3: Die Top-Navigation
Wenn Sie einen kleinen oder mittelgroßen Online-Shop besitzen und diesen mobil optimieren wollen, haben Sie sich wahrscheinlich schon Gedanken über die Darstellung der Navigation gemacht. Diese ist sozusagen das Herzstück Ihrer Webseite und verdient daher besondere Aufmerksamkeit.
Weil vor allem Smartphones Displays nur begrenzten Platz bieten, bedarf es mobiler Lösungen, die einerseits übersichtlich und platzsparend sind, gleichzeitig aber den gesamten Inhalt darstellen. Hier bietet sich mit der sogenannten Top-Navigation, oder auch “Toogle” Navigation genannt, eine übersichtlich Navigationsform an.
Inhaltsverzeichnis
Top-Navigation sorgt für übersichtliche User Experience
Während Online-Shops mit einer breiten Produktpalette den Einstieg über Kategorien nutzen, um ihren Besuchern die größtmögliche Orientierung zu bieten, empfiehlt es sich für kleinere und mittelgroße Online-Shops auf die Top-Navigation zurückzugreifen. Vor allem auf bestimmte Produktekategorien spezialisierte Anbieter wie Rossmann oder A.T.U. nutzen diese Form der Navigation.
Aufbau der mobilen Top-Navigation
Im Online-Shop von A.T.U. wird verschiedenes Kfz-Zubehör angeboten. Die Hauptkategorien (Sommerreifen, Batterien, Tuning, etc.) sind gut sichtbar nahe des Headers positioniert. Bei “Tap” auf einen Menüpunkt klappt dieser aus und die Unterkategorien kommen zum Vorschein. Sind Besucher beispielsweise auf der Suche nach einem Autoradio finden sie dieses über die entsprechende Unterkategorie in der Hauptkategorie “Hifi & Navigation”. Der übrige Content verschiebt sich dabei nach unten.
- Idealerweise ist die Top-Navigation im Header positioniert.
- Der Header kann fixiert sein, sodass er sich beim Scrollen mitbewegt und immer im sichtbaren Bereich bleibt.
Vorteile dieser mobile Navigation
Die Top-Navigation hat gegenüber dem Einstieg über Kategorien den klaren Vorteil, dass immer alle Kategorien sichtbar sind. Egal auf welcher Seite sich der Nutzer gerade befindet oder welchen Produkt er sich anschaut, über die Top-Navigation kann er unkompliziert zu einer ganz anderen Kategorie springen. Und das direkt von seiner jetzigen Seitenposition aus. Dies sichert eine hohe Übersichtlichkeit und unterstützt die Orientierung auf der Webseite. Dies lädt zum Stöbern ein und verringert das Risiko, dass die Besucher die Seite verlassen.
Nachteile bei Einstieg über die Top-Navigation
Ein Nachteil kann jedoch sein, dass die Navigation aufgrund zahlreicher Kategorien sehr viel Platz einnimmt. Dies hat zur Folge, dass Besucher deutlich öfter Scrollen müssen als beispielsweise beim Einstieg über Kategorien. Im Falle des Online-Shops von A.T.U. sind sehr viele Kategorien in der Navigation vorhanden. Sind diese zusätzlich noch ausgeklappt, bedeutet dies einen hohen Scroll-Aufwand für die Besucher. Dies kann schnell zu Unübersichtlichkeit und Frustration führen.
Auch gilt:
- Je tiefer die Navigationshierarchie der Webseite, d.h. je mehr Unterkategorien vorhanden sind, desto größerer der Scrollaufwand und desto geringer die Übersichtlichkeit.
- Aus diesem Grunde ist es stets ratsam eine maximale Anzahl an Haupt- und Unterkategorien festzulegen: Hier empfehlen wir maximal 7 Hauptkategorien und höchstens drei Hierarchieebenen.
Grafische Darstellung über Icons
Das Kategorienverständnis der Navigation kann durch Icons unterstützt werden (siehe Bildbeispiel unten: Rossmann). Aber achten Sie stets darauf nur solche Icons zu verwenden, die zusätzliches Verständnis schaffen – sonst erreichen Sie den gegenteiligen Effekt. Eine Spielart der Top-Navigation ist zudem die Overlay Navigation. Sie unterscheidet sich jedoch nur hinsichtlich der Darstellung: Auch sie wird im Header positioniert, überdeckt beim Öffnen aber den Content durch ein Overlay und verschiebt ihn nicht nach unten (siehe Beispielbild unten: Nike Online Shop).
 |  |
| Abb. 1: Navigation mit Icons auf der mobilen Rossmann-Seite | Abb. 2: Einstieg über Overlay-Navigation auf der mobilen Nike-Seite |
Fazit – Wie optimal ist die Top-Navigation?
Die Top- bzw. Overlay-Navigation eignet sich besonders gut für kleine und mittelgroße Online-Shops die sich auf ein übersichtliches Produktsortiment konzentrieren. Wird darauf geachtet, dass die Navigationsstruktur logisch aufgebaut und die Hierarchie ausbalanciert ist, kann diese Art der Navigation ein schnelles Verständnis der Webseite und große Übersichtlichkeit schaffen.
Senior Product Manager bei mobile.de – Martin Schröter ist Sozialwissenschaftler. Er war bei uns verantwortlich für den Bereich Konzeption und ist zertifizierter Conversion-Fachmann und Landingpage-Spezialist. Inzwischen ist er Senior Product Manager bei mobile.de
