Alles Burger oder was? 5 Fragen an die mobile Navigation

Viele Infos, aber wenig Platz: die Gestaltung der Navigation auf mobilen Websites ist herausfordernd. Damit Du überprüfen kannst, ob Deine mobile Navigation die wesentlichen Anforderungen der User Experience erfüllt, habe ich fünf Fragen ermittelt, die Du Deiner mobilen Navigation stellen kannst.

Schmeckt’s? Von Hamburger-Menü bis Buttons: bei der mobilen Navigation kommt’s auf die Zutaten und ihre Zusammenstellung an.

Beim Thema Website-Navigation denken viele erst einmal an das Navigationsmenü. Doch Navigation meint noch einiges mehr, zum Beispiel:

• Hauptmenü
• Suche
• Breadcrumb-Navigation
• Filterfunktion
• Interne Links
• Footer-Navigation

Während man diese Elemente auch auf Desktopseiten findet, besteht im mobilen Bereich eine besondere Herausforderung: der Raum im mobilen Interface ist begrenzt. Die Navigation muss also entsprechend angepasst werden. Wichtig ist, dass trotz aller Verknappung die Navigation logisch strukturiert ist und ohne technische Probleme funktioniert, denn sonst werden die User die Seite schnell wieder verlassen.

5 Fragen: Darauf solltest Du die mobile Navigation Deines Onlineshops prüfen.

Um die Navigation Deiner mobilen Seite auf Probleme beziehungsweise Optimierungspotenzial zu überprüfen, kannst Du Dir die folgenden fünf Fragen stellen.

1.   Lässt sich das Hauptmenü problemlos finden und aufrufen?

Der Dreh- und Angelpunkt der Navigation ist das Hauptmenü. Auf seine Gestaltung solltest Du deswegen besonderes Augenmerk legen. Beachte folgende Dinge:

• Das Hauptmenü sollte sich im oberen Seitenbereich befinden.
  
• Das Hauptmenü muss das auffälligste Navigationselement sein: die Schaltfläche sollte so gestaltet sein, dass sie dem User ins Auge fällt und nicht neben anderen Elementen untergeht.
• Unter das Menü-Icon (zum Beispiel das Hamburger-Symbol) kannst Du zusätzlich noch den Text „Menü“ setzen – so stellst Du sicher, dass alle User verstehen, dass sich hinter diesem Icon die Hauptnavigation Deiner Seite befindet.

Best-Practice-Beispiele: Bei Bonprix.de und Otto.de wird das Burger-Icon durch Text ergänzt („Menü“ bzw. „Sortiment“). Bergzeit.de hebt das mobile Menü farbig hervor, sodass es deutlich ins Auge sticht.

Auch eine gute Usability, also Benutzbarkeit, muss gewährleistet sein. Mehr dazu im nächsten Abschnitt.

2.   Wie werden die einzelnen Menüpunkte dargestellt?

Für mobile Website-Menüs gibt es unterschiedliche Design Patterns. Besonders häufig ist das Hamburger-Menü mit den drei waagrechten Strichen anzutreffen. Das Hamburger-Icon signalisiert dem Nutzer: hier versteckt sich das Menü.

Durch das Antippen des Icons öffnet sich das Menü – etwa als Dropdown nach unten oder als Off-Canvas, das sich von links oder rechts über den Seiteninhalt schiebt oder diesen „verdrängt“.

Drei Varianten im Vergleich: Dropdown-Menü von visitbritain.com, Off-Canvas-Menüs von zalando.de und otto.de.

Was die einzelnen Menüpunkte betrifft, solltest Du eine hohe Nutzerfreundlichkeit gewährleisten.

• Haupt- und Unterkategorien im Menü müssen visuell voneinander abgegrenzt sein.
• Die einzelnen Menüpunkte müssen groß genug und mit ausreichend Abstand dargestellt werden, damit sie der Nutzer problemlos antippen kann.
• Der User sollte erkennen können, ob ein Menü-Punkt ihn direkt zu einer Seite weiterleitet oder sich zunächst eine weitere Unterebene öffnet. Dies kannst Du visuell kennzeichnen, etwa durch eine Pfeilspitze nach rechts (= User wird zur entsprechenden Seite weitergeleitet) oder nach unten (= es öffnet sich eine weitere Ebene im Menü).

