Mobile Navigation – was ist zu beachten?

Herausforderung für Technik und Informationsarchitektur.

Hier geben wir Ihnen einen Überblick darüber, wie Sie Ihre mobile Navigation auf eine optimale User Experience ausrichten können. Unter Navigation verstehen wir mehr als nur das Navigationsmenü. Neben dem Hauptmenü gehören hierzu auch die Suchfunktionen in Ihrem Shop, die Textzeilen, die dem Besucher anzeigen, wo er sich gerade befindet (Breadcrumb-Navigation), die verschiedenen Filterfunktionen wie auch Interne Links oder die Navigation, die sich in Ihrem Footer befindet.

Wie nutzt man den begrenzten Platz?

In Ihrem mobilen Shop steht Ihnen nur ein kleiner Raum zur Verfügung, der ausreichen muss, um den Nutzer logisch, strukturiert und vor allem problemlos durch die Seite zu führen. Sonst generieren Sie nur hohe Absprungraten!

Fokus auf dem Hauptmenü

Als erstes trifft der Nutzer auf das Hauptmenü, das man, gleich im oberen Bereich prominent gesetzt, problemlos finden sollte. Dafür sollte es auffällig designt sein und nicht im Bild der Seite verschwinden. Oft wird das Hauptmenü heutzutage mit einem Symbol (Beispiel Hamburger Menü) aufgezeigt. Damit das alle Nutzer verstehen, kann man noch mit der Überschrift „Menü“ das Symbol für jeden verständlich machen. Selbstredend muss das Menü technisch einwandfrei aufrufbar sein.

Quick and clean – Usability ist alles!

Nun muss es schnell gehen – die vom Nutzer gesuchten Inhalte oder Produkte müssen direkt erreichbar sein und nicht erst durch nerviges Geklicke! Eine gute Planung und eine durchdachte Informationsarchitektur ist daher Voraussetzung.

Wichtig ist für eine gute Usability auch, dass sich das Menü problemlos wieder schließen lässt. Wenn man auf das Menü geht, wird oft eine sogenannte Off-Canvas-Navigation  eingeblendet, die man durch Wischen oder einen Touch zum Schließen einfach für den Moment wieder entfernen kann.

Darstellung der Menüpunkte

Hier stehen Ihnen unterschiedliche Designs zur Verfügung. Am Geläufigsten ist momentan das Hamburger-Menü (drei waagrechte Striche) oder auch Hamburger-Icon oder Burger-Menü. Mittlerweile wissen die Nutzer, dass sich hier das Menü verbirgt. Doch Tatsache ist, dass dieses Menü zwar wenig Platz wegnimmt, aber der Trend weg geht von diesem Menü, da es zum einen bei iOS nichts verloren hat, da hier eine Wischgeste normalerweise zurücknavigiert, was hier nicht der Fall ist. Weiterhin gestaltet sich der Einsatz von Badges verwirrend, da immer die Unterseiten addiert werden. Auch wird das Menü nicht so häufig genutzt wie man denkt. Man navigiert auch mobil ein Drittel häufiger mit einem sichtbaren Menü.

Die mobile Navigation von econsor

Klarheit durch Testen

Auch bei der Navigation ist es wichtig zu schauen, wie die eigene Zielgruppe reagiert. Untersuchen Sie somit auch bezüglich Ihrer Navigation immer wieder Ihren Webshop! Wie reagieren genau Ihre Besucher? Funktioniert das Hamburger Menu in Ihrem Shop oder haben Sie mehr Erfolg mit dem eingerahmten Wort „Menü“? Verlassen Sie sich hierbei wirklich nur auf Ihre Nutzer, Tests zeigen oftmals verschiedene Ergebnisse auf, auch Studien kommen zu widersprüchlichen Resultaten.

Wie geht es weiter?

Neben der Hauptnavigation sollte es im Shop noch weitere Navigationsmöglichkeiten geben. Ganz wichtig ist auch eine gut und ausführlich angelegte Suchfunktion. Auch über Filter sollten Sie nachdenken, wenn diese helfen, Ihre Produkte besser auffindbar zu machen. Die oben erwähnten Breadcrumbs sind vor allem für’s Zurückkommen auf ursprünglich gewählte Seiten nützlich.

Nutzen Sie Ihren Content

Wieder hat auch im Bezug auf die Navigation Ihr Content eine King-Funktion, denn hier kann man mit an der richtigen Stelle platzierten internen Links eine schnelle Navigationsmöglichkeit für die Nutzer schaffen. Genauso führen prominent angebrachte Calls-To-Action-Buttons zum direkten Weiterkommen. Man kann sie nutzen, muss aber nicht, hat aber eine Option zum genervten Abspringen ausgeschaltet.

Navigieren mit Bildern

Navigierbare Bilder-Kacheln sind im Trend. Zum einen schaffen sie viel besser den nötigen emotionalen Background für die User Experience und sie sind leicht und eindeutig durch den Nutzer zu handhaben.

Die Suchfunktion – bitte nicht zum Suchen!

Ohne eine gut ausgearbeitete Suchfunktion sollte ein Shop erst gar nicht online gehen. Nur da sein genügt für die Suche allerdings nicht, es müssen ausreichend Suchbegriffe hinterlegt sein, nach denen die Besucher auch forschen. Das wiederum muss von Ihnen im Vorfeld eruiert vorliegen. Somit müssen Sie für diese Funktion wiederum Ihre Zielgruppe gut kennen.

Platzieren Sie die Suchfunktion mit einem unmissverständlichen (und somit als solches gekennzeichneten) Feld gleich in die erste Sicht auf Ihrer mobilen Shopseite, der Nutzer sollte nicht scrollen müssen. Eine Alternative ist auch die sichtbar angebrachte Lupe, die von jeden Nutzer als Suchfunktion erkannt wird, falls Ihnen der Platz fehlt.

Die Orientierungshilfen

Der Nutzer sollte sich in Ihrem Shop einfach orientieren können. Hierfür werden gerne gängige und allen bekannte Symbole verwendet, die auf bestimmte Funktionen weisen. Dazu gehören die schon erwähnten Symbole des Menüs oder der Lupe, auch der bekannte  Einkaufswagen gehört zu den meistgenutzten Icons.

Achten Sie beim Integrieren von Icons auch wieder auf Ihre Zielgruppe und wie hier das Verständnis ist. Lieber einmal mehr noch ein erklärendes Wort hinzufügen als einen absprung des Nutzers zu riskieren. je breiter Ihre Zielgruppe gefächert ist, desto weniger sollten Sie Icons selbstverständlich einsetzen.  

Wählen Sie einfache Überschriften, sodass der Besucher immer weiß, wo er sich gerade befindet. Gerade wenn Ihr Produkt nicht eindeutig zu visualisieren ist. Und schauen Sie bei den Seitenüberschriften und Bildunterschriften auch auf SEO-relevante Keywords.

man kann es nicht oft genug erwähnen: Halten Sie Ihre relevanten Zielgruppen permanent im auge und analysieren Sie auch Ihre mobile Seite in regelmäßigen Abständen. Dann sehen Sie, wo nutzerorientierte Verbesserungen nötig sind.