Navigation, die Besucher führt — wann Dropdowns helfen und wann sie schaden

Navigation, die Besucher führt — wann Dropdowns helfen und wann sie schaden

Eine Navigation entscheidet in den ersten drei Sekunden darüber, ob jemand sich auf deiner Website zurechtfindet oder zurück in die Trefferliste geht. Diese Übersicht zeigt, wann ein Dropdown wirklich hilft, wann es Anfragen versteckt und welche Navigations-Muster für KMU-Sites in der Praxis funktionieren.

Inhaltsverzeichnis 11 Abschnitte

Was ein Menü in drei Sekunden leisten muss

Eine Navigation ist nicht das Inhaltsverzeichnis deiner Website. Sie ist die Antwort auf eine einzige Frage, die dein Besucher in den ersten drei Sekunden stellt: „Bin ich hier richtig, und wo finde ich, was ich brauche?“

Wer diese Frage in drei Sekunden klar beantwortet, hat den Besucher gehalten. Wer dafür länger braucht oder Verschachtelung verlangt, verliert ihn. Die Aufmerksamkeitsspanne im Web ist unverändert kurz, und in der mobilen Welt kommt eine zweite Hürde dazu – jeder zusätzliche Tippvorgang reduziert die Wahrscheinlichkeit, dass jemand weiter klickt.

Thomas, Geschäftsführer eines Sondermaschinenbau-Betriebs mit etwa 80 Mitarbeitenden in Kärnten, hat das auf die unbequeme Tour gelernt. Seine Site listete in der Hauptnavigation zwölf Punkte, jeder mit einem Dropdown-Untermenü von vier bis sieben Unterpunkten. Insgesamt fünfzig Navigationspunkte, alle in einem Klick erreichbar. Das war strukturell stimmig – fachlich war jeder Punkt berechtigt – und in der Realität katastrophal: Mobile-Besucher tippten zwei Mal verloren herum, gingen dann zurück zu Google, und die wenigen, die durchhielten, fanden trotzdem nicht das gesuchte Produkt.

Eine gute Navigation reduziert Komplexität, sie bildet sie nicht ab. Das ist eine andere Disziplin als die der Vollständigkeit, an die viele Unternehmen denken, wenn sie ihre Menüstruktur planen.

Wann ein Dropdown wirklich hilft — und wann es Anfragen kostet

Ein Dropdown-Menü ist ein Werkzeug, das in zwei Fällen Sinn macht. Erstens, wenn du eine klare Hierarchie hast und der Besucher auf der ersten Ebene schon weiß, in welchem Bereich er suchen muss – etwa „Leistungen“, unter dem sich vier konkrete, gut benannte Unterleistungen verbergen. Zweitens, wenn du am Desktop genügend Platz hast und der Inhalt es rechtfertigt.

In drei Fällen ist ein Dropdown ein Problem.

Erstens, wenn wichtige Seiten ausschließlich im Dropdown sichtbar sind. Eine Karriereseite, die nur über „Über uns – Team – Karriere“ erreichbar ist, verliert die meisten Bewerber, bevor sie sie gesehen haben. Wenn eine Seite Anfragen bringen soll, gehört sie in die erste Ebene, nicht unter eine Drittebene.

Zweitens, wenn das Hover-Verhalten am Desktop hakt. Browser-Verzögerungen, schmale Touchpads, falsche Maus-Bewegungen – die Liste der kleinen Hürden ist lang. Studien der Nielsen Norman Group zeigen seit Jahren, dass Hover-basierte Mega-Menüs ohne Klick-Alternative überraschend viele Fehlbedienungen produzieren[1].

Drittens, wenn das Verhalten am Handy nicht durchdacht ist. Ein klassisches Hover-Dropdown funktioniert auf Touch-Geräten nicht. Die Site muss das Verhalten dort anders implementieren – als Akkordeon im Hamburger-Menü, als zweite Tap-Stufe, als Bottom-Sheet. Wer das nicht aktiv löst, hat am Handy entweder ein nicht öffnendes oder ein versehentlich öffnendes Menü.

