Hamburger-Menüs im Website-Design

Jeder, der das Internet nutzt, hat wahrscheinlich Dutzende von Beispielen für Hamburger-Menüs im Internet gesehen. Dieses einfache, dreizeilige Symbol gehört heute zu den bekanntesten Schaltflächen. Viele Websites verwenden es, um oft robuste Navigationselemente zu verbergen und Platz zu sparen. Trotz ihrer Nützlichkeit gehören Hamburger-Menüs im Website-Design jedoch immer noch zu den umstrittensten Webdesign-Optionen . Für einige ist es eine echte Lösung, die vollständig in alle responsiven Designs Eingang finden sollte. Für andere ist es ein unglücklicher Nebeneffekt, der aus einer Fehlinterpretation des praktischen Strukturdesigns resultiert.

Eine Einführung in Hamburger Menüs im Website-Design

Nicht ausschließlich, aber Hamburger-Menüs sind normalerweise auf reaktionsschnellen Websites und Apps zu finden, wenn sie sich an kleine Bildschirmanzeigen anpassen. Ob links oder rechts, professionelle Designer und Entwickler nutzen hamburger manus, um wertvollen Platz zu sparen. Dies ist eine beliebte Lösung, da sie die Hauptnavigation ausblenden, um mehr Platz für den Rest des Inhalts zu lassen . Aber nicht jeder denkt, dass es eine angemessene Lösung ist. Viele behaupten genau das Gegenteil.

Damit Sie das Hamburger-Menü besser verstehen, besprechen wir hier:

• Was Hamburger Menüs sind
• Das Konzept der Hamburger Menüs im Website-Design
• Die Kontroverse dahinter
• Alternative Implementierung
• Allgemeine Vor- und Nachteile von Hamburger-Menüs im Website-Design

Was sind Hamburger Menüs?

Einfach ausgedrückt ist ein Hamburger-Menü eine einfache und kleinere Alternative zu großen Navigationsleisten . Es dient im Grunde als Schublade, in der Sie alles aus der Navigation platzieren können, was Ihre Website unübersichtlich macht. Hamburger-Menüs sehen normalerweise wie drei Linien übereinander aus. Der Name kommt von seiner offensichtlichen Ähnlichkeit mit Hamburgern.

Alles begann im Jahr 1981. an der Xerox Star Workstation. Norm Cox, der damalige Designer der grafischen Benutzeroberfläche, erstellte ein Symbol, um eine Liste versteckter Elemente zu öffnen. Die Absicht war, eine alternative platzsparende Lösung für die langen Optionslisten zu bieten . Etwas Ähnliches wie das konzeptionelle Rechtsklick-Menü auf Desktop-Computern. Aber bis 2009 erlebte das Hamburger-Menü nicht viel Ruhm. Erst als Facebook und einige andere Websites es wieder einführten, begann das Hamburger-Menü seine Reise. Es war eine fast perfekte Lösung, um wertvollen Bildschirmplatz auf den damals aufkommenden mobilen Geräten zu sparen.

Aber war es?

Der ewige Streit um die Hamburgerkarte

Die ursprüngliche Absicht des Schöpfers war es, etwas Einfaches, aber Effektives zu schaffen. Eine kleine Schaltfläche, die das Durcheinander reduziert, indem sie dem gleichen Prinzip wie das Rechtsklickmenü folgt. Es sollte ähnlich, einprägsam und einfach zu bedienen sein. Und das ist es auch in seiner jetzigen Form, für die es ursprünglich nicht gedacht war.

Allerdings teilen nicht alle die gleiche Begeisterung, wenn es um Hamburger-Menüs geht . Viele Designer kritisieren es, weil es den wichtigsten Teil der Website-Navigation verbirgt. Folglich werden Besucher es schwer haben, es zu finden. Sie empfehlen, das Hamburger-Menü nur dann zu verwenden, wenn mehr als vier Navigationselemente im Menü vorhanden sind. Auf der anderen Seite könnten sich diese Behauptungen in Zukunft ändern, da sich die meisten Menschen bereits an das Aussehen und die Funktionsweise von Hamburgermenüs gewöhnen.

Alternative Verwendung und Implementierung

Neben der „Vier-Elemente-Regel“ gibt es weitere Vorschläge, wie man die Benutzerfreundlichkeit von Hamburger-Menüs verbessern kann.

• Kombinieren Sie das Hamburger-Menü mit anderen Funktionen . So können Sie beispielsweise die Suchfunktion und das Hamburger-Menü direkt nebeneinander platzieren.
• Verwenden Sie Platzhalter mit unterschiedlichen Formen , Rändern und Farben, um „Hamburger“ besser unterscheidbar zu machen.
• Finden Sie eine alternative Positionierung , die nicht unbedingt eine der Ecken sein muss.
• Erstellen Sie ein schwebendes Hamburger-Menü mit einer festen Position, sobald Besucher beginnen, auf der Seite zu scrollen.

