Wie gestaltet man ein nutzerfreundliches Hauptmenü?

Wer an einem unbekannten Ort landet, muss sich auf Wegweiser verlassen – auf die Stimme des Navigationssystems oder das gute alte Straßenschild. Was für unser reales Leben selbstverständlich ist, gilt auch für das virtuelle Dasein: Wer sich auf einer fremden Website zurechtfinden will, ist auf ein sinnvolles Hauptmenü zur Navigation angewiesen. Es bildet den Einstieg in das »Straßennetz« der Seite und ist deshalb für den Nutzer enorm wichtig.

Ist die Navigation unübersichtlich oder verwirrend, klicken Besucher schnell wieder weg. Aber was muss man bei der Konzeption eines cleveren Hauptmenüs beachten? Und welche Möglichkeiten gibt es, das Menü zu gestalten? Einige wichtige Punkte soll Ihnen dieser Beitrag erläutern.

Wie konstruiere ich ein Hauptmenü?

Das Hauptmenü erklärt dem User, welche Inhalte die besuchte Seite bietet, und strukturiert deren Content auf übersichtliche Weise. Außerdem soll es dem Besucher anzeigen, wo auf der Website er sich gerade befindet. Das Menü ist also der wichtigste Navigationshelfer einer Seite.

Es muss demnach der erste Schritt sein, sich mit den eigenen Inhalten auseinanderzusetzen. Was soll auf Ihrer Website Platz finden, welcher Content, welche Funktionen haben Priorität? Diese Fragen können Sie am leichtesten beantworten, indem Sie sich Ihre Ziele – oder besser: die zugrunde liegende digitale Strategie – noch einmal ganz konkret vor Augen führen. So können Sie Inhalte ordnen und ihnen einen sinnvollen Platz auf Ihrer Seite zuweisen.

Prüfen Sie auch direkt mal die Performance Ihrer Website:

Arten von Hauptmenüs

Wie man das Hauptmenü gestaltet, ist nicht einfach eine Frage des Geschmacks – diese Entscheidung sollte, wie oben erwähnt, mit einem klaren Blick für die Ziele der Website getroffen werden. Die Nutzer eines Onlineshops haben normalerweise ganz andere Bedürfnisse als die Besucher einer Galerie. Allgemein kann man jedoch festhalten: Das Menü sollte sich im Header befinden und auf jeder einzelnen Seite sichtbar sein. Und: Übersichtlichkeit gewinnt.

Horizontal

Die horizontale Variante des Menüs lässt viel Raum für Inhalte und Gestaltung, ist aber naturgemäß zu den Seiten hin begrenzt. Es lassen sich also nicht unendlich viele Themen unterbringen – aber das würde auch wenig Sinn ergeben: Zwischen 5 und 7 Elementen kann das menschliche Auge gut erfassen, mehr Menüpunkte sollten es möglichst nicht sein. Per Mouse-over oder Klick kann die nächste Navigationsebene, also die Unterpunkte, angezeigt werden.

Vertika

Das vertikale Menü listet die Hauptkategorien untereinander auf. Es bietet naturgemäß mehr Platz als die horizontale Version, springt aber dafür nicht sofort ins Auge. User gehen davon aus, die vertikale Navigation links vom Inhalt zu finden – so ist es mit den Jahren schlichtweg gelernt. Auch dabei gilt: Niemand will sich durch endlos lange Verzeichnisse scrollen; also halten Sie die Menüpunkte am besten übersichtlich.

Fullscreen

Das Fullscreen-Menü wird normalerweise von einem Hamburger-Button aktiviert (dazu unten mehr) und besteht aus einem großen Layer, der das gesamte Layout bedeckt. Das bedeutet: Es bietet jede Menge Platz. Dieses Menü wird gern verwendet, wenn die Gestaltung einer Website wenig Raum für größere Navigationselemente vorsieht. Bei einem sehr minimalistischen, cleanen Design kann ein Fullscreen-Menü besonders elegant wirken. Auch in der mobilen Version einer Seite ist es gut aufgehoben. Allerdings sollte man sich nicht dazu verführen lassen, den Layer mit zu vielen Menüpunkten zu überladen.

Drop-down

Diese Funktion klappt die Unterpunkte eines Menüs auf, sobald ein Hauptpunkt per Klick, Mouse-over oder Tap aktiviert wurde. Ein Beispiel sehen Sie in unserem Menü oben etwa in der Kategorie »Kompetenzen«. Bei der Menge und Bezeichnung der Unterkategorien sollte man mit Augenmaß vorgehen: Gibt es Kategorien, die sich zusammenfassen lassen? Wie viele Ebenen müssen sein? Mein Tipp: Verschachteln Sie das Menü nicht zu stark. Drei Ebenen sind in meinen Augen das Maximum, alles andere wird schnell chaotisch. Je nachdem, worum es auf Ihrer Website geht, können Bilder oder Icons dem Besucher eine Hilfe sein, sich in den Unterkategorien zurechtzufinden.

Burger

Das sogenannte Burger-Menü hat seinen Namen von einem Hamburger, an den es mit seinen drei übereinanderliegenden Strichen erinnern soll. Es ist heute bei den meisten Nutzern etabliert und wird zuverlässig erkannt. Eine besonders große Rolle spielt der Burger beim mobilen Surfen, denn das Menü-Icon ist unschlagbar platzsparend, was bei einem Smartphone- oder Tabletscreen natürlich eine große Rolle spielt.

Die Verwendung in einem Desktop-Layout könnte aber Nachteile mit sich bringen: Das Burger-Icon kann gestalterisch schnell untergehen, wenn bereits viele andere Elemente die Aufmerksamkeit des Besuchers anziehen. Außerdem ist nicht auf den ersten Blick sichtbar, welche Kategorien das Icon birgt. Ein schnelles Überfliegen der wichtigsten Inhalte ist also nicht möglich. Und wir wissen heute, dass jeder zusätzliche Klick den Besucher zum Absprung verleiten kann – es macht also Sinn, den Einsatz eines Burger-Menüs abzuwägen.

Sticky

Als „Sticky“ bezeichnet man ein Menü, das dem User immer an der gleichen Stelle des Screens angezeigt wird, ganz gleich, wie weit er nach unten scrollt. Das Prinzip kennen Sie zum Beispiel von Facebook: Auch wenn Sie in Ihrer Timeline um Jahre zurückgereist sind, sehen Sie oben immer die blaue Leiste mit ihren Navigationselementen. Wenn Sie auf Ihrer Website sehr umfangreiche Inhalte oder einen großen Produktkatalog führen, ist ein solches Sticky-Menü äußerst praktisch für Ihre Besucher.

Fazit

Für welche Art von Hauptmenü Sie sich auch entscheiden, diese Punkte gelten für alle Varianten, wenn Sie am Ende Leads generieren wollen: Wählen Sie eine überschaubare Zahl an Haupt- und Unterkategorien, benennen Sie alle Menüpunkte möglichst aussagekräftig und verschachteln Sie die Ebenen nicht zu stark. Ein durchdachtes Menü hilft den Nutzern, sich sicher und sinnvoll durch Ihre Website zu bewegen. Denken Sie daran, wenn Sie die To-do-Liste für den nächsten Website Relaunch aufstellen.

Welche Menüs bevorzugen Sie? Die klassische Drop-down-Variante, oder darf es ein Burger sein?

Möchten Sie direkt die Kosten für Ihr neues Website-Projekt berechnen: