In diesem Artikel werde ich dir ausführlich erklären, was eine Navigation ist und warum diese für den Erfolg einer Webseite so wichtig ist. Außerdem wirst du unterschiedliche Navigationsstrukturen kennenlernen von der Hauptnavigation bis zu Footernavigation.

Am Ende dieses Artikel hast du dann noch die Möglichkeit einen Navigationscheck zu machen, so kannst du überprüfen, ob die Navigationsstruktur deiner Website verbesserungsbedürftig ist.

Außerdem findest du am Ende eine Zusammenfassung mit allen wichtigen Info’s zu Navigationsstrukturen bei Webseiten.

Die Navigationsstruktur – den Erwartungen der Nutzer entsprechen

Eine einfache und deutliche Navigation ist sehr wichtig für den Erfolg deiner Website. Ist die Navigationsstruktur kompliziert, verwirrt sie die Nutzer und sie verlassen deine Website schnell wieder. Deshalb ist eine übersichtliche Navigationsstruktur ein absolutes MUSS. Bei der Erstellung der Navigationsstruktur solltest du einige grundlegende Aspekte beachten… aber zu erst einmal was ist eine Navigation?

Navigationsstruktur – Was ist eine Navigation?

Der Begriff der Navigation wird im World Wide Web und von Webseiten benutzt, um Wege auf Webseiten kenntlich zu machen, über die Nutzer auf die unterschiedlichen Bereiche deiner Webseite gelangen können.

Navigationsstruktur – Warum ist eine gute Navigation wichtig?

Wenn eine Navigation kompliziert aufgebaut oder zu überladen ist, kann dies den Nutzer verwirren und ablenken. Wenn der Besucher nicht schnell findet, was er sucht wird er die Webseite innerhalb von wenigen Sekunden wieder verlassen. Aus diesem Grund gilt es das Thema der Navigation nicht zu vernachlässigen, denn es ist eines der wichtigsten Elemente einer Website.

Das Zauberwort in diesem Zusammenhang heißt: Nutzerfreundlichkeit bzw. -führung. Das Ziel einer Navigation ist den Besucher deiner Website beim Finden von Informationen zu unterstützen.

Wie die Inhalte deiner Webseite strukturiert sind, hat einen sehr großen Einfluss darauf, was für einen Eindruck der Besucher von deiner Webseite bekommt. So kannst du beispielsweise eine Struktur erstellen, welche produktfixiert ist oder eine, die dein Unternehmen in den Mittelpunkt stellt.

 

Unternehmen steht im Mittelpunkt

 

Produkte bzw. Leistungen stehen im Mittelpunkt

Vertikale und horizontale Navigation

Die klassischen Navigationstypen, welche sich im Laufe der Zeit durchgesetzt haben ist die vertikale und die horizontale Navigation. Diese Typen finden sich entweder vertikal im linken Bereich der Homepage oder horizontal im oberen Bereich.

Diese beide Varianten haben Vor- und Nachteile: Bei der horizontalen Navigationsleiste ist der Platz sehr schnell ausgeschöpft, somit kann diese nicht einfach erweitert werden. Bei dieser Navigation wird häufig mit kurzen Begriffen und/oder Symbolen gearbeitet.

 

Vertikale Navigationsstruktur

Die vertikale Navigationsstruktur hingegen kann beliebig erweitert werden (was allerdings trotzdem nicht unbedingt empfehlenswert ist, um eine Übersichtlichkeit gewährleisten zu können). Der Nachteil bei dieser Struktur ist allerdings, dass die Gestaltung, aufgrund der schmalen Breite eingeschränkt.

 

Horizontale Navigationsstruktur

Primäre und sekundäre Navigation

Vertikale und horizontale Navigationen werden häufig in Kombination angewendet. Dabei unterscheidet man häufig auch in primärer und sekundärer Kombination. Die primäre Navigation beinhaltet dabei die klassischen Hauptmenüpunkte, wie „Unternehmen“, „Leistungen“ und „Kontakt“, wenn der Nutzer nun auf einen dieser Punkte klickt, erscheinen im die untergeordneten Punkte in einer sekundären Navigation. Hier können dann beispielsweise einzelne Leistungsgruppen aufgezählt werden.

