CommunityExclusivesFeaturedNewsWindows Phone

Hamburger Menü revisited – ein Versuch zur Versöhnung

Hamburger

Ein Gastbeitrag von Windows Developer STP

Hallo liebe Windows United Community und interessierte Windows Phone Nutzer,

dies ist ein kurzer Gastbeitrag und ich möchte euch auf eine kleine Reise aus Entwicklersicht mitnehmen, um euch so meine Beobachtungen und mein Konzept zum Thema „Hamburger“-Menü vorzustellen. All das, was ihr hier sehen und lesen werdet ist natürlich rein subjektiv und sicherlich auch nicht die perfekte Lösung. Aber legen wir einfach mal los…

Windows 10 rückt näher und näher und die Befürchtungen bzgl. des „Hamburger“-Menüs werden bei dem einen oder anderem größer und größer. Ja sogar Stimmen wurden laut, die einen Wechsel zu einer anderen Plattform verlauten ließen. Ich als Entwickler schüttelte des Öfteren einfach nur den Kopf und konnte nicht nachvollziehen wieso so eine derart große Abneigung gegen das „Hamburger“-Menü vorherrscht. Viele erinnern sich bestimmt noch an das erste große Design-Update der OneDrive App letztes Jahr. Quasi die Geburtsstunde des großen Bashens gegen das „Hamburger“-Menü seitens der Windows Phone Metro-Design Anhänger. Für mich war es der Zeitpunkt, das Konzept des „Hamburger“-Menüs mal etwas näher zu betrachten und mir Gedanken zu machen. Schließlich ist es doch eine gute Sache dachte ich mir und implementierte es versuchsweise in eine App.

Ich ging auf Grund der negativen Stimmung in diversen Foren eher skeptisch an die Sache heran, und Überraschung, mein Fazit war: Das ist totaler Mist, zumindest rein optisch; und so konnte ich am Anfang direkt all jenen zustimmen die sagten es sei einfach nur hässlich. Innerhalb von wenigen Minuten ging ich allerdings von „Tschüss Hamburger“ zu „Willkommen Hamburger“ über. Ganz einfach, ein anderes Aussehen änderte im Prinzip alles.

Hamburger Icon

Angetrieben von dem schnittigen Design machte ich mich voll motiviert weiter an die Arbeit und fügte das eigentliche Menü hinzu. Ich drückte also auf den „Hamburger“ Button und da kam es wie von Zauberhand in den Screen hereingeschwebt. Doch Moment mal, wie war das noch gleich mit Ein-Hand-Bedienung? Direkt ausprobiert; und dabei fast das Handy fallen gelassen. So ein Mist; das kann man doch keinem Nutzer zumuten. Aber halb so wild; bin schließlich Entwickler und XAML (Extensible Application Markup Language) ist meine zweite Muttersprache, also wurde kurzerhand eine Wischgeste vom linken Bildschirmrand hinzugefügt, und es war ein Genuss.

Hamburger Menü – der Inhalt zählt

So weit so gut; doch was soll eigentlich in so ein „Hamburger“-Menü rein? Salat, Tomaten, Zwiebeln? Mit dem Vorbild der OneDrive App im Hinterkopf, war mir eigentlich direkt klar was ich will. Umso mehr war ich verwundert wieso alle davon reden, dass die AppNavigation ins „Hamburger“-Menü verlegt wird. Das kam mir total absurd vor, wir haben doch unsere Pivots. Erst vorgestern wurde mir das dann richtig klar, als ich mal versuchsweise in die Entwicklung einer Android hereinschnuppern wollte. Nach dem obligatorischen Fehler in Android Studio direkt nach Erstellung eines neuen Projekts habe ich es schließlich (wahrscheinlich durch Zufall) geschafft eine Android App samt „Hamburger“-Menü zu erstellen. Und was sehe ich da – *bam* – schön die AppNavigation oben im „Hamburger“- Menü anstatt in Tabs wie ich es eigentlich wollte. Jetzt verstehe ich Abneigung dann doch recht gut.

