Website Navigation gestalten: So bauen Sie ein Menü, das Besucher sofort verstehen

Die Website Navigation ist die erste Landkarte, die Besucher auf Ihrer Seite lesen. In diesem Leitfaden lasse ich die Theorie der Informationsarchitektur beiseite und bleibe konkret an der Oberfläche: Megamenü, mobiles Menü, Beschriftungen, Anzahl der Punkte, Servicemenü und Footer. Ich baue und repariere Menüs seit 2012; deshalb teile ich hier Arbeitsregeln statt Trends.

Was ist eine Website Navigation und wie gestalten Sie sie?

Eine Website Navigation ist die Oberfläche, die festlegt, wo Links zu Ihren wichtigsten Seiten erscheinen, in welcher Reihenfolge, mit welcher Beschriftung und mit welchem Verhalten. Gut gestaltet arbeiten Hauptmenü, Servicemenü, mobiles Menü und Footer als ein System zusammen, damit Besucher jederzeit wissen, wo sie sind und wohin sie weiter können.

Ich gehe dabei in vier Schritten vor. Zunächst notiere ich die drei Aufgaben, für die Besucher am häufigsten kommen. Danach setze ich die passenden Seiten ins Hauptmenü. Dann formuliere ich jede Beschriftung in der Sprache der Besucher neu. Schließlich teste ich Desktop und Smartphone getrennt.

Dieser Artikel behandelt nur die sichtbare Seite des Menüs. Wie Sie Seiten gruppieren und wie tief Ihr Kategoriebaum reicht, ist eine eigene Aufgabe. Große Katalogbäume habe ich zum Beispiel im Beitrag zur Kategoriestruktur für große Websites beschrieben. Hier geht es darum, wie Sie diesen Baum auf dem Bildschirm zeigen.

Welche Aufgabe erfüllt ein gutes Menü eigentlich?

Ein gutes Menü beantwortet drei Fragen gleichzeitig. Was bietet diese Seite? Wo bin ich gerade? Wie komme ich zu dem, was ich suche? Bleibt ein Besucher an einer dieser Fragen hängen, gewinnt die Zurücktaste. Deshalb sehe ich das Menü als ersten Satz Ihres Vertriebs, nicht als Dekoration.

Ein Menü ist außerdem ein Versprechen. Besucher überfliegen es und schätzen in Sekunden ab, was Ihr Unternehmen leistet. Ein Architekturbüro mit „Projekte“, „Leistungen“ und „Kontakt“ signalisiert zum Beispiel sofort, dass man richtig ist. Stehen dagegen „Unsere Vision“, „Werte“ und „Karriere“ vorne, müssen Besucher sich anstrengen.

Die dritte Aufgabe ist Orientierung. Viele Besucher landen über eine Anzeige oder die Suche direkt auf einer Unterseite. Die Startseite sehen sie also nie. Daher muss das Menü auch dort die ganze Website zusammenfassen. Eine markierte aktuelle Seite, ein Logo mit Link zur Startseite und ein einheitliches Layout schaffen dieses Gefühl. Genau das prüfe ich zuerst, wenn ich die Absprungrate einer Firmenwebsite senke.

Wie viele Punkte sollte ein Hauptmenü haben?

Eine feste Zahl gibt es nicht. Aus meiner Praxis lesen sich auf Firmenwebsites fünf bis sieben Hauptpunkte meist angenehm. Das ist allerdings ein Startwert aus Erfahrung, keine Garantie. Wichtiger ist, dass jeder Punkt ein anderes Bedürfnis abdeckt.

Sie kennen vermutlich die Regel „sieben plus minus zwei“. Allerdings bezog sich George Millers Beobachtung auf das Kurzzeitgedächtnis, nicht auf Menüs. Besucher lernen ein Menü nämlich nicht auswendig, sondern überfliegen es; deshalb zählt Gruppierung mehr als Anzahl. Anders gesagt: Zehn gut gruppierte Punkte können fünf vage Punkte schlagen.

