Wie plane ich ein Navigationsmenü?
Wer kennt es nicht? Man steht in einem großen Kaufhaus oder im Baumarkt und sucht verzweifelt nach der richtigen Abteilung. Zum Glück gibt es Schilder und/oder Farbcodierungen, die Aufschluss darüber geben in welcher Etage welche Abteilungen zu finden sind. Eben diese Orientierung bietende und leitende Funktion übernimmt das Navigationsmenü auf einer Webseite. Wie man ein Navigationsmenü plant, erfahrt ihr in diesem Beitrag.
Landet ein Nutzer auf der Homepage, fällt der Blick mit als erstes auf die Menüleiste. Was hier zu sehen ist, gibt dem Nutzer einen ersten Aufschluss über die Inhalte der Webseite. Darum sollten die Kategorien und der Aufbau sinnvoll gewählt werden.
Immer wieder sieht man leider Menüs, welche weder Aufschluss über die Inhalte geben noch richtungsweisend und strukturiert sind. Gerade bei großen Shops sind die Menüs schnell überladen, so dass es schwer ist, den Überblick zu behalten. Nicht alle Unterkategorien müssen im Menü enthalten sein. In diesem Fall ist es hilfreich, auch andere Navigationselemente zu benutzen. Bei einer großen Bandbreite an Warengruppen und Produkten ist ein Filter-Menü besonders hilfreich. So wird es dem Nutzer ermöglicht, innerhalb der geklickten Kategorie aus dem Navigationsmenü die angezeigten Produkte nach seinen Bedürfnissen zu spezifizieren.
Weitere Navigationselemente auf einer Webseite:
- Interne Suchfunktion
- Meta Navigation
- Breadcrumb
- Footer
- Interne Verlinkung
- Paginierung
- Tag-Clouds
DON’T MAKE ME THINK
Wenn ein*e Nutzer*in ein Navigationsmenü sieht, sollte sich die logische Struktur sofort erschließen und schnelle Orientierung bieten. Zusätzlich ist natürlich auch die Wahl der Bezeichnung der Kategorien nicht nur aus nutzerfreundlicher Sicht, sondern auch für SEO wichtig.
Tipps zur Planung eines Navigationsmenüs
- Es empfiehlt sich die Hauptnavigationspunkte nach der Millerschen Zahl 7 +/-2 aufzustellen. Diese besagt, dass das menschliche Gehirn zwischen 5-9 Informationen in seinem Kurzzeitgedächtnis auf einmal verarbeiten kann.
- 3-Klick Regel: Auch hier handelt es sich vielmehr um eine Empfehlung als eine Regel. Damit ein Menü jedoch übersichtlich und nicht zu verschachtelt wird, ist es ratsam die Ebenen auf maximal 3 zu beschränken.
- Kurze und knackige Bezeichnungen: Dies ermöglicht die schnelle Informationsaufnahme und erleichtert das Verständnis. Neben den inhaltlichen Vorteilen spart es außerdem Platz. Noch wichtiger ist es jedoch, gängige Begriffe zu wählen. An dieser Stelle sollte die Konzeption mit einer Keywordrecherche unterstützt werden, um heraus zu finden, welche Begrifflichkeiten am häufigsten gesucht werden.
- Der Navigationspunkt „Home“/“Startseite“ ist in der Regel überflüssig, da die Nutzer mittlerweile mit dem verlinkten Logo als Rückkehr zur Startseite vertraut sind.
- Besonders wichtig für die Konzeption der Navigation ist visuelle Umsetzung. Eine enge Zusammenarbeit mit Designer*innen ist unerlässlich. Unvermeidlich stellt sich in diesem Zusammenhang auch die Frage nach der mobilen Navigation und ob das Konzept auch auf diesen Anwendungsbereich übertragbar ist.
- Bei großen Mega-Menüs können zusätzlich Icons und Bilder eingesetzt werden, um die Struktur schneller visuell erfassbar zu gestalten.
- Das Navigationsmenü dient nicht dazu, die komplette Webseitenstruktur abzubilden.
Struktur des Menüs planen
Mit diesen Empfehlungen im Hinterkopf geht es nun an die Konzeption der Kategorien. Je nach Umfang kann dies eine Herausforderung darstellen. Wichtig dafür ist es, seine Zielgruppe zu kennen. Welche Bedürfnisse haben sie und wie wird gesucht?
Ist es beispielsweise sinnvoll, ein Menü für einen Berufsbekleidungsshop ähnlich aufzubauen wie einen herkömmlichen Bekleidungsshop? Die gängigste Art in herkömmlichen Bekleidungsshops ist in erster Ebene die Aufteilung in Damen, Herren und Kinder. In zweiter Ebene folgen dann beispielsweise die Kategorien Hosen, Oberteile, Unterwäsche etc. Bei einem Shop für Berufsbekleidung ließe sich dieses Klassifizierungssystem ebenfalls übernehmen. Möglicherweise ist es hier jedoch sinnvoller, nach Berufen zu klassifizieren. Der Vorteil bei dieser Klassifizierung ist, dass der Nutzer nicht nur das gesuchte Produkt findet, sondern auch gleich weitere Warengruppen, passend zu seinem Beruf, für sich entdecken kann.
Das Bibliotheken-Modell:
Mit dem Wissen über die eigene Zielgruppe erstellt man nun das Konzept für die Webseite.
Stellt man sich das Klassifizierungssystem einer Bibliothek vor, hat man schon die richtige Struktur für die eigenen Warengruppen/ Kategorien vor Augen.
- Die Etagen dienen zur groben Einteilung der Wissenschaften wie Geisteswissenschaften, Naturwissenschaften etc.
- Die Gänge betiteln die einzelne Wissenschaft schon genauer, zum Beispiel die Literaturwissenschaft.
- In den Regalen befinden sich dann die Mediävistik und neueren deutschen Literaturwissenschaft.
- In den einzelnen Regalfächern wiederum findet man die Bücher, welche den Produkten, Dienstleistungen oder Artikeln entsprechen.
Dieses Modell kann man sich zum Vorbild für die Konzeption der Navigationsmenüs nehmen. Die Produkte oder Themen werden nach diesem Vorbild zu Kategorien zusammengefasst. Dabei geht man vom kleinsten zum größten vor, bis am Ende die Kategorien für die Navigationsleiste stehen.
Usability Check – LEICHT AUFFINDBAR, ÜBERSICHTLICH und INTUITIV
Haben alle ihren Beitrag geleistet, das Navigationskonzept steht, das Design ist finalisiert und die Seite ist in der Testumgebung programmiert, kann die Nutzerfreundlichkeit überprüft werden. Eine gute User Experience ist auch aus SEO-Sicht wichtig, denn sie sorgt für bessere User Signals.
- Navigation sollte im Header Bereich sein und sofort ins Auge fallen
- Mobil: Burgermenü sollte auffälligster Teil des Headers sein
- Menüleise/Burgermenü sollte auf allen Unterseiten sichtbar sein
- Sticky Menü bei inhaltsreichen Seiten empfehlenswert
- Wo bin ich? Aktuell aufgerufenen Menüpunkt hervorheben
- Nochmal hinterfragen: Versteht der Nutzer was ihn hinter einem Menüpunkt erwartet?
- Werden die Erwartungen der Nutzer erfüllt?
Fazit:
- Kenne deine Zielgruppe, ihre Nutzungs- und Suchgewohnheiten
- Achte auf einen logischen Aufbau
- Gestalte das Menü übersichtlich
- Nutze gängige und leicht verständliche Begriffe