Wie gestaltet man ein Hamburger-Menü?

Was ist ein Hamburger-Menü?

Der Name deutet auf das Aussehen des Hamburger-Menüs hin.

In seiner Grundform ist das Hamburger-Menü nichts anderes als ein dreizeiliges, flaches, geometrisches (in der Regel auf einer rechteckigen Fläche enthaltenes) Symbol (Hamburger Button).

Einfach ausgedrückt, besteht es aus drei Streifen, die dem Adidas-Logo ähneln, aber horizontal verlaufen.

Sie wird in der Regel in den oberen Ecken einer Website oder eines Anwendungsbildschirms angeboten — entweder in der oberen rechten Ecke oder in der oberen linken Ecke.

Es wurde erstmals im Xerox Star 8010 Personal Computer verwendet, der einen Durchbruch in Technologie, Informationstechnologie und Design darstellte.

Auf diesem Computer wurde auch die grafische Benutzerschnittstelle zum ersten Mal verwendet. Es basierte auf Fenstern, Icons und Ordnern, die schließlich zum Standard wurden.

Das Hamburger-Menü, genau wie heute, war gewohnt:

• Operationen rationalisieren.
• Platz sparen.
• Zugang komprimieren.

Das Hamburger-Menü ist ein Icon, mit dem Sie Navigationsschaltflächen speichern können. Welchen Sinn hat es, sie zu verstecken?

Die wichtigsten Vorteile des Hamburger-Menüs sind die folgenden:

• Platz auf der Seite oder der Registerkarte einsparen.
• Klarheit des Designs.
• Einfacher Zugang zu allen wichtigen Funktionen an einem Ort.
• Die Möglichkeit, eine klarere visuelle Hierarchie der im Menü angebotenen Kategorien zu erstellen.
• Effizienz (vor allem im mobilen Kanal, wo Platz, Größe, Proportionen und Licht knappe Güter sind).
• Die Fähigkeit, die Navigation zu steuern.

Außerdem ist das Hamburger-Icon gut lesbar, verständlich, funktionell und kompakt. Für viele ist es auch elegant in seiner Einfachheit und Nützlichkeit.

Sie können das Hamburger-Menü auch als Menü verwenden, in dem Funktionen und Links von untergeordneter Bedeutung für den Benutzer gespeichert sind.

Funktionen, die notwendig sind, aber keine hohe Priorität haben. Diejenigen, deren Nutzungshäufigkeit gering ist.

Sie finden darin Links mit hoher Priorität und solche, die für den Benutzer der Website oder der mobilen Anwendung von geringerer Bedeutung sind.

In dieser Hinsicht gibt es eine Menge Freiheiten. Es gibt auch keine Anzeichen dafür, dass ein solches Übereinkommen, das allgemein akzeptiert und vor allem umgesetzt wird, in nächster Zeit in Kraft treten wird.

Bei der Auswahl des Inhalts eines Hamburger-Menüs kommt es also immer darauf an, die Vorlieben, Gewohnheiten und Erwartungen der Benutzer zu kennen. Es gibt keine eindeutigen, willkürlichen Designmuster.

Die Kosten der Interaktion, die Verkürzung der Zugriffswege und die Beachtung der Leistung sollten die Hauptkriterien sein, die Sie bei der Entscheidung für ein solches Menü und der Festlegung seines Inhalts berücksichtigen sollten.

Sie sollten jedoch bedenken, dass...

Die Kosten für die Interaktion mit einem Hamburger-Menü sind immer etwas höher, da ein zusätzlicher Klick oder Tippen erforderlich ist (was auf mobilen Geräten immer mit einem größeren Fehlerrisiko verbunden ist).

Hamburger-Menüs erfordern auch das Scrollen, Ziehen, Dehnen oder Zoomen.

Die Kosten der Interaktion werden als Variable, die die Nutzbarkeit beeinflusst, zwar oft unterschätzt, sind aber dennoch von Bedeutung.

Andererseits sind die Nutzer (Desktop- und Mobilnutzer) aufgrund der weiten Verbreitung dieser Art von Menüs recht vertraut damit.

Das Hamburger-Menü hat einen hohen Wiedererkennungswert und ist für die meisten Benutzer (auch für solche mit minimaler Erfahrung und Kompetenz) recht verständlich.

Sie sollten auch bedenken, dass die Effektivität, Effizienz und Rechtfertigung für die Verwendung des Hamburger-Menüs sehr individuell sind.

In einem Fall kann es eine fragwürdige Lösung sein, in einem anderen Fall kann es sogar die Rettung sein.

Wie fast immer bei UX, bei Fragen der Nutzbarkeit, hat alles seine Vor- und Nachteile. Sie wirft auch die typischen Fragen auf.

Zum Beispiel: Ist das Hamburger-Menü eine Lösung, die immer wünschenswert ist und keine Nachteile mit sich bringt? Handelt es sich immer um eine Lösung für mobile Geräte und mobile Anwendungen?

