Warum sich von der Burgerkarte verabschieden?

In diesem Artikel werden wir nicht über Cheeseburger sprechen, sondern über eine der umstrittensten Komponenten unserer Webschnittstellen, das „Burger-Menü“, auch „Hamburger-Menü“ genannt.

Das Burger-Menü wird durch das Symbol aus drei parallelen horizontalen Balken dargestellt, die, wenn sie angeklickt werden, ein Fenster mit mehreren Links öffnen. Das ist Ihnen bestimmt schon mehrfach beim Surfen auf einem Smartphone oder auf Ihrem Tablet oder sogar auf Ihrem Computerbildschirm aufgefallen!

Ursprünglich und oft in diesem Sinne verwendet, ermöglicht das Burger-Menü, das Menü sichtbar auf ein Bild umzuwandeln

Computerbildschirm durch das Symbol auf einem kleineren Bildschirm, also auf Smartphone und Tablet.

Dieses Burger-Menü provoziert Diskussionen, da es sehr weit verbreitet ist, da es auf das Problem des verfügbaren Platzes auf einem kleinen Bildschirm reagiert. Aber bringt seinen Anteil an Einschränkungen in Bezug auf die Benutzerfreundlichkeit.

„Wie eine billige Fast-Food-Kette wurde es

Designer, die süchtig nach seiner Bequemlichkeit sind,

und bedient jetzt jeden Tag Millionen“.

                                                                                            Nielsen Norman Group

Das Aussehen des Burger-Menüs

Das Burger-Menü wurde 1981 von Norm Cox erfunden, als er die Schnittstellen für einen der ersten Personal Computer, den Xerox Star, entwarf.

Das Symbol und seine drei Balken stellen die Liste der Optionen dar, die angezeigt werden, sobald der Benutzer klickt. Das Ziel war es, ein kleines Symbol zu erstellen, das immer noch lesbar und erkennbar ist und gleichzeitig eine Liste grafisch symbolisiert. Norm Cox hat sich bei dieser Ikone insbesondere von den Symbolen auf Straßenschildern inspirieren lassen.

Anschließend wurde das Symbol 2009, nachdem es jahrelang nicht von anderen Schnittstellen verwendet wurde, von Apple in einer seiner allerersten Anwendungen für das iPhone verwendet. Das Icon war die ideale Komponente, um den Platzbeschränkungen auf dem Smartphone gerecht zu werden, und verwendete die gleichen Argumente wie Cox bei seiner Erstellung: klein, lesbar und wiedererkennbar für die Anzeige einer Liste.

Dann machten Facebook, Twitter und schließlich Google das Icon zum Standard, um ein Menü zu symbolisieren. Die Popularität dieser Ikone mit dem farbenfrohen Namen nimmt zu. Benutzer haben dieses Burger-Menü jetzt in ihren Konsum von mobilen Anwendungen übernommen und erkennen seine Verwendung schnell.

Dieses Burger-Menü wird dann durch drei horizontale Balken angezeigt, die wie ein Steak zwischen zwei Brotscheiben gestapelt sind, daher dieser farbenfrohe Name.

Andere À-la-carte-Menüs

Das Burgermenü-Symbol ist nicht das einzige Symbol, das ein verstecktes Menü symbolisieren kann :

● Das Kebab-Menü : Das Symbol besteht aus drei vertikalen Punkten. Es findet sich hauptsächlich in Google-Oberflächen und somit auch in Android; diese Komponente ist Teil des Designsystems und dient zur Anzeige eines Optionsfelds oder sekundärer Aktionen im Zusammenhang mit einer Funktion.

● Das Menü „Fleischbällchen“: Das Symbol besteht ebenfalls aus drei Punkten, diesmal jedoch horizontal angeordnet. Ein Klick auf dieses Symbol öffnet eine Liste mit weiteren Details zum zugehörigen Menüpunkt.

● Das Bento-Menü: Das Symbol besteht aus drei Reihen mit je drei Quadraten. Dieses Symbol wird häufig verwendet, um Elemente oder Funktionen aufzulisten, jedoch in einem Rasterformat, wie es auch in der grafischen Darstellung des Symbols der Fall ist.

● Das Döner-Menü: Das Symbol besteht aus drei übereinanderliegenden Linien unterschiedlicher Dicke und Länge. Es stellt eine Liste von Filtern dar, die sich auf die aktuell angezeigte Seite beziehen.

Diese vier anderen Symbole, die den Zugriff auf Menüs ermöglichen, leiden unter den gleichen Nachteilen wie das Burger-Menü, bieten aber die gleichen Vorteile.

Hier sind die Vor- und Nachteile des Burger-Menüs :

Die Vorteile des Burger-Menüs

