Icons überall in den Menüs — Hilfe
(blog.jim-nielsen.com)- Die Designpraxis, jedem Menüeintrag standardmäßig ein Icon hinzuzufügen, breitet sich aus und erzeugt unnötigen visuellen Lärm
- Google Sheets und das Menüsystem der macOS-Tahoe-Version sind typische Beispiele, da nahezu jedem Menüeintrag Icons hinzugefügt werden
- In einigen Menüs ist nicht klar, nach welchem Kriterium ein Icon angezeigt wird, und es kommt zu Überlappungen mit Toggles sowie zu Ausrichtungschaos
- Dagegen sind Icons wie im Menü zur Fensteranordnung im Finder hilfreich für das visuelle Verständnis, daher ist eine kontextbezogene Entscheidung über den Icon-Einsatz wichtig
- Problematisch ist, dass Apple sein früheres Prinzip aus den eigenen Interface-Guidelines verworfen hat, in denen stand: „Verwende keine beliebigen Icons.“
Kritik an zu vielen Icons in Menüs
- Der Ansatz, allen Menüeinträgen automatisch Icons zuzuweisen, setzt sich als Standard durch und macht die Benutzeroberfläche übermäßig komplex
- In Google Sheets sind im Menü „File“, „Edit“, „View“ alle Einträge mit einem Icon versehen
- Dieser Ansatz führt zu der Gewohnheit, „Icons zum Auffüllen von Raum“ zu erstellen
- Es bleibt bei einer simplen Standardisierung ohne Berücksichtigung des Kontextes jedes Menüs und der kognitiven Belastung
- Der Einsatz von Icons sollte kontextbezogen und sorgfältig ausgewählt werden
- Es muss geprüft werden, ob ein Icon die Usability tatsächlich erhöht oder eher verwirrt
- „Wir setzen einfach in jedes Menü ein Icon“ ist ein Zeichen von fehlender Überlegung
Die Änderung in macOS Tahoe
- macOS hatte sich lange von diesem Ansatz ferngehalten, bis in macOS Tahoe Icons über das gesamte Menüsystem eingeführt wurden
- In Apple-Menüs, im Safari-Menü „Safari“, „File“, „View“ werden nur einige Einträge mit Icons angezeigt
- „Settings“ hat ein Icon, „Privacy Report“ nicht, was auf fehlende Konsistenz hindeutet
- Im Safari-Dateimenü werden nur einige Gruppen mit Icons und Einrückung dargestellt, während andere Gruppen dies nicht tun
- Im Menü „View“ stehen Häkchen/Toggle und Icons nebeneinander, wodurch die Ausrichtung aus dem Takt gerät
- Auch im „View“-Menü von Mail entsteht durch die Mischung aus Text, Toggle und Icons eine komplexe visuelle Struktur
- Der Zweck oder die Auswahlkriterien für das Vorhandensein von Icons sind nicht klar
Nützliche Ausnahmen mit Icons
- Bei Fällen wie dem Finder-Fensteranordnungsmenü liefern Icons großen Nutzen, wenn sie eine räumliche Anordnung sofort erkennen lassen
- Bei „Top Left“, „Bottom & Top“, „Quarters“ vermitteln Layout-Icons ein unmittelbar verständliches Bild statt nur Text
- In solchen Fällen sind Icons ein positives Einsatzbeispiel, das die kognitive Effizienz erhöht
- Das heißt: Icons sollten nicht die Voreinstellung, sondern eine situative Wahl sein
Widerspruch zu Apples Richtlinien
- In Apples Human Interface Guidelines von 1992, 2005 und 2020 steht explizit: „Setze keine beliebigen Icons in Menüs ein“
- Eine Warnung enthält den Hinweis, dass dies zu visueller Verwirrung führen und die Nutzer verwirren kann
- Das damalige „Was-nicht-zu-tun“-Beispiel ähnelt den aktuellen Menüs in macOS Tahoe stark
- Apple hat damit die eigenen Prinzipien verletzt
Fazit
- Das Auftauchen von übermäßigen Icons in Menüs führt zu visuellem Rauschen
- Mit Apples Kurswechsel zu „Icons in jedem Menü“ wird es schwerer, eine Reduzierung von Icons überzeugend zu begründen
- „Wenn es keinen legitimen Grund gibt, sollte der Standard ohne Icons sein.“
- Derzeit sei, so zugespitzt, die Ära der menüüberflutenden Icons – und der Autor ruft ironisch „Hilfe!“
3 Kommentare
Ich finde es einerseits gut, weil es nonverbale Information ist, aber andererseits wirkt es auch ein bisschen wie ein von AI erzeugter Satz..
Gerade bei Anwendungen, die man häufig nutzt, orientiert man sich eher an Bildern oder Farben als an Text. Ob man je nach Bildschirmgröße beides parallel anzeigt oder nur Icons verwendet, ist unterschiedlich, aber grundsätzlich finde ich es besser, wenn welche vorhanden sind.
Hacker-News-Meinung
Aus Sicht der Barrierefreiheit und Lokalisierung ist die Kombination aus Icon + Text am besten.
Icons nur zu verwenden, um Platz zu füllen, ist problematisch, aber wenn Icon und Text nicht zusammenpassen, steigt die kognitive Belastung sogar noch.
Auch in Tests, bei denen der Text ausgeblendet wurde, war die Kombination aus Icon + Text am effektivsten.
Eine konsistente Verwendung von Icons ist sowohl für visuell als auch sprachlich orientierte Nutzer vorteilhaft und hilft auch bei schmalen Viewports.
Letztlich ist das meiner Meinung nach eine Frage des Willens, Geld für Design auszugeben.
Wenn mir das Lesen von Text schwerfällt, helfen Icons enorm.
Etwa 20 % der US-Bevölkerung sind Analphabeten; sie nutzen Technik, indem sie sich Icons und die Position von Buttons merken.
Nur mit Icons ist es schwer, die Bedeutung zu erfassen, aber wenn beides zusammenkommt, fühlt es sich an, als würde das ganze Gehirn arbeiten.
Ich denke, Icons im Menü gibt es, damit dieselbe Funktion in der Toolbar visuell zugeordnet werden kann.
Wenn es im Menü keine Icons gibt, wirkt das wie ein Signal, dass es sie auch in der Toolbar nicht gibt.
Sowohl Menüs als auch Toolbars konnten angepasst werden, und jeder Eintrag bestand aus Icon + Beschriftung.
Heutzutage gibt es zu viele Icon-Pakete (Font Awesome, Material Icons usw.), sodass Entwickler oft dazu neigen, ein „halbwegs ähnliches“ Icon auszuwählen.
Unser Team erstellt manchmal eigene Icons, aber das ist teuer, deshalb suchen wir meistens einfach etwas Passendes in Googles riesiger Bibliothek.
Zu der Behauptung „Wenn es keinen Grund gibt, Icons hinzuzufügen, sollte man sie standardmäßig weglassen“: Ich denke, Nutzer mit starkem visuellen Gedächtnis können die Icons häufig genutzter Menüs wiedererkennen und sie dadurch schneller finden.
Ich persönlich merke mir eher Tastenkürzel, deshalb stören mich Hotkey-Konflikte mehr als Icons.
Im alten Gmail sahen die Icons für Link und Anhang fast gleich aus, was mich ständig verwirrt hat; inzwischen wurde es zu einer Büroklammer geändert und ist viel besser.
Am störendsten am Beispiel fand ich die uneinheitlichen Einrückungen zwischen den Menüabschnitten.
Wenn nur manche Einträge ein Icon haben, ist nur diese Zeile eingerückt, wenn nicht, dann nicht; gibt es ein Häkchen, wird alles eingerückt, was unausgewogen wirkt.
Von Apple hätte ich erwartet, dass so etwas eleganter gelöst wird, daher ist das enttäuschend.
Ein Comiczeichner, dem ich früher gefolgt bin, hat die Bedeutung von Silhouetten-Design betont, und heutige Icons leiden unter demselben Problem.
Das AWS-Dashboard ist voller visuellem Rauschen, weil sich die Icons kaum voneinander unterscheiden.
Dagegen ist ein Design wie bei Kartenspielen, das Farbe und Form gemeinsam nutzt, sodass auch farbenblinde Nutzer es erkennen können, hervorragend.
Google Sheets macht das in dieser Hinsicht gut, andere Beispiele aber nicht.
Siehe diesen Artikel, Zusammenbruch der Designrichtlinien und wie man die Icons wiederherstellt.
Dadurch hat die Benutzbarkeit von macOS meiner Meinung nach stark gelitten.
Alle Browser-Tabs sehen gleich aus, sodass man nicht erkennen kann, welcher Tab zu welcher Aufgabe gehört.
Das Icon-Beispiel in Google Docs gefällt mir.
Auch ohne den Text zu lesen, kann man Aktionstypen wie Hinzufügen/Entfernen schnell finden.
Über die Icons finde ich ungefähr die richtige Stelle, und mit dem Text prüfe ich die genaue Funktion.
Dadurch verkürzt sich die Navigation im Menü, und die kognitive Belastung sinkt.
Vermutlich liegt irgendwo ein Ticket zur „Verbesserung der Icons“ begraben.
Im Google-Docs-Beispiel ist es viel schneller, das Link-Icon zu finden als „Insert Link“.
Auch Funktionen wie Einrückung oder Ausrichtung lassen sich dank standardisierter Icons leicht finden.
Außerdem hilft das auch nicht englischsprachigen Nutzern.
Wer zum Beispiel nur schlecht Japanisch kann, findet dank der Icons die gewünschte Funktion leichter.
Ich packe in fast alle Menüpunkte Icons.
Das Ergebnis ist weniger mentale Ermüdung und eine schnellere Auswahl.
Je komplexer ein Menü ist, desto sinnvoller finde ich es auch, Farben hinzuzufügen, um mehr Sinne anzusprechen.
Allerdings müssen Icons unbedingt bedeutungsvolle Formen haben.
Selbst wenn sie keine Bedeutung haben, finde ich den „zweiten Eintrag“ in derselben Icon-Reihe viel schneller, als Text zu lesen.
Wenn nur einige Einträge Icons haben, wirken sie wie besondere oder häufig genutzte Funktionen.
Das erscheint mir deutlich nützlicher, als wenn alle Einträge Icons haben.
Das funktioniert wie eine Art umgekehrter Tooltip.
Wenn man aber nur bestimmte Einträge hervorheben will, sind konsistente visuelle Unterscheidung oder die Sortierreihenfolge meiner Meinung nach wirksamer als Icons.
Weniger häufig genutzte Einträge kann man ruhig langsamer scannen.