Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Das Hamburger-Icon: Ein schlechtes Design-Element setzt sich durch

    Das Hamburger-Icon: Ein schlechtes Design-Element setzt sich durch

Zu fettig, zu viele Kalorien. Auch das Real-Life-Pendant ist nicht unumstritten. (Foto: Pexels)

Das Hamburger-Icon hat sich durchgesetzt. Aber, ist das tatsächlich die Best Practice für Navigationselemente, oder gibt es bessere Alternativen und wenn ja, welche?

Wieso nennen wir das Symbol eigentlich Hamburger-Icon?

Wundert ihr euch eigentlich noch, wenn die Sprache schon wieder auf die Firma Xerox und ihr Forschungszentrum PARC kommt? In diesem Beitrag hatten wir sie schon mit der ersten grafischen Benutzeroberfläche für Computer in Verbindung gebracht.

Auch das Hamburger-Icon stammt aus dem Hause Xerox. Es wurde vom amerikanischen UX-Designer Norm Cox für die erstmalig auf Icons basierende Benutzeroberfläche der 1981 in den Markt eingeführten Workstation Xerox Star entwickelt. Cox allerdings nannte das Icon spaßeshalber „Air Vent”, zu deutsch etwa „Luftschlitz”, weil es aussah wie - tja - Lüftungsschlitze. Bei Xerox kursierte der Witz, dieses Icon sei dafür da, das Bildschirmfenster kühl zu halten.

Der Xerox Star 8010 „Dandelion” von 1981. (Foto: Digibarn Computer Museum, CC-Lizenz)
Der Xerox Star 8010 „Dandelion” von 1981. (Foto: Digibarn Computer Museum, CC-Lizenz)

Tatsächlich hatte Cox jedoch weder an einen Hamburger, noch an Lüftungsschlitze gedacht, als er das Piktogramm erfand. Er wollte damit vielmehr eine Optionsliste visualisieren, bei der jede Linie einem Listeneintrag entsprechen sollte. Wenn man es weiß, kann man drauf kommen.

Nicht abwegig, diese Assoziation zu Lüftungsschlitzen. (Foto: Pixabay.com)
Nicht abwegig, diese Assoziation zu Lüftungsschlitzen. (Foto: Pixabay.com)

Und im Xerox Star wurde das Icon genau so verwendet. Ein Klick auf die dreireihige Liste öffnete ein Optionsmenü mit verschiedenen Listeneinträgen.

Falls ihr es wirklich nicht wusstet: Als Hamburger-Icon wird das Symbol bezeichnet, weil die obere und die untere Linie mit den beiden Brötchenhälften und die mittlere Linie mit der Frikadelle zwischen den Hälften assoziiert werden kann.

Der Screenshot stammt aus Brad Myers Video „All the Widgets”.
Der Screenshot stammt aus Brad Myers Video „All the Widgets”.

In der Folge wurden die Monitore hochauflösender, farbiger und größer. Das Hamburger-Icon geriet in Vergessenheit, bis es Apple für das iPhone aus der Versenkung holte. Denn hier tat sich plötzlich ein ganz ähnliches Problem auf, wie es schon damals beim Xerox Start vorlag. Apple verwendete das Icon allerdings eher spärlich. Zum Durchbruch gelang es so nicht.

Das änderte sich 2010, als Facebook in seinen mobilen Apps vom bisherigen Grid-Icon als Synonym für den Menüzugriff abrückte und das Hamburger-Icon wieder einführte. Da Facebook schon aufgrund seiner schieren Größe durchaus als Trendsetter zu bezeichnen ist, erfuhr das Hamburger-Icon in der Folge eine gewaltige Renaissance. Heutzutage findet ihr das Hamburger-Icon, wie selbstverständlich, in nahezu jeder mobilen App, egal ob nativ oder webbasierend.

Anzeige

Kritik am Hamburger-Icon