Footer-Navigation

Neben der Hauptnavigation haben viele Webseiten mittlerweile auch eine Footer-Navigation. Aber wo befindet sich diese und was hat es damit auf sich?

Die Footer-Navigation befindet sich am unteren Ende der Webseite und die Inhalte können je nach Webseite stark variieren, denn sie ist für verschiedene Einsatzzwecke geeignet. So können in der Footer-Navigation alle Punkte des Hauptmenüs noch einmal aufgeführt werden oder nur die wichtigsten Punkte der Hauptnavigation. Eine andere Möglichkeit wäre beispielsweise nur einen Haupt-Menüpunkt, wie zum Beispiel die Leistungen in den Footerbereich zu integrieren und entsprechend auch die Unterpunkte darzustellen.

 

Footer-Navigationsstruktur

Drop-down-Menü

Das Drop-down-Menü ist der Platzsparer und den Menüs, aber wie funktioniert dieses Menü? Wenn der Besucher auf einen Menüpunkt klickt, dann öffnet sich oder besser gesagt dann klappt das Menü runter („drop down“). Der Vorteil dieser Menüstruktur ist, dass so mehrere untergeordnete Menüpunkte unter einem übergeordneten Punkt zusammengefasst werden können.

Was man unbedingt bei dem Drop-down-Menü beachten sollte ist, dass man nicht mehr als zwei Navigationsebenen anwenden sollte, dies führt zu einer sehr schlechten Nutzerfreundlichkeit und sollte unbedingt vermieden werden. Wendet man diese Menüform allerdings richtig an, dann kann dies ein deutlicher Mehrwert für den Besucher deiner Webseite sein. Allerdings sollte du beachten das Drop-down-Menüs für mobile Webseiten nur bedingt geeignet sind.

Sieben-plus/minus-zwei-Regel

George A. Miller hat im Jahr 1956 das Kurzzeitgedächtnis untersucht und ist zu dem Entschluss gekommen, dass das menschliche Gehirn im Kurzzeitgedächtnis nur 7 (plus/minus 2) Einheiten gleichzeitig erfassen kann. Deshalb spricht man auch von der Millerschen Zahl.

Inzwischen wissen wir, dass die Wahrnehmung von vielen Faktoren beeinflusst wird, zum Beispiel der Länge und der Dauer der Informationsaufnahme, so kann diese Regel nicht eins zu eins auf das Webdesign angewendet werden. Trotzdem wird diese Regel immer wieder im Zusammenhang mit der Navigationsstruktur genannt, allerdings sollte man dies viel mehr als eine Empfehlung und weniger als eine Regel sehen.

3-Klick-Regel

Die 3-Klick-Regel beinhaltet, dass alle Informationen die eine Webseite beinhaltet innerhalb von 3-Klicks erreichbar sein sollten. Aber auch hier gilt diese Regel mehr als eine Empfehlung, denn wenn der Besucher das Gefühl hat er ist auf dem richtigen Weg, dann ist die Anzahl der Klicks nicht von Bedeutung.

Alternative Navigationswege

Neben den klassischen Navigationswegen gibt es noch eine Vielzahl an kleineren Navigationswegen, die ebenfalls die Benutzerfreundlichkeit erhöhen können. Diese alternativen Navigationswege können unter anderem Querverlinkungen und Breadcrumbs sein und auf diese werde ich nun im Folgenden eingehen.

Querverlinkungen

Die Inhalte der Seiten sollten nicht nur über das Hauptmenü verlinkt sein, sondern auch über die Inhalte selbst. Sprich wenn auf einer Seite über etwas gesprochen wird, worüber auf einer anderen Seite bereits ein ausführlicher Text oder Blogartikel besteht, dann sollte diese Seite an dieser Stelle unbedingt verlinkt werden. Wichtig ist dabei, dass der Link optisch auch als Link deutlich wird und klar macht wohin er führt. Diese interne Verlinkung vereinfacht nicht nur die Handhabung für den Besucher, sondern ist ebenfalls für die Suchmaschinenoptimierung von Vorteil.

