Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel

Letztes Artikel-Update: 16. April 2023

Ein Element, das entscheidend für die User Experience ist, ist deine Website-Navigation. Ich zeige dir, wie du eine überzeugende Navigation erstellst und deine Nutzer intuitiv ans Ziel führst.
4.8
(53)

Es gibt viele Aspekte deines Webdesigns, die ein gutes Nutzererlebnis fördern – und viele Details, die, wenn sie nicht beachtet werden, die User Experience ruinieren können. Vom Layout über den Text bis hin zur technischen Funktionalität – eine gute Website erfordert ein durchdachtes Webdesign.

Von allen Elementen, die du berücksichtigen solltest, ist eines ganz besonders entscheidend: die Website-Navigation.

Eine Website, die leicht zu navigieren ist, hilft den Nutzern, gesuchte Informationen zu finden, Produkte zu kaufen oder Kontakt aufzunehmen. Bedeutet:
Nur eine Website mit guter Navigation führt deine Nutzer an ihr Ziel.

Dieses positive Erlebnis animiert deine User, sich näher mit dir und deinen Angeboten auseinanderzusetzen.

In diesem Artikel erkläre ich dir, warum die Navigation auf deiner Website wichtig ist und wie du deine User intuitiv ans Ziel führst. Außerdem erfährst du, welche Tipps du beim Design deines Website-Menüs unbedingt beachten solltest.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 1
Typische Hauptnavigationen auf Corporate Websites.

Was genau ist die Website-Navigation?

Eine Website-Navigation findest du eigentlich auf jeder gewöhnlichen Seite. Was ist das genau? Gemeint ist mit der Navigation meistens das Menü, über das deine Nutzer von einer Unterseite zu einer anderen Seite wechseln können.

Die Website-Navigation ermöglicht deinen Nutzern eine einfache Orientierung – ganz egal, wo sie sich auf deiner Seite gerade befinden.

Denn bedenke:
Nicht jeder Nutzer steigt über deine Startseite auf deine Website ein. Manche User gelangen über einen bestimmten Suchbegriff in der Google-Suche auf eine deiner thematisch passenden Unterseiten. Diese Nutzer möchten sich ein Bild von dir und deinem Unternehmen machen. Dann navigieren sie von der Unterseite aus auf deine Startseite oder Über-mich-Seite.

Folgende Arten von Navigation auf einer Website gibt es:

  • Metanavigation
  • Hauptnavigation
  • Subnavigation
Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 2
Footernavigationen können manchmal sehr umfangreich sein.

Warum ist die Navigation einer Website überhaupt so wichtig?

Die Navigation dient deinen Nutzern zur Orientierung auf deiner Seite und gibt ihnen die Möglichkeit, sich mit den gewünschten Inhalten auseinanderzusetzen. Sie können sich durch deine Website klicken und erhalten alle Informationen zu dir, deinem Unternehmen und deinem Angebot.

Ohne eine gut durchdachte Navigation kann es sein, dass deine User Schwierigkeiten mit der Nutzung deiner Website haben. Die Folge: Die User verlassen deine Seite.

Eine Website-Navigation ist deshalb so wichtig, weil deine Nutzer deine Website mit ihrer Hilfe ganz einfach bedienen können.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 3
Da wird ein Header schnell voll: Logo, Hauptnavigation und Metanavigation – da muss der Designer fein gestalten.

Informationsarchitektur und Navigation:
Was ist der Unterschied?

Wenn du dich schon ein wenig mit Webdesign beschäftigt hast, sagt dir Informationsarchitektur mit Sicherheit etwas. Wo liegt aber der Unterschied zwischen einer Informationsarchitektur und einer Navigation für deine Website?

Ganz einfach: Mit der Informationsarchitektur planst und strukturierst du all deine Inhalte, ordnest sie hierarchisch und setzt sie in ein Verhältnis. Deine Navigation ist später quasi das übergeordnete Inhaltsverzeichnis, das die Nutzer zu den einzelnen Inhalten führt.

Deshalb ist es wichtig, dass du deine Informationsarchitektur vor deiner Navigation ausarbeitest.