Drei Navigations-Muster, die in der Praxis funktionieren

Es gibt nicht „die“ richtige Navigation. Es gibt drei Muster, die für KMU-Sites in den allermeisten Fällen gut funktionieren. Welches passt, hängt von der Tiefe und Breite deines Angebots ab.

Das einfache Dropdown ist der Klassiker für überschaubare Sites. Sechs Hauptpunkte in der Top-Navigation, davon zwei bis drei mit einem kurzen Dropdown von je vier bis sechs Unterpunkten. Das funktioniert für Dienstleister mit klar abgegrenzten Bereichen, für Handwerksbetriebe mit Leistungen und Referenzen, für Beratungen mit Themenseiten.

Das Mega-Menü ist die Antwort auf Komplexität. Ein einzelnes Dropdown öffnet eine größere Fläche, die mehrere Spalten enthält, oft mit kurzen Erklärungen und Bildern. Das macht Sinn, wenn du viele Produkte oder Leistungen hast und sie ordentlich gruppieren kannst – typisch bei Industrieausstattern, bei Sondermaschinenbau-Betrieben mit verschiedenen Produktlinien, bei Mittelständlern mit klar getrennten Geschäftsfeldern. Voraussetzung: das Mega-Menü ist gut strukturiert, hat sprechende Überschriften und funktioniert am Handy als gestaffelter Hamburger.

Die flache Navigation ist die unterschätzte Variante. Vier bis sieben Hauptpunkte, keine Dropdowns, alles direkt erreichbar. Klingt simpel und ist es auch – und funktioniert für viele KMU besser, als die Verantwortlichen denken. Wer seine Inhalte auf vier bis sieben klare Themen reduzieren kann, hat eine Navigation, die niemand erklären muss. Sie zwingt zur Disziplin in der Inhaltsstruktur, was meistens eine gute Übung ist.

Mobile zuerst, nicht „auch Mobile“

Sechs von zehn KMU-Site-Besuchen kommen aus mobilen Geräten. Auf vielen Sites ist die Mobile-Navigation trotzdem ein Nachgedanken – das Desktop-Menü wird unter dreihundert Pixeln Bildschirmbreite irgendwie zusammengefaltet, und das war's.

Drei Punkte machen den Unterschied zwischen einer brauchbaren und einer frustrierenden Mobile-Navigation.

Erstens, die Größe der Tap-Targets. Apple empfiehlt mindestens 44 mal 44 CSS-Pixel pro tippbares Element, Google Material liegt bei 48 Pixeln, die WCAG-Empfehlung bewegt sich im selben Bereich. Wer kleinere Menüpunkte einsetzt, ärgert Daumen und Finger – mit messbar mehr Fehltipps und Abbruchaktionen.

Zweitens, die Verschachtelungs-Tiefe. Jede zusätzliche Ebene halbiert die Wahrscheinlichkeit, dass jemand sie öffnet. Drei Ebenen sind das praktische Maximum: Hauptmenü, eine Unter-Ebene, eine Drittebene nur, wenn sie wirklich gebraucht wird und ein klar sichtbarer Zurück-Pfad existiert.

Drittens, die Sichtbarkeit. Ein Hamburger-Symbol oben rechts hat sich als Standard durchgesetzt – nicht weil es ideal ist, sondern weil es alle Besucher kennen. Wer es kreativ ersetzt oder versteckt, verliert Klicks. Daneben ein Such-Symbol, eine Telefonnummer oder ein „Anrufen“-Button – das ist die einzige Mobile-Header-Variante, die in fast jedem Test gut abschneidet.

Wer den Mobile-Test seiner eigenen Site machen will: öffne deine Site am Handy bei einer langsameren Mobilfunk-Verbindung, klicke fünf Aufgaben durch („Finde Kontakt, finde Preise, finde Referenzen, finde Karriere, finde Anfahrt“). Wenn du selbst länger als eine Minute brauchst, läuft etwas schief – und du weißt, wo. Eine tiefere Auswertung der mobilen Performance steht im Beitrag über die Drei-Sekunden-Marke am Handy.