Die Idee ist, ein klares, aber unterscheidbares Design bereitzustellen, das für mobile Benutzer unabhängig von der Größe des Bildschirms ihres Geräts praktisch ist.

Allgemeine Vor- und Nachteile der Hamburger Menüs im Website-Design

Unter dem Aspekt UX (User Experience) können die Hamburger-Menüs ein zweischneidiges Schwert sein. Während es in den meisten Situationen funktionieren kann, kann es in anderen zu Verwirrung führen. Um zu verstehen, wann man es verwendet, ist es besser, alle Vor- und Nachteile der Hamburger-Menüs zu überprüfen.

Vorteile:

• Das Hamburger-Menü reduziert die Unordnung – es funktioniert, wenn es am wichtigsten ist. Die richtige Nutzung des Speicherplatzes kann für mobile Websites und Apps manchmal alles bedeuten. In Anbetracht der Größe des Bildschirms, der Ihnen zur Verfügung steht, ist alles gut, was Ihnen mehr Platz bietet. Außerdem können zu viele Elemente auf dem Bildschirm Besucher nur davon ablenken, auf die richtigen Inhalte zu achten.
• Hält die Navigation verständlich – Fast jeder versteht heute, wofür es verwendet wird, wenn er das Hamburger-Menü sieht. Wir sind visuelle Wesen und es ist einfach, ein Symbol zu bemerken, das wie drei horizontale Linien in einer Spalte aussieht. Vor allem, wenn es uns an eines der beliebtesten Fastfoods erinnert. Denken Sie nur daran, wie viele verschiedene Symbole und Markenlogos Sie unter dem Namen kennen.
• Kann eine großartige Option sein, um das sekundäre Navigationselement aus dem Weg zu räumen – Es gibt keine Regel, die besagt, dass Sie Ihre gesamte Navigation im Hamburger-Menü platzieren müssen. Sehr oft besteht eine der besten Lösungen darin, die Hauptnavigationselemente auf der Website zu belassen und alle anderen sekundären Optionen im Hamburger-Menü zu platzieren. Dies nimmt im Grunde das Beste aus beiden Welten und erfüllt dennoch seinen Zweck.

Nachteile:

• Wichtige Navigation ist nicht sichtbar – Wenn Sie Ihre Navigation in ein Hamburger-Menü verwandeln, machen Sie sie fast unsichtbar. Einige Untersuchungen bestätigen, dass das Website-Engagement aus diesem Grund erheblich sinken kann. Mit anderen Worten, einige Leute klicken nicht weiter, weil es ihre Aufmerksamkeit nicht sofort erregt.
• Nicht jeder versteht es – weniger wahrscheinlich, aber es gibt immer noch Besucher, die zum ersten Mal auf die Hamburger-Menüs stoßen. Es mag vertraut aussehen, aber nicht motivierend oder selbsterklärend genug sein, um sie dazu zu bringen, die Aktion auszuführen. Sie werden es so lassen, wie es ist, weil es keine anderen Hinweise darauf gibt, wofür es verwendet wird. Dies ändert sich, kann aber manchmal nicht intuitiv sein. Vor allem, wenn Designer zu viel Freiheit nutzen und es völlig abstrakt machen. Oder der „Hamburger“ selbst ist optisch nicht differenzierend genug.
• Die Bedienung des Hamburger-Menüs erfordert zusätzlichen „Aufwand“ – Auch wenn es albern klingen mag, erfordert ein Hamburger-Menü technisch gesehen einige Schritte mehr als eine typische Navigation. Ganz zu schweigen davon, dass nicht jeder es mit dem Daumen erreichen kann, wenn er sein Telefon in einer Hand hält.

Was auch immer Ihre subjektive Meinung ist, vergessen Sie nie zu überlegen, was die beste Option für Ihre Benutzer ist. Sie mögen vielleicht Hamburger-Menüs, verwenden sie aber dennoch nicht, wenn die Umstände nicht stimmen. Oder Sie können es völlig hassen, aber es könnte die beste Lösung für Ihre Website oder App sein. Denken Sie daran, dass die richtige Anwendung von Hamburger Manus im Website-Design situativ und von Fall zu Fall unterschiedlich sein kann . Um zu sehen, ob es etwas für Sie ist, führen Sie ein paar A/B-Tests durch und sehen Sie, was Ihr Publikum darüber denkt.