Case Study Podcast

Warum ich die Hamburger Navigation von der Website entfernt habe

Es gibt viele unterschiedliche Argumente zu diesem Thema. Aber wie auch immer diese ausfallen, das Hamburger Menü gehört immer mehr zu unserem Alltag dazu. Wir sehen und bedienen es beinahe jeden Tag in Apps auf dem Smartphone oder auf Webseiten im Browser.

Auch ich habe meine Navigationspunkte auf der (alten) Website hinter einem Hamburger Icon versteckt. Der Grund, warum es jetzt nicht mehr da ist und warum es für meine Desktop Version weitaus sinnvollere Lösungen gab, erfährst du in diesem Beitrag.

Ich habe es selbst nicht benutzt

Das Design meiner Website sollte schon immer sehr minimalistisch sein. Und das war auch bei der Navigation der alten Website der Fall. Sie hatte zwar nur drei Reiter (Menüpunkte), trotzdem habe ich sie aus irgendeinem Grund in einem Hamburger Menü versteckt:

Hamburger Menü Navigation

Ich habe es über ein Jahr so gelassen, bis mir bei meinem Website Redesign etwas aufgefallen ist: Ich selbst habe die Navigation nur selten benutzt. Der Grund dafür ist folgender:

Um jeden Besucher auch auf jeden Fall auf meine Unterseiten zu führen, hatte ich auf der Startseite meiner Website zwei Wege zum Ziel angeboten. Das heisst, es gab die Standard Haupt-Navigation oben im Header (aber versteckt) und noch weitere Verlinkungen in einem Willkommenstext. So konnte ich sicher gehen, dass auch alle Nutzer von Seite 1 auf Seite 2 gelangen.

Website Navigation alt
Die alte Website: Man konnte auf zwei Wegen auf Unterseiten gelangen. Über die Navigation und über weitere Textlinks auf der Startseite

Das Problem war nun, dass es die Möglichkeit, auf zwei Wegen zu den Unterseiten zu kommen, nur auf der Startseite gab. Nicht auch auf der Projekt-, Blog- oder Kontaktseite. Hier mussten die Leute das ≡ Icon verwenden.

Du musst dir vorstellen, dass wenn man wöchentlich Blogbeiträge schreibt, auch ziemlich oft auf seiner eigenen Seite unterwegs ist. Und das habe ich meistens direkt durch jonasarleth.com/blog gemacht, aber auch häufig über die Startseite.

Wie schon erwähnt ist mir während meinem Redesign aufgefallen, dass ich selbst immer nur über den „Willkommenstext“ und dessen Textlinks auf meinen Blog gekommen bin. Ich habe selten das Hamburger Menü benutzt. Und der Grund dafür liegt auf der Hand: Mit den Links aus dem Textblock war ich mit einem Klick am Ziel und bei dem Hamburger Menü brauchte ich zwei. Aber warum ist mir das nicht schon früher aufgefallen?

Eine Navigation wird weniger geklickt, wenn sie nicht gleich sichtbar ist

Intuitiv suchen wir erst nach der einfachsten Lösung, die uns zum nächsten Ziel führt. Deshalb verwenden Besucher ein verstecktes Menü auch erst später, als eines, das sofort sichtbar ist.

Alte Vorgehensweisen überdenken und besser Lösungen zu präsentieren, war der Grund für mein Redesign. Und egal wie angesagt ein Hamburger Menü gerade ist oder wie viele Menschen wissen, wie man es bedient, eine klassische Navigation wird immer zeitlos bleiben.

Spotify hat diesen Fehler auch erkannt und eine weitaus bessere Lösung für ihre Navigation gefunden

Gerade wenn ich unterwegs bin, höre ich oft über mein iPhone mit der Spotify App Musik. Was mich aber schon immer gestört hatte, war das umständliche Hamburger Menü, das Spotify lange Zeit bei ihrer IOS Version integriert hatte.

Alte IOS Spotify App Navigation
Alte IOS Spotify App Navigation

Und auch bei Spotify hat es irgendwann klick gemacht und sie haben erkannt, dass es für die Benutzerführung besser ist, die Hauptnavigation direkt im sichtbaren Feld zu platzieren und nicht zu verstecken. Die App ist jetzt angenehmer und vor allem schneller als vorher zu bedienen.

Neue IOS Spotify App Navigation
Neue Spotify IOS App Navigation

Was man bei IOS Apps gewohnt ist, wird jetzt auch von Google in ihren App Guidelines empfohlen.

„Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.“

Eine fixe Navigation am unteren Bildschirmrand ermöglicht ein schnelles und einfaches Wechseln von Hauptseiten. Das bedeutet aber sicherlich noch nicht das Ende vom Hamburger Menü.

Ein Hamburger Menü spart platz auf dem Bildschirm, was dem Inhalt mehr Raum geben kann

Ich verstehe vollkommen, dass auf kleineren Displaygrößen eine versteckte Navigation von Vorteil sein kann und das ≡ Menü deshalb eingesetzt wurde. Aber ab welchem Zeitpunkt ist dieses Hamburg Icon auf größere Bildschirme übergeschwappt?

Ich weiß nur, dass ich es selbst erst erleben musste, um zu wissen, dass es für meine Besucher eine bessere Lösung gibt. Und darum geht es ja auf jeder Website.

Zwei Grundregeln, die ich mir für Mobile-Ansichten geformt habe

Es gibt keine wirkliche Regel, aber diese Empfehlung von mir:

  • Wenn die Seite vier oder weniger Haupt-Navigationspunkte hat, zeige sie als sichtbares Menü.
  • Hat die Seite mehr als 4 Navigationspunkte, verstecke sie hinter einem Hamburger Symbol.

Weitere Möglichkeiten eine Hauptnavigation für kleine Displaygrößen zu gestalten

Es gibt keine „beste Lösung“ wenn es um Navigationen für Mobile-Geräte geht. Du musst die Sinnvollste für dein Projekt und Layout finden.

Einen guten Artikel über verschiedene Möglichkeiten eine Navigation zu gestalten, habe ich hier auf Medium gefunden.

Beitrag teilen: