Ideen zur Optimierung der Mobile-Navigation

Einkaufen über das Smartphone ist mittlerweile die beliebteste Art des Online Shoppings. Auch anhand der Daten unserer 400 Kund:innen zeigt sich, dass wesentlich mehr Menschen über das Smartphone einkaufen als über Desktop-Geräte. In den letzten zwölf Monaten (März 2021 bis Februar 2022) lag der Mobile-Traffic unserer Kund:innen im Durchschnitt bei 67 Prozent, der Desktop-Traffic machte hingegen nur ein Drittel der Gesamtbesucher:innen aus und die restlichen zwei Prozent kamen über Tablets.

Deshalb ist es für Retailer unverzichtbar, beim Thema Navigationsoptimierung eine gesonderte Strategie für Mobile-Websites und Apps zu entwickeln. In diesem Artikel geht es um die Optimierung der Mobile-Navigation. Wer auf der Suche nach Ideen zur Optimierung der Desktop-Navigation ist, sollte auch diesen Artikel lesen.

Warum in Navigationsoptimierung investieren?

Stell dir vor vor, du gehst zum Lebensmittelladen um die Ecke, um ein paar Zutaten für ein neues Rezept zu besorgen: Reis, Hähnchen, Fenchel – das sind Zutaten, die du häufiger kaufst und schnell findest. Aber du benötigst auch Safran, eine Zutat, die du nur selten brauchst. Aber da du weißt, dass es sich bei Safran um ein Gewürz handelt, kannst du schnell zum richtigen Gang navigieren, es im alphabetisch geordneten Regal finden und ohne Probleme deinen Einkauf abschließen.

Genau wie im Lebensmittelladen braucht auch ein Online Shop gute Navigationsstrukturen, damit sich die Besucher:innen zurechtfinden und somit schneller die gewünschten Produkte finden. Durch die Optimierung von einzelnen Navigationselementen können Retailer ihre Verkaufszahlen steigern und auch andere Metriken wie Suchranking, Absprungrate, Seitenaufrufe, Verweildauer und die Anzahl von wiederkehrenden Besucher:innen verbessern.

1.     Design des Hauptmenüs

Allein aufgrund der Bildschirmgröße ergeben sich erhebliche Unterschiede zwischen der Mobile-Navigation und der Desktop-Navigation. Retailer müssen durch ihr mobile Design des Hauptmenüs sicherstellen, dass die Besucher:innen trotz geringerem Platz, alles Wichtige finden und schnell zu ihrem Wunschprodukt navigieren können. In der mobilen Version wird das Hauptmenü daher üblicherweise vertikal angezeigt. Zusätzlich kann der verfügbare Platz auf mobilen Websites und in der App maximiert werden, indem ein ausklappbares Menü verwendet wird. Viele Unternehmen nutzen daher ein Hamburger-Menü.

 2.   Symbole statt Text

Wie beim Hamburger-Menü ist es auch bei anderen Funktionen sinnvoll, sie durch Symbole abzubilden. Kleine Optimierungen, wie zum Beispiel die Einbindung von Symbolen anstelle von Text, können die Übersichtlichkeit weiter erhöhen. Die Benutzer:innen sind darauf trainiert die Bedeutung vieler Symbole sofort zu verstehen: Warenkorb, Suche, Gespeicherte Artikel, Benutzerkonto, Versand und vieles mehr lassen sich so platzsparend abbilden.

Bei der Einführung von neuen Symbolen und Call-To-Action-Buttons empfiehlt es sich allerdings, deren Verständlichkeit durch AB-Tests zu überprüfen. So kannst du feststellen, ob die Buttons ebenso häufig genutzt werden, wie die frühere Beschreibung. Auch das Design der Symbole kann durch einfache Tests optimiert werden. Teste verschiedene Farben und Formen, um so herausfinden, mit welchen Symbole deine Besucher:innen am meisten interagieren. Mittels Form und Farbe kannst du auch die Aufmerksamkeit auf bestimmte Funktionen lenken, die wichtig für deine Verkaufsstrategie sind. Weißt du beispielsweise, dass deine Benutzer:innen häufiger Produkte kaufen, die sie zuvor als Lieblingsartikel gespeichert haben, so solltest du das Symbol für Lieblingsartikel auf den Produktdetailseiten durch Farben oder Animationen hervorheben.

3.   Reihenfolge der Menüpunkte

Die Reihenfolge, in der du deine Menüpunkte präsentierst, kann großen Einfluss auf die Product-Discovery deiner Besucher:innen haben. Da die Besucher:innen üblicherweise von oben nach unten lesen, sollten oben deine wichtigsten Menüpunkte stehen.

