Navigationsdesign: Muster für das Website-Menü

Kurz gesagt

Ein gutes Menü beantwortet zwei Fragen: Wo bin ich, und wohin kann ich gehen? Auf dieser Seite beschreibe ich fünf Muster: das sichtbare Menü oben, das Mega-Menü, das Hamburger-Menü, die Tab-Bar unten und den Breadcrumb.

Welches Sie wählen, hängt von der Zahl der Hauptlinks und vom Gerät ab. Was ins Menü kommt, ist eine eigene Aufgabe. Das nennt man Informationsarchitektur.

Sichtbares Menü oben

Die Hauptbereiche stehen nebeneinander oben auf der Seite. Ohne etwas anzutippen, sieht der Nutzer, was die Website bietet. Für den Desktop ist das die Standardwahl.

NN/g empfiehlt, auf dem Desktop kein verstecktes Menü zu nutzen. Die Hauptlinks gehören oben auf die Seite oder an den linken Rand.

Die Grenze des Menüs oben ist der Platz. Werden die Labels länger oder zahlreicher, bricht die Zeile um. Dann kürzen Sie die Labels oder verschieben die unteren Ebenen in aufklappbare Panels.

Mega-Menü

Ein Mega-Menü ist ein breites Panel, das sich öffnet, wenn der Mauszeiger auf einen Hauptpunkt kommt. Es zeigt die Unterseiten in Gruppen auf einmal. Nielsen und Li (NN/g, 2017) halten das Mega-Menü bei vielen Optionen für eine gute Wahl.

Derselbe Text nennt konkrete Werte für das Timing:

• Das Panel öffnet sich erst, wenn der Zeiger 0,5 Sekunden verweilt.
• Öffnet es sich, dann innerhalb von 0,1 Sekunden.
• Verlässt der Zeiger Punkt und Panel, bleibt das Panel noch 0,5 Sekunden offen.

Das Panel kann sich beim Darüberfahren (Hover), beim Klick oder beim Tippen öffnen. Auf einem Touchscreen gibt es kein Hover. Ein Button, der per Klick öffnet, funktioniert dagegen auf jedem Gerät.

Bilden Sie die Gruppen nicht nach Vermutung, sondern mit Nutzerdaten. NN/g empfiehlt hier Card Sorting; wie das geht, beschreibe ich im Ratgeber zu Card Sorting und Tree Test. Jede Option sollte im Panel nur einmal vorkommen. Das Suchfeld gehört nicht ins Panel, sondern dauerhaft sichtbar auf die Seite.

Hamburger-Menü: wie unsichtbar ist es?

Das Hamburger-Menü ist ein Menü, das hinter einem Icon aus drei waagrechten Linien versteckt ist. Es spart Platz, hat aber einen Preis. Weil der Nutzer das Menü nicht sieht, denkt er womöglich nicht daran, es zu nutzen.

Kara Pernice und Raluca Budiu haben das 2016 für NN/g gemessen. 179 Teilnehmende arbeiteten auf Smartphone und Desktop mit 6 echten Websites. Auf jeder Website lösten sie 2 Aufgaben, das Menü war versteckt, sichtbar oder kombiniert.

Wie oft die Navigation in der NN/g-Studie 2016 genutzt wurde

Gerät	Verstecktes Menü	Sichtbares Menü	Kombiniert (teils sichtbar)
Desktop	27 %	48 %	50 %
Mobil	57 %	nicht getestet	86 %

Quelle: Pernice und Budiu, NN/g (2016). Die Anteile geben an, bei wie vielen Aufgaben die Navigation genutzt wurde.

Auf dem Desktop wurden sichtbare und kombinierte Menüs fast doppelt so oft genutzt wie das versteckte. War das Menü versteckt, sank die Auffindbarkeit von Inhalten um mehr als 20 %. Das zeigte sich auf Desktop und Mobilgerät.

Auch die Zeit wurde länger. Auf dem Desktop waren Teilnehmende mit verstecktem Menü mindestens 39 % langsamer als mit sichtbarem oder kombiniertem. Mobil war das versteckte Menü 15 % langsamer als das kombinierte.

Die Teilnehmenden bewerteten die Aufgaben von 1 (leicht) bis 7 (schwer). Die mittlere Schwierigkeit lag beim versteckten Menü bei 2,6, beim kombinierten bei 2,3 und beim sichtbaren bei 2,1.

Mobil ist das Bild milder: Das versteckte Menü wurde in 57 % der Fälle genutzt. Laut den Autoren ist es mobil verbreiteter, Menschen sind vielleicht eher daran gewöhnt.

Ihre Empfehlung für Mobilgeräte ist klar. Gibt es vier oder weniger Hauptlinks, zeigen Sie alle. Verstecken Sie mehr, verlinken Sie wichtige Seiten zusätzlich im Seiteninhalt.

