- Kontextmenüs reduzieren visuelles Rauschen und senken die Interaktionskosten, bringen aber den Trade-off aus geringem Information Scent und niedriger Auffindbarkeit mit sich
- Sie eignen sich dazu, sekundäre bzw. ergänzende Aktionen gebündelt bereitzustellen, die mit bestimmten Objekten wie Beiträgen, Fotos oder Kalenderereignissen verknüpft sind. Kebab- (⋮) und Meatball- (⋯) Icons werden allgemein als „Mehr anzeigen/zusätzliche Aktionen“ verstanden
- Sind Größe, Kontrast oder Position des Icons schlecht gewählt, kommt es häufig vor, dass das Icon selbst übersehen oder seine Bedeutung missverstanden wird. Werden wichtige Aktionen versteckt, werden daraus schwer auffindbare Kernfunktionen, was die User Experience verschlechtert
- Für einen effektiven Einsatz braucht es konsistente Regeln, etwa nur sekundäre Aktionen aufnehmen, in der Nähe der relevanten Inhalte platzieren, nicht nur ein oder zwei Aktionen verstecken, klar vom Hamburger-Menü abgrenzen und Barrierefreiheit sicherstellen
- Gut gestaltete Kontextmenüs können ein Werkzeug zur Vereinfachung des Layouts und zur Steigerung der Fokussierung sein. Bei Übernutzung oder Fehlgebrauch werden sie jedoch zum Risikofaktor, der Verwirrung, zusätzliche Klicks und Lernaufwand erhöht, weshalb ein sorgfältiger Einsatz nötig ist
Überblick über Kontextmenüs
- Ein Kontextmenü ist ein Menü, das eine Sammlung verwandter Aktionen bündelt, die mit einem bestimmten UI-Element, Bildschirmbereich, Datenausschnitt oder einer Anwendungsansicht verknüpft sind
- Bei einem Beitrag können etwa Edit, Pin, Delete, bei einem Foto Share, Download, Set as Background und bei einem Kalenderereignis Delete, Reschedule, Duplicate, Invite enthalten sein
- Solche Menüs werden meist verwendet, um sekundäre Funktionen, die nur gelegentlich gebraucht werden, aber nicht ständig sichtbar sein müssen, griffbereit zu halten
- Auf dem Desktop werden sie üblicherweise durch Rechtsklick oder Zwei-Finger-Klick auf dem Trackpad, in Touch-Umgebungen durch Long Press ausgelöst; außerdem kommen immer häufiger Kebab- (⋮) und Meatball- (⋯) Icons als Trigger zum Einsatz
Wahrnehmung und Grenzen von Kebab- und Meatball-Icons
- Studienteilnehmende nahmen Kebab- (⋮) und Meatball- (⋯) Icons insgesamt als Hinweis darauf wahr, dass „mehr Optionen/andere Aktionen verborgen sind“
- Dieses Verständnis zeigte sich sowohl auf Mobilgeräten als auch auf dem Desktop und war bei guter Einhaltung der Richtlinien konsistenter
- Die Icons wurden als „Schalter zum Öffnen eines vorübergehend verborgenen Satzes von Funktionen/Icons“ verstanden
- Gleichzeitig haben diese Icons einen geringen Information Scent, sodass Nutzer oft klicken, ohne konkret zu wissen, welche Optionen sich dahinter verbergen
- Wenn das Icon zu weit vom Inhalt entfernt, zu klein oder mit zu geringem Kontrast gestaltet ist, wurde auch beobachtet, dass das Kontextmenü selbst gar nicht wahrgenommen wird
Vorteile und Trade-offs von Kontextmenüs
- Zu den Vorteilen von Kontextmenüs gehört, dass sie visuelles Rauschen verringern, Layouts vereinfachen und den Fokus erhalten
- Dem stehen jedoch folgende Usability-Probleme gegenüber
- Schwierige Auffindbarkeit (geringere Findability): Wenn das Icon klein, blass oder weit vom Arbeitsfokus entfernt ist, wird es zu einem Element, das leicht vollständig übersehen wird
- Mangelnder Information Scent: Es ist schwer vorherzusagen, was im Menü enthalten ist, wodurch es schwer fällt einzuschätzen, ob sich ein Klick überhaupt lohnt
- Potenzial für Missverständnisse: Bei ungünstiger Platzierung oder Verwendung verwechseln Nutzer das Element mitunter mit einem Progress Indicator oder einer Karussellsteuerung
- Ob ein Kontextmenü eingesetzt werden sollte, muss daher im Gleichgewicht mit Layout-Beschränkungen, Nutzererwartungen und Aufgabenprioritäten entschieden werden
1. In Kontextmenüs nur sekundäre, nicht-kritische Aktionen aufnehmen
- Kontextmenüs sind nicht der richtige Ort für häufig genutzte Kernaktionen, sondern für ergänzende Aktionen mit niedrigerer Priorität
- Empfehlenswert ist, Funktionen, die nicht zum Kern-Flow gehören, aber dennoch einigermaßen oft genutzt werden, auf Basis von Research gezielt auszuwählen und zu verstecken
- Wichtig ist, häufig genutzte essenzielle Aktionen nicht hinter einem Kontextmenü zu verstecken
- Ein negatives Beispiel ist die AT&T-Chatoberfläche, in der End Chat in einem Kontextmenü verborgen war und damit eine zentrale Abschlussaktion versteckt wurde
- Werden wichtige Aufgaben hinter einem Menü versteckt, erleben Nutzer entweder, dass sie die Funktion nicht finden, oder wiederkehrende Reibung bei häufig ausgeführten Aufgaben
2. Kontextmenüs in der Nähe der Inhalte platzieren, auf die sie wirken
- Nutzer interpretieren Beziehungen zwischen Elementen über räumliche Nähe. Die Position des Kontextmenü-Icons muss daher klar machen, zu welchem Objekt die Aktion gehört
- Gilt ein Menü nur für ein bestimmtes Element, sollte das Icon innerhalb dieses Elements oder direkt daneben platziert werden
- Wenn Aktionen für ein ganzes Feld oder eine gesamte Transaktion gelten, sollte das Menü in der Nähe des Bereichs mit den zugehörigen Informationen liegen
- Zu vermeiden ist es, Icons an zufälligen Stellen oder an einer losgelösten Position ohne erkennbare Verbindung zu einem Element zu platzieren
- Wie im Fall von Ramp.com ist ein kleines Kebab-Icon mit geringem Kontrast, das unten rechts auf dem Bildschirm abgesetzt steht, schwer einem Element zuzuordnen und ein Beispiel für schlechte Auffindbarkeit und schwache Relevanz
3. Größe und Kontrast des Icons ausreichend wählen, um Sichtbarkeit zu gewährleisten
- Kontextmenü-Icons werden in dicht belegten Oberflächen oder komplexen Anwendungen oft so subtil dargestellt, dass sie praktisch unsichtbar werden
- Das Icon sollte ausreichend groß und kontrastreich sein und nach Möglichkeit auch ohne Hover dauerhaft sichtbar bleiben
- Empfehlenswert ist, bewährte visuelle Designrichtlinien zu befolgen und klaren Farbkontrast sowie eindeutige Konturen oder Hintergründe zu verwenden
- Es nur im Hover-Zustand sichtbar zu machen oder es aus Minimalismus-Gründen zu stark auszubleichen, verschlechtert die Auffindbarkeit
- Wie beim Ramp-Beispiel sind kleine, kontrastarme und weit entfernte Kebab-Icons leicht zu übersehen
- Dagegen ist die mobile App von Rippling mit einem umrandeten Kasten sowie schwarzem Punkt auf weißem Hintergrund ein positives Beispiel, das Tapbarkeit und Information Scent verbessert
4. Kontextmenüs nur mit zusammengehörigen Aktionen füllen
- Die Optionen in einem Kontextmenü sollten Aktionen bündeln, die logisch zu einem Objekt, Element oder einer Ebene gehören
- Bei einer Datei wären das etwa nur dateibezogene Aktionen wie Duplicate, Share, Delete
- Wenn möglich, empfiehlt es sich außerdem, einige Aktionen direkt neben dem Menü-Icon sichtbar zu machen, um den Information Scent dafür zu erhöhen, welche Art von Aktionen noch verborgen ist
- Vermieden werden sollte, globale Aktionen und elementbezogene Aktionen in einem Menü zu vermischen oder voneinander unabhängige Aktionen zusammenzuwerfen
- Solche Mischungen wirken sich negativ auf Klarheit, Auffindbarkeit, räumliches Gedächtnis und kognitive Belastung aus
- Ein gutes Beispiel ist die Slack-Desktop-App, in der im menügebundenen Bereich einer Nachricht nur nachrichtenbezogene Aktionen verborgen sind, während Aktionen für den gesamten Thread an anderer Stelle liegen
5. Icons und Verhalten in der gesamten Oberfläche konsistent halten
- Kontextmenü-Icons sollten im gesamten Produkt dieselbe Funktion, dasselbe Verhalten und dieselbe Erscheinung behalten
- Wenn Meatball- oder Kebab-Icons als Kontextmenü verwendet werden, sollten sie nicht für andere Zwecke wiederverwendet, sondern nur mit genau dieser Bedeutung eingesetzt werden
- Vermeiden sollte man es, dass dasselbe Icon an einer Stelle verborgene Inhalte erweitert, an einer anderen ein Popup öffnet und anderswo ein Seitenpanel einblendet
- Eine solche Wiederverwendung beschädigt das mentale Modell und das Vertrauen der Nutzer und verschlechtert Lernbarkeit und Erinnerbarkeit
- In den Google-Suchergebnissen sieht man etwa, dass das Kebab-Icon bei gesponserten Treffern einen My Ad Center-Modal öffnet, während es bei normalen Treffern ein rechtes Panel öffnet und auch Positionen variieren
- Dadurch bleiben nützliche Aktionen wie Like, Block, Report, Share, Save schwer auffindbar, und Nutzer können schlecht vorhersagen, was nach einem Klick auf dasselbe Icon passiert
6. Wenn das Icon mehrdeutig ist, Bedeutung mit Tooltip oder Label verstärken
- Kebab- und Meatball-Icons sind abstrakte Icons mit schwacher Eigenbedeutung, weshalb schon kleine Texthinweise die Usability deutlich verbessern können
- Wenn möglich, sollte man sichtbare Labels oder Tooltips bei Hover ergänzen, um konkreter zu zeigen, welche Art von Aktionen das Menü enthält
- Sinnvoll sind etwa klare Bezeichnungen mit dem Zielelement wie Post Actions oder Message Options
- Vage Bezeichnungen wie Options oder Labels wie Ellipses, die nur die Form des Icons beschreiben, sollten vermieden werden
- Ein negatives Beispiel ist Patagonia, wo eine Bildvergrößerung auf ein Meatball-Icon gelegt und beim Hover mit Ellipses beschriftet wurde, was die Bedeutung nicht vermittelt
- Positiv ist dagegen die Notion-Desktop-App, deren Tooltip beim Hover konkret andeutet, welche Aktionskategorie im Menü steckt, etwa „Style, Export, and more…“
- Dieser Tooltip passt sich kontextabhängig an den Menüinhalt an
7. Kontextmenü-Icons nur zur Anzeige von Aktionen verwenden, nicht zum Erweitern von Inhalten
- Meatball- und Kebab-Icons werden als Signal zum Öffnen zusätzlicher Aktionen/Optionen verstanden und sollten daher nicht zum Erweitern von Texten oder Bildern verwendet werden
- Wenn gekürzter Text aufgeklappt oder ein Bild vergrößert werden soll, sind explizite Textlabels wie Read more oder Expand empfehlenswert
- Wie im Beispiel von Etsy Reviews ist ein Meatball-Icon unter einer Rezension, das den vollständigen Text öffnet, wegen des geringen Information Scent ein schlechtes Muster
- Dasselbe wird in Google Reviews über einen Textlink More gelöst, was für die Erweiterung von Inhalten geeigneter ist
- Das Kebab-Icon oben in Google Reviews, das nur die einzelne Aktion Report anbietet, verstößt außerdem gegen die spätere Richtlinie, nicht nur eine oder zwei Aktionen zu verstecken
8. Kein Kontextmenü für nur ein oder zwei Aktionen verwenden
- Wann immer möglich, sollten einzelne oder wenige Aktionen direkt in der Oberfläche sichtbar gemacht werden
- Werden nur ein oder zwei Optionen unnötig hinter einem Menü versteckt, wird kaum Platz gespart, während Klickzahl und Auffindbarkeitskosten steigen
- Das gilt besonders dann, wenn es bereits bekannte Standard-Icons wie „x“, Papierkorb oder Melde-Flagge gibt und diese trotzdem noch unter Meatball- oder Kebab-Icons versteckt werden
- Im Beispiel von Weather.com verwandelt sich das Kebab-Icon nach dem Klick in einen schwarzen Button mit nur einer einzigen Aktion: Delete
- In diesem Fall würde eine direkte Anzeige von Delete nahezu gleich viel Platz beanspruchen, sodass es keinen guten Grund gibt, die Aktion zu verstecken
- Im Gegensatz dazu zeigt Pinterest beim Hover über einen Pin wichtige Aktionen wie Save (Button oben rechts) und Share (Icon unten rechts) direkt an
- Das ist ein positives Muster, weil Kernaktionen nicht hinter einem Kontextmenü verborgen werden, sondern bei Bedarf sofort verfügbar sind
9. Das Hamburger-Icon nicht als Trigger für Kontextmenüs verwenden
- Das Hamburger-Icon (☰) wird weithin als Symbol für globale bzw. Hauptnavigation verstanden
- Kebab- und Meatball-Icons (⋮·⋯) haben sich dagegen als Muster für kontextbezogene Aktionen entwickelt, die zu einem bestimmten Element oder Item gehören
- Empfohlen wird daher, das Hamburger-Icon nur für globale Navigation einer Website oder App zu verwenden und für Kontextaktionen Kebab- oder Meatball-Icons zu nutzen
- Zu vermeiden ist es, das Hamburger-Icon in Inhaltsnähe für Kontextaktionen zu verwenden oder umgekehrt Kebab- und Meatball-Icons mit globalen Aktionen wie Kontoeinstellungen oder websiteweiten Präferenzen zu belegen
- Eine solche Vermischung verwässert die Bedeutung beider Muster und stört das mentale Modell der Nutzer, was zu Zögern und Auslassungen führt
- Im Chat-Beispiel von Banana Republic erscheint nach Klick auf das Hamburger-Icon unten links im Chatfenster nur die einzelne kontextbezogene Aktion Save Transcript
- Das ist nicht nur ein Einsatz des Hamburger-Icons als Kontextmenü statt als globale Navigation, sondern verstößt zugleich gegen Richtlinie 8, weil nur eine einzige Aktion versteckt wird
10. Tastatur- und Screenreader-Barrierefreiheit unbedingt sicherstellen
- Kontextmenüs müssen auch von Menschen nutzbar sein, die keine Maus oder kein Touch verwenden, und brauchen deshalb eine Struktur, die sich auch per Tastatur und Screenreader öffnen und bedienen lässt
- Das Menü sollte sich mit Tab, Enter und den Pfeiltasten öffnen und durchlaufen lassen; auch die Einträge im Menü müssen vom Screenreader vorgelesen werden können sowie Fokuswechsel und Ausführung unterstützen
- Zu vermeiden sind Menüs, die nur per Klick oder Tap erreichbar sind, oder Custom Interactions, die etablierte Accessibility-Patterns brechen
- Ein barrierefrei priorisiertes Design bietet nicht nur Nutzern mit Behinderungen, sondern auch Power Usern mehr Effizienz und unterstützt zugleich die Einhaltung inklusiver Designstandards
Fazit
- Kontextmenüs sind ein starkes Werkzeug, um Oberflächen einfach zu halten und ergänzende Aktionen bei Bedarf bereitzustellen
- Besonders nützlich sind sie, um Layouts aufzuräumen und zusätzliche Optionen nur dann zu öffnen, wenn man sich auf eine Aufgabe konzentriert und sie tatsächlich braucht
- Wegen ihrer begrenzten Auffindbarkeit und Klarheit ist bei ihrem Einsatz jedoch immer Vorsicht geboten
- Sie sollten nur für echte sekundäre Aktionen verwendet werden, mit einem Design, das Position, Konsistenz, Information Scent und Barrierefreiheit gemeinsam berücksichtigt
- Die Kernbotschaft lautet, visuellen Minimalismus und tatsächliche Usability in Balance zu halten
- Kontextmenüs entfalten ihren größten Nutzen, wenn sie die Oberfläche ordnen, ohne den Kern-Flow zu verstecken
Noch keine Kommentare.