Gestalten Sie das mobile Menü nach den Hauptaufgaben, verwenden Sie Textbezeichnungen und eine vorhersehbare Hierarchie und testen Sie Öffnen, Fokus, Zurückkehren sowie den Abschluss des Weges auf realen Geräten.
Die mobile Navigation soll auf kleinem Raum die wichtigsten Wege zugänglich machen, ohne dass man die Organisationsstruktur des Unternehmens kennen muss. Ein Menü-Icon, ein Logo und ein paar Shortcuts reichen nicht aus, wenn der Nutzer eine konkrete Leistung, einen Preis, einen Kontakt oder eine begonnene Aufgabe sucht. Ein schwaches Menü erzeugt Sackgassen und zwingt Besucher, Ebenen immer wieder zu öffnen und zu schließen.
Ein gutes Design verbindet die Priorisierung von Inhalten, klare Benennungen, stabiles Verhalten und eine barrierefreie Umsetzung. Es muss per Touch, mit der Tastatur, bei vergrößertem Text und beim Wechsel der Ausrichtung funktionieren. Es gibt weder eine universelle Anzahl von Einträgen noch ein verbindliches Muster. Die Wahl sollte anhand realer Aufgaben und Geräte überprüft werden, nicht nur anhand eines statischen Bildes.
Die Menüpriorität richtet sich nach Aufgaben, nicht nach internen Abteilungen
Sammeln Sie die häufigsten Ziele aus Nutzerforschung, interner Suche, Support und Analytics. Unterscheiden Sie zwischen primären Aufgaben, ergänzenden Informationen und Systemlinks. Die Hauptnavigation muss nicht jede Seite enthalten. Tiefer liegende Inhalte können über ein Kontextmenü, die Suche und den Footer zugänglich gemacht werden, sofern der Nutzer stets versteht, wo er sich befindet.
Benennen Sie Menüpunkte im Vokabular Ihres Publikums. Vage Bezeichnungen wie „Lösungen“ oder „Mehr“ brauchen Kontext, besonders wenn sich dahinter unterschiedliche Leistungen verbergen. Ordnen Sie die Punkte nach der Entscheidungslogik, nicht alphabetisch, sofern es dafür keinen klaren Grund gibt. Notieren Sie zu jedem Punkt die Zielseite und die Frage, die sie nach dem Klick beantworten soll.
- Hauptleistung oder Nutzeraufgabe
- Kontakt und Erreichbarkeit im richtigen Kontext
- Anmeldung oder Konto ohne Verwechslung mit dem Angebot
- Suche bei umfangreicheren Inhalten
Ein Bedienelement muss sowohl seinen Namen als auch seinen Zustand mitteilen
Verwenden Sie eine echte Schaltfläche mit zugänglichem Namen, kein anklickbares Bild oder allgemeines div. Der Öffnungszustand muss programmatisch verfügbar und visuell erkennbar sein. Das Symbol mit drei Linien allein ist nicht für alle verständlich; der Text „Menü“ kann Unsicherheit verringern. Ein Klick auf das Logo sollte vorhersehbar zur Startseite führen und eine passende Bezeichnung haben.
Setzen Sie nach dem Öffnen den Fokus an eine logische Stelle und geben Sie ihn nach dem Schließen an die auslösende Schaltfläche zurück. Escape soll das Menü schließen, wenn es sich wie ein Overlay verhält. Inhalte hinter dem Modal dürfen nicht versehentlich bedienbar bleiben. Bei einem gewöhnlichen aufklappbaren Panel implementieren Sie hingegen kein unnötig komplexes Tastaturmodell, das für Anwendungsmenüs gedacht ist.
Die Hierarchie bleibt auch bei mehreren Ebenen gut lesbar
Unterscheiden Sie einen aufklappbaren Menüpunkt vom Link zur übergeordneten Seite. Übernimmt ein Element beides, ist das Verhalten bei Touch-Bedienung oft unklar. Erwägen Sie einen separaten Link und einen separaten Button zum Aufklappen. Kennzeichnen Sie den aktuellen Bereich durch Text, Zustand oder einen Stil, der nicht ausschließlich auf Farbe setzt. Der Nutzer soll wissen, was sich geändert hat.
Erwägen Sie bei einer tiefen Struktur schrittweise verschachtelte Panels mit einer klaren Zurück-Schaltfläche und dem Namen der aktuellen Ebene. Behalten Sie bei der Rückkehr die Scrollposition und den geöffneten Zweig bei, sofern dies die Aufgabe unterstützt. Animationen dürfen weder Inhalte verdecken noch die Präferenz für reduzierte Bewegung missachten. Eine einfachere Hierarchie ist oft besser als ein effektvoller Übergang.
- klarer Unterschied zwischen Link und Aufklappen
- sichtbarer Name der aktuellen Ebene
- vorhersehbare Rückkehr um eine Ebene
- Status, der nicht nur durch Farbe oder Symbol erkennbar ist
Touch-Fläche, Zoom und Ausrichtung verändern das tatsächliche Verhalten
Bedienelemente müssen ausreichend groß und voneinander getrennt sein, damit niemand versehentlich ein benachbartes Element aktiviert. Testen Sie das Menü mit einer Hand, bei vergrößertem Text und im Querformat. Ein fixierter Header darf weder den Großteil des Bildschirms einnehmen noch das Ziel nach einem Sprung zu einem Anker verdecken. Berücksichtigen Sie die sicheren Bereiche des Geräts im CSS.
Entscheiden Sie beim Öffnen des Menüs bewusst, ob der Hintergrund gescrollt werden darf. Ein versehentliches Scrollen unter dem Overlay führt nach dem Schließen an eine andere Stelle. Eine Größenänderung oder Drehung darf weder einen ausgeblendeten Seitenkörper noch einen fehlerhaften Zustand hinterlassen. Falls JavaScript versagt, sollen die grundlegenden Links durch Progressive Enhancement erreichbar bleiben.
Die Tests prüfen den Abschluss des Nutzerwegs, nicht nur das Öffnen des Menüs
Bereiten Sie Aufgaben vor wie eine bestimmte Leistung finden, Optionen vergleichen, eine Filiale anrufen oder im Konto fortfahren. Beobachten Sie, wo die Person sucht, was sie für einen Link hält und ob sie zurückfindet. Testen Sie Touch-Bedienung, Tastatur, Screenreader, Vergrößerung und eine Kombination von Geräten mit unterschiedlicher Breite.
In der Analytik lassen sich das Öffnen des Menüs und die Auswahl eines Eintrags erfassen, doch das Ereignis allein erklärt nicht den Grund. Verknüpfen Sie es mit dem Abschluss der Aufgabe, Feedback und Fehlerprotokollen, ohne unnötige personenbezogene Daten zu erheben. Wenn Nutzer das Menü über die Suche umgehen, prüfen Sie Bezeichnungen und Struktur, bevor Sie eine weitere Ebene hinzufügen.
Häufige Fragen
Ist das Hamburger-Icon für jede mobile Website geeignet?
Nicht automatisch. Es spart Platz, verbirgt aber Optionen. Bei einigen wichtigen Zielen kann eine sichtbare untere oder obere Navigation mit klaren Bezeichnungen sinnvoll sein.
Wie viele Ebenen darf ein mobiles Menü haben?
Ein festes Limit gibt es nicht. Jede Ebene erhöht jedoch den Aufwand und das Risiko, den Kontext zu verlieren. Prüfen Sie eine tiefe Struktur anhand realer Aufgaben.
Sollte sich das Menü nach einem Klick auf einen Link automatisch schließen?
Beim Wechsel zu einem neuen Ziel in der Regel ja. Wird Inhalt auf derselben Seite gesteuert, muss die Änderung angekündigt und der Fokus logisch platziert werden.
Quellen und weiterführende Lektüre
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
