Das Hamburger Menu

Wiedererkennungswert hoch 10 aber: Macht es auch auf Desktop Websiten Sinn? Eine Eye Tracking Studie über das Hamburger Menü und dessen Einsatz auf Desktop Websiten. Die Ergebnisse haben überrascht.

Immer häufiger ist das Hamburger Icon in neueren App Versionen wie Facebook, Snapchat und Co. zu finden. Das Icon versteckt die restlichen Menupunkte, die nicht wesentlich sind, um die verfügbare Bildschirmfläche zu maximieren. Immer mehr findet die Navigation auch den Weg auf Desktop Websiten. Die E-Mail Helpseite von Google, Squarespace oder die neue Suchmaschine DuckDuckGo beispielsweise verwenden das Menu auf ihren Seiten.

Apple hält wenig von der Verwendung des Hamburger Menüs und rät, es zu lassen. Der Google Material Design Leitfaden ist Befürworter, gibt aber Richtlinien vor, wie sie zu gestalten sind. Andere machen Witze darüber, wie es mit einer Pizza wär.. etc.

 

Der Nutzen des Icons?

Dieser Artikel handelt aber nicht davon, ob das Icon verwendet werden soll oder nicht. Viel mehr geht es darum, ob sich das Verhalten des Nutzers ändert, wenn er das Hamburger Icon auf einer Desktop Website vorfindet – im Gegensatz zum herkömmlichen Navigationsmenu. Dazu stützen wir uns auf die Studie, beschrieben von Developertown. Mithilfe einer Eye Tracking Software und 25 Teilnehmern ist eine Untersuchung durchgeführt worden. Die Ergebnisse haben überrascht und könnten Ihnen, liebe Leser interessante Denkanstösse für die Gestaltung Ihrer Website geben.

Das mobile Surfen ist dem Surfen auf dem Desktop heutzutage in vielen Bereichen überholt, deshalb ist es logisch, dass mobile Gewohnheiten auf den Desktop überschwappen. Da stellt sich die Frage, ob dies gut ist? Erschwert es nicht die Benutzerfreundlichkeit? Verändert es das Verhalten der Nutzer? Wenn ja zum Guten oder zum Schlechten?

So der Erfinder des Symbols, Norm Cox:«Ich habe das Symbol vor vielen Jahren als ‚Container‘ für kontextbezogene Menüpunkte entworfen. Es sollte dem Kontextmenü ähneln, das wir anzeigen, wenn wir mit der rechten Maustaste auf ein Objekt klicken, es sollte richtungsweisend sein, einfach, von der Funktionsweise einprägsam – und den Look der nach dem Klick angezeigten Menü-Liste nachahmen.»

 

Untersuchung der Studie

Mit der Verwendung einer Eye Tracking Software wurden 25 Leuten eine Reihe von Aufgaben gestellt, um Daten zu sammeln. Als Testseite ist Google Inbox genutzt worden. Zwei verschiedene Versionen sind nach dem Zufallsprinzip angezeigt worden. Die eine Version war die exakte Website, wie sie zur Zeit mit dem Hamburger Menü online steht. Die zweite Version war eine neu erstellte Version mit einem horizontalen Menü und denselben Menüpunkten. Folgende Aufgaben sollten die Nutzer erledigen:

1. Öffnen Sie eine Nachricht
2. Erstellen Sie eine neue Nachricht
3. Öffnen Sie die Einstellungen (um das Layout anzupassen)
4. Suchen und öffnen Sie einen Nachrichten Thread (der in der geöffneten Ansicht nicht zu sehen ist)

Die Untersuchung dauerte circa zehn Minuten pro Probanden. Anschliessend wurden den Teilnehmern ein paar Fragen gestellt, um ihre Reaktion auf das Gesehene einzufangen und ihre Meinung zum richtigen Zweck und Einsatz des Hamburger Menüs zu ermitteln.

 

Spannende Ergebnisse