Trotzdem hat jeder zusätzliche Punkt seinen Preis. Er senkt die Sichtbarkeit der anderen und kann auf kleineren Laptops die Zeile umbrechen. Ich kürze Menüs mit diesen Fragen:

• Wie viele Personen haben diesen Punkt in den letzten drei Monaten angeklickt?
• Liegt die Seite nah an einem Verkaufs oder Kontaktschritt?
• Passt der Inhalt auch unter einen anderen Punkt?
• Finden Besucher die Seite noch, wenn ich den Punkt entferne?

Die Antworten zeigen meist, dass Seiten wie „Über uns“ ohne Schaden ins Servicemenü oder in den Footer wandern können.

Wie formulieren Sie Menübeschriftungen richtig?

Nutzen Sie die Wörter Ihrer Besucher, nicht interne Fachsprache. „Leistungen“ schlägt zum Beispiel meist „Lösungen“, und „Blog“ oder „Ratgeber“ schlägt „Ressourcen“. Besucher entscheiden nämlich beim Überfliegen, nicht beim Lesen.

Ideen für Beschriftungen hole ich aus drei Quellen. Erstens lese ich die Logdaten der internen Suche; was Menschen eintippen, ist ein Kandidat. Zweitens prüfe ich Suchanfragen aus der Suchmaschine. Zudem frage ich den Vertrieb, welche Wörter er am Telefon am häufigsten hört.

Diese Regeln helfen mir beim Formulieren:

1. Bleiben Sie bei ein oder zwei Wörtern, denn lange Beschriftungen brechen die Zeile.
2. Wählen Sie ein klares Nomen oder eine klare Handlung, etwa „Preise“ oder „Angebot anfragen“.
3. Stellen Sie keine fast gleichbedeutenden Begriffe nebeneinander, etwa „Leistungen“ und „Lösungen“.
4. Wahren Sie Ihren Markenton, verzichten Sie aber auf kreative Begriffe ohne klare Bedeutung.
5. Setzen Sie das unterscheidende Wort an den Anfang, weil das Auge es zuerst liest.

Damit schließen Sie die häufigste Quelle für Verwirrung, die ich im Beitrag über UX Fehler, die Umsatz kosten beschrieben habe.

Warum ist die Reihenfolge der Menüpunkte wichtig?

In einem horizontalen Menü bemerkt das Auge vor allem Anfang und Ende. Deshalb setze ich den wichtigsten Punkt nach vorne und die stärkste Handlung ans Ende. Die Mitte bekommt weniger Aufmerksamkeit; dort stehen unterstützende Seiten.

In der Praxis sieht das auf einer Firmenwebsite oft so aus: „Leistungen“ zuerst, dann „Referenzen“ oder „Projekte“, danach „Blog“ und „Über uns“, am Ende ein hervorgehobener Button „Kontakt“ oder „Angebot anfragen“. So folgt der Besucher von links nach rechts einem kleinen Entscheidungsweg.

Legen Sie die Reihenfolge nicht einmal fest und vergessen sie dann. Braucht eine saisonale Leistung Aufmerksamkeit, kann sie vorübergehend auf Platz zwei rücken. Allerdings zerstört häufiges Umsortieren das Muskelgedächtnis wiederkehrender Besucher. Größere Änderungen nehme ich deshalb ein oder zweimal im Jahr vor, und zwar auf Basis von Daten.

Trennen Sie außerdem den Handlungsbutton optisch von normalen Links. Ein „Kontakt“ in gleicher Farbe und Schriftstärke wie alles andere geht einfach unter. Ein kleiner umrandeter oder gefüllter Button zeigt dagegen, wo der nächste Schritt liegt.

Wann brauchen Sie wirklich ein Megamenü?

Ein Megamenü hilft, wenn unter einem Hauptpunkt viele Unterseiten liegen und diese sich klar gruppieren lassen. Onlineshops, Unternehmen mit vielen Leistungen und Hersteller mit großem Katalog sind typische Fälle.