Die fünf häufigsten Fehler in KMU-Navigationen

Aus rund 60 Webdesign-Audits der letzten zwei Jahre zeigen sich fünf wiederkehrende Muster, die Anfragen kosten.

  1. Zu viele Hauptpunkte. Sobald du mehr als sieben oder acht Punkte in der ersten Ebene hast, vergisst der Besucher beim zweiten Lesen die ersten. Reduziere brutal – jeder Punkt, der nicht in zehn von hundert Besuchen angeklickt wird, gehört nicht in die Hauptnavigation.
  2. Unklare Labels. „Lösungen“, „Services“, „Bereich“ sind innenpolitisch korrekt und für Außenstehende leer. Schreib auf das Label, was sich dahinter verbirgt: „Heizung & Sanitär“, „Stellenangebote“, „Preise“. Wer Branchenjargon nutzt, sortiert seine eigene Zielgruppe aus.
  3. „Mehr“-Sammelbecken. Wenn dein Menü einen Punkt „Mehr“ oder „Sonstiges“ hat, ist das ein Eingeständnis, dass die Hierarchie nicht durchdacht ist. „Mehr“ wird seltener angeklickt als alle benannten Punkte – wer wichtige Seiten dort versteckt, versteckt sie effektiv.
  4. Fehlende Konsistenz. Das Menü ändert sich zwischen Startseite und Unterseiten, oder die Reihenfolge unterscheidet sich am Handy. Besucher merken sich Positionen – wer die Position verschiebt, lässt sie suchen.
  5. Versteckter Call-to-Action. Telefonnummer im Footer, „Termin vereinbaren“ zwei Klicks tief, Kontaktformular nur über Burger-Menü – wer Anfragen will, gibt ihnen einen sichtbaren, dauerhaft präsenten Eingang im Header.

Drei dieser Fehler kannst du heute Nachmittag selbst beheben. Punkt eins (Reduktion) und Punkt drei („Mehr“ entfernen) brauchen meist eine Entscheidung im Team, weil jeder im Haus „seinen“ Menüpunkt verteidigt – das ist ein Strategie-Gespräch, kein Designer-Job.

Wenn die Navigation zur Restmülltonne wird

Ein Muster aus etwa der Hälfte aller älter gewachsenen KMU-Sites: das Menü ist über die Jahre gewachsen, ohne dass je etwas rausgenommen wurde. Jedes neue Thema bekam einen neuen Menüpunkt. Jede interne Veränderung schob etwas in „Mehr“. Nach fünf Jahren ist die Navigation ein Spiegel der Unternehmensgeschichte, nicht der Besucher-Bedürfnisse.

Das Problem dabei: die Navigation wirkt wie ein Wegweiser, ist aber faktisch eine Lagerliste. Besucher, die suchen, finden eher zufällig.

Wer das Problem in seiner eigenen Site erkennt, kann mit einer einfachen Übung anfangen. Liste deine Top-10 Anfragetypen der letzten zwölf Monate auf. Daneben die Top-10 angeklickten Menüpunkte aus deiner Analytics. Wenn die beiden Listen sich nur zur Hälfte überlappen, hat deine Navigation aufgehört, deine wichtigsten Inhalte sichtbar zu machen. Du baust dann nicht ein neues Menü, du sortierst das alte gegen die echten Besucher-Anliegen.

Tastatur, Screenreader, BFSG — die Barrierefreiheit der Navigation

Ab Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für viele KMU-Angebote, auch online. Für die Navigation bedeutet das in der Kurzform: das Menü muss mit der Tastatur bedienbar sein, ein Screenreader muss es korrekt vorlesen, und es muss eindeutig benennbar sein, welches Element gerade fokussiert ist.