Während du vielleicht eine Standardreihenfolge haben, die du für neue Benutzer:innen ausspielen, kannst du für deine loyalen Kund:innen mithilfe von Affinitätsdaten die Reihenfolge der Menüpunkte anpassen, um die Priorisierung auf individuelle Präferenzen abzustimmen.

4. Angepasstes Mobile-Menü für verschiedene User-Gruppen

Retailer können bei der Erstellung ihres Hauptmenüs auch gänzlich unterschiedliche Menüpunkte für verschiedene Nutzergruppen anzeigen. So finden die Besucher:innen trotz begrenztem Platz schnell die Kategorien, die ihren Interessen entsprechen. Eine solche Segmentierung kann auf Basis des Browserverlaufs vorgenommen werden. Neue Besucher:innen, über die der Retailer noch nicht viel weiß, bekommen übergeordnete Kategorien angezeigt. Wiederkehrenden Besucher:innen werden hingegen direkt die Unterkategorien angezeigt, für die sie sich zuvor interessiert haben.

In meinem Beispiel siehst du wie die Marke e.l.f. Cosmetics ihr Mobile-Menü für verschiedene Besucher:innengruppen angepasst hat. Wenn ein:e Kund:in zuvor die Kategorie „Skin Care“ besucht hatte, erhielt er oder sie beim nächsten Besuch direkt die Menüleiste mit passenden Produktkategorien wie Gesichtsmasken, Hautreiniger und Feuchtigkeitsspender angezeigt. Für Nutzer:innen, die zuvor in der Kategorie „Face“ unterwegs waren, wurde ein anderes Menü mit Punkten wie Rouge, Concealer und Grundierung entworfen. Mit diesen Menü-Optimierungen konnte e.l.f. eine 17-prozentige Steigerung der Click-Through-Rate verzeichnen, was die Besucher:innen tiefer in den Produktkatalog führte.

5. Navigieren zwischen Kategorieseiten

Um den Nutzer:innen das Navigieren zwischen verschiedenen Kategorien und Produktseiten zu erleichtern, sollten Retailer weitere Navigationselemente einsetzen. Solche Funktionen sind für die Product Discovery besonders wichtig, damit der Nutzer:innen nicht sofort den Shop verlässt, sobald er oder sie sich gegen eines der Produkt entschieden hat.

Bei der Desktop-Navigation werden dafür häufig Breadcrumbs integriert, die typischerweise am oberen Rand einer Webseite anzeigen, an der der User sich generell orientieren kann (z.B.: Damen > Schuhe > Stiefel > Stiefeletten > Blockabsätze).

Keine Breadcrumbs – dafür Kategorie-Banner

Bei Mobile Usern ist es wichtig, die Navigation von Produktseiten zur übergeordneten Kategorie zu erleichtern, besonders wenn die aktuelle Seite ihre Einstiegsseite in den Shop darstellt. Da wir hier allerdings weniger Platz haben, empfehle ich, anstelle der Breadcrumbs, einen Call-To-Action Button einzuspielen, der sie zu Produktalternativen navigieren kann. Dies ermutigt Nutzer:innen dazu, mit der Suche nach ihrem Wunschprodukt fortzufahren, statt die mobile Website oder App sofort zu verlassen.

Fazit: Tests führen zu effektiven Mobile-Navigation

Diese fünf Ideen zur mobilen Navigationsstrategie sollen Retailern eine Hilfe bei der Optimierung ihrer Mobile-Website und App bieten. In einem weiteren Artikel habe ich außerdem Ideen für die Desktop-Navigation zusammengefasst.

Für die Mobile-Navigation gilt grundsätzlich: Der Bildschirmplatz ist knapp und wertvoll. Die Kunst besteht darin, an jeder Stelle im Prozess der Product Discovery die relevanten Navigationselemente anzuzeigen und den Rest auszublenden. Je mehr Retailer über ihre Besucher wissen, desto zielgenauer können die Navigationsmittel angepasst werden. Das zeigen beispielsweise die Anpassung des Hauptmenüs an die Besuchergruppen. Eine allgemeingültige Blaupause für die Gestaltung der Mobile-Navigation gibt es leider nicht. Besonders in der E-Commerce-Branche, wo Marken mit Nutzer:innen aus verschiedenen Zielgruppen mit unterschiedlichen Geschmäckern und Vorlieben zu tun haben, ist es unerlässlich, verschiedene Navigationselemente zu testen und damit kontinuierlich zu optimieren.