Dabei ist das Piktogramm durchaus nicht unumstritten. Denn im Grunde funktioniert das Symbol aus sich selbst heraus überhaupt nicht. Personen, die noch nie mit einem Hamburger-Icon interagiert haben, kommen in der Regel gar nicht erst darauf, dass es sich um den Zugang zu einem Auswahlmenü handeln könnte. Allein die weite Verbreitung des Piktogramms hat zu Erfahrungswissen geführt.

Mit anderen Worten: Regelmäßige Nutzer mobiler Apps haben mühsam erlernt, dass das Hamburger-Icon die Bedeutung hat, ein Auswahlmenü zu beherbergen. Intuitiv erfasst haben sie das nicht.

Selbst wenn ihr aber nun davon ausgeht, dass auch eure Nutzer zu jenen gehören, die über das erwähnte, erlernte Wissen verfügen, so gilt dennoch das alte Prinzip des „aus den Augen, aus dem Sinn”. Alles, was ihr hinter dem Hamburger versteckt, wird definitiv schlechter gefunden und entsprechend schwacher genutzt.

Im Vergleich zu permanent sichtbaren Auswahlmöglichkeiten fügt ihr zudem mindestens einen weiteren Tap hinzu, der den Weg zur gewünschten Funktion verlängert.

Außerdem bietet das Icon keine klaren Perspektiven für den Nutzer. Bei einem Tap auf ein Zahnrad-Icon erwartet ihr in die Einstellungen zu gelangen. Mit einem Tap auf ein Briefumschlag-Symbol interagiert ihr mit den Mails. Aber was passiert bei einem Tap auf das Hamburger-Icon?

Klare Antwort: Es passiert, was der Designer wollte, das passiert. Und in der Tat habe ich schon sehr ungewöhnliche Dinge nach dem Tap auf den Hamburger erscheinen sehen. Konsistent an der Verwendung ist eigentlich nur die Tatsache, dass ihr erwarten könnt, nach dem Tap mit weiteren Informationen versehen zu werden.

Vielfach wird auch beklagt, dass sich das Hamburger-Pattern mit der Verwendung anderer Patterns beißt. In der Tat könnt ihr nicht das Hamburger-Icon und daneben noch ein paar permanent sichtbare Navigations-Elemente setzen. Denn das Hamburger-Icon beansprucht von seiner Logik her Exklusivität. Bestenfalls könnt ihr den Hamburger nach oben rechts oder links und permanent sichtbare Icons nach unten setzen. Ein konsistentes Design-Pattern wäre das aber nicht.

So vermeidest du das Hamburger-Icon

Das zentrale Stichwort auf eurem Weg vom Hamburger-Icon lautet Informations-Architektur. Es gilt, eine Informations-Architektur zu ersinnen, die ohne klassische Listen auskommt – jedenfalls ohne solche, wie sie ein Hamburger-Menü beherbergt.

Ein gutes Beispiel ist die Twitter-App. Die Navigationselemente sitzen als Icons am unteren Bildschirmrand. Andere Apps erweitern dieses Pattern, indem sie die unten angebrachte Navigationsleiste horizontal scrollbar machen, sodass ihr auch mehr Navigationselemente unterbringen könnt, als auf einen Schlag in den Viewport passen.

Twitter: horizontale Navigation
Twitter: horizontale Navigation (Screenshot: t3n)

Die neue Apple-Music-App unter iOS setzt auf direkt einsehbare Listen neben der horizontalen Navigation. Hier scrollt ihr die Listen nach unten durch, um verschiedene Tasks zu erledigen. So wird nichts versteckt. Zudem sind die Listen typografisch so angelegt, dass man sie auch ohne Brille aus drei Metern Entfernung noch lesen kann. Das mag euch jetzt noch nicht wichtig sein. Es gibt aber mit Sicherheit mehr Personen, die das begrüßen, als solche, denen es (noch) egal ist.

Apple Music: offene Listen (Screenshot: t3n)
Apple Music: offene Listen (Screenshot: t3n)

