Fast Food und User Experience/Usability: das Hamburger Icon für (mobile) Navigation
In der letzten Zeit lässt sich vermehrt der Einsatz vom sogenannten Hamburger Icon als Menu-Symbol beobachten. Doch was hat Hackfleisch und Burgerbrötchen mit Navigationsstrukturen, Webdesign und Smartphone-Apps zu tun? Und vor allem: ist das überhaupt sinnvoll?
Was hat es damit auf sich?
Angefangen hat alles damit, dass facebook in seinen Smartphone-Apps die Haupt-Navigation hinter drei Linien versteckte.
Zumindest für eine Weile – denn derzeit sieht das Haupt-Menü dort größtenteils wieder anders aus (es gibt nun eine klare Hauptnavigation und der Hamburger beheimatet nur selten benutzte Elemente).
So setzt facebook derzeit das Hamburger-Icon ein
Die Linien-Darstellung des Hamburgers symbolisiert dabei eine klassische Liste mit beliebig vielen Elementen, die untereinander angeordnet sind. Der Besucher kann in Listen alle vorgegebenen Einträgen mit den Augen scannen und den für ihn wichtigen Aspekt schnell finden. Besonders geeignet ist diese Art der Darstellung für sehr lange Auswahllisten. Bei einem Klick auf den Button oder der Berührung mit dem Finger fährt sich die gesamte Navigation aus, die bis dahin verborgen war.
Nicht immer handelt es sich dabei um drei Linien, Google verwendet beim Smartphone-Betriebssystem Android meist nur eine Darstellung mit drei Punkten. Eine einheitliche Gestaltung hat sich hier jedoch bis jetzt nicht durchgesetzt: teilweise wird sowohl der Hamburger als auch die Drei-Punkte-Navigation in der gleichen App eingesetzt.
Konsistenz geht anders – die Google Kiosk App verwendet zwei Icons zur Navigation
Welche Vorteile bietet die Hamburger-Navigation?
Auf kleinen Bildschirmen spart man hierdurch wie erwähnt sehr viel wertvollen Platz auf dem Bildschirm. Alle „überflüssigen“ Elemente können einfach hinter dem Button versteckt werden. Gerade für selten verwendete Navigationspunkte ist dies sehr praktisch, da es einen einheitlichen Anlaufpunkt für die Benutzersteuerung gibt. Der Nutzer kann sich also darauf verlassen, dass er hinter den drei Strichen das gesamte Funktionsspektrum der Webseite oder App finden wird.
Und die Nachteile?
Interessant ist, dass dies einfach eine „Design-Erfindung“ ist, die bis dahin eher unbekannt war. Kein Benutzer konnte erahnen was die drei Striche bedeuten sollen. Lediglich durch tatsächliches Ausprobieren haben sich die Benutzer die Bedeutung erschlossen. Gerade im Vergleich zu natürlich erlernten Bedien-Abläufen (NUI – Natural User Interface) von Apps und Webseiten ist das natürlich gewöhnungsbedürftig.
Und viele Benutzer waren sicherlich erst mal verwirrt und überfordert, da sie die Navigation nicht mehr gefunden haben. Meist führen sie dann die fehlende Bedienbarkeit auf sich selbst zurück, nach dem Motto: „Ach – da bin ich schon wieder zu blöd um mich hier zurechtzufinden“. Dabei ist es natürlich absolut nicht ihr Fehler, sondern eher die des Anbieters der App. Dieser sollte schließlich alles tun, damit die User die Veränderungen verstehen (z.B. entsprechende Hinweise einblenden).
Aber haben wir uns nicht schon an den Hamburger gewöhnt?
Sicherlich haben die Heavy-User oder die „Generation Facebook“ durch die ständige Wiederholung dieses Bedienkonzepts längst verstanden, was sich hinter den drei prominenten Linien versteckt. Etwa so: „Dort finde ich (hoffentlich) alles, was ich bis jetzt nicht finden konnte“.
Aber was ist mit den etwas älteren Nutzern, die das erste oder zweite Mal über solche Symbole stolpern? Z.B. auf dem neuen Surface-Tablet von Microsoft, ein Geschenk vom Sohn zum letzten Geburtstag. Oder auf ganz normalen Webseiten? Diese Generation ist oft auch nicht so „probierfreudig“ wie die jüngere. Einfach mal irgendwo drauf drücken, hat früher schnell zu einem Systemabsturz führen können.
An diesen Stellen fängt das Bedienkonzept „Hamburger-Icon“ stark an zu wackeln. Die Verwirrung schlägt vielleicht sogar in Orientierungslosigkeit um. Etwa nach dem Motto: wo befinde ich mich gerade und wie komme ich wieder zu meiner Foto-Galerie oder den Suchergebnissen zurück?
Gerade hier ist der Einsatz mit Bedacht abzuwägen, wenn man nicht gleich von Vorhinein darauf verzichten sollte.
Fazit und Einsatzbereiche?
Das Hamburger-Bedienkonzept hat definitiv seine Berechtigung. Es kommt jedoch ganz entscheidend auf den Einsatzort und die Umsetzung an. Die komplexe Navigationsstruktur von amazon mit allen Kategorien und Unterkategorien lässt sich nicht sonderlich gut auf diese Weise abbilden.
Für eine etwas kleinere mobile Webseite (z.B. mit 5-10 Navigationspunkten auf der Hauptebene) ist es durchaus eine gangbare Lösung. Aber auch hier gilt: der Benutzer muss einen klaren visuellen Hinweis bekommen, was sich dahinter versteckt.
Wir setzen auf unserer Webseite eine Kombination von Hamburger, klarer visueller Trennung und beschreibendem Text ein. Diese Elemente tragen zu guter Erkennbarkeit und Orientierung bei:
Klare visuelle Trennung in Kombination mit dem Hamburger-Symbol trägt zur Orientierung bei
Links zum Weiterlesen:
Mit Liebe recherchiert und geschrieben von FORMLOS Berlin