Menüstruktur und Navigation

vom 30.01.2011

Im Gegensatz zu Print- und anderen Medien bietet eine Webseite dem Benutzer die Möglichkeit, sich für ihn interessante Inhalte selbst zu erschließen. Hierzu werden Funktionalitäten bereit gestellt, über welche der User mit dem Gesamtkonstrukt "Webseite" interagieren kann. Damit das auch erfolgreich gelingt, sind ein paar wesentliche Dinge zu beachten.

Die Menüführung und Navigationsstruktur sollte so aufgebaut sein, dass für den User wesentliche Inhalte hervorgehoben und an den richtigen Orten platziert werden, während die generell oder in einem bestimmten Zusammenhang unwesentlichen Inhalte eher zurückhaltend präsentiert werden sollen.

Es ist nicht Sinn der Sache, dass der Benutzer vor lauter Nicht-Zurechtfinden bald wieder das Weite sucht.

Das Menü

Menüs sind besonders oft grafisch hervorgehobene Linklisten, wobei meist nur ein bis zwei prägnante, kurze Worte verlinkt sind.

Verschachtelte Menüs mit zig Untermenüpunkten in einer Spalte rechts oder links, in denen Allesalles verlinkt ist, sind out. Und das aus gutem Grund. In einem solchen Menü lassen sich für den Nutzer visuell interessante Dinge von uninteressanten Dingen kaum trennen. Es ist schwer lesbar und vor Allem ist es zuviel des Guten.

Es müssen auch wirklich nicht alle Inhalte über das Menü an sich erschließbar sein.

In Bezug auf die Zugänglichkeit der Webseite sollten Menüs im Quelltext in einer sinnvollen Reihenfolge und an erster Stelle angeordnet sein, so dass ein durchgehendes Navigieren via Tastatur oder Screenreader möglich ist, und zwar ohne, dass vorher alle möglichen Links im Inhaltsbereich einer Webseite abgegrast werden müssen.

Kleines Menü

Die meisten Webseiten verwenden mehrere Menüs. Eines ist meist in recht kleiner Schriftart gehalten und eher im Randbereich platziert. Dieses Menü enthält meist Links zu Seiten, die nicht unbedingt das Kerngeschäft der Webseite repräsentieren und von daher für den Benutzer auch nicht allzu interessant sind, aber eben trotzdem auf allen Seiten und Unterseiten vorhanden sein sollten oder sogar müssen. Dazu gehören solche Dinge, wie Anfahrt, Sitemap, AGB, Impressum, Disclaimer, ... Diese Art von Menü enthält selten Untermenüs und besteht meist aus nur einer Ebene.

Hauptmenü

Im Hauptmenü werden am Besten die wesentlichen Hauptinhalte der Webseite mit prägnanten Bezeichnungen verlinkt. Dieses Menü sollte möglichst wenige Punkte enthalten, idealerweise 4 bis 5. Von diesen wesentlichen Ausgangspunkten kann der User dann in die Tiefen der Webseite abtauchen.

Das Hauptmenü sollte an einer gut sichtbaren Stelle platziert werden und sowohl von der Größe als auch von der Gestaltung und den Effekten her eindeutig erkennen lassen können, dass es sich um das Hauptmenü handelt.

Submenüs

Submenüs sind in diesem Zusammenhang als weitere Unterteilung des Hauptmenüs, also quasi die zweite, dritte, vierte Ebene des Hauptmenüs zu verstehen.

Submenüs werden z.B. als Dropdown oder eingerückte Liste unter einem Navigationspunkt des Hauptmenüs dargestellt, oder auch komplett getrennt vom Hauptmenü z.B. in der rechten oder linken Spalte, während das Hauptmenü als horizontales Menü im Kopf der Seite platziert ist.

Meiner bescheidenen Ansicht nach sind vier Ebenen eindeutig zu viele. Hier sollte man sich einige Gedanken über die Arbeit des Users machen, wenn er sich bspw. bei den "Links" noch einmal weiter durchklicken muss um zu den Links zum Thema "Urlaub" und zum Thema "Essen" zu gelangen, wenn er dort jeweils nur zwei oder drei Links vorfindet.

Es wäre für ihn einfacher, wenn er diese Links alle beieinander unter "Links" durch Überschriften gruppiert findet.

