Zusammengefasst
Das Burger-Menü hat Vor- und Nachteile. Gerade auf Mobilgeräten, wo aus Platzmangel das Burger-Menü der Standard für den "Menüersatz" ist, stellen sich die dann erscheinenden Menüs und Untermenüs als unhandlich dar. In Zukunft erwarten wir andere innovative Bedienvarianten für die mobilen Versionen von Internetseiten. Diese findet man bereits jetzt in Smartphone-Apps und einigen hochwertigen Online-Shops.
Drei Striche überall
Nein: Nicht Pommes, Burger und Softdrink. Beim Burger-Menü handelt es sich um das Icon mit drei kleinen übereinander liegenden Strichen. Dieses Icon ist inzwischen ein viel genutztes Symbol, welches bei Klick mit der Maus (oder Fingertouch) das Menü öffnet.
Das Burger-Menü wird in den letzten Jahren auch im Desktop-Design eingesetzt. Klare Sache: Aus Designersicht sieht das schöner aus. Weniger raumgreifend, Bilder und Grafik erfahren keine Ablenkung durch ein "langweiliges" Textmenü. Doch ist dies auch aus Benutzersicht von Vorteil? Ein Menü soll ja schließlich zeigen, welche Optionen es gibt – stattdessen verbirgt das Burger-Menü die Unterseiten. Es ist also eigentlich kein Menü, sondern ein Symbol.
Entstehung und Symbolik
Die drei übereinander liegenden Striche des BurgerMenüs symbolisieren natürlich nicht zwei Brötchenhälften mit einer leckeren Frikadelle dazwischen. Vielmehr dachte der Erfinder Norm Cox bei seiner Gestaltung an ein sich öffnendes Kontext-Menü, bekannt aus klassischer Software bei Klick auf die rechte Maustaste. Und tatsächlich öffnet sich beim "Burger" eine Liste der Menüeinträge einer Internetseite – und zwar untereinander.
Das Symbol ist übrigens das mathematische Entspricht-Zeichen: ≡ . Ein Symbol mit unterschiedlichen Bedeutungen.
Vorteile und Nachteile
Grafisch schicke Webseiten mit flächig eingesetzen Bildern, haben oft auch in der Desktop-Ansicht ein Burger-Menü. Die Zielgruppe solcher Seiten kennt das Menü und weiß sicher auch das Plus an Ästhetik gegenüber vielen Worten zu schätzen.
Studien, bei denen die gleichen Seiten mit Burger-Menü und mit klassischem Textmenü (horizontal am oberen Rand) getestet wurden, haben erwiesen, dass sich die Nutzer der Seite mit dem klassischen Menü schneller und gezielter auf der Seite zurecht finden. Dieses Phänomen wurde mehrfach bestätigt.
Andere Studien haben sich per Eye-Tracking darauf konzentriert, wohin der Blick der Nutzer wandert und wie sich Besucher einer Internetseite orientieren. Dabei ist herausgekommen, dass Nutzer auf Seiten mit Burger-Menü eher vertikal blicken, während Nutzer beim klassischen Menü eher horizontal oben am Menü orientiert schauen.
Konzentration auf Menü oder Seiteninhalt?
Wenn bei Internetseiten auf dem Desktop-Computer auf die Inhalte der (One-Pager)-Homepage wert gelegt wird, dann ist eine Benutzerführung per Burger-Menü zu empfehlen, da die Benutzer sich eher in vertikaler Leserichtung auf die Seiteninhalte konzentrieren. Das Burger-Menü lenkt nicht ab und erlaubt damit auch spontane Erlebnisse und Entdeckungsreisen auf der Startseite. Ein klassisches Menü empfiehlt sich dagegen bei Informationsseiten mit komplexer Inhaltsstruktur, bei denen die Nutzer schnell und gezielt auf eine Vielzahl von Inhalten zugreifen sollen.
Einmal reinbeißen bitte: Das gelernte Burger-Icon
Burger als Standard für mobile Webseiten?
Das Burger-Menü hat sich als Standard für die Darstellung von Webseiten in Browsern auf mobilen Endgeräten mit Touchscreen etabliert. Oben links oder rechts gelegen, zeigt es die Menüs nach Berührung untereinander gelistet, die bei der Desktop-Variante meist nebeneinander zu finden sind.
Vielleicht kennen Sie das von sich selbst: Diese Form des "mobilen Menüs" ist zwar bekannt, aber in der Bedienung insbesondere dann umständlich, wenn das Hauptmenü Untermenüs und womöglich noch weitere Folgeebenen hat. Aufgrund der Tatsache, dass diese Menüs auf Smartphones ohnehin nicht oft und gern genutzt werden, sind die Homepages aktuell als (quasi)-One-Pager mit möglichst vielen Teasern und Absprungpunkten für relevante Inhalte der Website gestaltet.
Was sind die Alternativen?
In Zukunft werden – für mobile Darstellungen – sicher verstärkt alternative Modelle entwickelt. Auf mobilen Geräten setzen sich z.B. aktuell Icon-Menüs am unteren oder linken Bildschirmrand durch. Diese sind – anders als das Hamburger-Menü – immer im Blickfeld des Benutzers. Übrigens lassen sich solche Menüs für Mobilgeräte mit "ganz normalem" HTML und CSS umsetzen. Bei dynamischen Webseiten mit erhöhter Interaktivität, die über reinen Inhalt und Links hinaus gehen, kann eine Umsetzung mit JavaScript erfolgen. Die Grenzen zwischen "Internetseite" und "Web-App" verschwimmen auf diese Weise.
Kombination von Icons, klassischem Menü und Burger
In vielen Anwendungen, insbesondere für Apps auf Smartphones, werden inzwischen Menüs mit Icons gestaltet. Die Hauptmenüpunkte finden sich in der Ansicht für mobile Endgeräte meist am unteren Bildschirmrand. Bei diesen Anwendungen werden statt des Burger-Menüs oft drei kleine Punkte als letztes Symbol genutzt. Dies soll zusätzliche Menüeinträge und Funktionen symbolisieren, die dann als Zusatzmenü oder Auswahlseite auftauchen.
Wir wissen nicht, ob es zu dieser Themenstellung öffentliche Forschungen gibt, vermuten aber, dass drei Punkte (⋯) an dieser Stelle verständlicher sein könnten als "der Burger". Auch die Kombination von (kleinem) Text und Icon wird verwendet. Zum Beispiel in der aktuellen App von SONOS. Ohne Benutzerstudien zu kennen, empfinden wir diese Form des Menüs gerade bei mobilen Anwendungen sehr verständlich und intuitiv bedienbar.
Auf unserer Internetseite haben wir das Menü einfach am unteren Seitenrand wiederholt. Wenn Sie mit einem mobilen Gerät unsere Website besuchen, finden Sie auf diese Weise am Ende jeder Seite Absprungpunkte zu weiteren Inhalten des gleichen Bereiches und das Hauptmenü. Auf diese Weise stört kein Menü die Bildschirmfläche beim Lesen – Sie werden am Ende der Seite aber immer weiter geführt.
Wie sieht die Zukunft aus?
Wir kennen die Zukunft nicht. Wir wissen jedoch aus unserer täglichen Arbeit, dass Internetseiten in Zukunft weniger "Seiten" sein werden, sondern vielmehr Anwendungen. Die sogenannten PWAs (Progressive Web Apps) sind im Vormarsch und werden in Zukunft in vielen Fällen klassische Internetseiten ersetzen.
Mittels JavaScript wandern die von iOS und Android bekannten App-Funktionen in die Browser: und zwar auf Mobilgeräten und auf dem Desktop. Wir realisieren schon jetzt wichtige Teile von Internetseiten per Web-App und sind uns sicher, dass das in Zukunft mehr werden wird. Schauen Sie doch z.B. unsere Anwendung für medizinische Labore, den WebPublisher an. Auch die Eintrittskartenreservierung des Miniatur Wunderland wurde von uns als Web-App realisiert.
Anwendungen oder auch Web-Apps brechen die klassischen Strukturen von Menü (auf dem Desktop) und Burger-Menü (für die mobile Seite) auf. Filterfunktionen, automatisch erscheinende Auswahlmenüs oder sehr funktionale Sticky-Menüs am Bildschirmrand sind zur Zeit der Trend. Wir sind gespannt was folgt und wie sich z.B. die zunehmende Sprachsteuerung oder Eye-Tracking auf die Benutzerführung auswirken.
Guten Appetit
Bei uns gibt es keine Burger. Wir sprechen aber gern mit Ihnen über Ihre Internetseite und deren Evolution zur kundenzentrierten Anwendung. Wahrscheinlich bei einem Kaffee und ein paar leckeren Keksen.