Die technische Umsetzung ist überschaubar, wenn die Site einen sauberen HTML-Standard fährt. Das nav-Element für die Hauptnavigation, aria-label für unterschiedliche Navigationsbereiche (Hauptnavigation, Brotkrümel, Footer-Navigation), aria-expanded für Dropdowns, sichtbare Fokus-Marker bei Tab-Bedienung. Wer keine vernünftige Fokus-Markierung hat, verliert nicht nur tastatur-affine Besucher, sondern jeden, der schnell durchklickt und den Faden verliert.

Realistischer Aufwand für eine bestehende Site: ein halber bis ganzer Tag durch jemanden, der HTML-Standards versteht. Bei modernen Frameworks oft weniger, bei alten WordPress-Themes mit eigenwilliger Navigation mehr. Wer seinen Webentwickler darauf ansprechen will, fragt nach „Keyboard-Trap-Test der Navigation und aria-Markup“. Das ist verständliche Sprache für ein Briefing.

Die laufende Sichtbarkeit von Bewerbern, älteren Kunden und Besuchern mit eingeschränkter Mobilität ist ein eigener Hebel, der oft unterschätzt wird – und gleichzeitig deckt eine barrierefreie Navigation die rechtlichen Mindestanforderungen ab. Beide Effekte für denselben Aufwand.

Eine Navigation ist nichts, was du einmal baust und dann fertig hast. Sie wächst mit der Site, sie altert mit ihr, sie wird durch jeden neuen Content angefasst – oder eben nicht angefasst.

Drei Routinen helfen. Erstens, einmal pro Jahr die Navigation gegen die Top-Aufgaben deiner Besucher prüfen. Wer Analytics nutzt, sieht die Klick-Verteilung in einer Stunde. Wer keine Analytics hat, fragt drei Stammkunden, drei Neukunden und ein potenzielles Talent. Das ist nicht repräsentativ, aber konkret.

Zweitens, jeden neuen Menüpunkt aktiv genehmigen lassen. Wer für jede neue Seite reflexhaft einen Menüpunkt anlegt, hat in zwei Jahren wieder fünfzig Punkte. Ein Menüpunkt verlangt eine eigene Entscheidung – braucht es ihn oder genügt ein Querverweis aus dem Body einer anderen Seite.

Drittens, alle drei bis fünf Jahre eine grundsätzliche Überarbeitung. Wenn die Site strukturell anders aussieht als zum Launch, ist es wahrscheinlich an der Zeit. Eine gute Navigation altert nicht durch ihr Design, sondern dadurch, dass das Unternehmen sich verändert hat und das Menü das nicht abbildet.

So testest du deine eigene Navigation in zwanzig Minuten

Vier Tests, die du selber machen kannst, ohne Werkzeuge oder fremde Hilfe.

Test eins: der Drei-Sekunden-Test. Öffne deine Startseite, zähle bis drei und schließe sie wieder. Schreib auf, was du in der Navigation gesehen hast. Vergleiche das mit deinen Top-Geschäftsfeldern. Wenn dein wichtigstes Angebot nicht in der Liste auftaucht, hat es in der Navigation keinen Platz.

Test zwei: der Aufgaben-Test. Bitte eine Person, die deine Site nicht kennt, drei Aufgaben zu erfüllen: dein Telefon zu finden, eine bestimmte Leistung anzuklicken, ein Stellenangebot zu finden. Beobachte stumm. Jede Suchbewegung länger als zehn Sekunden ist ein Hinweis auf ein Strukturproblem.

Test drei: der Mobile-Test. Drehe das Handy quer und hochkant, scrolle durch die Hauptnavigation, tippe drei Untermenüpunkte an. Funktioniert das Hover-Verhalten am Touchscreen, oder sind die Dropdowns am Handy unzugänglich.

Test vier: der Tastatur-Test. Öffne deine Site am Desktop, drück nur die Tab-Taste, navigiere durch das gesamte Menü, drück Enter auf einem Untermenüpunkt. Wenn du irgendwo „hängen bleibst“, ist deine Navigation für tastaturbedienende Besucher nicht barrierefrei.

