Usability, Webdesign und die Burger Navigation - das Design der Zukunft?

17 Shares

Seit den Anfängen des kommerziellen Internets in der Mitte der 1990er Jahre gibt es immer wieder entscheidende Entwicklungsschritte aufgrund neuer technischer Möglichkeiten. Heute surfen wir nicht nur mit dem Laptop oder am Desktop durch das Netz, sondern shoppen unterwegs in der Bahn mit dem Smartphone oder lesen auf dem Tablet die neuesten Nachrichten aus aller Welt. Responsive Webdesign gehört daher heute beim Thema Webdesign zum Standard.

Burger Navigation Webdesign
Mit der optischen Anpassung von Inhalten auf verschiedene Displaygrössen kommt auch die Frage nach der Platzierung und Gestaltung des Navigationsmenüs auf. Klassischerweise wurden Menüs auf Desktop Grössen sehr präsent im oberen Bereich (oder am linken Bildrand) einer Webseite angebracht.

Im Vergleich dazu ist das sogenannten Hamburger Menü (die drei untereinander folgenden Striche) auf Smartphone Bildschirmen im Rahmen von responsive Anpassungen Standard geworden. Das Burger Menü ist sowohl für die Touchfunktion geeigent und bringt die nötige Übersicht auf den kleinen Smartphone Bildschirm. 

 

Die Burger Navigation 

Immer mehr Webdesinger lassen auch auf Desktop Grösse das Navigationsmenü hinter dem sogenannten Burger Symbol verschwinden. Diese Art der Navigation ist für viele Webdesigner bereits jetzt schon der optimale Nachfolger für das klassische, deutlich sichtbare Menü. Keine Frage, das Burger Menü ist zeitgemäss und bietet aus gestalterischer Sicht oft neue Möglichkeiten, Webseiten minimalistischer und moderner aussehen zu lassen, und genau das macht das Icon so beliebt.
 

Burger Navigation
themetrust.com
Burger Navigation
hlkagency.com


Die drei Striche rechts oder links oben öffnen sich durch das Ankilcken zu einem klassischen Navigationsbaum, der wieder verschwindet, sobald man die gesuchten Inhalte auswählt. Die Webseiteninhalte werden ausgeblendet, damit die Navigation in den Vordergrund treten kann.

Burger Navigation
yourposition.ch


Eine weitere Variante ist ein sogenanntes off-canvas Menü, das sich von der Seite her einschiebt und nur einen Teil des Bildschirms einnimmt, sobald der Nutzer auf das Navigationssymbol klickt. 

Burger Menu
squarespace.com

 

Burger Navigation
uber.com

Ist das Hamburger Menü immer die richtige Wahl?

Auf dem Laptop oder am Desktop offenbaren die drei Striche oft einige Schwächen, die sich direkt auf Absprung- und Conversionsrate auswirken können. Es lohnt sich genau zu überdenken, ob das Hamburger Menü zur jeweiligen Seite passt, um sinkende Seitenaufrufe und Conversionraten zu vermeiden.  

Welche Nachteile bringt das Hamburger-Menü?

1. User übersehen das Icon oder kennen den Sinn des Icons (noch) nicht
Die schlechte Sichtbarkeit ist sicherlich der grösste Nachteil der versteckten Navigation. Wichtige Funktionen oder Inhalte verstecken sich hinter dem Button und werden erst durch einen Tap oder Klick sichtbar. Besucher können sich nicht sofort orientieren und erhalten auf den ersten Blick keinen Überblick über die Angebote der Seite .  «Ja, und nun? Wo geht es hier denn weiter?» ist für viele User die zentrale Frage. 

2. Ein zusätzlicher Tap oder Klick wird 
Auch wenn der Sinn des Symbols gleich verstanden wurde, bleibt noch die Ineffizienz der versteckten Navigation. Schliesslich muss das Menü erst über einen zusätzlichen Klick geöffnet werden, um die gewünschten Inhalte ansteuern zu können. Dazu kommt, dass das Icon in Mobile Apps und mobilen Seiten gern oben links angebracht wird, also genau an der Stelle, für die der Daumen sich richtig strecken muss, um sie zu erreichen. 

3. Probleme bei der Implementierung
Bei bestimmten Betriebssystemen kommt es bei der Implementierung des Hamburger-Menüs zu Komplikationen, weil die Standard-Navigationsmuster darunter leiden. Es gibt Fälle, in denen iOS-Programmierer die Navigationsleiste so überladen, dass kaum noch Platz für den Titel bleibt, weil der Pfeil für das Zurückblättern die linke Ecke einnimmt und die Hamburger-Navigation noch irgendwie zwischen der Suchfunktion und dem Button für das Scrollen untergebracht werden musste. 
 

Welche Vorteile bietet das Hamburger-Menü auf Desktop Grössen? 

Ein Vorteil besteht für Webseiten, auf denen zufälliges Browsen im Vordergrund steht, wie etwa bei Pinterest oder Google+. Die Navigation über ein Menü spielt hier keine grosse Rolle, weil die Nutzer sich durch den Seiteninhalt scrollen oder über die Suchfunktion navigieren. Da ein Menü also im grössten Teil der User-Journey ungenutzt bleibt, können solche Seiten die Navigation hinter dem Hamburger Menü einklappen. 

Beim Thema Webdesign geht es vor allem darum, Inhaltselemente prioritär anzuordnen, und Nutzer so gezielt durch die Seite zu führen. Wenn es dir darum geht User vor allem dazu zu bringen, dass sie sich für einen gratis Test deiner Software anmelden, kann eine gross angelegte Navigation durchaus ablenken - und das minimalistische Hamburger Symbol dazu beitragen, dass das Auge des Users auf die gewünschten Elemente fällt.