Bei Bonprix.de visualisieren Pfeilspitzen, ob sich eine weitere Ebene im Menü ausklappt (wird z.B. „Wohnen“ angetippt, werden die Unterkategorien ausgefahren) oder ob der Nutzer auf eine Seite geleitet wird (z.B. der Punkt „Zur Übersicht“ führt zur Übersichtsseite „Wohnen“). Die aktuell aufgeklappte Kategorie wird jeweils mit einem Pfeil nach oben markiert (im Beispiel „Wohnen“ und „Teppiche“).

• Unterebenen müssen schnell erreichbar sein – denn der User will auf dem Weg zur gewünschten Kategorie oder Produktart nicht erst zig Zwischenseiten durchlaufen müssen. Eine gute Planung der Informationsarchitektur ist daher Voraussetzung.
• Wichtig ist für eine gute Usability auch, dass sich das Menü problemlos wieder schließen lässt. Das heißt: wird beim Tippen auf das Menü eine Off-Canvas-Navigation von links eingeblendet, muss sie sich durch Wischen nach links oder durch den Touch auf „Schließen“/„X“ auch wieder nach links schließen.

Was Du auf mobilen Seiten generell noch beachten solltest, liest Du in meinem Beitrag zur Mobilen Usability.

3.   Welche weiteren Navigationselemente gibt es auf Deiner mobilen Seite?

Das Menü ist zwar ein besonders wichtiges Navigationselement, aber Du kannst und solltest Deinen Usern noch weitere Möglichkeiten anbieten, durch Deinen Shop zu navigieren. Dazu gehört eine gute Suchfunktion (mehr dazu im nächsten Abschnitt). Aber auch Filter helfen, damit die Nutzer gewünschte Produkte schneller finden.

Breadcrumbs sind nützlich, wenn User zu den übergeordneten Seiten zurücknavigieren wollen.

Im Content kannst Du den Usern passende interne Links anbieten, sodass sie schnell zu weiteren für sie interessanten Bereichen Deines Shops navigieren können. Außerdem solltest Du den Usern am Ende langer Seiten auch immer passende Calls-To-Action anbieten, sodass sie von hier aus direkt weiternavigieren können: Damit zeigst Du ihnen zum einen passende Optionen auf, denen sie folgen können und zum anderen verhinderst Du, dass sie erst mühsam wieder hochscrollen müssen und möglicherweise entnervt abspringen.

Um User zum Stöbern in Deinem Sortiment einzuladen beziehungsweise ihnen überhaupt zu präsentieren, was Deine Website ihnen bietet, sind Bilder-Kacheln eine großartige Option. VisitBritain nutzt die Navigation über einladende Bilder auf seiner Startseite, aber auch auf Unterseiten. Ideal für Nutzer, die noch kein genaues Reiseziel in Großbritannien oder seinen Regionen vor Augen haben und nach Inspiration suchen:

Wo soll die Reise hingehen? Visitbritain.com inspiriert mit Bildern.

4.   Gibt es eine Suchfunktion und wie leicht ist sie zu handhaben?

Eine gute Suchfunktion im Onlineshop ist essentiell. Ihre Existenz allein reicht natürlich nicht aus – sie muss von den Usern auch gut zu handhaben sein.

Muss der Nutzer erst die Suche suchen, ist offensichtlich etwas schief gelaufen. Die Suchfunktion muss problemlos erkennbar und auffindbar sein. Daher sollte sie sich auf Deiner mobilen Seite im unmittelbar sichtbaren Bereich befinden, also ohne Scrollen erreicht werden.

Idealerweise präsentierst Du den Usern ein sichtbares Eingabefeld – so können sie ihre Suchanfrage sofort eintippen. Gerade auf der Startseite ist das eine sinnvolle Option. Aus Platzgründen ist das aber natürlich nicht immer möglich. Alternativ kann das Suchfeld auch durch das Antippen des bekannten Lupensymbols ausgeklappt werden.

Beispiel otto.de: Auf der mobilen Startseite ist das Suchfeld ausgeklappt, der User kann sofort loslegen. Auf anderen Seiten kann der User die Suche aktivieren, indem er auf die Lupe tippt.

5.   Wie ist gewährleistet, dass sich die User gut orientieren können?

Da auf Smartphone-Bildschirmen der Platz begrenzt ist, werden auf mobilen Seiten gerne Symbole verwendet, um auf bestimmte Funktionen hinzuweisen. Die drei Striche des Burger-Menüs, die Lupe der Suchfunktion und der Einkaufswagen zählen zu den gängigsten Icons.

