Dein wichtigster Touchpoint zur Digitalbranche.
Dein wichtigster Touchpoint zur Digitalbranche.
Unternehmensnews
Ideen zur Optimierung der Mobile-Navigation

Ideen zur Optimierung der Mobile-Navigation

Sponsored | 18.03.22

Einkaufen über das Smartphone ist mittlerweile die beliebtesten Art des Online-Shoppings. Auch anhand der Daten unserer 400 Kunden zeigt sich, dass wesentlich mehr Menschen über das Smartphone einkaufen als über Desktop-Geräte. Diese 5 Ideen zur mobilen Navigationsstrategie sollen Retailern eine Hilfe bei der Optimierung ihrer Mobile-Website und App bieten. [Anzeige]

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.

Anteil der monatlichen Gesamtbesucher:innen unterteilt nach Endgerät, © Dynamic Yield

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ü.

Ein vertikales Menü in der Nike-App (links) im Vergleich zum vertikalen Hamburger-Menü von Amazon (Mitte: vor dem Klick; rechts: nach dem Klick) , © Dynamic Yield

 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.

Beispiel für ein neu sortiertes Navigationsmenü basierend auf den Affinitäten der Besucher:innen , © Dynamic Yield

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.

Hier der Vergleich von personalisierten Menüpunkten, die auf Basis der Nutzer:innen-Affinität ausgewählt werden, © Dynamic Yield

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.

Beispiel für ein Kategorie-Banner auf einer mobilen PDP-Seite, um die Benutzer:innen zurück zur Hauptkategorie zu leiten, © Dynamic Yield

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.

Dieser Content ist in Zusammenarbeit mit unserem Partner Dynamic Yield entstanden. Wenn du ebenfalls Interesse an einer Zusammenarbeit hast, dann melde dich bei uns.

Kommentare aus der Community

Judith Harter am 19.03.2022 um 14:30 Uhr

Klasse Artikel. Erleichtert einem den Start mit der mobilen Navigation am Smartphone für Online-Marketing!

Antworten
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*