Braucht also eine Beratung mit fünf Leistungen ein Megamenü? Meist nicht. Stattdessen erfüllt eine einfache Aufklappliste den Zweck und macht weniger Pflegeaufwand. Setzen Sie ein Megamenü nur ein, weil es modern wirkt, dann öffnen Besucher ein großes Panel ohne Nutzen.

Meine einfache Schwelle lautet so: Hat ein Hauptpunkt acht oder mehr Unterseiten, die sich in mindestens zwei sinnvolle Gruppen teilen, denke ich über ein Megamenü nach. Diese Schwelle stammt aus der Praxis; sie ist kein Gesetz.

Die Stärke eines Megamenüs ist die visuelle Hierarchie. Gruppenüberschriften, kurze Beschreibungen und kleine Symbole zeigen das ganze Angebot auf einen Blick. Vor allem neue Besucher, die Ihre Produktgruppen nicht kennen, finden sich damit viel schneller zurecht, als wenn sie Kategorieseiten einzeln öffnen. In Shopprojekten treffen wir diese Entscheidung meist früh in der E-Commerce Beratung.

Welche Fehler sollten Sie beim Megamenü vermeiden?

Den häufigsten Fehler sehe ich, wenn ein Megamenü zur Sitemap wird. Ein Panel mit hundert Links bietet keine Auswahl, sondern eine Last. Zeigen Sie stattdessen pro Gruppe die fünf oder sechs gefragtesten Links und ergänzen Sie „Alle anzeigen“ für den Rest.

Der zweite Fehler ist ein Panel, das sich versehentlich öffnet und schließt. Öffnet es sich, sobald der Mauszeiger die Leiste kreuzt, flackert der obere Seitenbereich ständig. Daher baue ich eine kurze Öffnungsverzögerung und eine kleine Toleranz vor dem Schließen ein. Somit bleibt das Panel offen, wenn die Maus diagonal wandert.

Weitere Fehler, die ich vermeide:

• Gruppenüberschriften ohne Link, obwohl Menschen darauf klicken wollen.
• Panels, die höher als der Bildschirm sind, sodass der untere Teil unerreichbar bleibt.
• Schwere Bilder, die das Öffnen verlangsamen.
• Fehlender Tastaturzugang und eine Escape Taste ohne Wirkung.
• Dasselbe Panel für das Smartphone einfach verkleinern.

Der letzte Punkt wiegt am schwersten. Ein Megamenü ist ein Muster für den Desktop. Auf dem Smartphone brauchen Sie für denselben Inhalt ein anderes Layout.

Sollten Untermenüs bei Hover oder per Klick öffnen?

In den meisten Projekten bevorzuge ich das Öffnen per Klick. Denn ein Klick funktioniert auf Touchscreens, mit Tastatur und mit Maus gleich. Hover setzt dagegen ein Verhalten voraus, das Touchgeräte gar nicht kennen.

Auf dem Desktop fühlt sich Hover allerdings schneller an. Bin ich unsicher, kombiniere ich beides. Das Panel öffnet beim Überfahren, und ein Klick auf den Hauptpunkt schaltet es ebenfalls um. Somit bleibt keine Nutzergruppe außen vor.

Achten Sie dabei auf eine Falle. Ist der Hauptpunkt gleichzeitig Link zu einer Seite und Button für das Panel, wissen Touchnutzer nicht, was der erste Tipp auslöst. Deshalb mache ich den Hauptpunkt entweder zu einem reinen Button und ergänze im Panel „Alle Leistungen“, oder ich setze einen eigenen Pfeilbutton neben die Beschriftung.

Auch das Barrierefreiheitsteam des W3C zeigt dieses Aufklappmuster für die Seitennavigation. Das Beispiel zur Disclosure Navigation in den WAI ARIA Authoring Practices nutzt einfache Buttons und Listen statt der Menürolle für Anwendungen. Ich gebe es Entwicklern als Ausgangspunkt mit.

Wie sollte die Website Navigation auf dem Smartphone funktionieren?

