Vergessen Sie das Hamburger-Menü, jetzt kommt das Pizza-Menü

Heute präsentieren wir ein wesentlich besseres Menü-Design, das sich sowohl für mobile Geräte als auch für Desktops eignet und so einen schnelleren Zugriff auf nutzerdefinierte Menüpunkte ermöglicht. Wir haben damit zwei der aktuellen Hauptprobleme des Hamburger-Designs überwunden.

 

by Jakob Nielsen (deutsche Übersetzung) - 01.04.2015

 

In den letzten Jahren wurde das Hamburger-Icon zu einem beliebten Element der Nutzeroberfläche von mobilen Geräten: ein Icon mit 3 horizontalen Strichen wird als einzig sichtbare Komponente angezeigt und repräsentiert das Hauptmenü der Applikation. Sofern es richtig gestaltet wurde, sollte dieses Icon ein Resemblance Icon sein, das wie ein Navigationsmenü aussieht und das, sobald darauf geklickt wird, die Liste der Hauptnavigationskategorien anzeigt. Obwohl niemand (nicht einmal McDonald’s) ein Hamburger-Icon verwendet, welches tatsächlich wie Fast Food aussieht, verwenden einige mobile Sites das Icon falsch, was natürlich dann Usability-Probleme zur Folge hat. (Mehr über mobile Icons erfahren Sie in unserem Kurs Visuelles Design für mobile Geräte (engl.))

Beispiel für ein "Hamburger"-Menü, das in diesem Screenshot der mobilen Seite von Pizza Hut in der oberen linken Ecke zu finden ist. Das Menü wird als Icon, der aus 3 kurzen, horizontalen Streifen besteht, angezeigt.

Die mobile Seite von McDonald's verwendet das Logo des Unternehmens (die "goldenen Bögen") - welche die meisten Menschen mit "Hamburgern" verbinden - als Link zur Startseite. Die Seite verfügt über kein Hamburger-Menü, das Bild eines echten Hamburgers agiert allerdings als Link zu dieser Lebensmittelgruppe.

Leider bietet das Hamburger-Menü eine schreckliche Usability für die Desktop-Nutzung (engl.). Aus den Augen aus dem Sinn: denn das Fehlen einer permanent vorhandenen globalen Navigation ist auf Desktop-Computern ein Desaster.

Unsere Nutzerforschung mit mobilen Geräten (engl.) identifizierte zahlreiche Usability-Probleme mit bestimmten Hamburger-Designs, wenn diese über Handys verwendet werden. Dazu gehören Widersprüchlichkeiten, das Risiko, den falschen Teil des Bildschirms zu aktivieren, und die problematische Repräsentation von mehrstufigen Informationsarchitekturen (engl.). Einige dieser Probleme können überwunden werden, indem die Richtlinien für eine gute UX beachtet werden, ich schlage allerdings vor, sie komplett zu eliminieren und sich stattdessen einer anderen Menü-Metapher zu widmen.

Sind Tortenmenüs einladender?

Eine mögliche Alternative zu Hamburger-Menü ist zufälligerweise ein weiteres Menü, das nach einem Lebensmittel benannt wurde: das Kuchen-Menü, in welchem die Auswahlmöglichkeiten in Form von Kuchenstücken repräsentiert werden, die um einen Aktivierungspunkt herum platziert werden. Forschung von Professor Ben Shneiderman und Kollegen der University of Maryland ergab im Jahr 1988, dass Nutzer mit Kuchenmenüs 14% schneller waren, als mit traditionellen Menüs.

Obwohl die Forschung zu belegen scheint, dass wir uns beim Design von Menüs für Kuchen statt Hamburger entscheiden sollten, gibt es dabei zwei Probleme.