Bevor wir Ihnen die Gründe nennen, warum Sie sich vom Burger-Menü verabschieden sollten, ist es wichtig, sich daran zu erinnern, dass diese Komponente ihren Anteil an Vorteilen mit sich bringt. Hier eine nicht erschöpfende Liste:

Wenn das Menü geschlossen ist :

  1. Wie oben erwähnt, ist das Burger-Menü-Symbol einfach und lesbar: So können Sie ein sauberes und minimalistisches Design erstellen.
  2. Das Symbol weicht dem Inhalt der Seite. Es ermöglicht, die Seite nicht zu überladen und nicht mit zu vielen Informationen zu belasten.

Wenn das Menü geöffnet ist :

  1. Das Menü kann ein eigenes Design und damit ein bestimmtes Layout haben.
  2. Die Aufmerksamkeit des Benutzers konzentriert sich auf den Menüinhalt.
  3. Auf Mobilgeräten kann die Berührungszone der Links für mehr Komfort vergrößert werden.
  4. Die Links und der Zugriff auf die verschiedenen Routen auf der Website sind zentralisiert an derselben Stelle.

Die Nachteile des Burger-Menüs

Aber jetzt können wir beantworten, warum. Warum auf das Burger-Menü verzichten? Warum ist es besser, sich von ihm zu verabschieden?

Designer stellen das Burger-Menü in Frage, weil durch Studien, Benutzertests und die Analyse von Website-Konsultationsstatistiken festgestellt wurde, dass diese Navigation zu einem starken Rückgang des Engagements eines Benutzers führt.

Hier ist eine unvollständige Liste der Nachteile des Burger-Menüs :

#1 Als großes Problem hat sich herausgestellt, dass die Navigationsoptionen ausgeblendet sind und keine Gesamtansicht der Route möglich ist. Ein Benutzer ist daher verwirrt, wenn er auf der Seite, die er konsultiert, nicht findet, wonach er sucht (über ein Schlüsselwort, einen Link oder eine Schaltfläche).

#2 Der Zugriff auf das Menü über das Symbol erregt beim Benutzer wenig Aufmerksamkeit (weil es klein und von Inhalten umgeben ist) und kann daher von den Benutzern unbemerkt bleiben.

#3 Auf Mobilgeräten wird das Symbol (häufig) oben auf dem Bildschirm platziert, entsprechend der Berührungszone, die für Benutzer schwer zu erreichen ist.

#4 Da Website-Einträge ausgeblendet sind, sind Benutzer weniger fasziniert und werden sich nicht durchklicken, um alle Inhalte zu entdecken.

#5 Auch die Gestaltung des Icons ist ein Problem, da Nutzer das Icon nicht unbedingt als Button zur Anzeige der Navigation erkennen. Einige Benutzer verstehen den Mechanismus hinter diesen drei Balken nicht. Wenn die Navigation dort zentralisiert ist, können Sie daher Besucher verlieren.

#6 Durch das zusätzliche Antippen (oder Klicken) zum Aufrufen des Menüs sind die Benutzer weniger damit beschäftigt, die Website zu entdecken. Es kann aber auch Ermüdung in der Navigation, ja sogar Ärger erzeugen, denn dieser zusätzliche Klick ist eine Mauer, die bei jedem Seiten- oder Routenwechsel überwunden werden muss. Der Weg wird also verlängert, um das Ziel zu erreichen.

#7 Da das Menü eine eigene Seite hat, sehen wir, dass diese Seiten oft überladen sind, weil wir sie mit möglichst vielen Links und Zugängen füllen wollen. Am Ende haben wir eine große Anzahl von Überschriften, was den Eindruck erweckt, als hätten wir die Sitemap angezeigt. Die Oberfläche verliert an Übersichtlichkeit und Einfachheit.

 

# Schlussfolgern

In diesem Artikel haben wir daher die Vor- und Nachteile der Verwendung eines Burger-Menüs zusammengetragen.

Die Beobachtung ist klar, das Burger-Menü bringt einige Probleme mit sich, die Ihre Benutzer daran hindern, effizient auf einer Website zu navigieren.

In einem zukünftigen Artikel werde ich Ihnen Folgendes mitteilen :

  • Tipps zur Verbesserung der Verwendung des Burger-Menüs, wenn Sie es verwenden möchten und in welchen Fällen es ratsam ist, diesen Mechanismus zu verwenden,
  • andere mögliche Materialisierungen für Ihre Menüs, die es ermöglichen, Einfachheit, Benutzerfreundlichkeit und Ästhetik für Ihre Schnittstellen zu kombinieren.

Zögern Sie nicht, uns Ihre Meinung zum Burger-Menü mitzuteilen! Für oder gegen? 🙂

 

Bildquelle: https://undraw.co/illustrations

 

Alexa CUELLAR UX-UI-Designer @UX-Republic


Unsere nächsten Schulungen