Allerdings ändert das nichts daran, dass das Hamburger-Menü sehr viel Potential hat und den App-Aufbau erleichtern bzw. verbessern kann. Wie schon Anfangs erwähnt war ich von der Idee schnell angetan und mittlerweile habe ich mein eigenes Konzept, welches sich natürlich an dem Grundkonzept orientiert, entwickelt.

Exyaized UI Konzept

Ähnlich wie in der OneDrive App möchte ich einfach nur App-Relevantes von Inhalt-Relevantem trennen. Sprich Sachen wie Einstellungen, Hilfe, Über oder Kontakt aus der AppBar raus und irgendwo anders hin wo es den Workflow nicht stört bzw. den Platz in der AppBar verschwendet. D.h. alles sekundäre, was man nicht jedes Mal benötigt wenn man die App nutzt, in das „Hamburger“-Menü auslagern – und zwar unten – wo es weiterhin schnell und leicht erreichbar bleibt aber gleichzeitig etwas aus der Sicht verschwindet, denn den oberen Teil des Hamburger-Menüs kann man dann für eine Art App-Dashboard nutzen. In diesem Dashboard können z.B. Accounts, diverse InApp-Benachrichtigungen oder App-Statistiken angezeigt werden. Und hier kommt wieder der „Hamburger“-Button ins Spiel, denn dieser ist oben (somit selten von Fingern verdeckt) und lässt sich durch einfaches austauschen des Icons dazu nutzen um dem Nutzer anzuzeigen, dass er mal das „Hamburger“-Menü öffnen soll. Klasse; ich bin begeistert.

  • Das Problem mit dem Aussehen ist je nach Geschmack entweder gelöst oder nicht, aber der Button hat jetzt zumindest eine nützliche Funktion.
  • Das Problem mit der Ein-Hand-Bedienung existiert auch nicht mehr.
  • Die InApp-Navigation bleibt in der Regel außerhalb des Hamburgers.

War es das? Ist es so einfach? Wo wird es dennoch problematisch?

Ganz einfach, das ist ein Konzept welches bis jetzt nur selten genutzt wird. Außerdem bin bis jetzt wahrscheinlich nur ich davon überzeugt. Somit ändert sich für uns als Nutzer nichts, und die Angst scheint weiterhin berechtigt. Vor allem wenn man sich die eine oder andere Preview-App von Microsoft anschaut. Doch ist es nicht auch so, dass wir uns als Nutzer mit der Zeit eh an alles gewöhnen, und wir das „Hamburger“-Menü somit mit der Zeit akzeptieren werden, egal ob es nützlich oder katastrophal implementiert wurde? Ich weiß es nicht, ich weiß nur, dass ich für mich ein Konzept gefunden habe von dem ich überzeugt bin.

Wie seht ihr das? Wie würdet ihr es lösen? Bin ich vielleicht total auf dem Holzweg?

Ihr könnt es einfach selbst ausprobieren. Neben der etwas sehr speziellen Funktion von Clipboard X Cloud war die testweise Implementierung des „Hamburger“-Menüs einer der Hauptgründe für die Entwicklung dieser App, um vorab mal anzutesten, wie das Alles so bei den Nutzern ankommt.

Um eure Mühe zu belohnen, ist die App über das gesamte Wochenende kostenlos zu haben.

Sollte jemand den Artikel erst nach dem Wochenende lesen so ist das kein großes Problem, denn die Windows Phone Version unterscheidet sich nicht im Geringsten, egal ob Bezahl- oder Trial-Version. Lediglich die Windows Version ist auf 7 Tage Nutzung begrenzt. Also zum Ausprobieren müsst ihr keinen einzigen Cent ausgeben.

Alternativ könnt ihr euch einfach das kurze Video anschauen, in dem das „Hamburger“-Menü in Kombination mit einem Pivot-Control gezeigt wird.

Weitere Informationen und den künftigen Entwicklungsfortschritt findet ihr im Forum.

Clipboard X Cloud
Clipboard X Cloud
Entwickler: ZYLAPPS
Preis: 1,99 €

 


 