Wenn ihr dennoch eine Option benötigt, mehr Auswahl unterzubringen als es auf der horizontalen Leiste möglich ist, dann opfert halt eines der Icons und ersetzt es durch das ebenso bekannte Icon mit den drei nebeneinander angeordneten Punkten und schreibt „Mehr” oder etwas ähnlich sprechendes darunter. Der Platz ist ja dann da.

iTunes: Alternative unten rechts (Screenshot: t3n)
iTunes: Alternative unten rechts (Screenshot: t3n)

Was du indes nicht tun solltest, ist den Beispielen drüben auf Webdesigner Depot zu folgen. Dort werden teils krude Navigationsalternativen vorgestellt, die sämtlich unter Usability-Gesichtspunkten nur als schlechter Witz bezeichnet werden können.

Zum Schluss sei noch auf die Kollegen von Webdesignledger verwiesen, die 20 sehenswerte Websites mit Hamburger-Menüs kuratiert haben. Aber ihr wisst ja: Form follows Function. Auch bei diesen Beispielen wäre es interessant zu schauen, inwieweit nicht durch eine veränderte Informationsarchitektur ganz auf das Relikt aus den Achtzigern verzichtet werden könnte.

Finde einen Job, den du liebst

7 Reaktionen
Alexio Vay

Wieso überhaupt so zwanghaft gegen das Hamburger-Menü? Ist euch eigentlich klar, dass keiner heutzutage mehr weiß was eine Diskette ist und wie sie mal aussah? Trotzdem assoziiert jeder damit den "Speicherknopf".

Antworten
Android ist doch Hamburger
Android ist doch Hamburger

Statt der Diskett sollt man vielleicht das Symbol eines USB-Sticks oder besser noch SD-Karte benutzen.
Viele gucken wohl auch nicht so genau hin.

Röhrenmonitore oder Tastenhandies oder Amish-Pferdekutschen will man meist wohl durch die aktuellen Produkte (Flatscreens, Smartphones, PKW/Kleinbus/PickUp,...) ersetzt sehen.

Mir ist lieber wenn man per Hamburger sieht, das da ein Menü reingezogen werden kann. Am FireTV-Box und SmarTV oder den meisten Laptops hat man keine Wischgesten auf einem Touchscreen.

Je nach Handy-Größe kommt man oben an die Icons auch nicht mehr mit dem Daumen dran.
Die Apps müssen also vom 4"-Handy bis zum 99"-SmarTV und 10"-Tablett quer und 5,5"-Handy alle Zielgruppen abdecken.

Unschön auch bei iOS ist, das man lernen muss und oft nicht weiss, was geht. Dafür bräuchte man wirksame Lösungen damit die Leute die Apps umfassender nutzen.

Aber schon Reflow-fähige Texte in News oder PDFs kriegen die meisten nicht hin und die Kunden sind die Dummen.

Manche Kommentare klingen hier (trotz Eurer vielen Artikel für responsive Webdesign) oft vielleicht auch so, als ob man nur ein Interface erwartet was auf einen selber passt und die Zillionen ganz anderen Geräte ignorieren soll. Eine App sollte überall gut benutzbar sein und sich den Gegebenheiten anpassen.

Antworten
matrixOnline
matrixOnline

Das Hamburger Icon soll man mühsam erlernt haben?

Das Hamburger Icon wurde ganz ohne Mühe zum Standard und macht jede App smarter und übersichtlicher.

Finde auch die Einleitung über die Fa. Xerox recht weit hergeholt.

Ich pers. finde die Lösung mit den großen Icons am unteren Bildschirmrand störend.

Antworten
Guest
Guest