Auf dem Smartphone darf die Website Navigation keine verkleinerte Kopie der Desktopversion sein. Der Bildschirm ist schmal, der Daumen breiter als ein Mauszeiger und die Geduld kürzer. Daher behandle ich das mobile Menü als eigene Gestaltungsaufgabe.

Meine erste Regel: Die wichtigste Handlung gehört aus dem Menü heraus. Ein Anrufbutton, ein WhatsApp Link oder „Angebot anfragen“ sollte auch bei geschlossenem Menü sichtbar bleiben. Besucher sollten dafür nicht erst das Hamburgersymbol antippen müssen.

Meine zweite Regel sind bequeme Tippflächen. Das Kriterium zur Zielgröße in WCAG 2.2 verlangt mindestens 24 mal 24 CSS Pixel oder genug Abstand. Ich halte Menüzeilen deutlich darüber, denn ein Minimum bedeutet noch keinen Komfort.

Meine dritte Regel: Unterpunkte öffnen als Akkordeon. Tippt jemand auf einen Hauptpunkt, erscheinen die Unterpunkte direkt darunter. Braucht es einen neuen Bildschirm, gehört ein klarer „Zurück“ Button dazu. Zudem sollte die Seite hinter dem offenen Menü nicht mitscrollen. Mehr zum mobilen Erlebnis lesen Sie im Beitrag Was ist Mobile First Design.

Hamburgermenü oder Tableiste unten: Was ist besser?

Ein Hamburgermenü spart Platz, versteckt aber Inhalte. Was versteckt ist, fällt weniger auf; also bekommen wichtige Seiten weniger Klicks. Auch Untersuchungen der Nielsen Norman Group zu versteckter Navigation zeigen, dass sichtbare Menüs leichter zu entdecken sind.

Eine Tableiste unten hält drei bis fünf wichtige Ziele ständig sichtbar. Sie liegt dort, wo der Daumen leicht hinkommt, und beschleunigt häufige Aufgaben. Allerdings passt sie nicht zu jeder Website. Auf einer kleinen Unternehmensseite nimmt sie nur Platz weg.

Meine praktische Regel: Bei Inhaltsseiten und Shops mit vielen wiederkehrenden Besuchern denke ich über eine Tableiste nach. Bei klassischen Unternehmensseiten nutze ich ein Hamburgermenü plus einen sichtbaren Kontaktbutton im Kopfbereich. Manchmal schreibe ich zudem zwei oder drei wichtige Punkte direkt neben das Symbol.

Unterschätzen Sie auch das Symbol nicht. Das Wort „Menü“ neben den drei Strichen hilft beim Entdecken, vor allem bei weniger technikaffinen Zielgruppen. Dieses kleine Wort hat keinem meiner Projekte je geschadet.

Was gehört in ein Servicemenü?

Ein Servicemenü ist die kleine Linkgruppe über dem Hauptmenü oder oben rechts. Es trägt Werkzeuge wie Sprachwahl, Kundenlogin, Telefonnummer, Warenkorb und Suche. Das heißt, es bietet Funktionen, keine Inhalte.

Diese Trennung ist der einfachste Weg, das Hauptmenü zu entlasten. Seiten wie „Karriere“, „Presse“ oder „Händler werden“ haben für Ihre Hauptzielgruppe zum Beispiel selten Vorrang. Wer sie sucht, findet sie trotzdem schnell im Servicebereich. Das Hauptmenü konzentriert sich dann auf die Kaufentscheidung.

Darauf achte ich beim Servicemenü:

• Geben Sie ihm weniger Gewicht als dem Hauptmenü, also kleinere Schrift und ruhigere Farbe.
• Zeigen Sie Sprachen mit Namen statt mit Flaggen, denn eine Flagge steht für ein Land.
• Machen Sie die Telefonnummer auf dem Smartphone antippbar.
• Bleiben Sie bei vier oder fünf Punkten, sonst entsteht ein zweites Hauptmenü.