Diese vier Tests dauern zusammen zwanzig Minuten und liefern dir konkretere Hinweise als jede SEO-Diskussion über Menüstruktur. Wer einen davon nicht bestehen sieht, hat einen sofortigen Hebel – und braucht meistens keine neue Website, sondern eine sortierte alte.

Häufige Fragen

Wie viele Punkte sollte die Hauptnavigation haben?

Vier bis sieben in den meisten Fällen. Acht ist eine harte Obergrenze, alles darüber kostet Übersicht. Wer mehr Inhalte hat, gruppiert sie sinnvoll und arbeitet mit Mega-Menü oder thematischen Übersichtsseiten – nicht mit zwölf Hauptpunkten.

Wann ist ein Mega-Menü sinnvoll und wann übertrieben?

Sinnvoll, wenn du viele Produkte oder Leistungen hast, die sich klar gruppieren lassen und einen Großteil der Besuche ausmachen. Übertrieben, wenn du sechs Punkte mit je drei Unterpunkten hast – das ist ein klassisches Dropdown. Mega-Menüs verlangen Pflegeaufwand und Touch-Optimierung, beides solltest du eingeplant haben.

Sind Hamburger-Menüs am Desktop akzeptabel?

In den allermeisten Fällen nein. Am Handy ist der Hamburger Standard und akzeptiert. Am Desktop kostet er Klicks, weil Besucher die Navigation nicht sehen und nicht aktiv tippen, um sie zu öffnen. Wer am Desktop mit einem Hamburger arbeitet, verliert messbar Interaktion mit der Navigation.

Wie tief darf die Navigations-Hierarchie sein?

Drei Ebenen sind das praktische Maximum: Hauptmenü, ein Untermenü, eine dritte Ebene nur dort, wo sie zwingend nötig ist und ein klarer Zurück-Pfad besteht. Mehr als drei Ebenen werden in Studien praktisch nicht mehr besucht – und am Handy sind sie ohnehin unhandlich.

Muss meine Navigation barrierefrei sein?

Ab Juni 2025 gilt das BFSG für viele KMU-Online-Angebote und verlangt unter anderem tastatur-bedienbare Navigation, korrekte ARIA-Attribute und sichtbare Fokus-Marker. Selbst wo das BFSG nicht greift, ist eine barrierefreie Navigation eine Frage der Reichweite – ältere Besucher, Bewerber mit eingeschränkter Mobilität, Tastatur-Nutzer profitieren alle.

Wie oft sollte ich meine Navigation überarbeiten?

Eine jährliche Prüfung gegen Top-Aufgaben reicht in den meisten Fällen aus. Eine größere Überarbeitung wird nach drei bis fünf Jahren fällig, wenn sich das Unternehmen strukturell verändert hat – neue Geschäftsfelder, andere Zielgruppen, andere Inhaltsschwerpunkte. Wer regelmäßig prüft, verhindert das Auflaufen einer kompletten Neugestaltung.

Was du heute tun kannst

Öffne deine Site, mach den Drei-Sekunden-Test und schreib auf, welche drei bis vier Themen du in der Navigation siehst. Vergleiche sie mit deinen Top-Anfragetypen der letzten Monate. Wenn die Listen abweichen, hast du den klarsten Hinweis darauf, wo du als Erstes ansetzen kannst.

Diese Sortier-Übung kostet einen Nachmittag und eine ehrliche Entscheidung im Team, welche drei, vier Themen wirklich nach vorne gehören – und sie ist fast immer der schnellere Weg als eine neue Website. Falls dabei herauskommt, dass nicht nur das Menü, sondern die ganze Struktur nicht mehr zu deinem Betrieb passt, lohnt der Blick aufs große Ganze: wie eine KMU-Website heute aufgebaut sein sollte, von der Navigation bis zur Conversion.

Wie geht es weiter?