Das Thema Design ist noch neu für dich und deine Website ist doch nicht so userfreundlich, wie du gehofft hast? Das kann an der Menüführung liegen! Denn wenn deine Menüführung verwirrend ist, helfen auch die besten Inhalte nicht, wenn sie niemand finden kann.
Aber keine Sorge, wir zeigen dir anhand von Beispielen, worauf es ankommt, damit auch deine Website ideal gestaltet ist.
Was ist die Menüführung?
Ein Menü ist eine grafische Benutzeroberfläche, die es den Nutzer:innen ermöglicht, leicht zwischen verschiedenen Seiten oder Abschnitten einer Website zu navigieren. Es ist normalerweise eine Liste von klickbaren Links oder Schaltflächen, die zu verschiedenen Bereichen einer Website führen. Menüs können in verschiedenen Designs und Positionen auf einer Website erscheinen, abhängig von der Art der Website.
Arten von Menüs
Es gibt verschiedene Arten von Menüs auf Websites, darunter:
Horizontale Menüs
Diese erscheinen normalerweise oben auf der Website und erstrecken sich horizontal über den Bildschirm. Sie werden meist für Hauptnavigationselemente wie Logo, Home, Über uns, Services und Kontakt verwendet. Auf unserer datenwerk Website haben wir z. B. die Menüpunkte: Logo, Blog, Kontakt und Offene Stellen.
Vertikale Menüs
Vertikale Menüs werden oft auf der linken oder rechten Seite einer Website platziert und erstrecken sich vertikal, also von oben nach unten über den Bildschirm. Sie können zusätzliche Navigationsoptionen oder Untermenüs enthalten. Wir verwenden diese Menüform für den datenwerk Blog:
Dropdown-Menüs
Ein Dropdown-Menü zeigt zusätzliche Optionen bzw. Unterkategorien an, die mit dem ausgewählten Hauptmenüpunkt verbunden sind. Wenn ein:e Benutzer:in mit der Maus über einem Hauptmenüelement schwebt, erscheinen die Unterpunkte. Bei Mega-Drop-down-Menüs ist es sehr empfehlenswert, einzelne Menüpunkte visuell zu strukturieren. Nutze z. B. unterschiedliche:
- Schriftgrößen
- Schriftfarben
- Schriftarten
- Icons.
Nicht alle Elemente müssen eine Verlinkung zu einer Seite haben. Manche Punkte können als nicht klickbare Überschrift für die zugehörigen klickbaren Themen fungieren. Stelle in diesem Fall aber sicher, dass diese Überschriften anders aussehen, als deine Links. Ist das nicht der Fall, werden Nutzer:innen versuchen, auf Nicht-Links zu klicken, sich verwirrt und frustriert fühlen, wenn keine Seite geladen wird. Letztlich ist es am wichtigsten Klarheit für User:innen zu schaffen, egal ob die Navigationspunkte nun Links sind oder nur Überschriften.
Mobile Menüs
Das Hamburger-Symbol (drei horizontale Linien) ist eine beliebte Darstellungsweise für die Menüführung in mobilen Anwendungen und Websites. Es ist eine platzsparende Möglichkeit, das Hauptmenü in mobilen Ansichten anzuzeigen, da es standardmäßig ausgeblendet ist und durch Klicken oder Tippen geöffnet wird, um die verfügbaren Navigationsoptionen anzuzeigen.
Das Hamburger-Icon ist häufig in der oberen linken oder rechten Ecke einer mobilen App oder Website platziert und öffnet ein Dropdown- oder Slide-out-Menü, in dem Benutzer auf verschiedene Seiten zugreifen können.
Bei datenwerk.at haben wir uns bewusst dafür entschieden, den Burger rechts unten zu platzieren. Mag wie eine ungewöhnliche Wahl wirken – ist aber durchdacht! Die meisten User:innen sind mobil unterwegs und nutzen ein Smartphone. Da macht es nur Sinn, die Navigation so zu legen, dass man sie mit dem Daumen gut erreichen kann. Egal, wie groß die eigenen Hände oder der Smartphone-Bildschirm sind.
Diese Art von Überlegung ist übrigens ein Teil von Usability – mehr zum Thema haben wir im Blogbeitrag „Was ist Usability?“ für dich zusammengefasst.
Footer-Menüs
Dieses Menü befindet sich oft am Ende der Website und enthält Links zu wichtigen Seiten wie Datenschutzrichtlinien, Nutzungsbedingungen, Impressum und anderen relevanten Informationen.
Regeln für die Gestaltung benutzerfreundlicher Menüs
Bei der Gestaltung einer benutzerfreundlichen Menüführung gibt es wichtige Regeln, die beachtet werden sollten. Hier sind einige Dos and Don’ts, die dir dabei helfen können, eine ansprechende und leicht verständliche Menüstruktur zu erstellen.
Dos
Die folgenden Punkte sind Dinge, die bei jeder Art von Menü zu beachten sind, egal in welcher Ausrichtung oder an welcher Stelle es sich befindet.
Klare Begriffe
Eine Kategorie gilt dann als gut, wenn sie notwendig, hinreichen und trennscharf benennbar ist. Halte dich an allgemein bekannte Begriffe, um Verwirrung zu vermeiden. Wir nehmen wieder unser fiktives Unternehmen „ZuckerWhat“ als Beispiel.
So können wir statt dem allgemeinen Begriff „Services“ genauere Bezeichnungen verwenden wie „Catering Service“ oder „Kurse & Workshops“. Das ist nicht nur für User:innen leichter verständlich, sondern auch für Suchmaschinen. Zwei oder drei Wörter für ein Menüelement sind mehr als ausreichend.
Mobile Optimierung
Stelle sicher, dass deine Menüführung auch auf mobilen Geräten einwandfrei funktioniert. Mobile Nutzer:innen sollten genauso einfach auf deine Inhalte zugreifen können wie Desktop-Nutzer:innen. Das ist besonders deswegen wichtig, weil in vielen Fällen die Mehrheit der User:innen mobil auf deine Seite zugreift.
Begrenzte Anzahl von Menüpunkten
Beschränke die Anzahl der Hauptmenüpunkte auf maximal sieben Punkte. Zu viele Optionen können überwältigend wirken. Je weniger, desto besser. Fasse verwandte Themen unter einem Oberbegriff zusammen. Für das Unternehmen „ZuckerWhat“ haben wir uns für sechs Hauptmenüpunkte entschieden. Zusätzlich, wie schon oben auf der Abbildung zu sehen ist, beinhalten die Menüpunkte „Zuckerwatte“ und „Catering Service“ weitere Optionen, die mit dem Pfeil-nach-unten-Icon aufklappbar sind.
Gestalte simpel
Kennst du das K.I.S.S.-Prinzip?
Ursprünglich steht K.I.S.S. für „Keep It Simple, Stupid“. Da es nicht nett ist, andere „dumm“ zu nennen ändern wir das Akronym zu einer der anderen beliebten Variationen, wie „Keep It Short & Straightforward“. Besucher:innen sollten mühelos das Gesuchte finden, ohne viel Zeit mit der Suche zu verbringen. Also, K.I.S.S. – halte es kurz und unkompliziert.
Tipp: Verwendefett für deine Schriftart in der Menüführung, damit Benutzer:innen diese leicht erkennen können. Vermeide kleine und schwer lesbare Buchstaben – generell, aber besonders im Menü. Auch die Schriftgröße sollte mindestens 16 px betragen.
Don’ts
Es gibt nicht nur Empfehlungen, sondern auch klare Tabus, die beachtet werden müssen, um eine reibungslose Menüführung zu gewährleisten. Folgende Don’ts solltest du berücksichtigen:
Zu viele Unterkategorien
Während Unterkategorien nützlich sein können, übertreibe es nicht. Eine endlose Verschachtelung von Menüpunkten kann die Benutzer:innenerfahrung erheblich beeinträchtigen. Wie auf dem Bild unten zu sehen ist, ist es schwierig mehrere Unterkategorien zu erstellen, da sonst die Übersicht verloren geht.
Versteckte Menüpunkte
Wichtige Landingpages sollten nicht in versteckten Untermenüs verloren gehen. Halte wichtige Inhalte auf den ersten Blick sichtbar, damit deine Besucher:innen nicht lange suchen müssen.
Auto-Play-Elemente
Vermeide Menüpunkte, die automatisch Video- oder Audioinhalte starten lassen. Diese können als störend empfunden werden und die Benutzer:innenerfahrung negativ beeinflussen. Auto-Play-Elemente sind ebenfalls miserabel für die Barrierefreiheit. Wenn du mehr darüber erfahren möchtest, findest du hier einen Artikel von Boia dazu.
Überladene Menüs
Ein Menü, das mit zu vielen Elementen überladen ist, wirkt abschreckend. Halte dein Menü sauber und auf das Wesentliche beschränkt. Es mag verlockend sein, jede Seite der Website in deiner Navigationsleiste aufzunehmen, doch das kann für Besucher:innen tatsächlich überwältigend sein. Konzentriere dich auf die wichtigsten Seiten und Inhalte.
Fazit
Eine klare, intuitive und benutzerfreundliche Menüführung ist notwendig für jede Website. Indem du diese Do’s und Don’ts beachtest, kannst du sicherstellen, dass deine Besucher mühelos navigieren können und sich gerne auf deine Website aufhalten. Eine gute Benutzererfahrung führt nicht nur zu zufriedenen Besuchern, sondern auch zu einer höheren Conversion-Rate.
Was Menüführung angeht, bist du jetzt ein Profi. Solltest du noch unsicher sein über die Farbgebung deiner Website, haben wir hier noch ein Artikel zum Thema „Welche Farben eignen sich für meine Website?“ für dich.
Solltest du Unterstützung oder Beratung benötigen, schreib uns!