Auf mehrsprachigen Websites ist die Position der Sprachwahl besonders wichtig. Mehr dazu steht in meinem Beitrag zu SEO für mehrsprachige Websites.

Wie planen Sie das Footermenü?

Der Footer ist die letzte Station für Besucher, die bis ganz nach unten scrollen. Meist haben sie nicht gefunden, was sie suchten, oder sie suchen den nächsten Schritt. Deshalb plane ich den Footer als zweite Navigationsebene, nicht als Ablage für übrige Links.

Ein guter Footer enthält meist diese Gruppen: Leistungen oder Produktkategorien, Unternehmensseiten, Support und Rechtliches sowie Kontaktdaten. Jede Gruppe bekommt eine kurze Überschrift. Impressum und Datenschutzerklärung haben hier ihren natürlichen Platz; in Deutschland sollten Besucher beides zudem von jeder Seite aus leicht erreichen.

Am nützlichsten ist der Footer, wenn er wertvolle Seiten öffnet, die im Hauptmenü keinen Platz fanden. FAQ, Referenzen oder kostenlose Tools passen gut hierher. Diese Links helfen Besuchern und stärken zudem Ihre interne Verlinkung, die ich im Beitrag zur internen Verlinkung erkläre.

Füllen Sie den Footer allerdings nicht mit Hunderten Keyword Links. Sie sagen Besuchern nichts und wirken unordentlich. Auf dem Smartphone verhindern eingeklappte Footergruppen außerdem endloses Scrollen.

Menütypen im Vergleich

Die Tabelle fasst zusammen, wann ich welchen Menütyp in der Praxis einsetze. Die Einschätzungen beruhen auf Erfahrung; prüfen Sie also jedes Projekt mit eigenen Daten.

Verstehen Sie diese Typen nicht als Alternativen. In der Praxis nutzen die meisten Websites vier oder fünf davon gleichzeitig. Entscheidend ist, dass jeder eine eigene Aufgabe hat.

Welche Regeln machen ein Menü barrierefrei?

Ein barrierefreies Menü funktioniert mit Tastatur, Screenreader und vergrößerter Darstellung. Das ist ein rechtliches Thema und zugleich ein echtes Nutzerthema. Zudem führt gute Barrierefreiheit meist zu einer klareren Oberfläche für alle.

Die Grundcheckliste, die ich Entwicklern gebe:

1. Setzen Sie das Menü in ein nav Element mit einer sinnvollen Bezeichnung.
2. Machen Sie den Auslöser des Panels zu einem echten Button, der seinen Zustand meldet.
3. Lassen Sie die Tabtaste alle Punkte der Reihe nach erreichen, mit sichtbarem Fokusrahmen.
4. Lassen Sie die Escape Taste ein offenes Panel schließen und den Fokus zum Button zurückgeben.
5. Halten Sie den Fokus im offenen mobilen Menü und geben Sie ihn beim Schließen zurück.
6. Sorgen Sie für ausreichenden Kontrast zwischen Text und Hintergrund.

Der schnellste Test: Legen Sie die Maus beiseite und bewegen Sie sich nur mit der Tastatur durch das Menü. Diese fünf Minuten zeigen in den meisten Projekten mindestens eine kaputte Stelle. Leistung und Barrierefreiheit insgesamt prüfen Sie außerdem mit einem Google Lighthouse Test.

Wie beeinflusst die Website Navigation Ihr SEO?

Die Website Navigation bestimmt mit, wie Suchmaschinen Ihre wichtigsten Seiten finden und wie wichtig diese erscheinen. Seiten im Menü erhalten von fast jeder Seite der Website einen Link. Also legen Sie mit der Auswahl der Menüpunkte direkt fest, wie sich interne Links verteilen.

Technisch zählt vor allem, dass Links crawlbar sind. Laut dem Leitfaden von Google Search Central zu crawlbaren Links kann Google zuverlässig nur a Elemente mit href Attribut folgen. Menüpunkte, die nur über ein JavaScript Klickereignis funktionieren, sind daher riskant.