Diese Fragen sind durchaus berechtigt. Obwohl seine Anwendung aus der obigen Beschreibung offensichtlich erscheint, wirft das Hamburger-Menü mehrere Design-Dilemmata auf.

Ähnlich wie beim Flat Design, über das wir kürzlich geschrieben haben, geht es immer darum, kritisches oder zumindest problematisches Denken zu aktivieren.

Sie erfordert einen Vergleich der potenziellen Vorteile, Gewinne, Kosten und Risiken.

Beschränkungen des Hamburger-Menüs

Das häufigste Argument gegen diese Art von Menüs ist das Argument der unbewussten Reduzierung des Inhalts des Menüs.

Dieses Argument beruht auf der einfachen Überzeugung, dass das, was direkt zugänglich ist, eine höhere Priorität, einen höheren Rang, eine höhere Bedeutung und einen höheren Wert haben muss als das, was verborgen und versteckt ist.

Kulturell (nicht unbedingt funktionell oder praktisch) ist alles, was praktisch ist, immer mit etwas Bedeutsamerem verbunden. Stimmt das?

Ja und nein. Nehmen wir als Beispiel den Inhalt eines Banksafes. Der Wert liegt nicht in der Zugänglichkeit, der Unmittelbarkeit oder der Verpackung, sondern in dem, was drin ist.

Das ist der Grund...

Die Ordnungsmethode sollte auf der von den Benutzern zugewiesenen Bedeutung beruhen und nicht auf abstrakten, kulturell festgelegten Werten.

Diese sind nämlich nicht immer üblich und, was noch häufiger der Fall ist, nicht immer entscheidend.

Je mehr dieses Argument infrage gestellt wird, desto mehr wird es durch die Erfahrung entkräftet. Und das suggeriert den Benutzern, dass die Dinge manchmal anders aussehen können.

Es gibt Websites und mobile Anwendungen, auf denen sich im Hamburger-Menü tatsächlich Links von geringerer Bedeutung befinden. Es gibt auch solche, in denen Sie wichtige Funktionen finden können.

Viel wichtiger als der Inhalt ist die Position des Hamburger-Menüs. Sie kann schwieriger zu finden sein, wenn sie in der oberen linken Ecke angeboten wird.

Eine gängige Praxis ist es, ein Hamburger-Menü in der oberen rechten Ecke anzubieten.

Das Problem ist real, wie die Ergebnisse von Forschern der Nielsen Norman Group zeigen, die in dem Artikel "Hamburger Menus and Hidden Navigation Hurt UX Metrics" veröffentlicht wurden.

Aber das Problem ist auch komplex, wie die in diesem Artikel vorgestellten Ergebnisse zeigen.

Demnach gibt es erhebliche Unterschiede in der Erfahrung und Probleme mit der Nutzbarkeit, wenn das Hamburger-Menü auf dem Desktop und den mobilen Kanälen angeboten wird.

Wir können sie wie folgt zusammenfassen:

• Mobile Benutzer nutzen die Navigation viel häufiger als Desktop-Benutzer.
• Das Hamburger-Menü schränkt die Auffindbarkeit von Inhalten auf Computern wahrscheinlich stärker ein als auf mobilen Geräten.
• Die Notwendigkeit, Funktionalitäten zu erreichen, erzeugt auf einem Desktop-Computer eine höhere Fehlerwahrscheinlichkeit als auf einem Mobiltelefon.
• Es gibt offensichtliche Unterschiede bei der Nutzung von Desktop- und Mobilgeräten. Im Desktop-Kanal verwenden die Benutzer viel eher eine interne Suchmaschine, wenn sie keinen direkten Zugang zu Funktionen haben.
• Der Desktop-Kanal ist traditionell schneller, was die für die Erledigung einer Aufgabe erforderliche Zeit angeht, was die Verwendung eines Hamburger-Menüs nicht unbedingt ausschließt.

Wenn wir alle Einwände gegen das Hamburger-Menü zusammenfassen, können wir sagen, dass es in gewisser Weise durch Folgendes gekennzeichnet ist:

• Geringere Bedeutung, Wichtigkeit.
• Geringere Erkennbarkeit und Auffindbarkeit (direkt proportional zur Größe und Position des Menü-Icons und dem Farbkontrast zum Hintergrund).
• Geringer Informationsgehalt — der allgemeine, universelle Charakter des Hamburger-Menü-Icons lässt nicht auf seinen spezifischen Inhalt schließen.
• Höherer Arbeitsaufwand bei Verwendung dieser Art von Menü.
• Fehlen einer klaren Standardisierung und Konventionalisierung des Inhalts.

Daraus können Sie schließen, dass das Hamburger-Menü für mobile Anwendungen und Geräte viel natürlicher und wünschenswerter ist und für Desktop-Geräte viel problematischer.

Die Art und Weise, wie die Navigation angeboten wird, sollte daher unter Berücksichtigung der folgenden Kriterien angepasst werden:

