Die besten Tipps: So wird Deine Website benutzerfreundlicher

4. Navigation

Menüpunkte | Sticky Navigation | Megamenü | Hamburger Menü

  • Die Navigation/Menüleiste muss gut strukturiert sein. Am besten planen, bevor Du die Website erstellst.
  • Am wirkungsvollsten ist es, wichtige Informationen am Anfang oder am Ende zu platzieren.
  • Navigation immer wieder überprüfen und optimieren!
  • Empfehlung: einzeilig, max. sieben Menüpunkte
    (Seitenbesucher*innen können max. 7 +/- 2 Informationen gleichzeitig im Kurzzeitgedächntnis bewahren (Millersche Zahl))
  • Typische Rubriken:
    Start (kann entfallen)
    Über uns
    Angebote
    Blog/Aktuelles
    Kontakt
    Impressum
    Datenschutz

So nicht:

So lieber nicht: Hauptmenü/Hauptnavigation mit acht Menüpunkten

Besser so:

Mehr Menüpunkte sollten es nicht sein: 7 Menüpunkte im Hauptmenü
Beispiel Hauptmenü/Hauptnavigation mit Start
So geht es auch: Hauptnavigation mit fünf Menüpunkten ohne Start
  • Bitte verwende keine kreativen Bezeichnungen, sondern gib eine genaue Info, was sich hinter dem Menüpunkt verbirgt.
  • Verwende spezifische Bezeichnungen für die einzelnen Menüpunkte, also besser nicht „Angebote“ sondern „Webdesign“.
  • Keywords (Suchbegriffe) verwenden!
  • Gliedere Menüpunkte nicht nach Format, sondern nach Suchintention, d. h. die Bezeichnung sollte nicht „Videos“, sondern „SEO-Anleitungen“ sein.
  • Keine Experimente: Horizontale Navigation oben auf der Website ist gelernt (wird auf mehr als 80 % der Websites verwendet).

Falls möglich, nutze die sogenannte „Sticky Navigation“ – die Hauptnavigation bleibt sichtbar, auch wenn man auf der Website nach unten scrollt.

Screenshot Sticky Navigation

Megamenü

So besser nicht:

So besser nicht: Hauptmenü mit drei Ebenen

Besser so.

So könnte ein benutzerfreundliches Mega Menü aussehen
  • Nicht mehr als drei Hierarchieebenen in der Hauptnavigation, zwei ist besser.
  • Alternative: Evtl. weiteres Menü unten auf der Seite im Seitenfuß (Footer) (Footermenü) einbauen.
  • Alternative: Megamenü einsetzen (WordPress-Plugin-Tipp: Max Mega Menu, Vorsicht bei der Installation neuer Plugins: Datensicherung vorhanden?)
  • Auf Barrierefreiheit achten: Kontrast, Schriftgröße!

Hamburger Menü

So besser nicht:

So besser nicht: Kein Hamburger Menü für die Desktop-Version der Website.
  • Hamburger Menü nur für Tablet und Smartphone verwenden
  • Es sind immer zwei Klicks erforderlich, um zum Ziel zu gelangen.
  • Spotify verzeichnete 30 % mehr Klicks auf die Navigation, nachdem die Navigation von Hamburger Menü auf eine Registerkarten-Navigation umgestellt wurde.