Budius Text zur mobilen Navigation von 2015 kommt zum selben Schluss. Laut ihr ist das versteckte Menü das am schwersten zu entdeckende Layout. Selbst wer es einmal geöffnet hat, kann es später in der Sitzung vergessen.

Tab-Bar unten

Die Tab-Bar ist eine Leiste, die fest am unteren Rand des Screens steht und zu wenigen Hauptbereichen führt. Sie bleibt beim Scrollen sichtbar. Der Nutzer kann jederzeit zwischen den Hauptbereichen wechseln.

Budiu (NN/g) beschreibt die Tab-Bar als Layout, das typisch für Apps ist. Ihre Grenze ist die Zahl der Tabs. Laut NN/g ist es schwer, mehr als fünf Optionen unterzubringen, wenn die Tippziele bequem groß bleiben sollen.

Wie iOS und Android diese Leiste unterschiedlich zeichnen, beschreibe ich im Ratgeber zu den Unterschieden zwischen iOS und Android.

Setzen Sie die häufig genutzten Bereiche in die Leiste. In der Demo unten liegt das Retourenformular im Tab Konto. Der Nutzer sieht Konto auf dem ersten Screen, muss aber erraten, dass das Retourenformular dort liegt.

Breadcrumb (Brotkrumennavigation)

Ein Breadcrumb ist eine Reihe von Links, die der Reihe nach die übergeordneten Seiten der aktuellen Seite zeigt. Etwa „Start > Küche > Töpfe“. In tiefen Katalogen gibt er dem Nutzer eine Abkürzung eine Ebene nach oben.

Aus dem NN/g-Leitfaden von Page Laubheimer helfen mir diese Regeln am meisten:

• Der Breadcrumb ergänzt das Hauptmenü, er ersetzt es nicht.
• Er zeigt die Hierarchie der Website, nicht den Verlauf des Nutzers.
• Der letzte Eintrag ist die aktuelle Seite und kein Link.
• Auf flachen Websites mit ein oder zwei Ebenen ist er überflüssig.
• Mobil sollte er nicht über mehrere Zeilen umbrechen. Fehlt der Platz, können Sie erwägen, nur die letzten Ebenen zu zeigen.

Die Sprache der Labels

Versteht der Nutzer das Label nicht, hilft auch das beste Menülayout nicht. Was hinter dem Link steckt, sagt ihm nur das Label.

Die Empfehlungen von NN/g zum Mega-Menü gelten für jedes Menü. Beginnen Sie das Label mit dem aussagekräftigsten Wort und vermeiden Sie erfundene Begriffe. Zwei nebeneinanderstehende Labels sollten sich nicht ähneln.

Das Problem, das Fachjargon bei Labels auf Unternehmenswebsites schafft, beschreibe ich mit Beispielen im Ratgeber UX für Unternehmenswebsites. Labels teste ich zuerst mit einem Tree Test, weil der kein Design braucht.

Anzeige der aktiven Seite

Schaut der Nutzer aufs Menü, sollte er sehen, in welchem Bereich er ist. Das machen Sie auf zwei Ebenen: ein sichtbares Zeichen und ein Attribut für den Screenreader.

Das sichtbare Zeichen sollte nicht nur Farbe sein. Nach Kriterium 1.4.1 von WCAG 2.2 (Stufe A) darf Farbe nicht das einzige visuelle Mittel sein, um Information zu vermitteln. Beim aktiven Menüpunkt nutze ich zusätzlich zur Farbe fette Schrift und eine Linie.

Im Code bekommt der Link der aktuellen Seite aria-current="page". Laut MDN wird innerhalb einer Gruppe nur ein Element als current markiert. In einem mehrstufigen Ablauf nutzt man für den aktuellen Schritt den Wert step.

Regeln für barrierefreie Menüs

Setzen Sie das Hauptmenü in ein <nav>-Element. Dessen implizite ARIA-Rolle ist navigation, also eine Navigationsregion (Landmark). Gibt es mehrere nav auf der Seite, geben Sie jedem einen eigenen Namen, etwa „Hauptmenü“ und „Brotkrumen“.

Für aufklappbare Menüs liefert der ARIA Authoring Practices Guide (APG) des W3C ein fertiges Beispiel: Disclosure Navigation Menu. Darin ist jeder Hauptpunkt ein Button. Am Button sagt aria-expanded, ob das Panel offen ist, und aria-controls, welches Panel er öffnet.

Das Tastaturverhalten ist einfach. Mit Tab bewegt man sich zwischen den Buttons und den Links im offenen Panel. Enter oder Leertaste öffnet und schließt das Panel. Esc schließt ein offenes Panel und bringt den Fokus zum Button des Panels zurück.

