Online Shop-Navigation – Wichtige Grundsätze und Tipps

Immer mehr Menschen tätigen ihren Einkauf online, was sich auch am kontinuierlichen Anstieg des E-Commerce-Umsatzes ^[1] widerspiegelt. Damit auch Sie dieses enorme Potenzial nutzen können, sollten Sie das Einkaufserlebnis Ihrer User so einfach wie möglich gestalten. Ein zentraler Aspekt, der über die einfache Handhabung eines Online Shops entscheidet, ist die Navigation der Website. Potenzielle Kunden müssen einen schnellen Überblick über die angebotenen Produkte haben, ohne diese im Regal nebeneinander sehen zu können. Und wird etwas Konkretes gesucht, sollte es schnell gefunden werden. Welche Navigationselemente Sie in Ihrem Online Shop einsetzen können und was Sie dabei beachten sollten, erläutern wir diese Woche.

Die Online Shop-Navigation dient zur Orientierung

Bestimmt kennen auch Sie folgende Situation: Sie betreten einen Ihnen unbekannten Laden mit dem Vorhaben ein bestimmtes Produkt zu erwerben. Um sich anfänglich zu orientieren, halten Sie nach entsprechenden Schildern Ausschau. Diese hängen meist in den verschiedenen Gängen und sind mit Oberbegriffen beschriftet, die einen Überblick über die dort erhältlichen Produkte geben. Brauchen Sie noch weitere Hilfe, können Sie das Ladenpersonal fragen. Und am Ende konnten Sie – dank wegweisender Schilder und der Zusatzhilfe des Personals – Ihr Produkt finden und erwerben.

Im Online Handel sind die Voraussetzungen anders, die Abfolge sollte jedoch ähnlich sein. Das Betreten des Ladens ist nun das Aufrufen der Website. Ähnlich wie bei einem Bau- oder auch einem Supermarkt sollte die Art der angebotenen Produkte sofort klar sein. Die Schilder im stationären Handel werden online von Kategorien abgelöst, wobei es Ober- und Unterkategorien gibt. Wird nach einem spezifischen Produkt gesucht, sollte die Suchleiste diesen Wunsch erfüllen und ähnlich wie Ladenpersonal zum richtigen Produkt führen.

Diverse Elemente dienen zur Orientierung

Zur Navigation einer Website bzw. eines Online Shops zählen all die Elemente, die dem Besucher dabei helfen sich zurecht zu finden und von A nach B zu kommen. Im Folgenden sollen die unterschiedlichen Elemente genauer beschrieben werden.

Hauptmenü

Das Hauptmenü stellt das zentrale Navigationselement dar und ist daher auch den meisten bekannt. Es gibt die Hauptinhalte wieder und dient dem Nutzer dabei einen groben Überblick über die angebotenen Produkte zu erhalten. Am Desktop ist das Hauptmenü meist zentral unter dem Logo zu finden oder alternativ am linken Rand. Unterkategorien werden dabei gerne als Dropdown- bzw. Flyout-Elemente angezeigt.

via matches21.de

Gerade bei umfangreichem Inhalt und dementsprechend langen Seiten wird das Menü häufig als Sticky Menü eingebunden. Hierbei bleibt dieses auch beim Runterscrollen am oberen Bildschirmrand sichtbar und erlaubt einfaches Navigieren.

Auf mobilen Seiten kann das Menü als Burger-Menü (Icon mit 3 horizontal aufeinander liegenden Strichen) dargestellt werden.

Suchfunktion

Um dem Nutzer auch die Suche nach einem speziellen Produkt zu ermöglichen, sollte ebenfalls eine Suchfunktion eingebaut werden. Diese ist vor allem auch wichtig, da Suchanfragen potenzielle Kaufwünsche ausdrücken können und somit wertvolle Daten liefern.

Footer Navigation

Weitere wichtige Elemente, für die in dem Hauptmenü kein Platz mehr ist (weil sie beispielsweise nichts mit den angebotenen Produkten zu tun haben), können in der Footer Navigation verlinkt werden. Hier finden sich oft Informationen zu Versand und Rücksendungen, zum Datenschutz und Impressum sowie Verlinkungen zu sozialen Medien.

via matches21.de

Filterfunktion

Hat der Besucher eine Kategorie ausgewählt, kann er die Ergebnisse dank der Filterfunktion weiter eingrenzen. In der Kategorie ‚Oberteile‘ unter ‚Herren‘ kann so zum Beispiel nur schwarze Kleidung gezeigt werden.

Breadcrumb-Navigation