Du möchtest mehr darüber erfahren, wie du eine gute Informationsarchitektur für deine Website erstellst? Lies hier meinen Artikel zum Thema Informationsarchitektur: So strukturierst du die Inhalte deiner Website.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 4
Ein klassische hierarchische Navigationstruktur.

Tipps für eine überzeugende, intuitive Website-Navigation

Nicht immer ist es ratsam, Trends zu folgen und mit dem Strom zu schwimmen. Allerdings gibt es bestimmte Grundsätze, die sich im Webdesign schon über Jahre bewährt haben. Daraus haben sich Gewohnheiten bei den Nutzern entwickelt, die du unbedingt für deine Website-Navigation berücksichtigen solltest. Denn nur so finden sich deine User später auf deiner Website zurecht. Das Ergebnis: eine gute Benutzererfahrung und hohe Conversion Rate.

Deshalb habe ich hier die wichtigsten Tipps für eine überzeugende, intuitive Website-Navigation für dich gesammelt.

Flache oder tiefe Hierarchie: Was ist besser?

Was ist besser für deine Website: eine flache oder eine tiefe Hierarche? Wie so oft gibt es auf diese Webdesign-Frage keine eindeutige Antwort.

Eine flache Hierarchie eignet sich in der Regel gut, wenn auf deiner Website eindeutige und wiedererkennbare Kategorien vorkommen. Dann müssen sich deine User nicht durch so viele Ebenen klicken.

In manchen Fällen gibt es aber so viele Kategorien, dass es keinen Sinn macht, diese auf einer Ebene darzustellen. Oder aber es macht keinen Sinn, dem Nutzer von Anfang an zu viele Informationen zur Verfügung zu stellen, sodass es besser ist, wenn er diese erst später findet.

Die Lösung: Finde heraus, vor welchem Problem deine Nutzer stehen und wie ihr Suchverhalten aussieht. Usability-Tests, Analysen und Suchprotokolle helfen dir dabei, zu erkennen, wie gut deine Hierarchie funktioniert.

Informationsarchitektur, UX Design und Navigation
Informationsarchitektur, UX Design und Navigation bilden ein Zusammenspiel.

Wie viele Unterpunkte sind geeignet?

Du möchtest deinem Nutzer alle benötigten Informationen zur Verfügung stellen, ihn aber nicht erschlagen. Deshalb fragst du dich, wie viele Unterpunkte du in deiner Navigation aufführen kannst.

Die „richtige“ Anzahl für deine Menüpunkte gibt es nicht. Sie hängt davon ab, wie komplex dein Angebot ist bzw. wie viele Produkte oder Dienstleistungen du hast. Im besten Fall führst du bis zu sechs oder sieben Unterpunkte auf.

Ebenfalls wichtig: die Reihenfolge deiner Menüpunkte.

Reihenfolge: Wie ordne ich meine Menüpunkte?

Wenn du weißt, welche Menüpunkte in deiner Navigation auf gar keinen Fall fehlen dürfen, stellst du dir als nächstes die Frage, in welcher Reihenfolge du sie darstellen solltest.

Beachte: Die Menüpunkte am Anfang und am Ende deiner Liste ziehen die größte Aufmerksamkeit auf sich. Platziere hier die wichtigsten Links.

Es hat sich etabliert, dass die meisten Seiten mit dem Menüpunkt „Angebot“, „Produkte“ oder „Dienstleistungen“ beginnen und mit einer Handlungsaufforderung in der Navigation enden – zum Beispiel „Kontakt“.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 5
Tipps für gelungene Navigationspunkte.

Wie benenne ich meine Menüpunkte?

Damit deine User sich gut zurechtfinden, spielt die Benennung deiner Menüpunkte eine große Rolle. Denn nur wenn deine Links sinnvoll und verständlich benannt sind, wird ein Nutzer diese später anklicken.

Bedenke, dass deine User in der Lage sein sollten, leicht vorherzusehen, wohin ein Link sie führt, bevor sie ihn anklicken. Der wichtigste Faktor ist das Wording in deiner Navigation. Deine Menüpunkte sollten beschreibend, kurz und in einfacher Sprache benannt sein.