Erstens ist unter renommierten Webdesignern (engl.) bekannt, dass man sich nicht auf Forschung verlassen sollte, die älter als eine Woche ist. Die Situation ändert sich zu schnell, vor allem was mobile Geräte betrifft. Als das American Ballet Theater im letzten Monat eine Neuauflage von Die Schöne und das Biest mit Kostümen einer Produktion aus den 1920ern aufführte, mussten die Kostüme neu gestaltet werden, da die heutigen Tänzer grösser und schlanker waren als die Tänzer aus den 1920er. Aus ähnlichen Gründen funktioniert eventuell das Fitts’sche Gesetz (engl.) nicht mehr, da die meisten Nutzer heute grösser und schwerer sind, als sie es früher waren. Falls dies der Fall sein sollte, bin ich der Meinung, dass diese Veränderung des menschlichen Körperbaus die theoretischen Vorteile neutralisiert, die Tortenmenüs aufgrund einer durchschnittlich kürzeren Distanz zwischen dem Aktivierungspunkt und einem Menüpunkt haben könnten.

Da grundlegende Fakten der menschlichen Psychologie (engl.) allerdings nie Design-Innovationen einschränken sollten, gibt es ein zweites, wichtigeres Argument gegen Kuchenmenüs. In der heutigen globalisierten Wirtschaft sind die meisten Unternehmen geschäftlich im Ausland tätig und müssen beim Design Ihrer Websites und Apps daher auch internationale Nutzer berücksichtigen.

Es ist bekannt, dass es nicht amerikanischeres gibt als einen Apple Pie (Apfelkuchen), und dass Frankreich perfekt durch die Tarte Tatin, einen gestürzten Apfelkuchen, repräsentiert wird (um die Dessert-Neutralität zu wahren könnten wir natürlich genauso gut sagen, dass ein Apple Pie eine gestürzte Tarte Tatin ist). Selbst ein schnelles Überfliegen eines Kochbuchs zeigt eindrucksvoll, dass Kuchenmenüs einfach zu stark vorbelastet sind, um sich für i18n zu eignen. ("i18n" ist die Abkürzung von "Internationalisierung".)

Gescheiterter Kandidat: Das Sushi-Laufband Menü

Asien ist weltweit führend, was das Wirtschaftswachstum betrifft, weshalb uns geschäftliche Überlegungen zu asiatischen Menü-Metaphern und damit zu unserem nächsten Kandidat führen, der das Hamburger-Menü ersetzen könnte. Japanische Restaurants bieten seit langem eine bessere Speisekarten-Usability an, indem lebensnahe Modelle jedes Gerichts verwendet werden, die einfach per Fingerzeig bestellt werden können und dank welcher ausländische Gäste die gedruckte Speisekarte voller Kanji und Katakana nicht verstehen müssen. Ausserdem sind Bilder immer wesentlich aussagekräftiger als schriftliche Beschreibungen. Im Ausland übertrumpften High-Tech Sushi-Restaurants ihr Heimatland sogar, indem Gästen echtes Sushi (im Gegensatz zu Plastik-Modellen von Sushi) präsentiert wird, das auf einem Laufband an jedem Kunden vorbeifährt: Sie nehmen sich einfach die Teller, die Sie essen möchten und eliminieren dadurch sogar den Bestellvorgang (was die Interaktionskosten (engl.) reduziert).

Ein Sushi-Laufband Menü hat den wichtigen Usability-Vorteil, faule Nutzer zu unterstützen, die nichts weiter tun müssen, als die verschiedenen Befehle und Navigationsoptionen - eine Information nach der anderen - zu betrachten. Sobald ein gewünschtes Objekt auftaucht, klicken sie darauf - ansonsten ist keine Aktion notwendig.

Zahllose Studien haben gezeigt, dass Internetnutzer faul sind und dass wir ihren Arbeitsaufwand minimieren (engl.) müssen.

Andererseits verfügen wir über zahlreiche Usability-Beweise für die Gefahren von Startseiten-Karussells auf Websites und das Laufband-Menü ist in Wirklichkeit eine extreme Version eines Karussells, das sich nur in eine Richtung bewegt.

Ausserdem führten wir als Übung im Kurs (engl.) über Methoden der Nutzerforschung: Von der Strategie über Voraussetzungen zum Design extensive Feldstudien (engl.) mit echten Restaurantgästen durch. Die Daten der Feldstudie zeigten eindeutig, dass Menschen tendenziell zu viel essen und mehr kaufen, wenn ein endloser Fluss köstlicher Happen an ihnen vorbeifährt und ihnen ohne jegliche Anstrengung weitere Gerichte präsentiert werden. Websites, die von Werbeeinnahmen leben, freuen sich wahrscheinlich über Nutzer, die zu viele Seitenaufrufe konsumieren. Im Allgemeinen besagt die Theorie der Informationssuche allerdings, dass Nutzer Websites auf dieselbe Weise konsumieren, wie wilde Tiere im Dschungel jagen. Wenn sie zu viele Seiten von geringem Interesse sehen, werden Nutzer diese Website irgendwann verlassen.

