pearl.de Bestseller NEU Beratungsvideo Schnäppchen Ausgezeichnet bewertet Pressestimmen Günstig beiwww.pearl.de onlne einkaufen
Internet Magazin


Andreas Hitzig | Profil | Kontakt

20. September 2011
Navigation: Ans Ziel geführt - die richtige Navigation für die Website Bild vergrößern 841 278 http://img3.magnus.de/image-r841x278-C-b20eb53c-47713740.jpg © Internet Magazin
© Internet Magazin
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.

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 .



Inhaltsverzeichnis


Verwandte Themen

Günstig bei www.pearl.de online einkaufen
Meistgelesen
1. Kino-Kritik: Kill Me Please

Als Suizidwillige mit dem Tod konfrontiert werden, sinnen sie plötzlich nicht mehr auf das Ableben.

2. DECT-Telefon Peaq PDO250 im Test

Mit dem DECT-Telefon Peaq PDP250 schickt die Media-Saturn-Holding das erste Schnurlostelefon Marke Eigenbau ins Rennen. Im Test überzeugt das Peaq PDP250…

3. Kino-Kritik: Marley

So ausführlich wie oberflächlich präsentiert sich "Marley", die 144 Minuten lange Dokumentation über Reggae und Rastafari.

4. Adobe Photoshop Lightroom 4 im Test

Sie haben hunderte von Hochzeitsfotos geschossen und wollen die 50 besten davon zu einem Fotobuch zusammenstellen? Und das alles im Handumdrehen? Genau…


Kleines Spiel für zwischendurch

Bildergalerien
Samsung NV24 HD Praxistest: Nokia 6230i Sport-Gadgets - ISPO 2008 Namu6 2.4

Bilder-Suche

Top 5 Downloads
1
Recuva

Version: 1.42.544
Lizenz: Freeware
Betriebssystem: Windows

2
Win7codecs

Version: 3.6.2
Lizenz: Freeware
Betriebssystem: Windows

3
OnlineTV

Version: 6.2.0.2
Lizenz: Freeware
Betriebssystem: Windows

4
CCleaner

Version: 3.18.1707
Lizenz: Freeware
Betriebssystem: Windows

5
Firefox

Version: 13.0 Beta 3
Lizenz: Open Source
Betriebssystem: WindowsLinuxMac

Download-Suche