Bildquelle: VorschaubildTitelbild

Vorheriger Artikel

Alles aus einer Hand: Microsoft übernimmt Kontrolle über Windows Updates!

Nächster Artikel

Poki wird universal! Windows 8 App kommt am 21. Mai.

Der Autor

STP

STP

28
Hinterlasse einen Kommentar

avatar
9 Comment threads
19 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
Marco K.PaulTomdancleMax Mlchrt Recent comment authors
  Diskussion abonnieren  
neuste älteste beste Bewertung
Benachrichtige mich zu:
Andreas Indelicato
Gast
Andreas Indelicato

Also ich bin von vorne herrein Fan des Hamburger Menüs! Das ist richtig gut! Pivot Menüs sollten nur da auftauchen wo sie auch hingehören! In so vielen Apps ist das Pivot Menü fehl am Platz und erschwert die Navigation. Der Hamburger Button ist dort die Perfekte Lösung!

STP
Gast
STP

Sehe ich auch so. Es kommt stark auf den Inhalt einer App an und wie sie generell aufgebaut ist. Ich nutze sehr gerne das Beispiel der neuen Taschenrechner App in Windows 10 obwohl ich sie nur von Bildern kenne. Dort macht ein Hamburger-Menu mit Inhaltsnavigation im Hamburger einfach nur Sinn. Ein Pivot wäre da 100% die falsche Wahl. Meiner Meinung nach^^
Genauso gibt es, und wird es Apps geben, in denen ein Hamburger-Menu nicht die beste Lösung sein wird.

Portalez
Gast
Portalez

Hallo STP! Schön, dass du hierzu einen Artikel geschrieben hast. Ist dir auch gut gelungen, klasse! Ich „stolperte“ vor einiger Zeit über deine App (wir hatten auch kurz in irgendwelchen Kommentaren miteinander geschrieben), und ja: So wie du das gelöst hast, finde ich das gut. Ja wirklich gut, davon können sich einige (auch der großen) Entwickler gerne eine Scheibe abschneiden! Das Problem nur, was ich sehe, ist, dass das Hamburger Menü auch für (subjektiv betrachtet) alltägliches „missbraucht“ werden könnte, und viele Appentwickler deine wunderbare Idee zum öffnen nicht nutzen werden. Zwei Beispiele fielen mir auf Anhieb ein: Zum einen die… Weiterlesen »

STP
Gast
STP

Hi Portalez, vielen Dank für das Lob! :-). Also die Idee ist ja nun keine Innovation von mir; (fast) alle Android Apps mit Hamburger Menu lassen sich mit Swipe öffnen. Ich habe hier in dem Konzept versucht alle negativen Punkte die ich mal herausgelesen habe zu eliminieren. Aber selbst wenn ein Entwickler kein Swipe zum öffnen benutzt, wäre es mMn halb so schlimm wenn dort nur eher Dinge zu finden sind, die man kaum nutzt. Ich hab jetzt die Ebay App nicht im kopf, aber wenn dort z.B. die Postfächer zu finden sind, dann sollte man entweder den Zugriff erleichtern… Weiterlesen »

Königsstein
Admin

Finde die Idee mit dem Menü vom Bildschirmrand reinwischen auch genial. Die Aussage, dass sich Apps mit Hamburger nicht mehr einhändig bedienen lassen, ist damit quasi widerlegt! Auch auf meinem großen Lumia 1520 keine Probleme. Und die Elemente, die oben ins Menü kommen, braucht man entsprechend selten.

Kennt noch jemand eine App, wo das so gelöst ist? Und falls nicht, gibt es etwas was dagegen spricht?

STP
Gast
STP

Mir fällt da noch CloudMesh ein. Für meinen Geschmack aber deutlich zu „unruhig“. Einfach zu viel da drin.

