Optimale Navigation auf Webseiten und Onlineshops

Topmenü und Footer, Suchfunktion, Filter, Verlinkungen und Breadcrumb-Navigation sind wichtige Elemente, die das Navigationskonzept von Websites und Onlineshops bestimmen. Jedes Zuviel ist hier ebenso kontraproduktiv wie ein Zuwenig.  Lesen Sie im Folgenden, auf welche Aspekte Sie achten müssen, um die optimale Navigation auf Webseiten und Onlineshops zu realisieren. 

Optimale Navigation auf Webseiten und Onlineshops
Optimale Navigation auf Webseiten und Onlineshops

Vom Konzept zur Umsetzung: 4 Grundsätze für Navigation 

Was immer Sie im Internet anbieten, denken Sie daran: Webseiten und Onlineshops sind keine Ein-Euro-Shops, in denen sich der Besucher allerlei in einer zufälligen Reihenfolge angebotene Produkte herauspickt. Im Netz entscheidet eine nutzerfreundliche Navigationsstruktur über Ihren Erfolg. 
Bevor es daran geht, ein Navigationsdesign auszuwählen, muss also ein Konzept her, für das Sie folgende Grundsätze beherzigen:

1. Schlicht auffindbar
Sinn und Zweck Ihrer Navigationsleiste ist es, dem Nutzer Orientierung zu bieten. Wichtig ist daher, dass Sie alle Inhalte einer minimalen Zahl von Kategorien zuordnen. Nehmen Sie in die Menüleiste keine Unterpunkte wie beispielsweise „Schuhe“ oder „Kleiderschränke“ auf. Ordnen Sie diese unter „Textilien“ und „Möbel“ ein. 

Damit Nutzer, die ein bestimmtes Produkt oder Thema suchen, den Weg dorthin rascher finden, ergänzen Sie Ihre maximal 5 Menüpunkte durch eine Suchfunktion. Informationen, die für Seitenbesucher von nachgeordneter Bedeutung sind, können Sie im Footer Ihrer Seite unterbringen. 

2. Sichtbarkeit
Die meisten Seitenbesucher bringen eine ungefähre Vorstellung davon mit, wie eine Website oder ein Shop aufgebaut ist. Irritieren Sie diese nicht, indem Sie versuchen, Ihre Navigation besonders originell einzurichten. Viel wichtiger ist es, dass Ihre Besucher jederzeit wissen, wo sie sich gerade befinden, und dass die Navigationsleiste auch dann nur einen Klick entfernt ist, wenn Sie sich für eine Long-Scrolling-Seite entschieden habe. 

3. Breadcrumb-Navigation
Vereinfachen Sie es Ihren Nutzern, jederzeit von einer Unterseite zurück auf eine Hauptseite zu gelangen, indem Sie eine sogenannte Brotkrumen-Navigation verwenden, die beispielsweise wie folgt aufgebaut ist: 
Startseite –> Flüge –> Auslandsflüge –> USA –> Kalifornien

4. Eindeutigkeit 
Neben der Struktur müssen auch die Begriff und Icons, die Sie verwenden, klar und intuitiv zu verstehen sein. Versuchen Sie wiederum nicht, originell zu sein, sondern bieten Sie dem Nutzer Orientierung durch hinlänglich bekannte Symbole und Zuordnungen. 

Wie das Design eine Navigation unterstützen kann 

Über das Navigationsdesign wird die Struktur Ihrer Website oder Ihres Onlineshops sichtbar. Idealerweise folgt daraus, dass der Besucher den vorgegebenen Pfaden intuitiv folgen kann. Sie unterstützen dies, indem Sie darauf achten, 

  • dass Begriffe und grafische Elemente optimal aufeinander abgestimmt sind. Icons oder Symbole sollten zudem nur unterstützend hinzugefügt werden.
  • die einzelnen Menüpunkte klar erkennbar voneinander abzugrenzen. 
  • dass der Besucher jederzeit weiß, wo er sich gerade befindet und wohin ihn das Aufrufen eines Navigationselementes führt. 

