Verwendung
Ein Kontextmenü soll verwendet werden, wenn zusätzliche Optionen zur Verfügung stehen, der Platz jedoch so begrenzt ist, dass nicht alle enthaltenen Optionen gleichzeitig angezeigt werden können.
Um zu verhindern, dass eine Vielzahl gleicher Funktionen zur Bearbeitung von tabellarischen Daten das User Interface überfrachten bietet sich an, optionale Funktionen in initial geschlossenen Kontextmenüs zu platzieren, die nur bei Bedarf geöffnet und ausgelöst werden können.
Die Einträge in einem Menü müssen keinen Bezug zueinander haben, sondern können auch Funktionen ganz unterschiedlicher Art abbilden. Sie müssen aber immer einen unmittelbaren logischen und auch räumlichen bzw. strukturellen Bezug zu den Daten haben, die mittels ihrer Funktionen bearbeitet werden.
Icon-Buttons
Icon-Buttons zum Öffnen eines Menüs können je nach Kontext und dahinter liegenden Funktionen eine von zwei möglichen Darstellungen erhalten:
- Buttons mit einer horizontalen Ellipse [⋯] sind wie eine Textauslassung zu verstehen, die ein „mehr …“ andeuten. Sie werden eingesetzt, um verborgene Elemente einer begonnenen Auflistung sichtbar zu machen, zum Beispiel am Ende eines abhängig vom Breakpoint abgeschnittenen Menüs oder einer Toolbar. Häufig dient dieses Kontextmenü dazu, globale oder seitenspezifische Funktionen zugänglich zu machen.
- Buttons mit vertikaler Ellipse [ ⋮ ] hingegen symbolisieren eine verkürzte Aufzählungsliste für einen Satz mehrerer möglicher Elemente wie der Auflistung von kontextbezogenen Aktions-Buttons. Sie kommen vor allem in kleinteiligeren Objekten zum Einsatz, wie etwa am Ende der Zeile eines Datensatzes oder in einer Kachel. Sie haben immer einen unmittelbaren Bezug zum jeweiligen Objekt.
Platzierung des Menüs
Abhängig davon, wo das Kontextmenü in der Benutzeroberfläche angezeigt wird, erscheint das geöffnete Menü links oder rechts, oberhalb oder unterhalb, sodass es immer in Gänze sichtbar bleibt. Kontextmenüs öffnen auf der z-Achse immer über sämtlichen anderen Interface-Elementen und dürfen nie von anderen Inhalten oder Menüs überlagert werden.
Beschriftung der Optionen
Der Text der Optionen in einem Kontextmenü soll direkt und unmittelbar sein, damit Nutzende schnell eine Aktion erfassen und auswählen können. Aktionen, die eine Änderung von Daten mit erheblicher Tragweite bewirken könnten (Daten löschen, Konto löschen etc.) müssen als potenziell destruktive Aktionen gestaltet werden.
Icons in Menüs
In der Regel enthalten Kontextmenüs nur eindeutig und nachvollziehbar formulierte Text-Labels zur Verdeutlichung der Funktionen. Optional können diese auch mit Icons aus der Icon-Library versehen werden. Allerdings muss dann sichergestellt sein, dass sämtliche Funktionen über Icons verfügen; Mischformen aus Funktionen mit und ohne Icons in einem gemeinsamen Menü sind nicht erwünscht.
Interaction Design
Der rahmenlose Button des Kontextmenüs erhält bei Tastaturfokus zusätzlich zum Farbwechsel eine 2px breite abgesetzte Outline bzw. einen deutlichen visuellen Fokus-Indikator bei Swipe auf Touch-UIs. Mausklick, Eingabetaste Enter oder Leerschritt bzw. Tap öffnen das hinterlegte Menü.
Der Fokus bewegt sich per Tab-Taste bzw. Swipe auf Touch-UIs vom Button zum ersten Eintrag des nun geöffneten Menüs. Die Menüelemente sind auch mittels Pfeiltasten erreichbar und erhalten einen deutlichen visuellen Fokus-Indikator. Bei geöffnetem Menü wird dieses durch die Escape-Taste geschlossen, ohne dass eine Aktion ausgeführt wird.
Do’s and Dont’s
So:
- Kompakte Zusammenführung von Funktionen mit Anwendungscharakter
- Unmittelbare Zuordnung zu den Objekten, die bearbeitet werden sollen
So nicht:
- Verwendung als Navigationsmenü
- Kontextmenü mit nur einer enthaltenen Option
- Gemischt mit und ohne Icons