Breadcrumbs – Die Brotkrümelnavigation

Sollte deine Webseite sehr umfangreich sein, dann könntest du auch mit Breadcrumbs oder der sogenannten Brotkrümelnavigation arbeiten. Man kann diese Navigation unter anderem zwischen dem Hauptmenü und dem Inhaltsbereich platzieren. Der Besucher soll seine aktuelle Position und den Weg, wie er auf die jetzige Seite gekommen ist, erkennen. In welchem Fall sollte auf diese Breadcrumbnavigation verzichten werden? Auf die Brotkrümel sollte verzichten werden, wenn diese Punkte auch ohne diese Navigation mit nur einem Klick erreicht werden könnten.

Der kurze Navigationscheck – Ist meine Navigationsstruktur gut?

Um zu checken, ob die Navigationsstruktur deiner Webseite gut ist, solltest du dir einige Checkfragen stellen. Diese Fragen sollen dir helfen die Navigation deiner Webseite schnell zu analysieren und bewerten zu können. Los gehts!

Existiert ein logisches Navigationskonzept?

Ein logisches Navigationskonzept ist ein gut nachvollziehbares, schlüssiges und intuitiv verständliches Konzept, welches sehr wichtig für den Erfolg deiner Webseite ist. Um zu analysieren, ob dein Navigationskonzept logisch ist, solltest du dir folgende Fragen stellen:

• Besitzt deine Webseite eine Seitensuchfunktion?
• Ist die Menüstruktur bereits auf den ersten Blick verständlich?
• Sind Links deutlich zu erkennen und an der richtigen Stelle gesetzt?
• Sind die einzelnen Navigationspunkte logisch, sprich weiß der Nutzer, was unter diesen Schlagwörtern zu finden ist?

Ein ganz wichtiger Punkt ist, dass die Hauptnavigation für den Nutzer selbsterklärend ist. Verwende nur einfache und sofort verständliche Begriffe.

Ist die Hauptnavigation zu überfrachtet, zu komplex oder zu leer?

Im zweiten Schritt solltest du dich fragen ob deine Hauptnavigation zu überfrachtet, zu komplex oder vielleicht auch zu leer ist. Die Hauptnavigation sollte nur die wichtigsten Inhalte der Webseite darstellen, wenn sie sehr viele Unterseiten hat, dann solltest du diese noch einmal in übersichtlichen Unterkategorien bzw. Unterpunkten ordnen. Außerdem sollten lange Wörter vermieden werden. Denn sie verlängern die Navigationsleiste nur ungemein, was insbesondere bei einer horizontalen Navigationsleiste vermieden werden sollte, da dort sowieso nur wenige Punkte Platz haben. Hierfür ist eine passende Softwareentwicklung notwendig.

Zusammenfassung – Alles auf einen Blick

Navigationsstruktur – Hauptnavigation

• Einzelnen Punkte gliedern
• Die wichtigsten Punkte als erstes
• Die Hauptnavigation sollte auf jeder Seite sichtbar & immer an der gleichen Stelle sein
• Möglichst wenig Hauptpunkte

Navigationsstruktur – Sekundärnavigation

• Alle Punkte die es nicht ins Hauptmenü geschafft haben sollten hier hinein
• Aber auch hier gilt: Weniger ist mehr
• Die Unterpunkte sollten, wenn möglich, nicht weiter verschachtelt werden
• Die Hauptnavigation sollte auch wenn der Nutzer gerade im Sekundärmenü ist immer sichtbar sein

Navigationsstruktur – Navigation innerhalb einer Seite

• Einzelne Seiten sollten gegenseitig aufeinander verlinken (aber nur wenn sie thematisch auch passen)
• Bei sehr langen Texten: Am Ende der Seite einen Anker zum Anfang der Seite setzen
• Bei sehr langen Texten: Zwischenüberschriften einfügen und auch dort einen Anker setzen

Sonstiges

• Vermeide unbedingt, nur Grafiken oder Icons als Menüpunkte zu verwenden, du kannst sie aber ggf. als Unterstützung zum Begriff nutzen.
• Egal bei welcher Navigation, denk daran es gilt immer: Weniger ist mehr!