Menü- und Navigationsarten

Haben Sie sich die Grundstruktur Ihrer Website verdeutlicht und ein erstes Konzept skizziert, befassen Sie sich mit den verschiedenen Navigationsarten und Menüführungen. Klassischerweise setzen Sie das Hauptmenü horizontal in den oberen Bereich Ihrer Website. Möchten Sie dem Nutzer ein ausklappbares Seitenmenü anbieten, eignet sich dafür eine zusätzliche Seitennavigation. 

Können Sie davon ausgehen, dass Ihre Nutzer mit Icons im Netz bereits vertraut sind, kommt auch das sogenannte Hamburger-Menü infrage. Dieses besteht aus einem durch drei Striche unterteilten Rechteck, hinter dem sich die eigentlichen Menüpunkte verbergen. Weitere gern genutzte Navigationsarten sind beispielsweise:

  • der Navigationshub, der in Form eines Dashboards gestaltet ist, 
  • das aufklappbare Akkordeon-Menü,
  • die Unterteilung der Startseite in Tabs,
  • ein Mega-Dropdown oder auch die
  • die Off-Canvas-Navigation. 

Unterschiedliche Navigationskonzepte für Webseiten und Onlineshops

Für welche Art der Navigation Sie sich auch entscheiden, denken Sie daran, dass Webseiten und Onlineshops unterschiedlich strukturiert werden müssen. Grundsätze für den Menüaufbau Website haben wir oben bereits angesprochen. Für den Menüaufbau Onlineshop sollten Sie zwei weitere wichtige Punkte zwingend berücksichtigen, nämlich

  • die Ergänzung der Suchfunktion um einen Filter, sofern Sie viele ähnliche Produkte in unterschiedlicher Ausprägung (Größe, Farbe, Material, Geschmack, Zielgruppe) anbieten.
  • die Aufnahme des Warenkorbs in die fixierte Menüleiste, damit Nutzer diesen jederzeit problemlos aufrufen und sich von dort weiter zum Bezahlvorgang leiten lassen können. 

Erneut gilt also: Nehmen Sie sich Zeit, um herauszufinden, welche konkreten Navigationselemente für Ihre Zwecke die wichtigsten sind. Verzichten Sie darauf, Ihr Menü zu überladen, indem Sie es zu breit oder zu tief anlegen. Begrenzen Sie das sichtbare Hauptmenü auf fünf Navigationspunkte, die nebeneinander angelegt sind und auf maximal drei Ebenen. Alles andere können Sie über aufklappbare Kategorien anbieten oder aber über die Such- und Filterfunktion auffindbar machen.  

Um Ihren Onlineshop auch für die Darstellung auf mobilen Geräten zu optimieren, gilt es weitere Besonderheiten zu erfassen. Das Long Scrolling beispielsweise kann auf kleinen Bildschirmen bald ermüdend werden. Idealer ist es hier eine Seitennavigation zu verwenden. Auch das Mouseover-Verfahren ist für die Mobile-Navigation nicht geeignet, arbeiten Sie stattdessen lieber mit internen Verlinkungen. 

Fazit: Fehler oder Probleme durch klare Konzepte vermeiden

Fehlt es Ihrer Website oder Ihrem Onlineshop an einem klaren Aufbau, werden Sie eine hohe Absprungrate zu verzeichnen haben. Arbeiten Sie dem von Beginn an durch eine klug durchdachte Struktur entgegen. Die optimale Navigation auf Webseiten und Onlineshops schränkt Ihre Möglichkeiten, ein attraktives Design zu gestalten, nicht ein, im Gegenteil: Eine klare und schlanke Menüführung hebt die Attraktivität Ihrer Seite hervor und punktet zusätzlich durch hohe Benutzerfreundlichkeit. 

Zurück zum Blog


Noch Fragen?

 

Kontakt aufnehmen