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.
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:
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.
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.
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.
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.
Dieser Beitrag enthält eine Podcastfolge!
Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.
Dieser Beitrag enthält ein Video!
Das Video wird dir auf Patreon freigeschalten.
Erhalte Zugang zu diesem und weiteren exklusiven Beiträgen
Unterstütze diesen Podcast über Patreon und lerne wöchentlich mehr über Webdesign, das Arbeiten als Design Freelancer und die Zusammenarbeit mit Kunden.
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:
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.
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.
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.
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.
