adesso Blog

Menschen von oben fotografiert, die an einem Tisch sitzen.

Warum ist die Navigation so wichtig?

Jede Website und jede Softwareanwendung benötigen eine Navigation, die den Usern zeigt, wo sie gerade sind und wo die gesuchten Informationen zu finden sind. Vielleicht ist euch schon mal eine Seite aufgefallen, die euch zum Verzweifeln gebracht hat, weil ihr einfach nicht dorthin gekommen seid, wo ihr hinwolltet? Und wenn die Website dann nicht mal eine ordentliche Suchfunktion gehabt hat, habt ihr genervt und unzufrieden die Seite verlassen. Das möchten die Websitebetreiber natürlich verhindern und deshalb haben sie eine Navigation eingebaut. Aber vielleicht ist diese nicht die richtige Wahl für den Seiteninhalt gewesen oder die Navigation ist erst nach dem Seitenaufbau entstanden und sozusagen historisch gewachsen. Wichtig für jede Website und jede digitale Anwendung ist, dem User stets folgende Informationen zu geben:

  • Wo bin ich gerade und wie bin ich hierhergekommen?
  • Wie komme ich wieder zurück oder wo geht es weiter?
  • Welche weiteren Informationen kann ich hier noch erhalten?

Die Navigation ist ein wesentlicher Bestandteil eurer Anwendung und will wohl überlegt und durchdacht sein. Sie ist ein Inhaltsverzeichnis eurer Website oder Anwendung und kann als einfache Liste dargestellt werden oder als Menü. Sie sorgt für einen guten und schnellen Überblick und gibt preis, wo welche Funktion steckt und was den User auf der Seite alles erwartet.

Doch wie erreicht ihr das und auf was solltet ihr unbedingt achten? Um diese Fragen zu beantworten, schauen wir uns im Folgenden an, welche verschiedenen Arten von Navigation es gibt.

Die horizontale Navigation

Die bekannteste und am häufigsten verbreitete Navigation ist die horizontale (waagerechte) Navigation. Sie ist besonders für kleinere Seiten geeignet, da sie nur begrenzt Elemente aufnehmen kann. Dieses Menü ist von jeder Seite aus erreichbar und kann links, mittig oder rechts platziert werden. Manchmal geht sie auch über die gesamte Breite der Website.

Damit der User sie immer sieht, kann sie auch fixiert werden. Somit wird sie auch dann angezeigt, wenn der Seiteninhalt gescrollt wird. Wird das horizontale Menü um ein Drop-down-Menü ergänzt, lassen sich viele weitere Einträge darstellen.

Die vertikale Navigation

Die ersten Webseiten hatten meist eine vertikale (senkrechte) Navigation, da diese damals die beliebteste Art war, den User durch eine Seite zu führen. Heute sieht man diese Form der Navigation eher bei älteren Seiten oder als zusätzliches Menü (Secondary Menu) in Onlineshops. Diese Trendverschiebung ist dem immer breiter werdenden Websiteinhalt geschuldet. Die meisten Websites sind über die gesamte Bildschirmbreite aufgebaut und eine seitlich angesiedelte Navigation würde hier zu viel Platz verschwenden.

Das Drop-down-Menü

Das Drop-down-Menü ist längst keine Neuerung mehr. Viele Leute finden es sehr praktisch, andere nur nervig. Es bietet zusätzlichen Platz für weitere Menüpunkte, die in der Hauptnavigation (egal ob horizontal oder vertikal) nur für Unübersichtlichkeit sorgen würden. Angesteuert wird ein Drop-down-Menü via Mouseover oder Klick auf einen Link in der Hauptnavigation. Anschließend öffnet sich eine tiefere Ebene mit weiterführenden Seiten, Links oder Sprungmarken.

Der große Bruder des Drop-down-Menüs ist das sogenannte Mega-Drop-down-Menü. Diese Menüerweiterung wird bei einer sehr großen Navigation eingesetzt. Vorreiter sind hier Onlineshops, die ein enorm großes Sortiment haben. Bringt die Anzahl der Drop-down-Punkte das Menü an seine Grenzen und lässt es unübersichtlich wirken, wird ein Mega-Drop-down-Menü gebaut. Das Menüfenster wird größer und bietet deshalb mehr Platz für verschiedene Kategorien und deren Unterkategorien. So soll dem User in übersichtlicher Form ein Überblick über alle Produkte gegeben werden.

Die Off-Canvas-Navigation

Eine weitere Navigationsform ist das Off-Canvas-Menü. Hier ist das Menü für den User, bis zur direkten Ansteuerung, komplett hinter einem Icon oder Button versteckt. Diese Form ist hauptsächlich auf mobilen Endgeräten verbreitet, zum Beispiel als Hamburger-Menü. In Desktopanwendungen gibt es das Off-Canvas-Menü auch, aber momentan nicht so oft. Da der User die Navigation zunächst suchen und auch finden muss, ist diese Form bislang noch etwas umstritten.

Die kleine Schwester des Off-Canvas-Menüs ist das sogenannte Page Overlay. Hier wird die Navigation auf dem gesamten Bildschirm angezeigt. Sie lagert sich also über die gesamte Seite und befindet sich nicht nur auf einer kleinen Ebene an der Seite oder im Header.

Zusammengefasst – die Pros und Kontras der Navigationsformen

Horizontale Navigation

Pro

  • Kurze Klickwege
  • Großer Zuspruch aufgrund der bekannten Positionierung
  • Beste Sichtbarkeit durch Mitscrollen
  • Platzsparend

Kontra

  • Begrenzte Anzahl an Links möglich
  • Ein zusätzliches Drop-down-Menü überdeckt den Websiteinhalt
Vertikale Navigation

Pro

  • Kein Limit für die Anzahl der Menüpunkte
  • Übersichtliche Struktur mit mehreren Navigationsebenen und Kategorien möglich

Kontra

  • Fordert viel Platz
  • Kann schnell überladen wirken und den User verwirren
  • Aufgrund der breiten Websites kann die Navigation ins Abseits geraten
Drop-down-Menü

Pro

  • Bietet viel Platz für Unterkategorien
  • Ist jederzeit erweiterbar
  • Mehrere Ebenen sind möglich

Kontra

  • Wirkt schnell unübersichtlich
  • Verdeckt den Websiteinhalt beim Auswählen
  • Bedienbarkeit kann für User schwierig werden, wenn Flyouts in das Drop-down-Menü eingebaut werden
  • Kann schnell überladen wirken
Mega-Drop-down-Menü

Pro

  • Alle Seiten sind auf einen Blick sicht- und anklickbar
  • Bietet viel Platz und ist erweiterbar
  • Visuelle Strukturierung ist möglich
  • Icons oder kleine Bilder können eingebaut werden

Kontra

  • Kann schnell unübersichtlich werden
  • Muss für verschiedene Websitebreiten angepasst werden
  • Erfordert eine gut strukturierte Kategorisierung
Off-Canvas-Menü

Pro

  • Benötigt am wenigsten Platz
  • Erweiterungen sind möglich
  • Kein Unterschied zwischen mobiler und Desktop-Variante
  • Visuelle Strukturierung ist möglich
  • Icons oder kleine Bilder können eingebaut werden

Kontra

  • Kann schnell übersehen werden
  • Mehr Klicks notwendig
  • Erfordert immer eine Aktion des Users, um die Navigation zu erreichen

Acht Tipps für die Navigation eurer Website

1. Platziert die Navigation an einem gewohnten Ort

User lieben es, schnell den Überblick über eine Website zu bekommen. Die Navigation suchen zu müssen, wäre frustrierend und verschwendet unnötig Zeit. Helft dem User deshalb, sich möglichst schnell zurechtzufinden, und platziert eure Navigation an einem für die Nutzerin und den Nutzer vertrauten Ort.