In den meisten Fällen würde es tatsächlich reichen, sich auf eine weitere Ebene unter dem Hauptmenü zu beschränken.

Auch ist es nett, wenn der User am Menü ersehen kann, wo er sich gerade befindet. Das kann durch gestalterische, optische Hervorhebung des jeweils aktiven Menüpunktes geschehen.

Voraussetzung dafür ist, dass alle aktiven Ebenen des Menüs auch auf der aktuellen Seite zu finden sind. Ich habe schon Webseiten gesehen, bei welchen das Menü der zweiten Ebene verschwindet, wenn man einen Link in der dritten Ebene anklickt. D.h. man hat dann nur noch das Hauptmenü und die dritte Ebene vor Augen und kann nicht mehr nachvollziehen, unter welchem Punkt der zweiten Ebene man diese Seite denn gefunden hatte.

Breadcrumb-Menü

Das Brotkrümel-Menü ist eine weitere Möglichkeit, dem User zum Einen anzuzeigen, wo genau innerhalb der Menüstruktur er sich gerade befindet und ihm zum Anderen eine bequeme Möglichkeit zu bieten, sich zurück zu bewegen.

Dieses Menü befindet sich meist im oberen Bereich der Webseite und bildet die eigentliche Menüstruktur von Haupt- und Submenü(s) noch einmal zusätzlich in Form eines Pfades ab, wie z.B. Home | Inhalt | Dies und das und hat oft einen Satz in der Art, wie "Sie befinden sich hier: ..." vorangestellt.

Weitere Navigationselemente

Abgesehen vom Menü kann man weitere Inhalte auch über weitere Navigationselemente erschließbar machen.

Kategorien / Themen

Artikel lassen sich beispielsweise in Kategorien oder Themen zusammenfassen und filtern. Diese Kategorien/Themen lassen sich außerhalb des Menüs noch einmal wunderbar in einem extra Block darstellen und können einen Menüpunkt noch einmal sinnvoll unterteilen.

Tagcloud

Seiteninhalte mit Schlagworten auszuzeichnen ist nicht nur für eine Suchfunktion von eventueller Bedeutung, sondern diese Schlagworte lassen sich auch in einer Tagcloud, also einer "Wortwolke" darstellen.

Eine solche Wolke ist ein nettes typografisches Element und entspricht einer Suchfunktion nach eben diesen dort enthaltenen Suchbegriffen. Der User muss sich seine Suchbegriffe also nicht selbst ausdenken, sondern bekommt eine sinnvolle Vorlage, über welche er garantiert Ergebnisse geliefert bekommt.

Teaser

Unter einem Teaser versteht man eine etwas ausführlichere Darstellung eines Links zu einem bestimmten Inhalt. Meist besteht ein Teaser aus einem Titel, einer kurzen Beschreibung und einem Link zur ausführlichen Version des Inhalts. Oft enthalten sie auch ein kleines Bild.

Auf Übersichtsseiten werden Teaser unter- oder nebeneinander angereiht dargestellt. Hier bekommt der User nicht nur ein paar wenige Worte als Link geliefert, sondern wird mit gekürztem Inhalt "angefüttert" und kann dadurch besser ersehen, ob ihn der Inhalt tatsächlich interessiert oder nicht.

Related Links

... oder "wenn Sie dies hier lesen, könnte Sie auch das dort interessieren". Es werden Inhalte verlinkt, die dem gerade aufgerufenen Inhalt thematisch ähnlich sind.

Hier wird auf das vermeintliche Interesse des Benutzers Rücksicht genommen. In Bezug auf Blogs oder News sind es häufig Links derselben Kategorie, die unter einem Beitrag angezeigt werden. Aber auch personalisierte Werbung, wie sie z.B. bei Amazon in Form der Anzeige von Artikeln, welche einen Bezug zu den zuletzt aufgerufen oder gekauften Artikeln haben, erfolgreich eingesetzt wird, gehört in diese Rubrik.

Sitemap

Die minimalistische Darstellung der Verlinkungsstruktur der Webseite in Form einer Baumstruktur. Manch einer kommt damit besser zurecht. Insbesondere für Menschen, denen die optische Gestaltung einer Webseite herzlich egal ist, weil sie sowieso nichts sehen, kann eine Sitemap ein sehr hilfreiches Navigationsinstrument sein.