Auch der Ankertext spielt eine Rolle. „Hier klicken“ würden Sie nie ins Menü schreiben. Allerdings sagen auch vage Begriffe wie „Lösungen“ Suchmaschinen sehr wenig. Klare, beschreibende Beschriftungen zeigen Besuchern und Crawlern gleichermaßen, was sie erwartet.

Andererseits kann ein Megamenü mit Hunderten Links das Gewicht jeder einzelnen Seite verwässern. Ich lasse nur echte Prioritäten im Menü und stütze Nebenseiten über Kategorieseiten und Links im Text. Menü und SEO bringen wir in Projekten meist gemeinsam in der SEO Beratung ins Gleichgewicht.

Wie nutzen Sie Markierung der aktuellen Seite und interne Suche?

Die Markierung der aktuellen Seite sagt: „Hier sind Sie.“ Eine Unterstreichung, fette Schrift oder eine andere Farbe am passenden Punkt genügt. Verlassen Sie sich allerdings nicht allein auf Farbe; ergänzen Sie für farbenblinde Nutzer ein zweites Signal.

Am meisten hilft die Markierung, wenn Besucher direkt auf einer Unterseite landen. Wer über eine Anzeige auf eine Leistungsseite kommt und „Leistungen“ hervorgehoben sieht, weiß sofort, in welchem Bereich er ist. Folglich wechselt er eher zu benachbarten Seiten, statt zu gehen.

Eine interne Suche braucht nicht jede Website. Auf einer Firmenseite mit zehn Unterseiten bleibt das Suchfeld meist leer. Auf Websites mit Hunderten Produkten oder Artikeln nimmt die Suche dem Menü dagegen spürbar Last ab.

Setzen Sie eine Suche ein, dann verstecken Sie sie nicht komplett hinter einer Lupe, vor allem nicht im Shop. Lesen Sie zudem regelmäßig die Suchlogs. Denn jedes Wort, das Besucher suchen, weil sie es im Menü nicht fanden, ist ein kostenloser Verbesserungsvorschlag.

Wann hilft ein fixierter Header und wann stört er?

Ein fixierter Header bleibt beim Scrollen oben stehen. Auf langen Seiten können Besucher so woanders hinspringen, ohne zurückzuscrollen. Das ist vor allem auf langen Leistungs und Produktseiten praktisch.

Der Preis ist allerdings Bildschirmfläche. Auf dem Smartphone frisst ein hoher fixierter Header einen großen Teil des sichtbaren Inhalts. Deshalb halte ich ihn mobil schlank oder blende ihn beim Herunterscrollen aus und beim Hochscrollen wieder ein.

Außerdem achte ich darauf, dass der Header beim Fixieren das Layout nicht verschiebt. Springt der Inhalt in dem Moment, verlieren Leser ihre Stelle. Zudem kann diese Verschiebung die Layoutstabilität verschlechtern, eine der Core Web Vitals. Das Gleichgewicht beschreibe ich im Beitrag UX und SEO in Einklang bringen.

Kurz gesagt: Ein fixierter Header ist ein Werkzeug, kein Standard. Eine Website mit kurzen Seiten braucht ihn selten.

Wie testen Sie Ihr Menü vor dem Livegang?

Am zuverlässigsten testen Sie mit echten Menschen und echten Aufgaben. Bitten Sie fünf Personen etwa: „Finden Sie den Preis für eine Firmenwebsite“ oder „Senden Sie uns eine Angebotsanfrage“. Beobachten Sie dann, was sie tun, und notieren Sie jedes Zögern.

Schneller geht dagegen ein Baumtest nur mit Beschriftungen. Teilnehmende sehen kein Design, sondern nur die Liste der Begriffe, und wählen, wo sie etwas erwarten. So messen Sie die Verständlichkeit der Beschriftungen, ohne dass Optik das Ergebnis färbt.

