Zum Inhalt springen
Der Guide für ein smartes Leben.
VG Wort Pixel
Navigation

Ans Ziel geführt - die richtige Navigation für die Website

Der Erfolg einer Website hängt maßgeblich auch von deren Benutzerfreundlichkeit und damit verbunden der Navigation ab. Wir zeigen aktuelle Standards.

Autor: Andreas Hitzig • 20.9.2011 • ca. 2:40 Min

internet, webdesign, navigation, workshop
Ans Ziel geführt
© Internet Magazin
Inhalt
  1. Ans Ziel geführt - die richtige Navigation für die Website
  2. Suche als Navigation
  3. Navigationsmodelle

Die wesentlichen Unterscheidungsmerkmale einer Navigation sind deren Aufbau sowie die Positionierung. Viele Websites nutzen den oberen Bereich einer Website zur Platzierung des Navigationsmenüs. Bekannte Vertreter sind beispielsweise die Websites von Spiegel.de, Magnus.de oder auch die Sportseite ...

Die wesentlichen Unterscheidungsmerkmale einer Navigation sind deren Aufbau sowie die Positionierung. Viele Websites nutzen den oberen Bereich einer Website zur Platzierung des Navigationsmenüs. Bekannte Vertreter sind beispielsweise die Websites von Spiegel.de, Magnus.de oder auch die Sportseite Sport1.de. Viele kleinere Websites greifen auch gerne auf diese Art der Website-Navigation zurück. Die Position der Navigationselemente ist entweder direkt am oberen Ende der Website oder direkt unter dem Logo angeordnet.Kleineren Websites genügt eine einstufige Navigationsstruktur, größere Seiten greifen in der Regel auf Drop-down-Menüs oder eine zweite Hierarchiestufe für die Abbildung weiterer Ebenen zurück. Bei Spiegel.de finden Sie beispielsweise die Hauptrubriken als Registerkarten und die nächste Ebene als Textlinks. Diese sind zusätzlich noch mit Drop-down-Menüs versehen, damit eine dritte Ebene abgebildet werden kann.Die einstufige Navigation eignet sich besonders für Websites mit einer überschaubaren Anzahl von Rubriken oder Oberbegriffen, die Sie auf der ersten Ebene unterbringen müssen. In der Praxis hat sich eine Obergrenze zwischen zehn und zwölf Elementen bewährt.Sollten Sie mehr Navigationspunkte benötigen, können Sie entweder weitere Ebenen aufbauen, unwichtige Punkte in den Footer verschieben oder eine andere Navigationsstruktur wählen. Im Footer finden Sie oftmals Verlinkungen zum Impressum, Presse-Links oder andere Informationen, die nicht im direkten Kontext zu den anderen Websiteinhalten stehen.Auf Magnus.de wird im Footer-Bereich die komplette Header-Navigation noch einmal in einer Übersicht statisch dargestellt. Dies ist vor allem auch für die Bewertung der Suchmaschinen interessant, da diese auch die Anzahl der internen Links für die Gewichtung einer Seite berücksichtigen.

Sidebar-Navigation

Inzwischen ist auch die Sidebar-Navigation wieder hoffähig geworden. Aufgrund der Vielzahl von Navigationsebenen hat Amazon sich beispielsweise dazu entschlossen, die ersten beiden Navigationsebenen über eine Sidebar abzubilden. Auf der ersten Ebene finden Sie die verschiedenen Produktgruppen, wie "Bücher", "Kindle" oder "Musik, DVD & Games". Mit der Maus öffnen Sie die zweite Navigationsebene und sehen eine feinere Gliederung der Sparten, beispielsweise nach "Musik, MP3-Downloads" oder "DVDs".In der Regel wird diese Navigationsstruktur in der linken oberen Ecke einer Website platziert, da die Links-nach-rechts-Leser Ihren ersten Blick auf diesen Bereich des Fensters lenken.Die Sidebar kann beliebig viele Elemente aufnehmen, was natürlich auch ein entsprechendes Risiko darstellt. Der Besucher möchte nicht erst lange suchen, bevor er zu den gewünschten Inhalten kommt. Versuchen Sie, die Punkte der ersten Ebene auf ein Minimum zu begrenzen, strukturieren Sie Ihre Inhalte sinnvoll und arbeiten Sie mit einer zweiten Gliederungsebene.Amazon hat aktuell beispielsweise auf seiner deutschen Website 12 Oberpunkte, auf der amerikanischen sogar 16. Bei beiden Darstellungen sind die Rubriken noch immer gut zu erfassen.

Navigation mit Register-Layout

Eine andere Form der Header-Navigation basiert auf Registerkarten als Reiter, die jeweils einen Menüoberpunkt beinhalten. Dieser Navigationsdarstellung soll auf Besucher optisch besonders ansprechend sein und einen positiven psychologischen Effekt haben.Wikipedia greift beispielsweise auf dieses Element für die Darstellung seiner aktuellen Sportnachrichten zurück. Allerdings finden Sie innerhalb der Enzyklopädie auch keine durchgängige Anwendung dieses Konzepts. Bei anderen Themenseiten wird, wie bei Wikipedia üblich, mit reinen Textlinks und ohne optische Gestaltung gearbeitet.Die Restriktionen einer Navigation mit Register-Layout sind deckungsgleich mit denen der Header-Navigation: diese Struktur eignet sich nur für eine limitierte Anzahl von Elementen.

Breadcrumb-Navigation

Den Namen hat diese Navigationsdarstellung dem Grimm'schen Klassiker Hänsel und Gretel zu verdanken. Sie behalten damit immer den Überblick über die Position innerhalb der Website, an der Sie sich gerade befinden. In der Regel wird diese Art der Navigation ergänzend zu einer übergeordneten Navigation eingesetzt, beispielsweise bei Spiegel.de , der Onlineausgabe der Süddeutschen Zeitung oder auch bei Bild.de .