• Die Komplexität der Kategorien und Unterkategorien (Anzahl der Navigationslinks).
• Der Kanal, in dem das Menü angeboten werden soll.
• Das Layout einer Website und/oder einer mobilen Anwendung.
• Anzahl der Schnittstellenelemente.
• Größe der Elemente, Proportionen und Farbkontraste - mit anderen Worten: der funktionale und visuelle Kontext, in dem Textlinks und Symbole (einschließlich des Hamburger-Menü-Icons) um die Aufmerksamkeit des Benutzers konkurrieren werden.
• Prioritäre Aufgaben und Ziele, die der Benutzer zuerst erreichen möchte.
• Die Schwierigkeit der Aufgaben — Anzahl der erforderlichen Schritte, kognitive Belastung und Kosten der Interaktion.
• Der Kontext, in dem die Aufgabe normalerweise ausgeführt wird.

Methoden zur Optimierung von Hamburger-Menüs

"Das kommt darauf an." Gibt die gängige Antwort auf die Frage, wie ein bestimmtes Nutzbarkeitsproblem zu lösen ist.

Die Individualisierung von Problemen, die Suche nach Lösungen auf der Grundlage von UX Forschung und das Lernen über Vorlieben, Erwartungen und Benutzerfreundlichkeitsprobleme liefern Wissen und Daten, die zu einem Designleitfaden werden.

Die Optimierungsempfehlungen dienen als Modell, nicht als Allheilmittel für jede Website oder mobile App.

Sie sollten nicht flächendeckend, sondern selektiv eingesetzt werden —zugeschnitten auf die in der UX Forschung diagnostizierten Bedürfnisse und Probleme.

Die Beantwortung der folgenden Fragen trägt zur Optimierung des Hamburger-Menüs bei:

• Was sind die Ziele, Vorlieben und Erfahrungen des Benutzers?
• Welche Funktion des Menüs ist für den Benutzer am wichtigsten?
• Über welche Kompetenzen und Fähigkeiten verfügt der Benutzer? (z. B. ist das Alter eine Variable, die die Benutzer stark unterscheidet, und die manuelle Geschicklichkeit von Senioren ist ein Paradebeispiel für eine Variable, die die Wahl des Menütyps beeinflusst).
• Welche Funktionen sollten direkt angeboten werden, und welche erfordern möglicherweise mehr Aufwand für den Zugang?
• Inwieweit ist der Menüinhalt in einer bestimmten Branche, auf einer bestimmten Art von Website oder in einer mobilen Anwendung standardisiert oder konventionell? Mit anderen Worten: Inwieweit wird der Inhalt des Hamburger-Menüs für den Benutzer eine Überraschung sein?
• Inwieweit ist das Symbol des Hamburger-Menüs dem Benutzer vertraut und verständlich?
• Welche Größe sollte das Hamburger-Menü-Icon in Abhängigkeit von der Bildschirmgröße, dem Gerätetyp und der Komplexität des Website-Layouts oder des Anwendungsbildschirms haben?
• Welcher Grad an Kategoriekomplexität im Menü ist für den Benutzer eine Herausforderung? (Als Standard wird empfohlen, kein Hamburger-Menü zu verwenden, wenn die Menüstruktur aus bis zu 4 Punkten besteht).

Die Verwendung des Hamburger-Menüs sollte auch aus dem kommen:

• Anzahl der Navigationselemente.
• Methode zur Kategorisierung von Navigationselementen.
• Lage der verschiedenen Gruppen von Elementen (z. B. Hauptmenü, oberes Menü, Seitenmenü, unteres Menü).
• Ansatz für die Gruppierung — einige Benutzer möchten wichtige Links gruppieren und an einem separaten Ort unterbringen.

Bei der Optimierung des Hamburger-Menüs sollten Sie auch auf Folgendes achten:

• Eine angemessene Größe des Menü-Icons.
• Ein geeignetes Farbschema des Menü-Icons — insbesondere der Farbkontrast, der es den Benutzern ermöglicht, es in der Struktur der Website oder mobilen Anwendung leichter zu finden.
• Eine angemessene Form des Icons — seine Typizität und Relevanz für den Stil der Website oder Anwendung.
• Attraktivität - Sie können das Hamburger-Menü-Icon mit Animationen und Mikro-Interaktionen attraktiver gestalten.
• Angemessene Größe und Kontrast der im Hamburger-Menü angebotenen Artikel.
• Angemessene Anordnung der Menüelemente in einer Spalte, nach einer klaren, für den Benutzer verständlichen Reihenfolge und Wichtigkeit.
• Richtige Platzierung des Icons — empfohlen wird die obere rechte Ecke der Seite, Registerkarte Anwendung.
• Einhaltung der in den Human Interface Guidelines und Material Design festgelegten Standards
• Onboarding, bei dem das Hamburger-Menü in Bezug auf seine Zugänglichkeit, seinen Inhalt und die dahinter stehende Logik vorgestellt wird.