Der APG nutzt in diesem Beispiel kein role="menu". Die Begründung: Eine typische Website-Navigation braucht nicht alle Tastaturinteraktionen, die das Muster menu und menubar festlegt. Für ein gewöhnliches Website-Menü reichen Buttons und Links.

Live-Beispiel: drei Menüs, eine Aufgabe

Unten steht das Menü desselben erfundenen Shops in drei Layouts. Ihre Aufgabe ist, eine Retoure anzumelden. Wählen Sie ein Layout und navigieren Sie im Menü auf dem Handy.

Drei Menüs, eine Aufgabe

Diese Demo läuft mit JavaScript. Ohne JavaScript kurz zusammengefasst: Im selben Shop erreicht man das Retourenformular mit sichtbarem Menü oben in 2, mit Hamburger in 3 und mit Tab-Bar unten in 2 Klicks. Beim Hamburger ist auf dem ersten Screen keine einzige Menüoption sichtbar.

Ein erfundener Shop mit ausgedachten Menü-Labels. Jeder Klick zählt als Schritt: Menü öffnen, schließen, Tab und Link. Sichtbare Optionen sind die klickbaren Menüeinträge, die gerade auf dem Screen stehen; das Hamburger-Icon zählt nicht mit. Esc schließt ein offenes Menü und gibt den Fokus an seinen Button zurück. Das ist Ihr persönlicher Versuch, kein Testergebnis. Nichts wird gespeichert.

In allen drei Layouts ist der kürzeste Weg zwei oder drei Klicks. Der eigentliche Unterschied liegt auf dem ersten Screen: Beim Hamburger ist keine einzige Menüoption sichtbar. Denkt der Nutzer nicht daran, das Icon anzutippen, beginnt der Weg gar nicht.

Die Menüs folgen dem Disclosure-Muster des APG. Probieren Sie es mit der Tastatur: mit Tab bewegen, mit Enter öffnen, mit Esc schließen.

Welches Layout wann

Auf den meisten Websites arbeiten mehrere Layouts zusammen. Zum Beispiel auf dem Desktop Mega-Menü und Breadcrumb, mobil ein paar sichtbare Links und ein Hamburger. Die Tabelle unten fasst zusammen, wo was hilft.

Navigationslayouts und wo sie passen

Layout	Wo es gut ist	Vorsicht
Sichtbares Menü oben	Desktop; mobil bei 4 oder weniger Hauptlinks	Braucht Platz, lange Labels passen nicht
Mega-Menü	Kataloge mit vielen Kategorien, große Unternehmenswebsites	Gruppierung und Timing beim Hover
Hamburger	Sekundäre Links auf Mobilgeräten	Verstecken Sie keine Hauptaufgaben
Tab-Bar unten	Apps, wenige oft gewechselte Hauptbereiche	Mehr als 5 Ziele passen schwer
Breadcrumb	Tiefe Hierarchie, Kategorieseiten	Ersetzt nicht das Hauptmenü

Für die meisten Websites halte ich das kombinierte Layout für die ausgewogenste Wahl. Halten Sie die zwei oder drei meistgenutzten Bereiche sichtbar und packen Sie den Rest ins Menü.

Wie Sie das Menü testen

Testen Sie vor dem Launch zwei verschiedene Dinge. Erstens die Struktur: Steht der richtige Inhalt unter dem richtigen Punkt? Zweitens die Sichtbarkeit: Findet der Nutzer das Menü auf dem Screen?

Die Struktur messen Sie mit einem Tree Test. Sie geben dem Nutzer einen Baum nur aus Labels und fragen: „Wo würden Sie eine Retoure anmelden?“ Das funktioniert, noch bevor es ein Design gibt.

Die Sichtbarkeit müssen Sie auf dem echten Screen messen. Ein First-Click-Test zeigt, wohin der Nutzer am Anfang der Aufgabe tippt. Ein Usability-Test mit wenigen Personen zeigt auch sofort, wer den Hamburger nie öffnet.

Meine Notiz

Der häufigste Menüfehler in meinen Audits: Die Hauptaufgabe steckt im Hamburger. Das Team öffnet das Menü jeden Tag und merkt nicht, dass dort etwas versteckt ist. Neue Nutzer tippen das Icon gar nicht an.

Bevor ich mich für ein Menü entscheide, schreibe ich die fünf häufigsten Aufgaben auf. Für diese Aufgaben muss es vom ersten Screen aus einen sichtbaren Weg geben. Alles andere darf ins Menü.

Wenn jemand von außen auf das Menü Ihrer Website schauen soll: Das UX Audit prüft einen Ablauf von Anfang bis Ende und liefert eine priorisierte Liste von Korrekturen.