{"id":2615,"date":"2017-11-23T10:44:49","date_gmt":"2017-11-23T09:44:49","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=2615"},"modified":"2017-12-14T09:23:23","modified_gmt":"2017-12-14T08:23:23","slug":"schmeckt-es-noch-das-hamburger-menue","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/schmeckt-es-noch-das-hamburger-menue\/","title":{"rendered":"Schmeckt es noch? – Das Hamburger-Men\u00fc"},"content":{"rendered":"

Es ist weit verbreitet und steht f\u00fcr die Navigation einer Website – das Hamburger-Men\u00fc. Drei kleine Balken, die an die Schichten eines Burgers erinnern, geben Nutzern den Hinweis, dass sich dahinter das Men\u00fc verbirgt. Die Anzahl der Nutzer, die \u00fcber das Smartphone oder Tablet ins Netz gehen, nimmt zu. Mithilfe des Hamburger-Men\u00fcs\u00a0ist es m\u00f6glich, auf allen Bildschirmgr\u00f6\u00dfen das Men\u00fc darzustellen. Doch User Experience-Experten warnen. Warum und ob es Alternativen gibt, erfahren Sie in diesem Beitrag.<\/p>\n

Warum wird das Hamburger-Men\u00fc genutzt?<\/h2>\n

Mit dem Aufkommen der Smartphones und Tablets entwickelte sich auch das responsive Design. Der Inhalt einer Website soll auf allen Bildschirmgr\u00f6\u00dfen dargestellt werden. Das Men\u00fc z\u00e4hlt nat\u00fcrlich auch dazu. Dieses wird auf kleinen Bildschirmen unter einem Hamburger-Icon versteckt. Es wirkt sich positiv auf die \u00dcbersichtlichkeit aus und f\u00f6rdert ein „fingerfreundlicheres“ Interface. Jedoch birgt die Nutzung einige Risiken.<\/p>\n

Der Nutzer verliert schnell die \u00dcbersicht, da Men\u00fcpunkte nicht direkt einsehbar sind. Um diese aufzudecken, ben\u00f6tigt dieser einen zus\u00e4tzlichen Klick. Im Bereich der Online-Shops kann dieser eine Klick bereits zu viel sein und die Website wird verlassen. Der \u00dcberblick, was auf einer Seite alles m\u00f6glich ist, kann verloren gehen. So geht aus einer Studie von Kara Pernice und Raluca Budiu (2016)<\/a> hervor, dass eine versteckte Navigation dazu f\u00fchrt, dass der Nutzer l\u00e4nger braucht, um das Men\u00fc zu erkennen. Daher ist es wichtig, dass ein Besucher der Website wei\u00df, was das Hamburger-Men\u00fc ist. Nicht jede demografische Gruppe kann etwas mit den drei kleinen Strichen anfangen. Deshalb muss an jede Altersgruppe gedacht werden. Daher ist es ratsam zus\u00e4tzlich das Icon zu beschriften. Auf unserer Website sieht das Hamburger-Men\u00fc folgenderma\u00dfen aus:<\/p>\n

\"Hamburger-Men\u00fc<\/a>

Hamburger-Men\u00fc<\/p><\/div>\n

Dies erleichtert das Identifizieren des Men\u00fcs. Jetzt sollten auch Einsteiger und weniger erfahrene Nutzer das Hamburger-Men\u00fc erkennen.<\/p>\n

Welche Alternativen gibt es?<\/h2>\n
    \n
  1. \n

    Bottom-Navigation<\/h4>\n<\/li>\n<\/ol>\n

    Die „Big Player“ nutzen diese Men\u00fc-Form (Instagram, Facebook). Die wichtigsten Funktionen werden auf kleineren Ger\u00e4ten am unteren Bildschirm angezeigt. Instagram hat jede Seite in die Bottom-Navigation gepackt: „Startseite“, „Suche“, „neuer Beitrag“, „Beitr\u00e4ge von Freunden“ und „Profil“.<\/p>\n

    Bottom-Navigation eignet sich vor allem f\u00fcr weniger Men\u00fcpunkte (5 oder weniger). Au\u00dferdem kann die aktive Seite markiert werden. Dadurch steigt die \u00dcbersichtlichkeit. Diese Men\u00fcform ist auf Smartphones besonders gut geeignet, da das Men\u00fc im Hauptnutzungsbereich des Nutzers liegt. Daher wird die Bedienung erleichtert, da der Nutzer seine Hand nicht verrenken muss.<\/p>\n

    \"Hauptnutzungsbereich

    Hauptnutzungsbereich mobil (Quelle: Babich, 2016, https:\/\/uxplanet.org\/perfect-bottom-navigation-for-mobile-app-effabbb98c0f)<\/p><\/div>\n

    2. Tab-Navigation<\/h4>\n

    Bei weniger als drei Hauptmen\u00fcpunkten kann eine Tab-Navigation hilfreich sein. Im Gegensatz zum Bottom-Men\u00fc ist die Tab-Navigation im oberen Drittel des Bildschirms zu finden. Sie stellen eine Metapher zu Schubladen mit Ordnern dar. So steht jeder Tab f\u00fcr einen Ordner. Auch in dieser Variante sind alle Men\u00fcpunkte immer einsehbar. Jedoch w\u00fcrden Tabs auf dem Desktop schlecht funktionieren. Daher werden diese oft in Verbindung mit anderen Men\u00fcs genutzt (z. B. Hamburger-Men\u00fc). Damit dienen Tabs eher als Navigation auf einer Unterseite. Denn das Hamburger-Men\u00fc steuert die Hauptnavigation.<\/p>\n

    3. Einklappende, Collapsing, Priority+ Navigation<\/h4>\n

    Ein Men\u00fc, welches sich mobil noch am Desktop orientiert, hei\u00dft einklappendes, collapsing oder Priority+ Navigation. Websites wie die Nachrichtenportale Guardian<\/a> oder BBC<\/a>\u00a0nutzen diese Form. Hierbei bleiben Men\u00fcpunkte so lange sichtbar, wie Platz auf dem Bildschirm ist. Sie klappen ein, wenn nicht ausreichend Fl\u00e4che vorhanden ist. Men\u00fcpunkte werden unter einem „mehr“-, „more“- oder „Men\u00fc“-Button gesammelt. Mithilfe dieser Technik sieht der Nutzer so lange wie m\u00f6glich die Men\u00fcpunkte. Diese sind nach ihrer Relevanz geordnet. Durch das einklappende Men\u00fc werden Nachteile des Hamburger-Men\u00fcs abgeschw\u00e4cht. Der Nutzer hat immer den \u00dcberblick.<\/p>\n

    \"BBC

    Das einklappende Men\u00fc am Beispiel der BBC News Seite (Quelle: www.bbc.co.uk\/news). Weniger relevante Punkte werden versteckt.<\/p><\/div>\n

    Ist das Hamburger-Men\u00fc noch genie\u00dfbar?<\/h2>\n

    Auch wenn es viele andere Men\u00fcalternativen gibt, so ist vorwiegend das Hamburger-Men\u00fc im Einsatz. Durch gezielte Ma\u00dfnahmen k\u00f6nnen die Nachteile vermindert werden. Besonders Online-Shops mit vielen Kategorien funktionieren schlecht mit einer Bottom- oder Tab-Navigation. Aufgrund der Menge an Kategorien scheitern diese Varianten. Au\u00dferdem kann das Hamburger-Men\u00fc in Verbindung mit anderen Arten verwendet werden. Dadurch entsteht die einklappende Variante des Men\u00fcs.<\/p>\n

    Lessons learned:<\/h4>\n