Shape Copy Created with Sketch.
Alle Artikel

Jeden Tag besuchen wir unzählige Websites, um nach Informationen zu suchen. Manchmal ist die Suche von Erfolg gekrönt, manchmal nicht. Ein Grund, woran das liegen könnte? Die falsche Navigation. Der Nutzer findet sich auf der Website schlicht nicht zurecht. Um diesem Spuk ein Ende zu bereiten, stellen wir im Folgenden einige der populärsten Menü-Varianten vor und geben Empfehlungen zu deren Anwendung.

Das Hamburger-Menü

Was zunächst klingt wie die Speisekarte bei McDonalds, ist eigentlich eine weit verbreitete und oft genutzte Art der Menü-Führung auf Websites. Sie wurde aus der Not heraus geboren, als Seiten plötzlich all ihren Content auf unseren kleinen iPhone 4s oder Google G1s anzeigen sollten. Namensgebend für das Hamburger-Menü sind die drei parallelen Linien, die an ein vereinfachtes belegtes Brötchen mit Fleischbelag erinnern sollen.

Um dem Nutzer einen Klick zu ersparen sollte man, so unsere Empfehlung, auf den einzelnen Seiten zusätzlich auch über interne Verlinkungen im Content oder ein separates Menü jederzeit durch die Seite navigieren können. So auch im Einsatz auf unserer eigenen Website.

Die interaktive Navigation

Die interaktive Navigation ist ein sehr freies Feld und auch etwas schwer zu erklären. Prinzipiell lässt sich sagen, dass es nicht den typischen Link von A nach B gibt. Vielmehr ist das Navigieren durch die Website selbst Teil des Erlebnisses. Der Nutzer wird mit interaktiven Elementen spielerisch zum nächsten Abschnitt oder auf die nächste Unterseite gebracht. Am besten direkt das Beispiel anschauen – dann wird’s klarer.

Quelle: falter.wild.plus

Die statische Seitenleiste

Diese Art der Navigation findet meist als Ergänzung zu einem vollwertigen Menü Anwendung. Über das Hauptmenü erreicht man die gewünschte Seite, auf der dem Nutzer als Navigationshilfe eine statische Leiste beim Scrollen folgt. Diese Menü-Form eignet z. B. für lange Einseiter* besonders gut, da die fixe Positionierung der Leiste dem Nutzer eine schnellere Navigation auf der Seite selbst ermöglicht.

Die Header*-Navigation

Die Header*-Navigation (analog dazu gibt es auch die Footer-Navigation) ist quasi das kleine Schwarze unter den Menüs – klassisch und doch elegant. Berühmtester Vertreter dieser Menü-Variante und das schon seit Jahren: Die Apple-Website. Der Vorteil: der Nutzer hat direkt alle Menü-Punkte ersichtlich auf einen Blick. Bei Apple wird auch schön deutlich, wie sich ein solches Menü in seiner mobilen Ausführung verhält: es geht nämlich nahtlos in ein Burger-Menü über. Auch hier gibt es wieder diverse Abwandlungen, bei denen beispielsweise das Menü am oberen Bildrand beim Scrollen fixiert oder – und das ist der neueste Trend – bei kleineren Displaygrößen die nicht mehr passenden Menü-Punkte hinter einem Drop-Down-Menü* sammelt, was uns schon zur nächsten Menü-Variante bringt.

Quelle: apple.com

Drop-Down Menüs* (oder auch Mega-Menüs)

Aus Usability*-Sicht nicht unumstritten ist das sogenannte Drop-Down-Menü* beziehungsweise der noch weiter verschachtelte große Bruder das Mega-Menü. Hier verbergen sich hinter einem Menü-Punkt weitere Links, die sich durch eine bestimmte Nutzer-Interaktion entfalten – sei es ein Mouseover* oder ein Klick. Der Verschachtelung sind dabei keine Grenzen gesetzt, aber auf mehr als zwei Stufen sollte man dann doch verzichten. Bevor man seinen Seitenbaum* ungefiltert in einem solchen Menü abbildet, sollte man sich überlegen, ob auch eine andere Content-Aufteilung möglich ist, um dadurch auf eine nutzerfreundlichere Menü-Variante umzusteigen.

Quelle: lufthansa.com

Das Fazit

Welche Art von Menü sich für die eigene Website eignet, hängt von vielen Faktoren ab – sei es Content, Erlebbarkeit, Usability*, Endgerät, usw. – doch am Ende gibt es nie die allumfassende General-Lösung. Vielmehr kommen immer öfter Mischformen zum Einsatz wie beispielsweise bei Tesla, die ihre neuen Autos prominent in einer Header*-Navigation präsentieren und alle weiteren Punkte hinter einem Burger-Menü verstecken. Wir hoffen unser kleiner Ausflug in die Welt der Menüs hat gezeigt, welche Möglichkeiten sich bieten und dass die Menü-Führung einer Website bereits eine kleine Wissenschaft für sich darstellt, bei der wir gerne unterstützen.

Usability = Gebrauchstauglichkeit oder Benutzerfreundlichkeit
Seitenbaum = alle Seiten einer Website ausgebreitet
Einseiter / Onepager = alle Informationen sind auf einer Seite gebündelt
Header = der obere Teil einer Website, der z. B. das Logo enthält
Drop-Down-Menü = ein durch Nutzerinteraktion ausklappbares Menü
Mouseover = die Bewegung des Mauszeigers über ein Element der Website