Dagegen spricht eigentlich nur die Ungewissheit ob Microsoft vielleicht die linke Edge für eine systemweite Funktion nutzen will, ähnlich wie bei Windows. Aber selbst wenn nicht, so kann man sich schnell daran gewöhnen und nutzt es unbewusst auch in Windows. Ähnlich wie damals als man nur im Windows IE swipen konnte um vor/zurück zu gehen. Ich hab, dass jedes mal aufm Phone probiert und mich geärgert. Daher kann man in Clipboard X Cloud die Geste optional ausschalten.

Paul
Gast
Paul

Ist zwar jetzt weg vom Thema, aber ich ertappe mich immer wieder dabei, wie ich (ohne lange auf die Zurück-Taste zu drücken) auf WP per „runterwischen“ eine App schließen will (wie beim Win8-Tablet). Das müsste doch über alle Gerätschaften konsistent zu machen sein: Von oben runter wischen => App schließen von rechts rein wischen => Notifications von links reinwischen => Hamburger öffnen Ist das im Tablet-Mode von Win10 nicht auch so? Anyway. @STP: Gute Diskussion der Dinge. Das Hamburger ist nicht per se schlecht, die Frage ist halt, was man daraus macht und welche Optionen sonst noch so existieren. Und… Weiterlesen »

Nik
Gast
Nik

Die Idee mit dem reinwischen ist fantastisch! Die erste App auf meinem Handy die das konnte war Deezer und seit dem benutze ich diese Geste bei jeder anderen App, bis mir bewusst wird, dass ich auf den scheiß Hamburger klicken muss!
Bei deiner App wäre es schön, wenn man das Menü auch wieder mit einem Wisch einklappen kann!

STP
Gast
STP

Ja, ein Wisch zum Schließen hat Königsstein auch schon vorgeschlagen. Ist schon eingebaut, kommt mit dem nächsten Update. Voraussichtlich nächste Woche 😉

Max Mlchrt
Gast
Max Mlchrt

Oder es einfach beim Alten belassen….natürlich nur das Zeugs mit dem Hamburger…das Design und auch die Aufteilung in den Einstellungen ist vollkommen Okay, oder?

André Meyer
Gast

Ich finde, das sieht total intuitiv & nützlich aus (ebenfalls die AppBar). Ich werde versuchen, für das Windows 10 Update, unsere Picturex-App (www.picturexapp.com, privater & sicherer Foto-Austausch während einem Event) auch umzusetzen. Hast du dir schon überlegt, den Code für den Hamburger online zu stellen?

STP
Gast
STP

Freut mich, dass es dir gefällt!
Hochladen wäre auf jeden Fall eine Option, aber zunächst muss ich mir mal anschauen in wie weit die Windows 10 Controls einem freie Hand lassen. Vielleicht lässt sich das Konzept ja auch mit denen umsetzen.
Ansonsten ist es nur ein Grid mit einem 400er Offset zur linken Seite xD

Max Mlchrt
Gast
Max Mlchrt

Hallo, Erst einmal vielen Dank für diesen tollen Artikel. Eigentlich sollte man von dir öfter welche sehen. Das Hamburger-Menü ist doch eigentlich nicht Windows Phone, oder? Eigentlich war WP für diese benutzerfreundliche „Einhand-Bedienung“, wie man sie von Windows 7 und 8 kennt, bekannt und beliebt. Doch was bei Windows Phone 10 (oder neu: Windows 10 Mobile) geleistet wurde ist meiner Meinung nach nicht anzunehmen. Ich finde das Grundkonzept vollkommen zufriedenstellen. Das Design und auch das Menü ist vom Design echt toll. Doch dieses Hamburger-Menü ist der größte Dreck (wenn ich das mal so sogen darf). Ich bin ein Fan von… Weiterlesen »

Portalez
Gast
Portalez

Hallo Max, ich sehe das prinzipiell ähnlich wie du: Hamburger-Menüs „müssen“ nicht sein. Neben Pivot haben wir unter Windows Phone ja noch die drei kleinen „…“, meistens unten rechts gesetzt. In meinen Augen ist das so besser – auch für größere Smartys jenseits der 4,5″ Displays – gelöst, als jeder Burger dieser Welt Allerdings sind sie fast immer mit einer kompletten Leiste verbunden, was mir optisch weniger zusagt als die Burger. Ich bin der Meinung, hier hätte Microsoft gerne ansetzen können, und die Leisten zum Beispiel ausblendbar machen können. Nur ist das nicht das, was Microsoft möchte. Die möchten nun… Weiterlesen »