Menu spezifische Aufgaben konnten die Probanden schneller bei einer horizontalen Navigation finden. Das untenstehende linke Bild zeigt eindeutige Bereiche um die Navigationsleiste herum. «Diese Leiste sei direkt und am zugänglichsten», so die meisten Probanden. Ein paar Teilnehmer meinten, dass der Inhalt des Hamburger Menüs (Bild rechts) besser sei, da die statische Navigationsleiste nicht zur Benutzeroberfläche passe.

Hamburger-menu2 Hamburger-menu
Ein Probande erwähnte, dass das abgesetzte Suchfeld ihm das Gefühl gab, statt seiner E-Mails das gesamte Web zu durchsuchen. Zudem kam es zur Erkenntnis, dass das Hamburger Menü der Seite ein professionelleres Aussehen verleihe. Sehr Interessant war bei der Auswertung, dass ein Muster entstand, wie die Betrachter die Seite anschauen. Bei der Version mit dem Hamburger Menü verlief der Blick der Leute fast immer vertikal:
Hamburger-menu3
Bei der Seite mit der Navigationsleiste schien der Blick horizontal zu gehen:
Hamburger-menu4
Ob es eine Ursache für dieses Verhalten gibt, ist nicht sicher. Klar ist aber, dass es einen grossen Unterschied in der Art und Weise gibt, wie Menschen die Inhalte auf den verschiedenen Seiten konsumierten.
Fazit

Bei der Frage, wo den Probanden das Hamburger Menü am meisten auffällt, nannten sie fast immer mobile Apps. Zudem sagten die meisten, dass es genutzt werde, um auf kleinen Geräten Bildschirmfläche zu gewinnen. Auf dem Desktop ist Bildschirmfläche kein wichtiger Aspekt, warum also auf dem Desktop verwenden?

Scheinbar kommt es auf den Zweck der Software an. Vorher muss definiert werden, was die Funktion der Website ist. Ob ein Produkt oder eine Serviceleistung verkauft wird? Werden Inhalte an ein Publikum weitergegeben? Bieten Sie ein Werkzeug, das für einen bestimmten Einsatz verwendet wird oder ein bestimmtes Bedürfnis erfüllt?
Wenn es sich um ein Produkt handelt, bewegt man sich mit einem klaren Ziel durch die Seite. Beispielsweise bei einer Banking Website, die wir besuchen, um ein paar Aufgaben so schnell wie möglich zu erledigen: Rechnungen bezahlen, Geld überweisen etc. Diese Optionen sind normalerweise übersichtlich platziert, damit sie vom Besucher leicht gefunden werden.

Der andere Fall ist eine Seite, die dazu animieren soll, dass ein Produkt gekauft wird. Dabei ist es wichtig, dass die Besucher überzeugende Storys erleben, mit denen sie sich identifizieren können. Überzeugende Erlebnisse und gute Inhalte eignet sich dafür. Somit möchten Sie als Unternehmer vielleicht, dass Ihr Content versteckt ist, sodass Besucher länger auf der Website bleiben, um die relevanten Informationen zu finden und sich dann am Ende für das Produkt entscheiden. In diesem Fall beispielsweise könnte ein Hamburger Menü eingesetzt werden, um ein organisches Entdecken zu fördern.

Dies sind erst zwei Gesichtspunkte einer komplexen Sicht auf Websiten. Jede Situation und jeder Besucher sind einzigartig. Lisa Gevelber hat das gut in ihrem „ThinkWithGoogle“-Artikel auf Micro Moments ausgedrückt: «Kunden wollen, was sie wollen, wenn sie es wollen. Das heißt, dass es wichtiger denn je ist, einen guten ersten Eindruck zu machen – vor allem mobil». Man muss sich also den Kontext bewusst machen, und wie Nutzer unsere Technologie erleben. Und dann genau danach designen.

Webdesign und -entwicklung sind in stetigen Wandel. Daher haben wir den Punkt überschritten, an dem wir entscheiden müssen, ob Optionen wie das Hamburger Menü universell sein sollen. Viel mehr müssen wir darüber nachdenken, warum wir bestimmte Werkzeuge und Layouts verwenden und wie die Benutzerfreundlichkeit für die eigene Unternehmensseite optimiert werden kann.

Quelle: http://www.developertown.com/hamburger-menu/