Aber nicht nur die passenden Wörter sind entscheidend für die Benennung deiner Menüpunkte. Auch die Symbole sollten den Nutzern genau sagen, was bei einem Klick passiert. Verwende deshalb bekannte Icons, wie bspw. einen Briefumschlag für Kontakt oder einen Einkaufswagen für den Warenkorb.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 6
Das Wording der Navigationspunkte ist ganz entscheidend.

Mega Menü vs. Drop-Down: Was ist besser?

Gerade bei komplexen Navigationen und vielen Kategorien können Drop-Down-Listen die bessere Wahl sein. Allerdings bieten Mega Menüs einen entscheidenden Vorteil:
Sie zeigen all deine Menüpunkte auf einen Blick.

Außerdem erlauben Mega Menüs dir eine anspruchsvolle graphische Gestaltung, den Einsatz von Bildern und eine übersichtlichere Gruppierung deiner Elemente.

Drop-Down-Mega-Menü
Drop-Down-Menüs bieten viel Raum, um Unterpunkte auch visuell ansprechender zu präsentieren.

Mehr dazu im Artikel Drop-Down-Menü in Websites – 11 Tipps zur Gestaltung.

Drop-Down-Menüs
Im Drop-Down-Menü kann schon mal schnell die „sieben Unterpunkte“-Regel fallen…

Beachte die 3-Klick-Regel

Die 3-Klick-Regel besagt, dass auf einer Website maximal 3 Klicks erforderlich sein sollten, um an den gewünschten Inhalt zu gelangen. Was bedeutet das für deine Seite?

Deine Nutzer geben sehr wahrscheinlich frustriert auf, wenn sie mehr als dreimal klicken müssen, bevor sie eine relevante Information erhalten. Du kannst die 3-Klick-Regel nutzen, um die Zugänglichkeit und Benutzerfreundlichkeit deiner Website zu testen.

Beachte: Deine Website nur auf Klicks zu testen, reicht allein nicht aus. Natürlich sind auch dein Design und die Inhalte wichtig für die Usability deiner Website. Dennoch ist die 3-Klick-Regel eine gute Methode, um ein Gefühl für die Bedienbarkeit einer Seite zu bekommen.

Deine Navigation auf dem Handy:
Mobiloptimierung für dein Website-Menü

Eigentlich sollte dieser Tipp jedem Webdesigner klar sein – trotzdem wird er bei der Erstellung einer Website-Navigation häufig vergessen.

Optimiere deine Website-Navigation für mobile Endgeräte.

Dein Menü ist eines der wichtigsten Elemente deiner Website. Es erlaubt deinen Usern die Nutzung und Navigation auf deiner Seite. Genau deshalb muss dieses Element unbedingt für alle Endgeräte optimiert werden, um die bestmögliche Nutzererfahrung zu schaffen.

Das Hamburger-Symbol ist ein universelles Symbol zur Kennzeichnung des Website-Menüs auf dem Handy. Es ist nicht ratsam, hier mit anderen Icons zu experimentieren.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 7
Hamburger Icons sind bei kleinen Bildschirmen sinnvoll, auf großen aber eher lästig. Hier besser die Menüpunkte anzeigen lassen.

Deine Navigation auf großen Bildschirmen

Auf großen Bildschirmen gilt das Gegenteil für deine Website-Navigation:

Nutze hier kein Hamburger-Menü.

Du läufst ansonsten Gefahr, dass deine Navigation nicht auffindbar ist. Und gerade auf großen Bildschirmen möchtest du dein Menü nicht verstecken.

Eines der grundlegenden Prinzipien bei der Gestaltung von Websites ist es, die Navigation sichtbar zu machen. Obwohl das so einfach klingt, fällt die Navigation immer wieder der Kreativität mancher Webdesigner zum Opfer. Du kannst ein kreatives und ausgefallenes Layout entwerfen – bei der Navigation ist allerdings Vorsicht gefragt.

Hybridnavigation

Auf komplexen Websites und Webanwendungen kann es ratsam sein, mehrere Formen der Navigation miteinander zu kombinieren.