Nach dem Start schaue ich auf Daten. Ich erfasse Menüklicks in der Webanalyse als Ereignisse und sehe, welche Punkte nie angeklickt werden und welche mehr Klicks als erwartet bekommen. Danach ergänzen Heatmaps und Sitzungsaufzeichnungen das Bild. Halten Sie Menülinks sauber und markieren Sie nur Kampagnenlinks; dabei hilft der UTM Generator.

Bewerten Sie Ergebnisse nicht anhand einer einzigen Kennzahl. Ein selten geklickter Punkt ist nicht unbedingt nutzlos. Vielleicht trägt er schlicht den falschen Namen.

Welche Fehler passieren bei Menüs am häufigsten?

In den Menüs, die ich überarbeite, tauchen immer wieder dieselben Fehler auf. Die meisten sind nicht technisch, sondern Entscheidungsfehler. Sie entstehen, weil jemand Punkte ergänzt, ohne vorher die richtigen Fragen zu stellen.

Die häufigsten:

• Jede Abteilung will ihre Seite im Hauptmenü, und das Menü wird zum Organigramm.
• Die Startseite steht auf dem Logo und zusätzlich als eigener Punkt „Start“.
• Desktop und Smartphone zeigen unterschiedliche Punkte und verwirren Besucher.
• Der Handlungsbutton sieht aus wie jeder andere Link.
• Menübeschriftung und Seitentitel passen nicht zusammen.
• Das Menü wächst mit jeder neuen Seite ohne Plan.

Gegen den letzten Fehler hilft eine einfache Regel. Kommt ein Punkt hinzu, fällt ein anderer weg oder wandert in eine bestehende Gruppe. So bläht sich das Menü mit der Zeit nicht auf.

Checkliste für Ihre Website Navigation

Nutzen Sie diese Liste, wenn Sie eine neue Website bauen oder ein bestehendes Menü aufräumen. Jeder Punkt wirkt für sich klein. Zusammen machen sie das Menü jedoch deutlich schärfer.

1. Haben Sie die drei häufigsten Aufgaben Ihrer Besucher notiert?
2. Deckt jeder Hauptpunkt ein anderes Bedürfnis ab?
3. Stammen die Beschriftungen aus der Sprache der Besucher?
4. Hebt sich die wichtigste Handlung als eigener Button ab?
5. Brauchen Sie wirklich ein Megamenü, oder reicht eine Aufklappliste?
6. Bleibt die wichtigste Handlung mobil auch bei geschlossenem Menü sichtbar?
7. Funktioniert das Menü mit Tastatur und Touch gleich?
8. Sind alle Links echte a Elemente mit href?
9. Öffnet der Footer geordnete Wege zu Nebenseiten und Rechtlichem?
10. Messen Sie Menüklicks?

Möchten Sie die Menügestaltung als Teil einer neuen Website angehen, finden Sie mehr unter Webdesign. Ein Menü wirkt am besten, wenn Sie es gemeinsam mit der restlichen Website planen.

In welcher Reihenfolge treffen Sie Menüentscheidungen?

Zum Schluss verbinde ich alle Entscheidungen zu einer Abfolge. Zuerst klären Sie die Aufgaben der Besucher. Danach wählen Sie die Seiten, die diese Aufgaben erfüllen. Dann schreiben Sie Beschriftungen, legen die Reihenfolge fest und wählen den Menütyp. Die Optik kommt ganz am Ende.

Diese Reihenfolge zählt, denn viele Teams beginnen am anderen Ende. Sie entwerfen zuerst ein schickes Megamenü und überlegen erst danach, was hineingehört. In solchen Projekten formt die Vorlage das Menü, nicht der Inhalt. Das Ergebnis sind meist überflüssige Panels und vage Beschriftungen.

Zusammengefasst besteht eine gute Website Navigation aus wenigen, aber richtigen Punkten, Beschriftungen in der Sprache der Besucher, gerätegerechtem Verhalten und regelmäßiger Messung. Stimmen diese vier Dinge, fällt das Menü nicht auf und erledigt trotzdem seine Arbeit. Als nächsten Schritt empfehle ich meinen Beitrag über conversionorientiertes Webdesign.