2. Lasst eure Navigation ein Teil eurer Website sein

Räumt der Navigation so viel Platz ein, dass sie gut wahrgenommen werden kann und sich deutlich vom Inhalt eurer Website absetzt, ohne fremd zu wirken.

3. Achtet auf gute Lesbarkeit

Die einzelnen Navigationselemente sollten gut lesbar und mit ausreichend Abstand zueinander dargestellt werden. Auch das Einrücken von Unterpunkten ist wichtig, genauso wie die Hervorhebung des Menüpunktes, an dem sich der User aktuell befindet. Wie auch bei den anderen Websiteinhalten sollte die Schriftgröße und -art der Navigationselemente so gewählt sein, dass sie leicht lesbar sind.

4. Vergesst nicht die tastenbasierte Navigation

Da nicht alle Menschen mit einer Maus oder einem Touchpad navigieren können, solltet ihr auf jeden Fall sicherstellen, dass der User auch per Tastatur durch eure Website navigieren kann.

5. Gestaltet die Navigation interaktiv

Schreibt euer Menü nicht als Fließtext. Hebt deutlich hervor, dass die einzelnen Menüpunkte anklickbar sind, indem ihr Hovertexte oder -effekte nutzt.

6. Strukturiert sinnvoll

Große Menüs brauchen verständliche und sinnvolle Kategorien. So unterteilt ihr lange Menülisten und helft dem User, sich besser zurechtzufinden. Auch Bilder oder Symbole können, sofern sie sinnvoll eingesetzt sind, zu einem schnelleren Überblick verhelfen.

7. Auch Mobil-User wollen navigieren können

Prüft, ob eure Navigation auch auf verschiedenen mobilen Endgeräten funktioniert und lesbar ist. Häufig ist es notwendig, ein separates mobiles Menü zu erstellen. Horizontale Desktopmenüs werden hier meist zu vertikalen mobilen Menüs. Einige Elemente werden eventuell komplett ausgeblendet oder Kategorien neu sortiert. Nehmt euch die Zeit, die Navigation ordentlich zu überarbeiten, und helft dem User, ohne Frust eure Anwendung bedienen zu können.

8. Legt Brotkrumen aus, um den Weg zurückzufinden

Bindet das sogenannte Breadcrumb-Menü auf jeder Seite ein, um den Usern stets ihre aktuelle Position zu zeigen, also wie sie dorthin gekommen sind, und macht die einzelnen „Brotkrumen“ anklickbar, sodass man auch wieder schnell zurückkommt.

Fazit

Es gibt viele verschiedene Möglichkeiten, User durch eine Website oder Anwendung zu navigieren. Welche Variante hier die beste ist, hängt von eurer Zielgruppe, euren Anforderungen und dem darzustellenden Inhaltsumfang ab. Prüft mit Usertests, ob alle Inhalte gefunden werden und gut zugänglich sind. Findet sich euer User gut zurecht oder hat er Probleme, zu navigieren oder einen bestimmten Content zu finden? Nehmt euch genügend Zeit, euer Menü zu planen, und überstürzt nichts. So werdet ihr am Ende mehr zufriedene User und dadurch mehr Erfolg haben.

Bild Eva-Maria  Kynast

Autorin Eva-Maria Kynast

Eva-Maria Kynast ist seit viereinhalb Jahren für adesso als Consultant tätig und arbeitet seither in verschiedenen Projekten der GEMA, des Statistischen Bundesamts und des TÜV SÜD. Ihren Arbeitsschwerpunkt bilden hierbei das Requirements Engineering und UX Design. Darüber hinaus ist sie Trainerin der adesso-Schulung „Usability und User Experience Design Basics“.

Diese Seite speichern. Diese Seite entfernen.