18.12.2016, 08:00 Uhr Gerade keine Zeit?

Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

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?

Anzeige

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.

Nix mehr verpassen: Die t3n Newsletter zu deinen Lieblingsthemen! Die t3n Newsletter zu deinen Lieblingsthemen! Jetzt anmelden

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.

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.

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.

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.

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.

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.

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.

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.

Anzeige

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.