Dafür kannst du zum Beispiel einige wichtige Navigationslinks in der Menüleiste platzieren und zusätzlich einen Menü-Button einbauen, über den der Nutzer zu einer umfangreichen Liste an Links gelangt.

Einige Websites nutzen zusätzlich den Footer und bauen hier eine weitere Navigation ein. Häufig wiederholen sich hier aber nur die Links aus der oberen Menüleiste. Die Fußzeile kannst du aber auch nutzen, um eine kleine Auswahl an Links bereitzustellen, die sich für eine bestimmte Nutzergruppe eignet. Meist können User hier die Sprache ändern oder das Impressum aufrufen.

Breadcrumb

Breadcrumbs unterstützen als wichtiges Element die Navigation deiner User. Sie machen deinem Nutzer bewusst, an welcher Stelle er sich gerade befindet. Breadcrumbs sind eine Liste von Links, die die aktuelle Seite sowie die übergeordneten Seiten darstellen und in der Regel bis zur Startseite zurückreichen.

Klassischerweise werden Breadcrumbs als eine Reihe von Links am oberen Seitenrand dargestellt – meist direkt unter der globalen Navigation.

Wenn du Breadcrumbs einsetzt, solltest du diese Punkte beachten:

  • Breadcrumbs ersetzen nicht die globale Navigationsleiste.
  • Breadcrumbs sollten nicht den Verlauf einer Sitzung, sondern die aktuelle Position in der hierarchischen Struktur deiner Website anzeigen.
  • Die Seite, auf der sich dein Nutzer aktuell befindet, sollte immer das letzte Element in deinem Breadcrumb-Pfad sein.
  • Der Breadcrumb, der der aktuellen Seite entspricht, sollte kein Link sein.
  • Websites, die linear aufgebaut sind oder nur über ein oder zwei Ebenen verfügen, benötigen keine Breadcrumbs.
  • Dein Pfad sollte mit einem Link zu deiner Startseite beginnen.
Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 8
Die Navigationsarten im Einsatz.

Designtipps für deine Website-Navigation

Wie du jetzt weißt, ist die Website-Navigation eines der wichtigsten Elemente deiner Seite. Damit deine Nutzer sich wirklich gut zurechtfinden, muss dein Menü nicht nur technisch einwandfrei funktionieren.

Ein durchdachtes Design trägt dazu bei, dass deine Navigation übersichtlich ist und deine Benutzer sich über eine gute Erfahrung freuen können. Deshalb habe ich hier die wichtigsten Designtipps für deine Website-Navigation gesammelt.

Sorge für eine gute Sichtbarkeit

Gestalte deine Navigation so, dass alle Menüpunkte gut auffindbar und sichtbar sind. Bedeutet: Die Menüsymbole sollten ausreichend groß sein. Platziere dein Menü außerdem an einer Stelle, an der deine Nutzer danach suchen. Stelle sicher, dass deine Navigation in deinem Design auffällt. Wenn du dein Menü an einer Stelle platzierst, an der die Nutzer ohnehin danach suchen, benötigst du nicht viel Weißraum oder Kontrast. Bei unübersichtlichen Designs solltest du dein Menü allerdings visuell deutlich hervorheben.

Gestalte gut lesbare Menüpunkte

Damit deine Menüpunkte nicht untergehen, solltest du sie gut lesbar gestalten. Dazu gehört auf der einen Seite, dass deine Links sich farblich vom Hintergrund abheben und genau wie der Fließtext lesbar sind (Kontrast). Außerdem sollten deine Nutzer verstehen, dass sie die Links bedienen können. Gestalte interaktive Menüpunkte, die als Links erkennbar sind. Auf Websites mit vielen Elementen, solltest du genügend Abstand (Padding) um deine einzelnen Menüpunkte integrieren.

Positioniere dein Menü an geeigneter Stelle

Bei der Positionierung deiner Navigation solltest du keine Experimente wagen. Etabliert haben sich Menüs oben im Header. Alternativ kannst du ein vertikales Menü auf der linken Seite oder eines in der Fußzeile hinzufügen. Navigationen, die außerhalb dieser Bereiche platziert werden, sind schwer zu finden und führen zu Verwirrung und oft auch Unzufriedenheit bei den Nutzern.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 9