Nein, nicht jedes UI Element muss eine bekannte Entsprechung in der realen Welt haben. Eigentlich sollte sich längst herumgesprochen haben, dass der Skeuomorphismus tot ist und es kaum noch Smartphone bzw. Internet User gibt, die wirklich überhaupt keine Computererfahrung haben. Im Gegenteil: Heutzutage halte ich es für höchst kritisch, wenn man aus vermeintlich höheren Designgründen von mittlerweile etablierten Designelementen abrückt. Sprich z.B. In Android die nav bar von iOs nachbaue, oder eben das Hamburger Icon verteufel, obwohl es den Nutzern bereits durch die Big Player Google und Facebook angelernt worden ist.
Die hier genannten Alternativen wirken für mich größtenteils deutlich schlechter als die Umsetzung per Hamburger Menü. Warum sollte ich z.B. gerade auf Smartphone Screens, wo Platz kostbar ist, eine permanente Navigationsleiste einbauen, die einen großen Bereich des Screens bedeckt, wenn ich die dort sichtbaren Elemente nur zur Navi brauche, aber eigentlich am Content interessiert bin?

Antworten
Android ist doch Hamburger
Android ist doch Hamburger

Bein Android gibts
HOME (wie bei Iphone)
und BACK
und HAMBURGER
als die drei Standard-Hardware-Tasten unter den Screens.
Zilliarden Android-Geräte haben also Hamburger.

So falsch ist es für kurze Menüs nicht. Und Texte in Listen sind lesbarer als völlig Unklare Icons wo man oft nicht mal weiss was aktiviert und de-aktiviert ist. Computer leben von der Lebenszeit, welche sie ihren Benutzern täglich stehlen. Bald kümmet sich Tesla3 ums Einparken und jeder Berliner mit Auto hat eine Stunde tägliche Lebenszeit gewonnen.

Und das Zahnräder Einstellungen sind, ist auch nicht offensichtlich.
Das 3zeilige-Hamburger wird allerdings dadurch verwaschen, weil z.b. links die reinschieb-Menüs bei Amazon AppStore und vielen Anderen Apps ja 1-2 Screens lang sind. Und unter schlechten Lichtbedingungen ist Lesen auch nicht immer so glasklar das man einen Mini-Screenshot des Menüs dort besser nicht anzeigen sollte.
Statt also nur das "Reinschieben/Reinziehen" eines unsichtbaren Menüs sind mir oben links und oben rechts Hamburger lieber welche diese Menüs dann auch reinschieben. Bei vielen Apps und Webseiten weiss man doch gar nicht wo man klicken kann.

Du hast allerdings auch Recht, das man es teilweise anders Organisieren könnte. Aber die Referenz sind 4"-Handies, iPhone-SE oder auch Smart-Watches als weitere Verkleinerung. Auf Tabletts oder UHD-1-Smart-TVs kann man die Menüleiste auch ständig eingeblendet lassen weil man den Platz hat.
Die meisten schaffen aber nicht mal eine brauchbare UI für eine Screen-Größe. Von iWatch bis 99"-TV von 320x200 bis UHD-1 oder 5K und OLED-tasten sind alle Userinterfaces und Eingabemethoden abzudecken. Gute Betriebs-Systeme (also schon mal nicht Android) sorgen deshalb dafür das alle Apps auf allen Geräten gut nutzbar sind. Macht man mit CSS und der Trennung zwischen Content und Aussehen ja auch - wenn man gut ist.

Aber weil ja hier
http://t3n.de/news/kleiner-entwickler-app-store-spitze-727119/
bewiesen wurde, das die Presse überwiegend iPhone hat, ist klar, wieso sie zillionen updatefreien Android-Opfer und Handies Tabletts und "Smart-TVs" welche alle 1-2 Jahre weggeworfen werden müssen ignoriert werden wie die Brexit und Trump-Wähler und die unsichtbaren 80% des Titanic-Eisberges. War die Hälfte(?) vom Universum nicht dunkle Materie ? Na also.
In Eurem Webserver-log sind die Screensizes bzw. Clients verzeichnet oder können per Javascript erfasst werden. Überleg also mal wie man auf einem 4"-Android deine Apps für Rentner mit Weitsichtigkeit sinnvoll nutzbar bekommt.

