10 Tipps für gute Website-Navigation – so erstellst du ein reibungsloses Nutzererlebnis
Dieser Artikel wurde im November 2023 aktualisiert.
Es gibt viele Aspekte in deinem Website-Design, die für ein gutes Nutzererlebnis sorgen können. Und es gibt ebenso viele Details, die es ruinieren können, wenn sie übersehen werden.
Wenn du dich mit der Gestaltung einer Website oder Firmenhomepage auseinandersetzt, hast du dir sicherlich bereits über die Inhalte, die visuelle Gestaltung und das Layout Gedanken gemacht. Damit sich Nutzer:innen auf deiner Website gut zurechtfinden, ist die Website-Navigation ein wichtiger Bestandteil, der die Website-Struktur, Funktionalität und die Benutzerfreundlichkeit deiner Website beeinflusst.
Eine leicht zu navigierende Website hilft Nutzer:innen dabei, Inhalte auf deiner Website zu finden, was letztendlich die Verweildauer, Rückkehrrate und die Konversionsrate steigern kann. In diesem Artikel erklären wir dir, wie du eine nutzerfreundliche Website-Navigation erstellst, die deine Besucher:innen ans Ziel führt.
Bist du bereit für deine eigene Website? Dann erstelle sie jetzt.
Inhaltsverzeichnis:
In diesem Video erklären wir dir die Bedeutung einer guten Website-Navigation für die Barrierefreiheit deiner Website.
Was ist eine Website Navigation und wozu brauchst du sie?
Der Begriff Website Navigation bezieht sich darauf, wie sich Website-Besucher:innen auf einer Website und den verschiedenen Unterseiten einer Website bewegen, also wie sie von einer Seite oder einem Abschnitt zum anderen gelangen und die Inhalte finden, die sie suchen.
Die Navigation auf einer Website erfolgt durch eine sinnvolle und nachvollziehbare Organisation von Links auf einer Seite. Aus diesem Grund ist die Website Navigation vielen auch als Menü oder Website Menü bekannt, allerdings können sich Links auch außerhalb eines Menüs befinden, indem zum Beispiel das Logo zur Startseite und ein Warenkorb-Button zum Check-out verlinkt ist.
Gutes Webdesign beginnt mit einer guten Nutzererfahrung (UX), die durch eine gute Navigationsstruktur gewährleistet wird. Da Website-Besucher:innen unterschiedliche Vorlieben haben, was die Navigation betrifft, ist es nicht immer leicht, den richtigen Weg zu planen. Einige geben gern direkt die URL einer Unterseite ins Browserfenster ein, während sich andere lieber durch alle Unterseiten klicken.
Daher sollte sich die Navigationsleiste als Orientierungshilfe auch auf jeder Unterseite deiner Website befinden und gut sichtbar sein. Zudem sollte diese Hauptnavigation intuitiv bedienbar und strukturiert sein.
Lesetipp: Was ist Webdesign? Ein Leitfaden für Einsteiger
Welche Arten der Website Navigation gibt es?
Es gibt mehrere Arten von Navigationsmenüs, die deinen Nutzer:innen dabei helfen, sich mit Leichtigkeit auf deiner Website zurechtzufinden. Viele Websites bieten verschiedene Möglichkeiten, mit denen sich Nutzer:innen durch ihre Seite bewegen können.
Für welche dieser Möglichkeiten du dich entscheidest, bleibt dir überlassen. Wenn du eine Website erstellen willst, jedoch keine Lust hast, dir zu viele Gedanken über die Navigation zu machen, kannst du mit einem Website-Template beginnen, auf dem bereits ein Menü für dich angelegt ist.
Horizontale Navigation
Die horizontale Navigationsleiste ist ein klassisches Menü, das sich normalerweise in der Kopfzeile einer Website befindet und über den Bildschirm verläuft. Horizontale Website Navigation gibt es am längsten und ist daher jedem bekannt.
Dieses Menü listet die wichtigsten Seiten der Website nebeneinander auf und enthält Navigationslinks zu diesen Seiten. Normalerweise bleibt diese Art von Inhaltsverzeichnis auf jeder Unterseite einer Website erhalten. Für noch bessere Übersichtlichkeit, kannst du die betreffende Seite in der Navigationsleiste farblich hervorheben.
Dropdown-Navigation
Dropdown-Menüs gehören zu den vertikalen Navigationsarten. Wenn Nutzer:innen den Cursor darüber bewegen oder auf einen Bereich der Seite klicken, klappt das Dropdown-Menü auf und zeigt die Links in einer Liste an. Daher werden Dropdown-Menüs auch Aufklappmenüs genannt.
Wir empfehlen zwar, deine Menüpunkte auf das Nötige zu begrenzen, aber wenn eine Website viele Inhalte enthält, ist das nicht immer möglich. Hier eignet sich ein Dropdown-Menü, um längere Listen mit Haupt- und Unterkategorien anzuzeigen.
Um zu vermeiden, dass deine Besucher:innen von zu vielen Optionen überfordert werden, kannst du Design-Tools verwenden, um eine Hierarchie innerhalb einer Gruppe von Menüpunkten zu erstellen. Achte auf die Typografie und achte darauf, dass jede Kategorie und Unterkategorie hervorsticht. Du kannst auch zusätzlichen Platz um jede Gruppe herum verwenden, damit Besucher den Unterschied schnell erkennen.
Hamburger-Menü
Das Hamburger-Menü gehört mittlerweile zu den verbreitetsten Navigationsarten auf Websites und ist ebenfalls eine Form der vertikalen Navigation.
Burger Menüs eignen sich besonders gut für die Navigation auf mobilen Websites und werden in Form von drei übereinander gestapelten Linien angezeigt, die an einen Hamburger erinnern. Wird das Menü angeklickt, erscheinen die Links zu den einzelnen Seiten der Website.
Das Hamburger-Menü bietet ein minimales Symbol, das das Design der Website nicht beeinträchtigt und besonders nützlich ist, wenn die Fläche begrenzt ist (wie auf mobilen Geräten).
Seitenleiste
Sidebars oder Seitenleisten sind vertikale Menüs, die auf der linken oder rechten Seite einer Website platziert werden. Sie ähneln der horizontalen Navigationsleiste, befinden sich jedoch an den Seiten und stapeln die einzelnen Menüpunkte nicht neben-, sondern übereinander.
Dein Seitenleisten-Menü kann minimalistisch sein oder ganz im Mittelpunkt stehen und zu einem wesentlichen Bestandteil des Webdesigns werden. Sie verleihen der Seite eine besondere Ästhetik, sind allerdings weniger verbreitet und daher gewöhnungsbedürftig.
Fußzeilen-Navigation
Bei der Fußzeilen- oder Footer- Navigation befinden sich die Links in der Fußzeile deiner Website. Zumeist werden hier jedoch nicht die Hauptmenüpunkte untergebracht, sondern zusätzliche wichtige Informationen wie das Impressum, die AGBs und die Datenschutzerklärung.
Da der Footer viel Platz bietet, ohne das Design einer Website zu beeinträchtigen, eignet er sich gut, um deine Social-Media-Links und alle anderen wichtigen Links hinzuzufügen, die deine Website-Besucher:innen nützlich finden könnten. Wenn du willst, kannst du dort auch das Navigationsmenü oben auf deiner Seite noch einmal anzeigen oder dich auf einige abschließende Links wie die Kontaktseite konzentrieren.
Breadcrumb-Navigation
Bei der Breadcrumb oder Breadcrumb-Navigation (Brotkrümelnavigation - wie bei Hänsel und Gretel) handelt es sich um sekundäre Website Navigation, die es Nutzer:innen ermöglicht, ihre aktuelle Position auf deiner Website nachzuvollziehen. Außerdem können sie über die verschiedenen Hierarchieebenen der Seite zurückspringen.
Bei der Breadcrumb-Navigation wird die Seiten der höheren Hierarchieebene links angezeigt und die Seite der unteren Hierarchieebene rechts. Beide werden durch ein Größer-als-Symbole (>) voneinander getrennt.
Zum Beispiel: Home > Gallery > Kunst
Mega Menü
Das Mega Menü ist Teil der horizontalen Navigation. Es ist mehrstufig und wird verwendet, wenn mehrere Ebenen auf einmal angezeigt werden sollen. Man spricht von einem Mega Menü, wenn sich unter jeder Oberkategorie per Klick ein Dropdown-Menü öffnet, in dem alle Unterkategorien erscheinen.
10 Tipps für die Website-Navigation – Darauf solltest du bei der Erstellung deiner Navigation achten
1. Plane die Navigation mit einer Sitemap
Wenn du eine Website erstellen willst, hilft es, vorausschauend zu denken. Finde heraus, welche Funktionen und Seiten deine Website benötigt und wie die Hierarchie aussehen sollte. Brauchst du eine „Über uns“-Seite, einen Blog oder einen FAQ-Bereich? Welche dieser Seiten ist für die Besucher:innen deiner Website am wichtigsten oder wertvollsten?
Die gängige Praxis, für die Planung der Navigation: Website mit einer Sitemap erstellen. Eine Sitemap sollte eine Liste der wichtigsten Elemente deiner Benutzeroberfläche und der darin enthaltenen Unterkategorien enthalten. Da sie die Grundlage deines Navigationsmenüs bildet, also quasi deine Navigationsstruktur, sollte dir diese Vorgehensweise dabei helfen, klar zu erkennen, welche Seiten für Besucher:innen am wichtigsten sind. Stelle dir dabei die Frage: Wie sollte die Navigation auf der Website aussehen?
Um eine Sitemap zu erstellen, kannst du die Methode wählen, die dir am besten liegt: handschriftlich, als Flussdiagramm oder Diagramm, oder als Tabellenkalkulation.
2. Priorisiere deine Unterseiten
Wenn du dich für deine Hierarchie entscheidest, überlege dir, wo du deine Besucher:innen zuerst hinführen möchtest. Deine Entscheidungen hängen davon ab, welche Art von Website du erstellst, aber hier sind einige Richtlinien, die du beachten solltest:
Wie führst du deine Besucher:innen durch deinen Funnel (Trichter)?
Welche Informationen sind für dich und deine Besucher:innen am wertvollsten?
Was ist das Ziel des Besuchs deiner Website und können Besucher:innen es in deinem Navigationsmenü leicht erreichen?
Deine wichtigsten Seiten sind Teil deiner Hauptnavigation und sollten im Hauptmenü deiner Website angezeigt werden, um sie so zugänglich wie möglich zu machen.
3. Halte dich an Konventionen
Auch wenn es verlockend ist, Regeln zu brechen, gibt es Momente, in denen es am besten ist, sich an Best Practices zu halten. Schließlich gibt es einen Grund, warum Hyperlinks in der Regel blau angezeigt werden oder warum ein Logo normalerweise in einer der oberen Ecken einer Website platziert wird. Diese vertrauten Feinheiten oder Design-Konventionen existieren, weil sie funktionieren.
Du möchtest, dass deine Besucher:innen reibungslos durch deine Website gleiten. Natürlich möchten wir dich ermutigen, die Identität deiner Marke erstrahlen zu lassen (setze gerne Webdesign Trends und ansprechende Design-Elemente ein). Aber wenn es um die Navigation geht, solltest du Klarheit über ästhetische Kühnheit stellen.
4. Verwende Sticky-Menüs
Ein Sticky-Menü (auch als festes (fixed) oder schwebendes (floating) Menü bezeichnet) ist ein Menü, das immer präsent ist, auch wenn deine Besucher:innen scrollen. Das ist besonders wichtig auf Seiten, auf denen man weit herunterscrollen kann, denn du möchtest nicht, dass Besucher:innen den ganzen Weg bis zum Anfang deiner Website zurücklegen müssen, nur um eine andere Seite zu erreichen.
Es gibt auch die Möglichkeit, einen „Zurück nach oben“-Button hinzuzufügen, der Nutzern hilft, Zeit zu sparen. Für welche Lösung du dich entscheidest, hängt vom Design und Layout deiner Website ab. Berücksichtige also die verschiedenen Optionen, wenn du darüber nachdenkst, welche Navigationsart für deine Besucher:innen am besten geeignet ist.
Um ein schwebendes Menü mit Wix zu erstellen, kannst du einfach auf der linken Seite des Editors auf „Hinzufügen“ und dann auf „Menü & Ankerlink“ klicken, um dir eine Menüart aussuchen zu können. Dann klickst du das gewünschte Menü an oder ziehst es auf deine Website.
5. Beschränke die Anzahl der Elemente in deinem Menü
Halte dein Menü so klein wie möglich, mit maximal sechs oder sieben Kategorien, damit Nutzer:innen die Informationen verarbeiten und ihre gewünschten Seiten schneller erreichen können. Auf diese Weise können sie die Informationen einfacher verarbeiten und ihre gewünschten Seiten schneller erreichen.
Wenn deine Website viele Informationen enthält, kannst du sie mit einem Aufklappmenü in Abschnitte unterteilen. Das bedeutet, dass eine Liste der Unterkategorien angezeigt wird, aus denen die Besucher:innen wählen können, wenn sie mit der Maus über einen Menüpunkt fahren.
6. Füge eine Suchleiste ein
Eine gute Methode für die Navigation auf einer inhaltsreichen Website ist die Verwendung von benutzerdefinierten Suchleisten. Dieses Tool kann Nutzer:innen dabei helfen, das zu finden, was sie wollen – und zwar schnell. Eine Suchleiste ist besonders nützlich für Besucher, die weniger Erfahrung mit dem Surfen im Internet haben, da es sich um ein vertrautes Konzept handelt, das sie intuitiv verstehen können.
In Bezug auf die Platzierung deiner Suchleiste ist es eine gute Methode, sie in der Nähe deines Menüs zu platzieren. Genau wie dein Navigationsmenü kann sie sich mitbewegen, wenn Besucher:innen auf deiner Website nach unten scrollen und ihnen so einen einfachen Zugriff auf die Seiten deiner Website zu ermöglichen.
7. Beschrifte dein Menü klar und deutlich
Sobald du weißt, welche Elemente in deinem Menü erscheinen, solltest du strategisch überlegen, wie du sie beschriften kannst. In diesem Fall ist die größte Priorität die Klarheit – also werde nicht zu kreativ und verwende keinen Fachjargon.
Achte darauf, dass dein Menütext klar, beschreibend, auf den Punkt gebracht und nicht zu allgemein gehalten ist. Wenn du dir nicht ganz sicher bist, welche Formulierung besser funktioniert, kannst du zwei verschiedene Versionen ausprobieren und sie testen, indem du A/B-Tests auf deiner Website durchführst.
Außerdem sorgt ein beschreibendes Navigationsmenü nicht nur dafür, dass die Inhalte deiner Website gefunden werden können – es hilft auch Google und anderen Suchmaschinen zu vermitteln, worum es auf deiner Website geht.
8. Verlinke dein Logo mit deiner Startseite
Dies nicht zu tun, ist ein Fehler, der im Webdesign häufig gemacht wird, obwohl er leicht vermieden werden kann. Dein Menü muss nicht das Wort „Startseite“ enthalten (wenn es das tut, kann es tatsächlich veraltet erscheinen). Füge stattdessen oben auf jeder Seite deiner Website dein eigenes Logo hinzu und verlinke es mit der Startseite. Darauf zu klicken wird für die meisten deiner Nutzer:innen eine sehr intuitive Handlung sein (Hallo nochmal, Webdesign-Konventionen).
Oft erscheinen Logos auf der linken Seite in der Kopfzeile einer Website, aber die genaue Platzierung variiert. Das Wichtigste ist, dass dein Logo ganz oben auf deiner Website erscheint, ganz in der Nähe deines Menüs.
9. Zeige den Besucher:innen an, auf welcher Seite sie sich befinden
Niemand mag es, sich orientierungslos zu fühlen – und das Navigieren auf einer Website ist da keine Ausnahme. Du kannst verhindern, dass deinen Besucher:innen das passiert, indem du klar machst, wo sie sich auf deiner Website befinden.
Eine der besten und durchdachtesten Möglichkeiten, dies zu tun, ist das Hinzufügen von Breadcrumbs (Brotkrümeln) zu deiner Website. Die Breadcrumb-Navigation ist eine Methode, die den Standort des Nutzers auf einer Seite in Bezug auf den Rest der Website anzeigt und so leicht zu navigieren ist.
Breadcrumbs werden in der Regel am oberen Rand einer Website als eine Reihe horizontaler Links dargestellt, die durch das Symbol „größer als“ (>) getrennt sind – aber natürlich kannst du Pfeile oder andere Bilder verwenden, die der visuellen Sprache deiner Website entsprechen.
Eine minimalistische Option für Websites mit langen Inhalten ist eine Statusleiste, die den Nutzer:innen anzeigt, wo sie sich auf einer bestimmten Seite befinden.
10. Mache jede Unterseite überall erreichbar
Ein letzter Tipp ist, dass Besucher:innen in der Lage sein sollten, von jeder beliebigen Seite zu jeder gewünschten Seite zu navigieren. Denke daran, dass nicht jeder deine Website über die Startseite erreichen wird. Das bedeutet, dass jede andere Seite, auf der sie landen, eine Verbindung zum Rest deiner Website haben sollte.
Eine einfache Lösung ist es, sicherzustellen, dass alle Seiten über das Menü zugänglich sind und dass jede Seite das Menü enthält. Um die Dinge noch intuitiver zu gestalten, solltest du das Design des Website-Menüs auf jeder Seite einheitlich gestalten und es immer an genau der gleichen Stelle platzieren, um Verwirrung zu vermeiden.
Profi-Tipp: Wenn es um die Nutzererfahrung beim Lesen langer Seiten von Texten geht – wie z. B. lange Blogbeiträge oder Landingpages – sind Ankerlinks ein weiteres praktisches Navigationswerkzeug, das du in deinem Arsenal haben solltest.
Diese Links befinden sich außerhalb deines Navigationsmenüs und werden in der Regel oben auf einer Seite platziert, um Besucher:innen zu helfen, irrelevante Inhalte zu überspringen und zu den Inhalten zu gelangen, an denen sie am meisten interessiert sind.
Fazit: Wie sollte die Navigation auf der Website aussehen?
Eine gute Navigationsstruktur ist wichtig, damit sich deine Besucher:innen auf deiner Website zurechtfinden. Außerdem hilft ihnen eine gute Website Navigation dabei, sich zu orientieren und ihre Ziele (die Conversion) zu erreichen.
Um das zu gewährleisten, sollte deine Website Navigation so simpel und intuitiv wie möglich aufgebaut sein, damit Besucher:innen jederzeit klar ist, wo sie sich befinden und wo sie klicken müssen, um ihr Ziel zu erreichen.
Erstelle ein Navigationsmenü, in dem alle wichtigen Kategorien (Unterseiten) deiner Website enthalten sind, wie zum Beispiel dein Warenkorb, die Startseite, die “Über uns” Seite und dein Blog, und platziere es gut sichtbar in der Kopfzeile oder am Rand deiner Website.
Wir empfehlen dir, das Menü jederzeit und von überall aus sichtbar und zugänglich zu machen.
Zusätzliche Informationen wie Social-Media-Links, AGBs und das Impressum können in die Fußzeile.
Verwende klare und kurze Ankertexte, die erkennen lassen, wohin die Links führen.
Vermeide es, deine Navigation zu stark zu überfüllen, sowie unnötige oder defekte Links.
Nutze eine Website-Vorlage, die dir dabei hilft, deine Navigation zu planen.
Häufig gestellte Fragen zum Thema Webiste Navigation
Was ist die Navigation einer Website?
Die Website-Navigation bezieht sich darauf, wie sich Besucher:innen auf einer Website und den verschiedenen Unterseiten bewegen. Es umfasst die Organisation von Links auf einer Seite, oft in Form eines Menüs, um den Benutzer:innen die Navigation und das Finden von Inhalten zu erleichtern.
Welche Arten der Navigation gibt es?
Es gibt verschiedene Arten der Website-Navigation, darunter:
Horizontale Navigation: Ein klassisches Menü in der Kopfzeile, das sich über den Bildschirm erstreckt.
Dropdown-Navigation: Aufklappmenüs, die erscheinen, wenn Nutzer:innen den Cursor darüber bewegen oder auf einen Bereich klicken.
Hamburger-Menü: Eine Form der vertikalen Navigation, oft für mobile Websites, angezeigt als drei übereinander gestapelte Linien.
Seitenleiste: Vertikale Menüs auf der linken oder rechten Seite der Website.
Fußzeilen-Navigation: Links in der Fußzeile, enthält oft rechtliche Informationen und Social-Media-Links.
Breadcrumb-Navigation: Eine sekundäre Navigation, die den Standort der Nutzer:innen auf der Website anzeigt.
Mega Menü: Ein mehrstufiges Menü, das mehrere Ebenen auf einmal anzeigt.
Wie nennt man die Navigationsleiste noch?
Die Navigationsleiste ist auch als "Menü" oder "Website-Menü" bekannt. Es dient als Orientierungshilfe für die Benutzer:innen und ermöglicht die Auswahl verschiedener Seiten oder Abschnitte auf der Website.
Was bringt die Website Navigation für SEO?
Eine gute Navigation ist wichtig, da eine schlechte Navigation zur Folge haben kann, dass Besucher:innen eine Website schnell wieder verlassen. Eine erhöhte Absprungrate (bounce rate) sendet negative Signale an Suchmaschinen wie Google und kann dazu führen, dass sich das Ranking einer Webiste verschlechtert.
Jetzt bist du bestens über das Thema Website Navigation infoermiert und kannst deine eigene Website erstellen. Wir wünschen dir viel Erfolg.
Alexandra Eger
Content-Managerin