Fazit: Wann ist das Hamburger-Menü sinnvoll und wann nicht? 
Für Seiten, bei denen die User-Journey nicht vorwiegend über das Navigationsmenü stattfindet, kann der Button mit dem verstecken Menü durchaus sinnvoll sein. Die meisten anderen Seiten sind mit der klassischen Navigation deutlich besser bedient, weil der Nutzer dort abgeholt wird, wo er sich befindet und durch die Seite geführt werden kann. Versteckt man wichtige Funktionen oder Inhalte hinter dem Hamburger-Icon, geht die Übersicht verloren und erschwert dem User den Weg durch die Seite. 
 

Facebook App

Selbst Unternehmen wie Facebook, haben nach Umsetzung des Hamburger Menüs, einige Veränderungen vorgenommen. Der Header der App wurde deutlich verschlankt und damit übersichtlicher. Eine Tab-Leiste sorgt dafür, dass wichtige Menüpunkte wie der Newsfeed oder die privaten Nachrichten stets im Blick bleiben. Zusätzlich können über einen Tap auf das Hamburger-Symbol weitere Funktionen geöffnet werden. Die zentralen Navigationselemente bleiben seit der Neuerung aber dauerhaft sichtbar. Der Internetgigant hat damit einen Mittelweg gesucht und gefunden, mit dem Designer und User gut leben können. 
 

Facebook App Navigation
techcrunch.com


Visuelle Unterstützung für das Burger-Icon

Die Bedeutung des Hotdogs, wie das Icon auch genannt wird, lässt sich gut durch die Verwendung von Hinweisen unterstützen. Der Begriff «Menü» neben dem Symbol verdeutlicht die Funktion ebenso wie ein Pfeil oder ein anderer eindeutiger Hinweis. Tests haben ausserdem ergeben, dass das Symbol von Nutzern leichter angenommen wird, wenn es eine farbliche Abgrenzung gibt oder das Icon durch Hinweise eher als Button wahrgenommen wird. Grundsätzlich sollte jedes Symbol vom Nutzer intuitiv erkannt und eingeordnet werden können. Wenn dies innerhalb von Sekunden nicht passiert, gehen wichtige Klicks verloren. 

 

Burger Menü
webdesignerdepot.com

 

Gilt der Grundsatz «mobile first» auch für die Navigation?

W​er oft mobil surft, kennt das Burger-Icon vermutlich bestens. Der Grundsatz, dass eine Webseite in erster Linie mobil optimal dargestellt werden muss, hat sich in den Köpfen vieler Webdesigner bereits jetzt ziemlich eingebrannt. Natürlich nimmt die Nutzung des mobilen Internets noch immer zu. Doch wer mobil surft, packt den Laptop oder seinen  Desktoprechner nicht automatisch gleich als Staubfänger in den Keller. Viele User finden tagsüber in ihren kleinen Surfpausen ein interessantes Produkt und möchten sich abends in aller Ruhe noch einmal damit beschäftigen, ehe eine Kaufentscheidung fällt. Zuhause steht schliesslich der Laptop mit dem grossen Bildschirm, auf dem alle Details wesentlich besser zu sehen sind und vielleicht möchte auch die Familie mitentscheiden, welcher Fernseher gekauft werden soll.

Mobile Webdesign Hamburger Navigation

Eine Seite sollte von daher nie nur für ein Gerät entwickelt werden, denn mobile Seiten lassen sich nicht einfach 1:1 in Desktopversionen verwandeln und aus einer Seite, die für den Desktop entwickelt wurde, kann nicht per Knopfdruck eine mobile Seite generiert werden. In beiden Fällen verlieren die Webseiten an Übersichtlichkeit und damit an Usability. Kleine Elemente lassen sich auf dem Desktop mit dem Mauszeiger exakt bedienen, aber mit dem Finger auf dem Touchscreen wird die gleiche Aufgabe fast unlösbar. Ein platzsparendes Symbol auf dem Desktop verhindert unter Umständen, dass alle Inhalte wahrgenommen werden und die klassische Navigation passt auf kein Smartphone-Display.

Einen wichtigen Anhaltspunkt für die Entscheidung zwischen klassischer Navigation und dem Burger Icon bietet der Content einer Seite. Die Inhalte entscheiden, wie wichtig eine sichtbare Navigation ist und die User entscheiden mit ihren Surfgewohnheiten, wie die optimale Interaktion aussehen kann. Wird eine Seite vor allem mobil aufgesucht, ist das Hamburger-Symbol  sicherlich eine gute Idee. Wenn eine Webseite aber Zugriffe von unterschiedlichen Geräten verzeichnet und über ein komplexes Menü mit vielen Unterseiten verfügt, kann der direkte Weg über die sichtbare Navigation sinnvoller sein, weil dem Nutzer so das Angebot der Seite schneller verdeutlicht wird. 

Artikel teilen

Über uns

seologen bloggen: über SEO, AdWords, Webdesign und alles, was in der Online Marketing Welt brodelt.

Lies hier, welche Elemente am besten miteinander reagieren und als Antrieb für deine Website funktionieren.

Gratis SEO Check

Kostenloser SEO Check Ihrer Webseite

Wird Ihre Website aktuell über Google gefunden?
Wir prüfen Ihre Webseite auf Google Ranking Faktoren - schnell und unverbindlich.