Antworten
pommesmatte
pommesmatte

Android hat als Softkeys oder Hardwarekeys Back, Home und Recent.
ganz früher statt Recent Menu, aber auch das ist nicht Hamburger.

Fast alle Google Apps nutzen aber ein Hamburger Menü. Dies hat aber einen extra Onscreen Button und lässt sich alternativ auch seitlich hinein swipen

Antworten
Android ist doch Hamburger
Android ist doch Hamburger

Meine zwei Android-Handies von zwei Unterschiedlichen Herstellern haben dasselbe Icon:
3 waagerechte Streifen und der obere ist länger und ragt nach Links rüber.
Vielleicht ist das ja "MENU" aber das sieht genau so aus und selbst wenn Sheldon Cooper sich für was besseres deshalb hält: 99% der User (speziell die Zillionen Rentner welche ihre Gesundheitsgeräte und Heizung und Tür-Öffner mit Android steuern und auslesen wollen oder müssen) werden HAMBURGER und MENU als GLEICH einstufen. Und nur darauf kommt es an auch wenn es im Hinterzimmer der Android-Zertifizierungs-Behörde vielleicht anders gedacht war.

Es sieht gleich aus. Also werden die Kunden es als Hamburger einstufen und dasselbe Verhalten erwarten weil sie den Unterschied nicht kennen und es sie auch nicht interessiert.

Und weil es keinen ausser mir interessiert: Es werden noch NEUE Android-VIER-Geräte bei Amazon verkauft. Sowas als "ganz früher" also quasi fast wie "vor dem Krieg als der Kaiser noch regierte" (übertrieben ausgedrückt) darzustellen finde ich nicht sinnvoll. Nicht jeder kann sein Handy wie ein Google-Mitarbeiter alle 6 Monate wegwerfen weil er das neue Modell kriegt.
7% sind die IFA-Zahlen für neue Fernseher. Danach 15% also bei der IFA ein Jahr später. D.h. Fernseher werden alle 15-20 Jahre ausgetauscht. Bei Tabletts sind es vielleicht 5 Jahre und bei iPhone (und allen anderen Phones aber das interessiert die Systempresse ja nicht) wie wir wissen nur noch alle 3 Jahre und nicht mehr alle 2 Jahre weil man von dem Geld lieber was anderes kauft. Und einen Schrittzähler braucht man auch nicht jedes Jahr neu. Da gibts auch kein "ganz früher" weil man die locker 10 Jahre nutzen kann.
Autos werden 8 Jahre alt und Smart-TVs werden 15-20 Jahre alt und die dort verbauten Android-Versionen und Icons auf der Android-Fernsteuerung werden auch nicht aktualisiert. Das ist wie die Alterspyramide. Und diesen Kunden will man auch was verkaufen oder zum Installieren der App überzeugen auch wenn deren Auto schon 5 Jahre alt ist und noch das "MENU"-Icon von "ganz früher" hat.

Trotzdem Danke für den Hinweis das Menu und Hamburger unterschiedlich sind. D.h. nicht Facebook sondern Android hat es als Hardware-Taste erfunden und Facebook es für die App unter iOS (wo es nur die Home-Taste gibt) dann in den Screen reingemalt und somit (als HAMBURGER im Hamburger-Style statt im für Anfänger, Rentner und 99% aller Nutzer verwechselbaren Menu-Style) im UI weiter verbreitet. Allerdings gehören Hardwarebuttons auch zum UI aber wenn die sich ständig ändern wie die Frauen mancher Politiker ist natürlich blöd und dann malt man lieber überall Hamburger rein weil man ja nicht weiss, was heute mal wieder von Google neues auf die Hardware-Tasten draufgemalt wurde. Da sind die frei mit Symbolen belegbaren OLED-Tasten vom Apple-Laptop ehrlicher. Da kann jede App frei entscheiden welche Icons sie als Hardware-Tasten anbieten will.

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot