coldheat - Weblog von Christian Mücke 
Von leckeren Hamburger Icons
Die Tage lief mir ein kurzer Artikel über den Weg, den ich seit dem wieder und wieder lesen musste. Why and How to avoid Hamburger Menus spricht für sich. Das McIcon hat sich in den letzten Monaten zu einer populären Lösung gemausert, um Navigation und/oder Komplexität zu fragmentieren. Wie so oft in dieser Industrie, werden Standards schnell falsch angewandt und auch dieses mal ist es nicht anders. McIcon löst ein fundamentales Problem auf eine unglaublich effektive Art und Weise und deshalb bin ich noch immer ein großer Freund davon.
Wer immer eine fixe Menge Informationen mit unterschiedlicher Hierarchie auf mal mehr, mal weniger Fläche darstellen möchte, bekommt mit dem Ansatz ein sehr variable Lösung. Warum der Artikel – und dies ist nur einer von vielen Kritiken – über das McIcon schimpft ist aber auch nachvollziehbar. Das Problem ist jedoch komplexer, als es bisher besprochen wurde.
Applikation vs. Website
Schon hier trennt sich die Spreu vom Weizen. In allen bisherigen Beispielen, setzt man das McIcon immer in völlig unterschiedliche Zusammenhänge. Auch wenn der durchschnittliche Anwender nicht mehr zwischen seiner Smartphone App und der nächsten Website unterscheiden kann, so sollte es ein tieferer Dialog über solche Themen schon tun. Eine Facebook App ist keine Website. Eine mobile Twitter Website ist keine Nachrichtenseite. Äpfel sind keine Birnen.
Warum liebe ich den Anwendungsfall für das Problem der Navigation einer responsiven Website? Das McIcon ist ein Adblock Light. Es filtert Informationen und schafft Hierarchie wie es mehr als zehn Jahre Webdesign vorher nicht geschafft haben. Ein alter Artikel aus dem Jahr 2008 ist in vielen Fällen noch immer aktuell. Der eigentliche Inhalt ist oft noch immer flankiert vom Rauschen. Ein Rauschen das sich durch den McIcon Filter leicht reduziert. Ich verstehe noch immer verzweifelte Versuche Leser, Zuschauer und Anwender, mit mal mehr mal weniger gekonnt platzierten Sekundär-Inhalten zu binden, aber es ist und bleibt ein furchtbares Muster dieses Mediums. Es hat niemals gut funktioniert, es funktioniert nicht und wird auch nie perfekt die Augäpfel fesseln. Mobile Webdesign erzwingt nur, was viele schon lange wussten, nämlich dass auch eine Navigation in den meisten Fällen in der inhaltlichen Hierarchie nach unten rutschen. McIcon ist nur die Tischdecke über den Brotkrümeln.
Bleibt also der Anwendungsfall Applikation? Hier ist ein Dialog über Sinn und Verstand des Burger Icons angebracht. Die Argumente bleiben gleich. Komplexität und Hierarchie. Ich gebe zu hier zu wenig Kenntnis über das Medium zu besitzen. Ich bin ein Webmensch und Apps sind böses Teufelszeug. Von den diversen auf Screenshots und Videos gesehenen Beispielen, erkenne ich aber das gleiche Problem. Man hat es versäumt Essentielles vom Beiwerk zu trennen. Allerdings können die Brotkrümel hier plötzlich essentielles Werkzeug sein. Apps sind eben keine Websites und Werkzeuge keine Inhalte. Vielleicht sollte die Lehre dann sein, dass sich Komplexität eben doch nur auf ein Mindestmaß komprimieren lässt und ein Photoshop auf dem Smartphone keine so gute Idee sein kann. Bitte schiebt die Schuld aber nicht auf das arme Burger Icon.
8 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
Ich bin da ja radikal und deswegen geneigt Dir zu widersprechen, auch wenn ich weiß, dass das ungefähr so ist, als würde ich Buddha widersprechen. Ich hab noch einen Artikel auf Halde liegen der da heiß „Wegbewegen, aufklappen, verstecken“, der sich zuerst gegen jene Slider wendet, die man inzwischen so häufig im ersten screen von Seiten sieht, wo Aufmacherbilder von rechts nach links sliden. Bei geo.de kann man das Grauen z.B. sehen. Im weitere spricht der Artikel gegen fast alle UI/UX-Formen die Inhalt verstecken. Von ersteren wissen wir aus Kundenstudien, das NICHTS auf der gesamten Seite schlechter klickt als die zweite Seite eines Sliders. Das ist toter Content. Und der Grund dafür scheint mir einfach: Text-Bildkombinationen sind zuerst immernoch ein graphisch-optisches Medium. Ich lese, was ich sehen kann. Was ich nicht sehen kann, könnte genausogut auch nicht existieren. Du siehst vielleicht, wie das zum Hamburger passt. In dem Sinne freue ich mich sehr auf den Artikel
Oder ich sag’s nochmal so, wie ich’s immer den Kunden sage: Das ist eigentlich immer „Trick 17 mit Selbstverarschung“, das ist der Versuch, mehr Platz zu erzeugen, wo nicht mehr Platz ist. Und am Ende führt es immer immer immer dazu, dass man den so ermogelten Platz an anderer Stelle wieder bezahlt.
Wie immer kommt es ganz drauf an. 🙂 Boell.de funktioniert z.B. mobil kaum ohne verstecktes Hauptmenü, weil die Seitenstruktur einfach zu umfangreich ist. Die vier Hauptpunkte könnte man zwar permanent darstellen, aber spätestens die Unterpunkte würden nicht mehr auf die sichtbare Fläche passen. Stattdessen rutscht der wichtige Content nach unten. Es muss ein Kompromiss her zwischen Lesbarkeit, Benutzbarkeit und Inhaltlicher Priorität. Und ein Eingeständnis, dass auf einen mobilen Screen nicht alles passt, was man drauf haben möchte.
Zum Einsatz in Apps: Der Artikel von lmjabreu.com erfasst nicht die unterschiedlichen Herangehensweisen, sondern ist stark iOS fokussiert. Das Hamburger Pattern ist wohl auch hauptsächlich aus iOS hervorgegangen. Andere Plattformen haben andere Design Patterns, z.B. kommt Windows Phone komplett ohne Hamburger Menü aus. Wenn es auf einer Plattform ein etabliertes Design Pattern gibt, wie das Hamburger Menü unter iOS (das nicht nur per Tap, sondern meistens auch einfach per Swipe eingeblendet werden kann), finde ich es durchaus legitim es zu benutzen, da sich hier weniger die Frage stellt, ob der User das Pattern versteht. Aber es kommt wie gesagt immer auf den Einzelfall und die Use Cases an, da wäre ich vorsichtig ein bestimmtes Design Pattern zu verteufeln oder zu feiern. Klar macht es bei iOS gegebenenfalls Sinn sich ein alternatives Pattern anzuschauen, wie z.B. die Tab oder die Scope Bar.
Alles nachvollziehbare Argumente, denen ich nicht viel entgegenzusetzen habe. Mein Argument bleibt der „realistische“ Fall vom Entdecken zum Erforschen diverser Inhalte im Netz. Ich entdecke mich seit Jahren dabei, direkt auf einer unteren Ebene einer Seite zu landen, deren Inhalt zu erfassen und anschließend zu verlassen. Suche ist meine Navigation. Ist ein bisken wie Spotlight auf OSX.
Vielleicht ist es nur meine persönliche Präferenz, aber Hamburger und Co. filtern für mich heute oft eben doch nur das Rauschen vom Signal. Nicht immer, aber oft. Applikationen sind wie gesagt eine völlig andere Welt, über die ich nicht urteilen kann.
@Kim und Chris: Na dann wäre es doch nur Konsequent den Hamburger ganz weg zulassen, in eurer beider Beispielen (Boell und eigene Erfahrung) und stattdessen nur einen Link zur Startseite anzubieten, die einem dann die Struktur der Seit erläutert. Wie ich gerade merke, mache ich genau das bei anmut und demut ja seit einer ganzen Weile. Sowas aber auch. Wasn‘ Zufall. 😉
Und damit stimmt dann auch wieder die Analogie zum Buch respektive zum Magazin. Auch da finde ich kein komplettes Inhaltsverzeichnis auf jeder einzelnen Seite. Brilliant. 😀
Ja und nein 🙂 Wenn die Seitenstruktur komplex ist und der Anwendungsfall es erfordert, ist es meist sinnvoller die Navigation als Baum darzustellen und nicht als Landingpage. Beispiel Shop: Es ist einfacher sich in einem Baum von Oberkategorien in die gewünschte Unterkategorie zu hangeln, als in einem Geflecht aus Landingpages, da es dort viel mehr Bildrauschen gibt. In letzterem Fall interessieren mich wahrscheinlich weniger die neusten und beliebtesten 10 Artikel inkl. Bild, ich will einfach wissen, was es für Kategorien gibt. Bei der Website einer Tageszeitung sieht es schon wieder anders aus, da die Kategorisierung der Inhalte hier nicht eine so starke Rolle spielt.
Weiterer potentieller Nachteil der Startseite als Menüersatz: längere Ladezeit wegen Page Reload und umfangreicherem Inhalt.
Wenn es zum Anwendungsfall passt (wie z.B. bei der Emma), finde ich die Idee der Startseite als Navigation aber ziemlich gut. Das könnte man mal etwas weiterdenken, vielleicht mache ich mal ein Konzept dazu 🙂
Und Analogie zum Buch… Hmm… Nein, Webseiten sind nicht wie Bücher 😉
Beim Thema eCommerce kann ich etwas mitreden. Sowohl bei mir selbst als auch in einem guten Satz Kundendaten erkennt man deutlich das Muster des weniger und weniger vorhandenen „Schmöckerns“. Suche hat Navigation ersetzt. Man findet auf eine Produktseite und springt davon seltener über die klassische Navigation hinweg. Nur konsequent, dann vielleicht auch über die Hierarchie dieser Elemente nachzudenken.