Pizza-Menüs für die ideale Schnitte

Nachdem wir so viele Menü-Designs in Erwägung gezogen - und verworfen - haben, könnte die Situation düster erscheinen. Doch keine Sorge. Ich freue mich, Ihnen mitteilen zu dürfen, dass unsere aktuellste Forschung ein besseres Nutzererlebnis durch Pizza-Menüs bestätigt, weshalb diese verwendet werden können, um die Usability-Probleme zu lösen, die Hamburger-Menüs mit sich bringen.

Bevor sich jetzt alle beschweren, dass auch ein Pizza-Menü Internationalisierungsprobleme zur Folge hat, möchte ich daran erinnern, dass Pizza auf der ganzen Welt serviert wird. Mitglieder der Nielsen Norman Group assen vor kurzem während einer Konferenz in Hong Kong köstliche Pizza. Ausserdem würden Innovationen wie die Pizza Hawaii (mit Ananas) niemals in einer traditionellen neapolitanischen Pizzeria serviert werden - sie sind allerdings Beststeller bei California Pizza Kitchen. Pizza ist heutzutage international.

Das Pizza-Menü bietet ultimative Personalisierungsmöglichkeiten: die Nutzer nutzen die Spracherkennungsfunktion des Handys, um metaphorisch "eine Bestellung aufzugeben" und ihre 7 (±2) bevorzugten Befehle anzugeben. (Falls die Sprachsteuerung nicht praktikabel ist - zum Beispiel an einem Desktop-Computer - können Sie die ersten Buchstaben des Befehls eingeben. Am Handy könnten Sie sogar ein Foto eines Objekts machen, das Ihren Befehl repräsentiert - so sieht ein verzögerungsfreier, auf den Nutzer zugeschnittener Icon aus!) Die App erstellt dann ein personalisiertes Menü mit dem gewünschten "Belag". Nach diesem einfachen Schritt verfügen Nutzer über ultra-schnellen Zugriff auf ihre häufig verwendeten Befehle, indem sie auf einen Icon in Pizza-Form in der oberen rechten Ecke des Bildschirms klicken.

Alle weniger häufig verwendeten Befehle stehen zur Verfügung, indem die Personalisierungssoftware aufgerufen wird, um ein Ersatz-Pizzamenü zu bestellen, das vorübergehend als zweites, kleineres Icon in Pizzaform angezeigt wird, bis es vom Nutzer "gegessen" bzw. verwendet wird.

Da wir früher bereits die Usability-Probleme von "QuickLinks" Menüs erwähnten, ist es wichtig, die ausschlaggebenden Unterschiede des Nutzererlebnisses von QuickLinks und Pizza-Menüs hervorzuheben. QuickLinks werden nicht in Form eines runden Icons mit Käse-Belag angezeigt. Aus diesem Grund schaffen es QuickLinks nicht, die richtige Erwartungshaltung zu schaffen, bevor der Nutzer das Menü aktiviert. Da sich Nutzer schnelle - und nicht mit Käse belegte - QuickLinks erwarten, ist es kein Wunder, dass wir beim Testen dieser Menüs häufig auf Usability-Probleme stossen.

Das Pizza-Menü verfügt andererseits über alle Zutaten für den UX-Erfolg. Ausserdem hat es einen einprägsamen Namen. Probieren Sie es in Ihrem nächsten mobilen Design aus - es könnte sich eventuell sogar für Desktop-Designs eignen, sofern Sie sich eine 16 Zoll Pizza statt einer Pizza für eine Person zum Vorbild nehmen.

Referenz

J. Callahan, D. Hopkins, M. Weiser und B. Shneiderman (1988): "An empirical comparison of pie vs. linear menus", Protokoll ACM CHI ’88 Konferenz, S. 95-100.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.