Erkläre deinen Nutzern, wo sie sich befinden

Nicht jeder deiner User gelangt über die Startseite auf deine Website. Das bedeutet: Deine Nutzer wissen im ersten Moment vielleicht gar nicht, wo sie gelandet sind. Mit einem einfachen Mittel kannst du ihnen diese Information bereitstellen. Mit folgenden Elementen kannst du deinen Nutzern erklären, wo sie sich gerade befinden:

  • Logo mit Verlinkung zu deiner Startseite
  • Visuelle Hervorhebung des Menüpunktes, der zur aktuellen Seite gehört
  • linksbündige Überschriften
  • Website-Titel, die oben im Fenster oder Tab erscheinen
  • aussagekräftige URL
  • Breadcrumbs

Nutze Sticky Header

Sticky Header sind eine gängige Methode, bei der die Menüzeile immer am oberen Rand des Bildschirms sichtbar ist – auch während der Nutzer nach unten scrollt. 

Der Vorteil: Sticky Header ermöglichen deinen Nutzern einen schnellen Zugriff auf die Website-Navigation, ohne dass sie erst bis an den oberen Rand der Website scrollen müssen. Du erhöhst die Auffindbarkeit deiner Menü-Elemente und die Wahrscheinlichkeit, dass deine Navigation von den Usern genutzt wird.

Fixed Navigation Webdesign Trend
Wird häufig eingesetzt: Die Navigationsleiste bleibt am oberen Browserrand fix stehen, wie hier bei 99u.com.

Nutze Buttons nur für deine Call to Actions

Buttons sind eine hervorragende Möglichkeit, um Aufmerksamkeit auf wichtige Links zu lenken. Deshalb sollten sie hauptsächlich für Call to Actions verwendet werden. Verwende Buttons in deiner Navigation deshalb sparsam. Ideale Einsatzmöglichkeiten sind zum Beispiel Schaltflächen für Kontakt oder eine Terminbuchung.

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 10
Auch in der Hauptnavigation lassen sich Call-to-Action-Buttons einsetzen.
Konzeptions Kit mit hilfreichen Vorlagen
Konzeptions Kit mit hilfreichen Vorlagen

Die Website-Navigation:
So führst du deine User intuitiv ans Ziel

Zusammenfassend lässt sich sagen, dass die Website-Navigation ein wesentlicher Bestandteil einer gut gestalteten Website ist. Eine klare Navigation fördert die reibungslose Nutzung der Website und führt somit zu einer positiven User Experience. Im Umkehrschluss führt ein unstrukturiertes Menü zu Verwirrung, Orientierungslosigkeit und einer negativen Benutzererfahrung.

Die Website-Navigation ist nach wie vor einer der am meisten unterschätzten Aspekte bei der Erstellung eines Webdesigns. Du weißt jetzt, was für dein Menü wichtig ist und welche Designtipps unbedingt zu beachten sind. Wenn du die Punkte erfolgreich für deine Website umsetzt, freuen sich nicht nur deine Nutzer. Denn auch du darfst dich über zufriedene, wiederkehrende User freuen, die im besten Fall zu Kunden werden.

Weitere spannende Infos zur Navigation findest du im Artikel Menu Design: Checklist of 15 UX Guidelines to Help Users.

Um zu einer klaren und intuitiv gut bedienbaren Navigationsstruktur zu gelangen, kannst du die Templates im Konzeptions Kit nutzen. Diese helfen dir bei vielen weiteren Planungsaspekten deiner Websites weiter:

Überzeugende Website-Navigation: So führst du deine User intuitiv ans Ziel 11

Bewertungsergebnis: 4.8 / 5. | Anzahl der Bewertungen: 53

Über 8.250 sind schon dabei:

Exklusive Webdesign-Inhalte

Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps

Deine Daten sind sicher. Mehr Infos: Beispiele, Datenschutz, Analyse und Widerruf

Optimiere Websites und
deinen Webdesign-Workflow:

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.
Mehr über diese Website und den Autor erfahren   →

Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.

Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…

Nach oben scrollen

Über 8.250 sind schon dabei!

Exklusive Webdesign-Inhalte

Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps: