Hamburger… considered harmful

Irgendwie seltsam, aber schon der Titel dieses Artikels ist doppeldeutig und damit nur schwierig zu verstehen. Die Hamburger haben ein Problem? Ganz bestimmt haben sie das, aber darum geht es hier nicht. Es geht vielmehr um das kleine Icon auf vielen mobilen immer mehr Webseiten, das man anklicken muss, um zu einen Menü zu gelangen.

Letztes Jahr noch der hice shice, wird es heute heiss diskutiert. Oft geht die Diskussion jedoch am Thema vorbei, zeigt Paddi McDonnel in seinem Artikel How to solve the hamburger icon problem ganz hervorragend. Die Frage, ob die Nutzer das Icon verstehen, oder ob da nun besser „Menü” dranstünde, ist gar nicht so entscheidend. Es geht um etwas ganz anderes.

Die Herkunft der drei Balken ☰, das chinesische Zeichen für Himmel, ist wohl in Apps für Smartphones zu suchen. Dort verdeckt es zumeist ein Menü mit zusätzlichen Optionen, bspw. Einstellungen, Wechsel des Anzeigemodus und so fort. Im Web, oft auf mobilen Webseiten, aber auch nicht nur dort, wird es verwendet um die Navigation zu verstecken. Die Navigation! Meine Damen und Herren, was macht die Navigation auf einer Website? Richtig, sie zeigt an „wo man gerade ist” und wohin man von dort aus gehen kann, oder soll. Wie erfüllt unser kleiner Hamburger diese Aufgabe? Gar nicht!

Eine App konzentriert sich zumeist auf eine spezielle Aufgabe, die sie idealerweise auf einem Bildschirm erledigt, da braucht es selten eine Navigation. Das ist auf den meisten Webseiten auf denen der Hamburger eingesetzt wird grundsätzlich anders und deswegen schlicht ein Fehler. Eigentlich ist es schon egal, ob ein User es nun gar nicht als Menü erkennt, oder einfach intuitiv nicht klickt—don’t make me think!—, weil es der Klick zu viel ist. Man lässt den Nutzer in beiden Fällen in einer Sackgasse stehen.

Video bei Youtube.

Dabei löst der Hamburger natürlich auch ein Problem. Nämlich, dass die langen Listen von Links, die viele Webseiten Navigation nennen, zu viel Platz wegnehmen. Allerdings müsste hier die Lösung sein, an der Information Architektur zu arbeiten, dem mobile first Gedanken folgend für die komplette Website.

Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions. But Facebook have done something far more significant than swap menu designs. Recently they’ve released their Messenger app, and the big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one. (Paddi McDonnel)

Was hier bei einer App funktioniert hat, gilt wohl auch für jede Website: unser Navigationsproblem im mobile Web lösen wir nicht mit dem Hamburger, sondern in dem wir bereit sind, unsere Inhalte zu fokussieren. Nun aber nicht gleich für jede Sektion eine eigene App planen, sondern einfach mal das Menü entschlacken.

Artikelbild: Bestimmte Rechte vorbehalten von pointnshoot.