Max Mlchrt
Gast
Max Mlchrt

Aber wenn Microsoft und Windows mit Windows Phone jetzt in Richtung Android gehen, kann das erst recht nichts werden. Wenn man dann zwei „Androids“ hat, nimmt jeder Mensch, der einen im positiven Bereich liegenden IQ hat, Android, weil es einfach viel länger existiert und auch viel mehr erfahrung hat und nicht zuletzt, weil es die Masse hat. Dann sollte das Windows Phone lieber weiter in die Richtung „individuell“ einsteigen (wie sie es damals mit dem „Persönlichsten Smartphone der Welt“ gemacht haben). Denn jeder, der erst einmal von der Android-Apple-Schiene herunter gekommen ist, hat diesen Schritt nie bereut. Ich zum Beispiel… Weiterlesen »

Portalez
Gast
Portalez

Tja, mein Reden. Mehr als das, nur mit mehr Worten formuliert, habe ich nicht ausgesagt. 😀 Das ist das Problem von Windows10Mobile: Es stößt vielen (aber nicht allen) eingesessenen Fans vor den Kopf. Das hat mit dem Wegfall der HUBs in Windows Phone 8.1 angefangen, ging über die Räume-Funktion und mündet nun in Win10Mobile. Funktionen und Bedienpunkte wurden und werden weiterhin Schritt für Schritt dezimiert, bis am Ende eine „dröge“ Oberfläche übrig bleibt. Optisch vielleicht hübsch anzusehen, doch der Motor darunter wird so einfach aufgebaut sein wie ein Zweitakter. Per se nichts schlimmes, da alles durchaus effizient aufgebaut sein kann,… Weiterlesen »

dancle
Gast

Ich sehe das in vielen Punkten genauso, die Entscheidung Richtung „Android“ gefällt mir auch absolut gar nicht. Wenn ich ein Android will, nehme ich ein Android und habe alle Apps die ich brauche, dafür braucht es kein Windows Phone. Wenn ich dann noch was Apps angeht von Microsoft bevorzugt behandelt werde und die Windows Phone Nutzer wieder warten dürfen fällt die Entscheidung noch klarer. Microsoft hat sich in letzter Zeit sehr gegen seine eigenen Windows Phone Nutzer gerichtet und versucht jetzt mit Windows 10 wieder einiges hinzubiegen. Ob dies allerdings klappen wird, wird sich zeigen.

Max Mlchrt
Gast
Max Mlchrt

Genau das, was du im letzen Absatz geschrieben hast, meine ich. Wenn Microsoft das Konzept so radikal ändert, gehen denen noch die „Fans“ und „Liebhaber“ verloren, doch neue kommen auch nicht dazu. Das einzige, was Microsoft machen kann ist, dass sie das Phone generell „öffentlicher“ machen. Denn wenige kennen das OS „Windows Phone“. Auch bei vielen Apps, die in Werbungen angepriesen werden, findet man selten das Microsoft-Store Logo. Zwar gibt es Ausnahmen, wie zum Beispiel die 7TV App von Pro7, Sat1 und Co., doch enthalten diese oft einige Fehler. Ich finde es schon echt gut, dass Windows sich Meinungen mit… Weiterlesen »

STP
Gast
STP

Hi Max, vielen Dank! Mal schauen, vielleicht finde ich ja noch gefallen am Schreiben^^ Das Hamburger Menu ist eigentlich ein typisches Element einer Website in Mobil-Ansicht. Webseiten haben meist sehr viele Unterseiten und in der Mobil-Ansicht hat man so einen Weg gefunden diese „Listen“ aus der Sicht zu nehmen und dem User stattdessen direkt Inhalte zu bieten. Google/Android haben sich das dann wahrscheinlich dort abgeschaut, allerdings nicht weiter für Smartphones optimiert, aber Webseiten sind ja auch nicht auf Einhand-Bedienung optimiert. Hinzukommt, dass irgendwelche Services zuerst als Webseite verfügbar sind/waren und dann durch eine App erweitert werden, da möchte man auch… Weiterlesen »

Tom
Gast
Tom

@Max: Laut deiner Aussage ist es so, dass garantiert keine mehr zu Microsoft kommen wird… Wie bist du damals zu Microsoft gekommen? Eines ist klar… Es gibt die Microsoft-Hardcore-Fans, welche bisher die Treue gehalten haben, obwohl vieles noch nicht rund lief, und es gibt viele, welche bei Android oder iOS angesiedelt sind. Wenn jemand von denen wechseln will, dann macht er das nicht, wenn das System ein völlig anderes ist. Der Mensch ist träge… Wie stark die Microsoft-Fans sind, zeigt ja der Markt… Weltweit ca. 2-3%. Selbst wenn das ein paar Millionen Geräte sind, so ist das nichts im Vergleich… Weiterlesen »

STP
Gast
STP

Ich wollte an dieser Stelle allen danken, die Clipboard X Cloud im Store bewertet haben. Danke! 🙂

Solltet ihr Clipboard X Cloud „freiwillig“ bewertet haben, dann kommt nach dem 10 App-Start trotzdem noch die coole Erinnerung, dass ihr die App bewerten sollt. Aber die Erinnerung ist Teil des Konzepts, daher nicht so schlimm; denke ich.

Königsstein
Admin

Habe extra auf die Benachrichtigung gewartet. Finde das cool gelöst mit der Erinnerung ans Bewerten! Viel dezenter und sympathischer als ein nerviger Pop-up!

Marco K.
Gast

Finde die Lösung von dir gut. Habe sie so auch im Hinterkopf gehabt, wobei ich nie auf die Idee gekommen wäre, weitere Icons im Hamburger-Menü oben zu verstecken, wie es im Bild oben angedeutet ist. Das fände ich dann doch eher skurril, aber es gibt auch sicherlich hierfür sinnvolle Anwendungsfälle. Wer meinen Blog kennt weiß, dass ich ursprünglich auch sehr deutlich gegen das Hamburger-Menü war. Alleine schon, weil ich aus Android-Zeiten sehr schlechte Erfahrungen damit gesammelt habe. Derzeit entwickle ich allerdings eine App, die ein solches Menü beinhaltet. Noch vor deinem Beitrag, waren fast alle Punkte implementiert, die du auch… Weiterlesen »

STP
Gast
STP

Wie die weiteren Icons (bzw. in dieser App im Moment nur eins) funktionieren, siehst du nach dem 10ten AppStart. 😉
(Bei Windows Phone muss die App im TaskSwitcher geschlossen werden damit ein AppStart zählt)

Swipe in XAML ist super easy, bei HTML/CSS kann ich dir leider nicht helfen. Ich hab wie gesagt keine Ahnung, aber vielleicht geht es in die richtige Richtung:
https://msdn.microsoft.com/de-de/library/windows/apps/br230466.aspx

Marco K.
Gast

Das sieht ziemlich exakt nach dem aus, was ich suche. Danke dir, werde ich bei Gelegenheit mal ausprobieren 🙂

Deine App scheint noch kleine Probleme zu haben: http://kiwipic.de/images/2nty8z.png
Das Stern-Symbol zeigt sich bei mir die ganze Zeit leicht angeteasert. Sieht für mich fehlerhaft aus.

STP
Gast
STP

Oh, vielen Dank!
So ist das natürlich nicht gewollt. Was für ein Gerät nutzt du, bzw. welche Auflösung?

Marco K.
Gast

Das Lumia 735 (1280 x 720 Pixel).
Immer gerne 🙂

STP
Gast
STP

Edit: OK, wahrscheinlich wie die Bildauflösung 1280×720 xD