Hamburger Menu Usability

Informavoren auf Futtersuche

(Bild: Antonio Thomás Koenigkam Oliveira via Flickr)

Mittlerweile sollten alle A Brief History of the Hamburger Icon gelesen haben und wissen, dass das sogenannte Hamburger Menu recht alt ist. Es war ein Menü Icon (so wie heutzutage auch) im Xerox Star Computer (1981).

Wer sich aus historischen Gründen mit der Hamburger Menu Usability befasst, wird sicherlich dieses alte und über zwei Stunden lange (!) Video großartig finden:

Das war also 1981. Dann verschwand das Hamburger Icon aus unserem kollektiven Design Gedächtnis und tauchte erst 2010 wieder auf, als populäre Apps wie Facebook und Path es plötzlich zu nutzen anfingen.

Mittlerweile sieht man das Icon überall und kann viele Artikel über die Hamburger Menu Usability lesen. Dabei wird vieles vermischt und halbfertige Argumente bemüht um Äpfel mit Birnen zu vergleichen. Nick Bewley bringt es auf den Punkt:

Simple applications absolutely should not hide functionality behind hamburger icons. However, as application complexity increases, so does the need to structure an information hierarchy in order to facilitate user flow through the design. A hamburger icon, a three dot (“more”) icon, sidebars, etc. are valuable tools to position certain elements down in the information hierarchy, while subsequently allowing more relevant options to shine in the hierarchy. Ultimately, I agree that the hamburger icon is over- and mis-used, but disagree that it should be banished.

Beim Versuch Hamburger Menu Usability nicht komplett über einen Kamm zu scheren, sollte man wenigstens folgendes unterscheiden:

  • Smartphone-Format (Webseite oder App) oder Desktop-Format (Webseite)
  • Übersichtliche Software (Website oder Applikation) oder komplexes System.

Die Usability-Berater von Nielsen Norman schrieben in Killing Off the Global Navigation: One Trend to Avoid zu Recht:

Traditionally, global navigation appears on every page of a website, and serves 2 functions:

1) Allows users to switch between top-level categories easily, no matter their current location.
2) Ensures that even users who don’t enter through the homepage can quickly get a sense of what is available on the website.

For desktop sites, demoting your main content categories into a drop-down menu makes it harder for users to discover your offerings.

Die globale Navigation erfüllt auf Webseiten eine wichtige Funktion. Sie dient der Orientierung, trägt oft zum allgemeinen Gefühl für angebotene Inhalte bei (AffordanzInformation Scent) und macht Content zugänglich. Gerade im Desktop-Kontext, wo oft ausreichend Platz verfügbar ist, sollte man es sich gut überlegen ob die bekannte globale Navigation abgeschafft- und dafür ein Hamburger Menü eingeführt wird oder nicht.

hamburger-menu-usability-1

Eingeklapptes Hamburger Menü.

Ausgeklappte Navigation. Ist Hamburger Menu Usability hier ein Thema? Vielleicht.

Ausgeklappte Navigation. Ist Hamburger Menu Usability hier ein Thema? Vielleicht.

In obigem Beispiel sieht man die recht übersichtliche Startseite von Evernote.com. Das Hamburger Menü Icon ist immerhin beschriftet, das ist schon mal deutlich besser. Aber ist es wirklich nötig das bischen Navigation auch noch hinter einem Hamburger zu verstecken?

Im typischen Anti-Hamburger Menü Artikel The Hamburger Menu Doesn’t Work liest man dann zum Beispiel:

Maybe you’re headed to the airport. Even if you’re distracted while you’re driving, it would be hard to miss all the signs and references to the airport. Some part of your brain notices the many airport signs along the way and consciously or subconsciously follows the arrows until you find yourself there. Now imagine if all those signs were hidden by default, and that you had to push a button in your car to see them.

Also, mal angenommen Deine Webseite ist wie eine Straße die zum Flughafen führt. Dann ist es—völlig richtig—ziemlich schlecht, wenn man die Straßenschilder versteckt. Klar! Nur gibt es eben sehr viel komplexe Webseiten da Draußen die nicht wie eine Straße sind die nur zum Flughafen führt. Selbst die super übersichtliche Straße… sorry Webseite von Evernote führt ja Nutzer schon zu sieben (oder so) unterschiedlichen Zielen.

Das ist das Problem mit den üblichen Hamburger-Menu-Usability-ist-schlecht Artikeln im Netz: sie bringen keine guten Erklärungen an und liefern nie alternative Vorschläge die auf umfangreichen Webseiten im mobilen Kontext funktionieren.

Bis dahin bleibe ich dabei:  Hamburger Menüs sind nicht immer perfekt, aber in manchem Kontext alternativlos.

About Jan (501 Articles)
<p>Informationsarchitekt und Konferenz-Veranstalter (IA Konferenz, die Konzepter-Konferenz: http://iakonferenz.org, MOBX Mobile UX Konferenz: http://mobxcon.com), Podcaster und Twitter Addict. Geboren in Prag, sesshaft in Berlin.</p>

Leave a comment

Your email address will not be published.


*


css.php