Wie man das Hamburger-Ikonen-Problem löst
Das Hamburger-Icon - drei kleine Balken, die einen Link zu einem Menü anzeigen - ist eine der derzeit kontroversesten Techniken im Web. Designer, so wird uns gesagt, alle hassen es; Kunden, wir sagen es allen, hassen es auch. Warum dann, ist es überall?
Das Hamburger Icon ist leicht skalierbar und passt sauber in ein Pixelraster. Es war ursprünglich ein Listensymbol, das in seine aktuelle Rolle press-ganged wurde, aber da ein Menü einfach eine Liste von Optionen ist, ist es semantisch korrekt, das Listenelement auf diese Weise zu verwenden.
Es gab eine große Menge an Debatten, A / B-Tests, Blogs und Benutzerstudien zu diesem Thema, aber diese Studien konzentrieren sich fast immer auf App-Design. Wenn das Hamburger-Icon im Webdesign verwendet wird, deutet dies auf ein wesentlich größeres Problem hin.
Das Problem mit dem Hamburger-Symbol
Es gibt viele Designer, die den Wert der Hamburgerikone selbst in Frage stellen. Es wird häufig als iOS-Stilsymbol angesehen, obwohl es auf diese Weise verwendet wurde, bevor Apple es übernommen hat.
Tatsächlich gibt es viele widersprüchliche Beweise dafür, ob das Hamburger-Icon als Hinweis auf ein Menü verwendet werden kann. Einige Designer argumentieren, dass das Symbol von einer jüngeren Demografie leicht erkannt wird, andere deuten darauf hin, dass eine ältere Demografie es anerkennt, wenn es sich für das Internet auskennt. Die einzige Schlussfolgerung, die wir aus diesen Belegen ziehen können, ist, dass Usability-Tests sich als nicht schlüssig erwiesen haben, da parallele Tests oft widersprüchliche Ergebnisse liefern.
Was allgemein akzeptiert wird, ist, dass Benutzer das Hamburger-Icon nicht als einen einzigen Link erkennen - wahrscheinlich, weil es so aussieht, als ob es eine Gruppe von Links wäre, anstatt nur eine einzige Sache. Etwas, das unterstützt wird, ist, dass das Hamburger-Icon mit einem Rahmen umgeben ist, oder dass es einen Hintergrund hat, so dass es buttonartiger aussieht - wage ich zu sagen, skepulomorpher - wird zu mehr Klicks führen.
Mehr Probleme mit dem Hamburger-Icon
Abgesehen von der Gestaltung der Ikone selbst ist der Ansatz, eine Hamburger-Ikone zu verwenden, ebenfalls mit Problemen behaftet.
Erstens, und vielleicht am wichtigsten, fügt das Hamburger-Icon Ihrer Navigation eine zusätzliche Aktion hinzu; Wenn es einen Klick braucht, um eine bestimmte Seite zu erreichen, dauert es jetzt zwei. Die Faustregel für Webdesigner war immer (wo immer möglich) ein Maximum von drei Klicks, so weit entfernt von der Lösung eines Navigationsproblems, die Hamburger-Icon-Technik tauscht einfach ein Problem gegen ein anderes aus. Natürlich ist das nicht nur ein Problem für das Hamburger-Icon, es ist ein Problem für jede Navigation, die auf diese Weise angelegt ist. Sie können das Wort "Menü" anstelle des Hamburger-Symbols verwenden und Sie haben das gleiche Hindernis, der Unterschied ist, dass das Hamburger-Symbol auf keine andere Weise verwendet werden kann.
Die Hamburgertechnik verbirgt auch ihren Inhalt. Aus der Sicht von UX sollten Benutzer keine Maßnahmen ergreifen müssen, um herauszufinden, welche Aktionen sie ergreifen können. Es ist allzu leicht zu vergessen, auf Twitter zu teilen oder zur Kasse zu gehen, wenn diese Optionen nicht unmittelbar vor Ihnen liegen. Benutzer werden einfach nicht nach einem Link suchen, von dem sie nicht wissen, dass er existiert.
Schließlich versteckt die Hamburger-Icon-Technik den aktuellen Status Ihrer Site und die Position des Nutzers darin. Down-Zustände in einem Menü stellen einem Benutzer Kontextinformationen bereit, die durch die Hamburger-Icon-Technik verdeckt werden.
Was macht das Hamburger Icon gut?
Angesichts der Tatsache, dass die Hamburger-Ikone allgemein verhasst ist und zu einer Reihe von Problemen führt, warum wird sie überall verwendet?
Meiner Erfahrung nach hat die Hamburger-Ikone in bestimmten demografischen Bereichen sicherlich den Punkt erreicht, an dem sie leicht zu erkennen ist. Studien, die widerlegen, dass ein Jahr oder mehr alt und ein Jahr sind, ist eine lange Zeit auf der Interweb.
Tatsächlich ist das Link-Icon weit mehr erkennbar als das Link- Icon oder das Share- Icon, von dem noch keine endgültigen Formen bekannt sind. Das Hamburger-Icon ist über eine beliebige Anzahl verschiedener Designs hinweg konsistent.
Am wichtigsten ist, dass das Hamburger-Icon genau das tut, was es vorhat: Es spart uns eine Menge Bildschirm-Immobilien. Wenn ein Kunde Ihnen eine Liste von Gagillion-Gegenständen präsentiert, die zu einem Menü hinzugefügt werden müssen, dann ist es eine rohe, aber effektive Möglichkeit, Platz für den Inhalt zu schaffen, den der Klient auch haben möchte.
Ich würde gerne sagen, dass das Hamburger-Icon das Problem besser löst als andere Lösungen, aber es ist nicht wahr. Stattdessen werde ich sagen, dass das Hamburger-Icon das Problem weniger schlecht löst als andere Lösungen.
Die Wurzel des Problems
Das Hamburger-Icon wird häufig verwendet, weil Designer - oder häufiger Clients - sich nicht voll und ganz einem Mobile-First-Ansatz verschrieben haben. Sie wollen eine "normale" Seite, aber gequetscht auf das Handy ihrer Enkelin.
Gegner der Hamburger-Ikone tendieren dazu, sie durch das Wort "Menü" zu ersetzen - dabei fehlt ihnen der Punkt völlig. Das Hamburger-Symbol hat jetzt oder später seine Bedeutung, aber die Benutzer, die verstehen, wofür der Knopf steht, lösen nicht das größte Problem, nämlich dass das Verstecken unserer Navigation, das Verstecken der Optionen unserer Benutzer, ein schrecklicher Akt des Selbst ist -Sabotage.
Kurz gesagt, die Hamburger-Ikone ist ein Symptom unseres kollektiven Versagens, alle Aspekte des Mobile-First-Ansatzes von ganzem Herzen zu umfassen.
Eine bessere Lösung
Um das Hamburger Problem zu lösen, müssen wir akzeptieren, dass das Web, wie wir es kennen, nicht funktioniert. Der Aufstieg des mobilen Webs bedeutet weit mehr als nur die Anzahl der verwendeten Spalten zu reduzieren und einige der schwereren Bilddateien zu löschen.
Das mobile Web wird anders als das alte Web verwendet. Das mobile Web existiert im Kontext dedizierter Apps, und die Nutzer erwarten, dass das Web auf ähnliche Weise erlebt wird.
Facebooks App tauschte bekanntermaßen ihr Hamburger-Icon gegen eine Tab-Leiste aus und verbesserte dadurch die Conversions. Aber Facebook hat etwas viel Bedeutenderes getan, als Menüentwürfe auszutauschen. Kürzlich haben sie ihre Messenger-App veröffentlicht, und das große Problem ist, dass sie bereits eine perfekt funktionierende und beliebte App hatten, mit der sie das Messaging integrieren könnten. Facebook hat seine Funktionen unterteilt, indem es die Rolle jeder App auf zwei einfache Apps konzentriert hat, anstatt auf eine komplexe. Die reduzierte Funktionalität führt zu einem reduzierten Satz von Menüoptionen und weniger zu einem Hamburgermenü.
Gute Apps sind sehr fokussiert, und sie haben sich durch weitaus strengere Benutzertests entwickelt als das Web. Um ein App-ähnliches Erlebnis zu schaffen, müssen wir unsere Websites vereinfachen, erneut vereinfachen und dann ein wenig vereinfachen. Wenn nötig, brich deine Architektur in überschaubare, mundgerechte Stücke, Microsites fast. Wenn wir unseren Benutzern eine einfache Auswahl von Optionen präsentieren, tritt das Problem eines komplexen Menüs nie auf.
Die Hamburger-Ikone zu benutzen, ist wie ein Pflaster auf eine Verletzung zu klopfen: Sie legt es auf, aber darunter ist noch etwas kaputt.
Nur wenn wir uns voll und ganz dem Ansatz "Mobile First" verschreiben und ihn nicht nur auf unser Design, sondern auch auf unsere Inhalte und unsere Informationsarchitektur anwenden, werden wir das Hamburger-Menü der Geschichte zuordnen.
Vorgestelltes Bild / Thumbnail, verwendet Hamburger Bild über Mononc 'Paul