So nützlich diese Icons auch sind: die User verstehen nicht zwangsläufig, was damit gemeint ist. Achte also genau darauf, welche Icons Du verwendest – und wie geläufig sie sind. Behalte auch Deine Zielgruppe im Kopf: spricht Dein Onlineshop eher ältere, wenig internetaffine Nutzer an, ist es ratsam, statt oder zusätzlich zu den Symbolen auf einen kurzen Text zu setzen. Etwa unter das Burger-Icon „Menü“ schreiben und das Filter-Icon mit dem Zusatz „Filtern“ zu ergänzen.

Bonprix.de geht auf Nummer sicher: das Hamburger-Menü wird „Menü“ benannt (so fällt es auch deutlicher ins Auge) und die Filter-Option wird klar als „Filtern/Sortieren“ bezeichnet. Das Icon wird zur Visualisierung zusätzlich eingesetzt.

Willst Du fit in Online Marketing werden?

Mit unserem Newsletter bekommst Du automatisch die neuesten Seokratie-Beiträge direkt in Dein Postfach!

Hier geht es zum Anmeldeformular.

Wie oben bereits erwähnt, können Breadcrumbs Deinen Usern helfen, sich in Deinem Shop zurechtzufinden. Gerade bei komplexen Seiten ist eine Breadcrumb-Navigation daher empfehlenswert, wie in diesem Beispiel von bonprix.de:

Ebenfalls wichtig: Die Seitenüberschriften sollten eindeutig sein, damit der User schnell sieht, wo er sich befindet. Denn nicht immer ist anhand von Produktbildern eindeutig zu erkennen, in welcher Produktkategorie man sich gerade aufhält.

Bei zalando.de wird dank eindeutiger Überschriften klar, wo sich der User befindet: in der Kategorie „Kleider“ oder bei „Rucksäcke für Damen“.

Übrigens: Luisa hat einen informativen Beitrag zum Thema SEO-Überschriften verfasst, in dem sie erklärt, wie eine korrekte Überschriftenarchitektur aussieht.

Mobile Navigation: Darauf kommt es an!

Jeder Onlineshop ist anders und wie eine gute mobile Version aussieht, lässt sich nicht pauschalisieren. Aber die oben genannten Punkte helfen Dir hoffentlich, Deine mobile Navigation zu prüfen und möglichst nutzerfreundlich zu gestalten.

Hier noch einmal in Kurzform, worauf es bei der mobilen Navigation ankommt:

1. Das Hauptmenü lässt sich problemlos finden und aufrufen. Das Menü-Icon mit Text zu versehen (z.B. „Menü“ oder „Sortiment“) hat sich bewährt. In Onlineshops bietet sich meist eine versteckte Hauptnavigation an, die als Dropdown oder Slide-In eingeblendet werden kann.
2. Die einzelnen Menüpunkte sollten problemlos antippbar sein. Über- und Unterkategorien sollten sich visuell voneinander abgrenzen. Der User muss auch erkennen können, ob er durch die Auswahl eines Menüpunktes zunächst weitere Unterkategorien öffnet oder direkt auf eine Kategorieseite weitergeleitet wird.
3. Neben dem Hauptmenü sollte Deine mobile Seite auch über weitere Navigationselemente wie zum Beispiel interne Links, Buttons oder Breadcrumbs verfügen.
4. Auch eine Suchfunktion sollte in Deinem mobilen Onlineshop vorhanden sein. Sie befindet sich im sichtbaren Bereich und wird üblicherweise durch das Lupen-Symbol gekennzeichnet.
5. Stelle sicher, dass sich die User auf Deiner mobilen Website gut orientieren können. Dabei helfen die unter Punkt 3 erwähnten Navigationselemente, die dem User Wege durch Deinen Shop aufzeigen.

Weitere Tipps zum Thema Navigation findest Du in meinem Beitrag „Tipps, Tricks & Beispiele für eine erstklassige Onlineshop-Navigation“.

Du wünschst Dir Unterstützung bei der Überprüfung oder Gestaltung Deiner (mobilen) Website-Navigation? Wir führen gerne einen UX- und Usability-Check Deiner Seite durch und ermitteln, wo Optimierungspotenzial besteht. Melde Dich unverbindlich bei uns.

Titelbild: iStock / Getty Images Plus/uraibzahir