Die Breadcrumb-Navigation befindet sich auf den Kategorieseiten oft zwischen dem Hauptmenü und den eigentlichen Produkten. Sie zeigt den Usern also die aktuelle Position auf der Seite und erlaubt es, zu vorherigen Seiten zurückzukehren.

via matches21.de

Seitenpaginierung

Durch die Paginierung (Unterteilung der Produkte auf mehrere Seiten) kann endloses Scrollen vermieden werden und durch Anhaltspunkte wird die Navigation für die Nutzer einfacher.

Interne Verlinkungen

Beim Online Shopping entfallen Spontankäufe, die durch das einfache Schlendern durch Gänge im stationären Handel zustande kommen. Diesem Problem wird durch interne Verlinkungen entgegengewirkt. Gerade bei Online Shops kommen diese häufig in Form von Empfehlungen oder ähnlichen Produkten zustande. Hierbei werden Nutzern Alternativen vorgeschlagen, die zum weiteren Stöbern einladen sollen.

via matches21.de

Tipps für einen leicht zu navigierenden Online Shop

Im folgenden Abschnitt erklären wir, wie Sie die Navigation in Ihrem Online Shop gestalten sollten, damit sich Ihre User besser zurechtfinden.

Erwartungen erfüllen

Es gibt Bereiche, in denen Neuerungen und neu durchdachte Konzepte durchaus sinnvoll sind. Die Platzierung von bestimmten Navigationselementen sollte allerdings keins davon sein. Das Hauptmenü wird zentral im Header der Website erwartet, die Suchfunktion in unmittelbarer Nähe. Auf Kategorieseiten befindet sich das Menü dann oft in vertikaler Form als Seitenmenü.

Diese Platzierungen werden von einer Vielzahl der Webseiten genutzt und User haben sich daran gewöhnt. Werden wichtige Elemente nun an andere Stellen gesetzt, muss die Navigation der Seite erneut erlernt werden. Dabei ist die Gefahr groß, dass Nutzer wieder abspringen.

In alle Richtungen den Weg weisen

Ein wichtiger Punkt, um das schnelle Zurechtfinden der User sicherzustellen, ist das Aufzeigen der aktuellen Position. Dabei helfen, kann zum einem die oben beschriebene Breadcrumb-Navigation. Zum anderen ist aber vor allem das optische Hervorheben der aktiven Kategorie sinnvoll. Befindet sich ein Nutzer beispielsweise auf einer Unterseite der Kategorie bzw. des Menü-Punkts ‚Herren‘, sollte dieser Menüpunkt etwa durch eine andere Farbe hervorgehoben werden.

Kategorien verständlich bezeichnen

Auch bei vielen Kategorien und Unterkategorien haben sich bestimmte Begrifflichkeiten etabliert, bei denen Nutzer sofort wissen, was dahintersteckt. Wichtig ist hierbei vor allem, dass die Bezeichnungen für die Zielgruppe verständlich sind. Außerdem sollte man auf eine möglichst konkrete und kurze Formulierung achten: z.B. Gartengeräte statt Produkte und T-Shirts statt kurzärmelige Oberteile.

Gerade bei den Begrifflichkeiten für das Hauptmenü sollte man nur eine begrenzte Anzahl wählen, damit ein schneller Überblick möglich ist. Als Faustregel hierfür werden oft zwischen 5 und 7 verschiedene Elemente empfohlen.

Übersichtlichkeit gewährleisten

Sorgen Sie durch visuelle Aspekte für mehr Übersichtlichkeit. Hauptkategorien können so zum Beispiel fett gedruckt werden, um die Hierarchie zu verdeutlichen. Um einen leichten Überblick zu begünstigen, sollte zwischen verschiedenen Elementen genug Abstand gelassen werden. In den Dropdown-Elementen (Unterkategorien) kann beispielsweise auch mit Symbolen gearbeitet werden, wenn diese die Orientierung vereinfachen.

via matches21.de: Durch unterschiedliche Schriftgrößen oder Hervorhebungen
sowie das Einrücken der Unterkategorien ist ein schneller Überblick möglich.

Fazit

Usability – also die leichte und kundenfreundliche Bedienbarkeit einer Website – ist ein bedeutender Erfolgsfaktor. Ist ein Online Shop beispielsweise durch ungewohnte Platzierung einiger Elemente zu schwierig zu navigieren, sind Nutzer schnell frustriert. Sie verlieren die Geduld und verlassen die Website wieder – ein Kauf findet nicht statt. Achten Sie also auf eine möglichst einfache und intuitive Navigation, um das gesamte Potenzial des E-Commerce ausschöpfen zu können.

 

---

 

^[1] Statista: Umsatz durch E-Commerce/Onlinehandel in Deutschland bis 2019