Unter der Navigation versteht man im Bereich der Webseiten die Elemente, welche für die Bewegung auf einer Webseite verantwortlich sind. Über eine Navigation lassen sich die einzelnen Bereiche und Inhalte einer Webseite aufrufen und bei bestimmten Formen der Navigation auch die aktuelle Position innerhalb der Seitenstruktur ablesen. Die Hauptnavigation ist dabei im Regelfall auf allen wichtigen Seiten erreichbar und erscheint häufig im oberen Bereich oder seitlich. Auf kleinen Bildschirmen wird sie oft platzsparend über ein aufklappbares Menü angeboten.
Geschichte der Navigation
Zu Beginn des Internets beziehungsweise zu Beginn der privaten Webseiten wurde die Navigation vor allem durch einfache Schrift mit enthaltenen Verlinkungen umgesetzt. Diese Form der Navigation war dabei oftmals unübersichtlich und bot dem Besucher einer Webseite nur bedingt eine gute Orientierung. Mit der weiteren Verbreitung schnellerer Internetzugänge änderte sich auch die Form der Navigation. Die einzelnen Punkte der Navigation wurden oftmals durch entsprechend bezeichnete Bilder realisiert, welche sich beim Überfahren mit der Maus veränderten. Diese Navigationen sorgten für eine deutlich bessere Unterteilung der Webseiten, erforderten allerdings von den Webmastern bei der Erstellung neuer Navigationspunkte immer die Erstellung neuer Grafiken. Auch unterschiedliche Bildschirmauflösungen sorgten bei diesen Navigationen auf Webseiten oftmals für Schwierigkeiten, da die Bilder der Navigation bei geringer Auflösung einen Großteil der Webseite blockierten. Erst mit der weiten Verbreitung von CSS und der Weiterentwicklung von HTML ließen sich moderne Formen der Navigation flexibler erstellen. Die grafische und optische Gestaltung dieser Navigationselemente wurde nun über HTML und CSS umgesetzt, sodass sich die Navigation an unterschiedliche Bildschirmgrößen anpassen konnte.
Nicht nur die Form der Navigation, sondern auch deren Einbindung auf den Webseiten ist einem ständigen Wandel unterworfen. Während bei früheren Webseiten die Navigation auf jeder einzelnen Unterseite neu eingefügt werden musste, war eine Veränderung und Aktualisierung der Navigationselemente oftmals nur umständlich möglich. Im weiteren Verlauf wurde die Navigation oftmals in Frames ausgelagert, sodass sie nur noch an einem zentralen Ort geändert werden musste, um auf allen Seiten in neuer Form erscheinen zu können. Dank moderner Content-Management-Systeme, wiederverwendbarer Komponenten und der Gestaltung über CSS lassen sich heute die einzelnen Navigationselemente leichter verändern und erweitern, ohne dass jede Seite einzeln bearbeitet werden muss.
Moderne Navigation auf Webseiten
Die Hauptnavigation befindet sich heute häufig im Kopfbereich einer Webseite oder in einer seitlichen Leiste. Welche Position sinnvoll ist, hängt vom Layout, vom Umfang der Inhalte und von den verwendeten Geräten ab. Die Navigation enthält in der Regel die Hauptkategorien der Webseite. Unter Zuhilfenahme von Unterkategorien, welche bei Bedarf aus der Navigation aufgeklappt und an dieser positioniert werden können, kann auch eine komplexe Seitenstruktur übersichtlich dargestellt werden. So ist es möglich, unter verschiedenen Oberbegriffen eine Vielzahl an Verlinkungen auf der eigenen Seite darzustellen und die Orientierung für den Benutzer zu erleichtern. Gerade bei breit aufgestellten Webseiten hat sich diese Form der Navigation bewährt. In der Regel werden diese Unterkategorien über aufklappbare Menüs ermöglicht. Bei der horizontalen Navigation klappen dabei die weiteren Kategorien nach unten aus und ermöglichen so einen direkten Zugriff auf die gewünschten Webinhalte. Bei der vertikalen Navigation erweitert sich die Navigation entweder ebenfalls nach unten, um die entsprechenden Unterpunkte anzuzeigen, oder es wird direkt an das jeweils gewählte Navigationselement ein weiterer Navigationsblock angeschlossen.
Eine moderne Navigation sollte nicht nur mit der Maus, sondern auch per Tastatur und auf Touchscreens bedienbar sein. Aussagekräftige Linktexte, deutlich erkennbare Zustände und eine nachvollziehbare Hierarchie helfen dabei, Ziele schnell zu erfassen. Aufklappbare Bereiche dürfen wichtige Inhalte zudem nicht so verbergen, dass sie ohne die notwendige Interaktion oder Technik gar nicht erreichbar sind.
Beispiel: Eine einfache Hauptnavigation lässt sich mit nativen HTML-Elementen auszeichnen:1
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/produkte/">Produkte</a></li>
<li><a href="/kontakt/">Kontakt</a></li>
</ul>
</nav>Das nav-Element kennzeichnet einen Navigationsbereich, die Liste gruppiert seine Ziele. Die regulären Links sind auch per Tastatur erreichbar. Aufklappbare Untermenüs würden zusätzliche Bedienlogik und Zustandskennzeichnung benötigen.
Breadcrumb-Navigation
Eine besondere Form der Navigation hat sich als Folge oftmals komplex aufgebauter Webseiten gebildet. Die Breadcrumb- oder auch Brotkrümel-Navigation besteht dabei aus einer einzelnen Navigationsleiste, welche oftmals oberhalb des eigentlichen Inhaltes angezeigt wird. Diese Navigation zeigt die jeweilige Position der angezeigten Seite an und listet die übergeordneten Ebenen auf. So kann der Benutzer nicht nur auf einen Blick die jeweilige Kategorie erkennen, sondern auch durch einen Klick auf eines der angezeigten Elemente direkt zu dieser Ebene springen. Der Umweg über die Hauptnavigation und die darin enthaltenen Unterkategorien entfällt somit für den Benutzer. Diese Form der Navigation hat sich vor allem beim Einsatz von Content-Management-Systemen, Onlineshops und Foren bewährt, da hierbei die Anzahl von Kategorien und Seiteninhalten eine enorm hohe Dichte erreichen kann. Um diese Informationsdichte für den Besucher transparent und leicht durchschaubar zu machen und die Bewegung auf der Seite zu erleichtern, kann eine solche Breadcrumb-Navigation dem Besucher ein nützliches Hilfsmittel sein. Durch die schnelle und übersichtliche Erreichbarkeit der jeweiligen Punkte kann eine solche Navigation die Benutzerfreundlichkeit einer Webseite deutlich steigern.
Navigation als wichtiges Element einer Webseite
Egal welche Form der Navigation vom Webmaster gewählt wird, der direkte Zugriff und die Verfügbarkeit der Navigationselemente gehören zu den entscheidenden Bestandteilen einer Webseite. Nur durch eine durchdachte und schlüssige Navigation lassen sich die Besucher einer Webseite zuverlässig auf die jeweiligen Unterseiten leiten. Eine Webseite mit vielen Inhalten, aber einer unübersichtlichen oder technisch fehlerhaften Navigation erschwert es Besuchern, passende Inhalte zu finden und wiederkehrend zu nutzen. Aus diesem Grund sollten bei der Konzeption einer Webseite die Form und der Aufbau der Navigation bereits am Anfang berücksichtigt werden, damit die Seitenstruktur und die Navigation aufeinander abgestimmt werden können. Dank einer guten Vorausplanung lassen sich die Benutzbarkeit und die Nutzerfreundlichkeit einer Webseite deutlich steigern.
Auch für die Suchmaschinenoptimierung ist die Navigation relevant: Interne Links unterstützen Suchmaschinen dabei, Seiten zu entdecken, Zusammenhänge zu erkennen und wichtige Bereiche innerhalb der Website einzuordnen. Navigationspunkte sollten deshalb auf erreichbare URLs verweisen und mit kurzen, beschreibenden Linktexten versehen sein.
Zusammenfassung
Die Navigation auf Webseiten bezeichnet die interaktiven Elemente, die es Nutzern ermöglichen, sich durch die Website zu bewegen. Die Hauptnavigation ist in der Regel auf den wichtigen Seiten erreichbar und liegt häufig im oberen oder seitlichen Bereich der Seite.
Die Geschichte der Web-Navigation hat sich erheblich entwickelt. Früher basierte sie auf einfachen Textlinks, später wurden häufig grafische Elemente und Bilder verwendet. Moderne Navigationssysteme profitieren von HTML, CSS und responsiven Layouts. Dies ermöglicht Webmastern eine leichtere Anpassung und sorgt für eine bessere Nutzererfahrung auf unterschiedlichen Geräten.
Die aktuelle Positionierung der Navigation hängt vom jeweiligen Layout und Nutzungskontext ab. Navigationssysteme enthalten meist Haupt- und Unterkategorien, um eine übersichtliche Seitenstruktur zu ermöglichen. Auf mobilen Geräten werden Menüs häufig ein- und ausgeklappt.
Breadcrumb-Navigation ist eine spezielle Form, die dem Nutzer seine aktuelle Position innerhalb der Seitenstruktur anzeigt. Dies ist besonders nützlich in Content-Management-Systemen, Onlineshops und Foren, wo die Informationsdichte hoch sein kann.
Nutzerfreundlichkeit ist ein entscheidender Faktor bei der Konzeption einer Webseite. Eine gut durchdachte Navigation erleichtert die Orientierung, unterstützt die interne Verlinkung und hilft Besuchern dabei, relevante Inhalte zu erreichen.
Häufige Fragen und Antworten
Unter der Navigation versteht man im Bereich der Webseiten die Elemente, mit denen sich Nutzer zwischen Bereichen und Inhalten einer Webseite bewegen. Bestimmte Formen der Navigation zeigen außerdem die aktuelle Position innerhalb der Seitenstruktur an. Die Hauptnavigation ist im Regelfall auf den wichtigen Seiten erreichbar und erscheint häufig im oberen oder seitlichen Bereich.
Zu Beginn des Internets wurde die Navigation auf Webseiten überwiegend durch einfache Schrift mit Verlinkungen umgesetzt. Mit der Zeit wurden grafische Elemente wie Bilder verwendet, um die Navigation visuell ansprechender zu gestalten. Dank moderner HTML- und CSS-Techniken können heute flexible Navigationsformen erstellt werden, die sich an unterschiedliche Bildschirmgrößen und Geräte anpassen.
Die Hauptnavigation befindet sich häufig im oberen Bereich oder in einer seitlichen Leiste. Dabei enthalten die Navigationselemente in der Regel die Hauptkategorien einer Webseite. Bei Bedarf können Unterkategorien über aufklappbare Menüs eingeblendet werden, um eine komplexe Seitenstruktur übersichtlich darzustellen. Auf kleinen Bildschirmen wird die Navigation oft in einem kompakten Menü zusammengefasst.
Eine Breadcrumb-Navigation ist eine spezielle Form der Navigation, die dem Benutzer seine aktuelle Position innerhalb der Seitenstruktur anzeigt. Sie besteht aus einer einzelnen Navigationsleiste, die oft oberhalb des Inhalts angezeigt wird. Durch einen Klick auf eines der angezeigten Elemente kann der Benutzer direkt zu einer übergeordneten Ebene springen. Eine Breadcrumb-Navigation ist besonders nützlich bei komplexen Webseiten mit vielen Kategorien und Seiteninhalten.
Eine gut durchdachte Navigation gehört zu den wichtigsten Elementen einer Webseite. Sie ermöglicht es den Besuchern, sich einfach und intuitiv durch die Webseite zu bewegen und die gewünschten Inhalte aufzurufen. Eine unübersichtliche oder technisch fehlerhafte Navigation erschwert dagegen die Orientierung. Eine vorab geplante Navigation verbessert die Benutzbarkeit und Nutzerfreundlichkeit der Webseite und unterstützt eine nachvollziehbare interne Seitenstruktur.
