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.
Inhaltsverzeichnis
- Was genau ist die Website-Navigation?
- Warum ist die Navigation einer Website überhaupt so wichtig?
- Informationsarchitektur und Navigation: Was ist der Unterschied?
- Tipps für eine überzeugende, intuitive Website-Navigation
- Designtipps für deine Website-Navigation
- Die Website-Navigation: So führst du deine User intuitiv ans Ziel
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
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.
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.
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.
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“.
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.
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.
Mehr dazu im Artikel Drop-Down-Menü in Websites – 11 Tipps zur Gestaltung.
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.
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.
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.
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.
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.
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.
Bei der Inhaltsplanung hilft die auch eine Sitemap. Erfahre hierzu mehr im Artikel Sitemap erstellen: So strukturierst du deine Website effektiv.
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:
