Die optimale mobile Navigation? Teil 4: Die Seitennavigation
Wenn Sie darüber nachdenken, Ihre Webseite für mobile Geräte wie Smartphones oder Tablets zu optimieren, sollten Sie sich vor allem mit der Darstellung der Navigation Gedanken machen. Eine der beliebtesten und benutzerfreundlichsten Formen der Navigation ist die Seitennavigation oder auch “Off Canvas” Navigation genannt, die wir Ihnen im Folgenden vorstellen.
Inhaltsverzeichnis
Seitennavigation sorgt für übersichtliche Darstellung
Nicht erst seit Facebook die Seitennavigation auf seiner mobilen Webseite nutzt, gehört sie zu den beliebtesten Navigationsformen. Auch bekannte Online-Shops wie Mister Spex oder Cyberport verwenden die Seitennavigation auf ihren mobilen Plattformen. Die Off Canvas Navigation ist besonders geeignet für kleine und mittelgroße Online-Shops, weil mit ihr eine begrenzte Anzahl an Kategorien – es sollten nicht mehr als sieben Hauptkategorien sein – übersichtlich dargestellt werden kann.
Aufbau der mobilen Seitennavigation
Das Menü der Seitennavigation ist links oder rechts im Header positioniert und öffnet sich bei Tap auf den entsprechenden Button, woraufhin der komplette Inhaltsbereich zur Seite verdrängt wird.
 |  |
| Abb. 1: Seitenavigation mit eingeklappten Kategorien | Abb. 2: Seitennavigation mit ausgeklappten Sportbrillen-Bereich |
Ähnlich wie die Top-Navigation können die Kategorien ein- und ausgeklappt werden. Sind Nutzer beispielsweise auf der Suche nach Laufbrillen im Online-Shop von Mister Spex können Sie die Kategorie Sportbrille wählen, die sich öffnet und Unterkategorien zum Vorschein bringt. Erst bei Klick auf die entsprechende Unterkategorie wird die Seite neu geladen und der Seiteninhalt angezeigt – die Seitennavigation klappt dann automatisch zu.
Vorteile der Off Canvas Navigation
Ähnlich wie die Top-Navigation hat die Seiten-Navigation gegenüber dem Einstieg über Kategorien den Vorteil, dass durch die ein- und ausklappbaren Menüpunkte alle angebotenen Kategorien immer sichtbar sind. Dies gewährleistet eine große Übersichtlichkeit und gute Orientierung der suchenden Nutzer.
Die Tatsache, dass der komplette Seiteninhalt bei Aufrufen der Navigation verdrängt wird mag zunächst wenig intuitiv erscheinen. Ist diese Logik aber einmal verstanden, ist die Bedienbarkeit recht einfach und bequem.
Nachteile beim Einstieg über die Seitennavigation
Einen echten Nachteil hat die Seitennavigation nicht. Ein potentielles Risiko jedoch kann die Darstellung des Menü Icons sein, welches oben rechts oder links im Header positioniert ist. Dieses sollte stets gut als solches identifizierbar sein, denn hier liegt schließlich der Hauptfokus.
In unseren mobilen Usabilitytests kam u.a. heraus, dass viele Nutzer das Menü-Icon gar nicht als solches erkannt haben. Folge: Sie wussten nicht, wo sie durch das Sortiment navigieren können und brachen den Besuch ab.
Fazit: Durch Usability-Tests individuelle Anforderungen klären! Ähnlich wie die Top-Navigation lässt sich die Seitennavigation sehr gut für kleine und mittelgroße Online-Shops verwenden. Dabei sollte darauf geachtet werden, dass die Anzahl der Haupt- und Unterkategorien auf das Wesentliche reduziert ist.
Aus dem Vergleich der drei Navigationsformen wird deutlich: Die ideale mobile Navigation hängt immer von den individuellen Bedürfnissen (“Use Cases”) ab, die sich aus den Anforderungen der Nutzergruppe ableiten. Um die Komplexität und den Zeitaufwand solcher Anforderungsanalysen zu reduzieren, empfehlen sich Usability-Tests:
- Mithilfe von RapidUsertests lässt sich herausfinden, ob die Navigation von Ihren Nutzern als intuitiv bedienbar wahrgenommen wird.
- Durch “Card-Sorting” lässt sich herausarbeiten, wie viele und welche die sinnvollsten Kategorien für Ihre mobile Navigation sind
- Mithilfe von Eyetracking lässt sich zeigen, ob die Navigation an der strategisch richtigen Stelle positioniert ist und von den Nutzern sofort als solche erkannt wird.
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
